Primer lesson: мова гіпертекстової розмітки

Мова розмітки гіпертексту (HTML)

HTML означає мову розмітки гіпертексту. Це стандартна мова розмітки для документів, призначених для відображення у веб-браузері. HTML можуть допомогти такі технології, як каскадні таблиці стилів (CSS) і мови сценаріїв, такі як JavaScript.

Основа Мережі

За своєю суттю Інтернет – це велика мережа комп’ютерів, об’єднаних у всьому світі. Основним способом взаємодії з цією мережею є Всесвітня павутина (WWW), система взаємопов’язаних гіпертекстових документів, доступ до яких здійснюється через Інтернет. Серцем WWW є веб-сторінки, які є документами, написаними на HTML. HTML забезпечує базову структуру сайтів, яка потім вдосконалюється та змінюється за допомогою інших технологій, таких як CSS і JavaScript.

Структура документів HTML

Документ HTML структурований відповідно до набору вкладених тегів, які є елементами, укладеними в кутові дужки. Ці теги повідомляють веб-браузеру, як відображати вміст. Приклад простої структури документа HTML:

 <!DOCTYPE html>
<html>
    <голова>
        <title>Назва сторінки</title>
    </head>
    <тіло>
        <h1>Це заголовок</h1>
        <p>Це абзац.</p>
    </body>
</html>

Цей код визначає базову веб-сторінку із заголовком, заголовком і абзацом тексту.

Елементи та теги HTML

Документи HTML складаються з елементів HTML. Кожен елемент представлено початковим тегом, деяким вмістом і кінцевим тегом. Початковий і кінцевий теги елемента ідентичні, за винятком того, що кінцевий тег містить косу риску перед назвою елемента.

Наприклад, тег <code><p></code> охоплює абзац тексту та має таку структуру:

 <p>Це приклад абзацу.</p>

Різні елементи служать різним цілям. Наприклад:

Теги <code><h1>...</h1></code> до <code><h6>...</h6></code> використовуються для заголовків.
Тег <code><a></code> визначає гіперпосилання.
Тег <code><img></code> вставляє зображення в документ.

Атрибути

Елементи HTML можуть мати атрибути, які надають додаткову інформацію про елементи. Атрибути розміщуються в початковому тегу елемента й часто подаються в парах ім’я/значення, наприклад <code>name="value"</code>.

Наприклад, щоб вставити зображення, ми використовуємо тег <code><img></code> з атрибутом <code>src</code> (джерело), щоб вказати URL-адресу зображення:

 <img src="url to image.jpg" alt="Опис зображення">

Атрибут <code>alt</code> надає альтернативний текст для зображення, якщо його не можна відобразити.

Посилання та навігація

Використання тегу <code><a></code> створює гіперпосилання, які є основою для взаємопов’язаності Інтернету. Гіперпосилання може посилатися на іншу веб-сторінку, інший розділ на тій же сторінці або навіть файл, який можна завантажити. Наприклад:

 <a href="https://example.com">Відвідайте Example.com</a>

Це створює посилання на <code>https://example.com</code>.

списки

HTML надає елементи для створення списків. Існує два основних типи списків:

Невпорядковані списки (<code><ul></code>), де порядок елементів не є значущим. Елементи в невпорядкованому списку позначені маркерами.
Упорядковані списки (<code><ol></code>), де порядок елементів має значення. Елементи в упорядкованому списку пронумеровано.

Кожен елемент у списку вкладено в тег <code><li></code> (елемент списку).

HTML5

HTML5 — це остання еволюція стандарту, що містить багато нових функцій, які відображають сучасні потреби в мультимедійних та інтерактивних документах. До них входять нові структурні елементи (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>) , графічні елементи (<code><canvas></code> для малювання, <code><svg></code> для масштабованої векторної графіки) та медіа-елементи (<code><audio></code> і <code ><відео></код>).

Семантичний HTML

Семантичний HTML означає використання розмітки HTML для посилення семантики або значення інформації на веб-сторінках. Замість того, щоб просто визначати, як елементи виглядають або поводяться (це робота для CSS і JavaScript), семантичний HTML точно описує структуру та тип вмісту. Наприклад, тег <code><article></code> вказує, що вміст усередині є статтею, а тег <code><nav></code> означає навігаційне меню.

Використання семантичного HTML покращує доступність і можливість пошуку веб-вмісту, роблячи його більш зручним для використання та видимості.

Висновок

HTML є наріжною технологією Всесвітньої павутини, яка забезпечує базову структуру веб-сторінок. Завдяки використанню тегів, атрибутів і елементів HTML дозволяє створювати структуровані документи. Розуміючи та використовуючи HTML, можна створювати широкий спектр вмісту, доступного в Інтернеті, від простих текстових документів до складних інтерактивних мультимедійних програм. Майстерне володіння HTML є основою для веб-розробки для кожного, хто хоче проектувати чи розробляти для Інтернету.

мова гіпертекстової розмітки