Юний Frontend-розробник

Що таке HTML?
Основи мови розмітки
гіпертексту

2
 ЩО ТАКЕ HTML?
Це мова гіпертекстової розмітки. Він дозволяє користувачеві
створювати та структурувати розділи, параграфи, заголовки,
посилання та блоки для веб-сторінок та програм.

При роботі з HTML ми використовуємо прості структури коду

(теги та атрибути), щоб розмітити сторінку веб-сайту.
Наприклад, ми можемо створити абзац, помістивши текст у
вихідний тег <p> і закриваючий </p>.

<p>Ось так ви можете додавати абзац в HTML. </p>

<br><p> У вас може бути більше одного </p></br>

3
 ІСТОРІЯ HTML
HTML був винайдений Тімом Бернерсом-Лі, фізиком із дослідницького
інституту ЦЕРН у Швейцарії. Він вигадав ідею інтернет-гіпертекстової
системи.

Hypertext означає текст, який містить посилання на інші тексти, які

глядачі можуть отримати негайно. Він опублікував першу версію HTML у 1991
році, що складається з 18 тегів HTML. З того часу кожна нова версія HTML
з'явилася з розміткою нових тегів і атрибутів (модифікаторів тегів).

Згідно з Довідником HTML Element Reference від Mozilla Developer Network,

в даний час існує 140 тегів HTML, хоча деякі вже застаріли (не
підтримуються сучасними браузерами).

4
 ІСТОРІЯ HTML
Через швидке зростання популярності HTML тепер вважається офіційним
веб-стандартом. Специфікації HTML підтримуються та розробляються
консорціумом World Wide Web (W3C). Ви можете перевірити останній
стан мови будь-коли на веб-сайті W3C (англ).

Найбільшим оновленням мови стало впровадження HTML5 у 2014 році.

Було додано кілька нових семантичних тегів до розмітки, які
показують зміст їхнього власного контенту, наприклад <article>,
<header> та <footer>.

5
 ЕВОЛЮЦІЯ HTML.
ЩО ВІДРІЗНЯЄ HTML ТА HTML5?
Починаючи з перших днів HTML пройшов неймовірну еволюцію. World Wide Web Consortium постійно
публікує нові версії та оновлення, тоді як історичні віхи також отримують виділені імена.

HTML4 (в наші дні зазвичай званий HTML) був опублікований в 1999 році, а остання велика версія
вийшла в 2014 році. HTML5 — це оновлення, яке запровадило безліч нових функцій мови.

Однією з найбільш очікуваних особливостей HTML5 є підтримка вбудовування аудіо та відео. Замість
використання Flash-плеєра ми можемо просто вставляти відео та аудіофайли на наші веб-сторінки за
допомогою нових тегів <audio> </audio> та <video> </video>. Він також включає вбудовану підтримку
масштабованої векторної графіки (SVG) та MathML для математичних та наукових формул.

HTML5 також запровадив кілька семантичних вдосконалень. Нові семантичні теги інформують браузери
про значення контенту, що приносить користь як читачам, так і пошуковим системам.
Найбільш популярними семантичними тегами є <article> </article>, <section> </section>, <aside>
</aside>, <header> </header> та <footer> </footer>.

6
 ЯК ПРАЦЮЄ HTML?
HTML-документи - це файли, які закінчуються розширенням
.html. Ви можете переглядати його за допомогою будь-якого
веб-браузера (наприклад, Google Chrome, Safari або Mozilla
Firefox). Браузер читає HTML-файл і відображає його вміст,
щоб користувачі інтернету могли його переглядати.

Зазвичай середній веб-сайт містить кілька різних HTML-

сторінок (англ). Наприклад: домашні сторінки, звичайні
сторінки, сторінки контактів матимуть окремі HTML-документи.

7
 ЯК ПРАЦЮЄ HTML?
Кожна HTML-сторінка складається з набору тегів (також званих
елементами), які можна назвати будівельними блоками веб-
сторінок. Вони створюють ієрархію, яка структурує контент за
розділами, параграфами, заголовками та іншими блоками
контенту.

Більшість елементів HTML мають відкриття та закриття, в яких

використовується синтаксис <tag></tag>.

8
 ЯК ПРАЦЮЄ HTML?
Нижче ви можете побачити приклад коду, за допомогою якого можна
структурувати елементи HTML:
<div>
<h1> Основна рубрика </h1>
<h2> Яскравий підзаголовок </h2>
<p>Пункт 1</p>
<img src="/" alt="Зображення">
<p>Пункт другий з гіперпосиланням
<a href="https://example.com"></a>
</p>
</div>
Найголовніший елемент — це простий поділ (<div> </div>),
який можна використовувати для розмітки великих розділів
контенту.
Він містить заголовок (<h1> </h1>), підзаголовок (<h2> </h2>),
два абзаци (<p> </p>) та зображення (<img>).
Другий абзац містить посилання (<a> </a>) з атрибутом href,
який містить цільову URL-адресу.
Тег зображення також має два атрибути: src для шляху
зображення та alt для опису зображення.
9
 ОГЛЯД НАЙБІЛЬШ ВЖИВАНИХ HTML-ТЕГІВ
HTML-теги мають два основних типи: блок-рівень та вбудовані теги.

Елементи рівня блоку займають весь вільний

простір і завжди запускають новий рядок у
документі. Заголовки та параграфи – чудовий
приклад блокових тегів.

Вбудовані елементи займають стільки місця,

скільки їм потрібно і не запускають новий рядок
на сторінці. Вони зазвичай служать для
форматування внутрішнього вмісту елементів рівня
блоку. Посилання та підкреслені рядки – гарні
приклади вбудованих тегів.

10
 ТЕГИ БЛОКОВОГО РІВНЯ
Три теги рівня блоку, які кожен HTML-документ повинен містити:
<html>, <head> та <body>.
<html>
Тег <html> </html> — це елемент найвищого <head>
рівня, який охоплює кожну сторінку HTML.

Тег <head> </head> містить метаінформацію, таку </head>

як заголовок сторінки та кодування. <body>
Нарешті, тег <body> </body> містить весь вміст,

який відображається на сторінці. </body>

</html>

11
 ТЕГИ БЛОКОВОГО РІВНЯ
Заголовки мають 6 рівнів HTML. Вони варіюються від <h1> </h1> до <h6>
</h6>, де h1 - заголовок найвищого рівня, а h6 - найнижчий. Абзаци
додаються <p> </p>.

Розділи – це більші секції контенту, які зазвичай містять кілька

абзаців, зображень, іноді блок-записів та інших менших елементів. Ми
можемо помітити їх, використовуючи тег <div></div>. Елемент div може
містити ще один div тег всередині нього.

12
 ТЕГИ БЛОКОВОГО РІВНЯ
Ви також можете використовувати
теги <ol> </ol> для впорядкованих
списків і <ul> </ul> для
неупорядкованих. Окремі елементи
списку мають бути поміщені в тег
<li> </li>. Наприклад, ось як
виглядає основний невпорядкований
<ul>
<li>Елемент списку 1</li>
<li>Елемент списку 2</li>
<li>Елемент списку 3</li>
</ul>

список у HTML:

13
 ВБУДОВАНІ ТЕГИ
Для форматування тексту використовується багато вбудованих
тегів. Наприклад, тег <strong> </strong> візуалізує
виділений елемент жирним шрифтом, тоді як теги <em> </em>
відображають його курсивом.

Гіперпосилання також є вбудованими елементами, для яких

потрібні теги <a> </a> та атрибути href для вказівки
адресата посилання:

<a href="https://example.com/">Натисніть сюди!</a>

14
 ВБУДОВАНІ ТЕГИ
Зображення також є інтегрованими елементами. Ви можете
додати один за допомогою <img> без тега, що закриває. Але
вам також потрібно буде використовувати атрибут src для
вказівки шляху зображення, наприклад:

<img src="/images/example.jpg" alt="Приклад зображення">

15
 ПЛЮСИ ТА МІНУСИ HTML
Як і більшість речей, HTML має як сильні сторони, так і слабкі.
ПЛЮСИ:
Широко використовувана мова з великою кількістю ресурсів та величезною
спільнотою.
Виконується спочатку у кожному веб-браузері.
У відкритому доступі та абсолютно безкоштовний.
Чиста та послідовна розмітка.
Офіційні веб-стандарти підтримуються консорціумом World Wide Web (W3C).
Легко інтегрується з базовими мовами, такими як PHP та Node.js.

15
 ПЛЮСИ ТА МІНУСИ HTML
Як і більшість речей, HTML має як сильні сторони, так і слабкі.
МІНУСИ:
В основному використовується для статичних веб-сторінок. Для динамічної
функціональності вам може знадобитися використовувати JavaScript або бекенд-мову,
таку як PHP.
Це не дозволяє користувачеві реалізувати логіку. У результаті всі веб-сторінки
потрібно створювати окремо, навіть якщо вони використовують ті самі елементи,
наприклад. заголовки та колонтитули.
Деякі браузери приймають нові функції повільно.
Іноді поведінка браузера важко передбачити (наприклад, старі браузери не завжди
створюють нові теги).
15
 ЯК ПОВ'ЯЗАНІ HTML, CSS ТА JAVASCRIPT?
Хоча HTML є потужною мовою, недостатньо створити професійний веб-сайт. Ми
можемо використовувати його лише для додавання текстових елементів та
створення структури вмісту.

Однак HTML відмінно працює з двома іншими інтерфейсами: CSS (каскадні таблиці
стилів) та JavaScript. Разом вони можуть забезпечити багатий інтерфейс
користувача і реалізувати розширені функції.

CSS відповідає за стилі, такі як фон, кольори, макети, інтервал та анімація.

JavaScript дозволяє додавати динамічні функції, такі як повзунки, спливаючі
вікна та фотогалереї.
Подумайте про HTML як про людину, тоді CSS буде його одягом, а JavaScript -
рухами і манерами.

15
 ОТЖЕ… ЩО ТАКЕ HTML?
HTML є основною мовою розмітки в Інтернеті. Він запускається
спочатку у кожному браузері та підтримується консорціумом World
Wide Web.

Ви можете використовувати його для створення структури контенту

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

15
 ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ
Якщо коротко:

Сторінка складається із елементів.

Елемент - це набір з тегів та змісту.
Теги найчастіше йдуть парами: відкриває (<tag>) та закриває
(</tag>). Між ними є те, що потрапляє під дію цього
елемента.
Відкриваючий тег може містити додаткову інформацію –
атрибути та значення атрибутів. Атрибути дозволяють
"налаштувати" тег.

15
ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ

15
 ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ
У прикладі з попереднього уроку є елемент a (anchor — якір),
що складається з тегів, що відкриває і закриває <a></a>.

<a href="https://palace.kyiv.ua">КПДЮ</a>

Це посилання, і вона має атрибут href зі значенням

https://palace.kyiv.ua. Між тегами, що відкривають і
закривають, знаходиться зміст — слово «КПДЮ». Саме воно стає
засланням.

15
 ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ
А нижче є картинка. Це приклад одиночного тега, елемента, в якому
не потрібний тег, що закриває. Їх ще називають self-closing
element - «елементи, що закриваються самостійно».

<img src="https://i.imgur.com/789p0uP.png">

Як бачите, ми вказали атрибут src (від англійської "source" -

джерело) зі значенням https://i.imgur.com/789p0uP.png. Це адреса
файлу зображення.

15