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 до зображення.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><video></code>).

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

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

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

Висновок

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

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