Мова HTML: що це таке і як вона працює
Розповідаємо, що таке HTML, для чого вона потрібна і чи варто називати її мовою програмування.
HTML (від англійської HyperText Markup Language) – це мова гіпертекстової розмітки тексту. Вона потрібна, щоб розміщувати на веб-сторінці елементи: текст, картинки, таблиці та відео.
Коли ви заходите на сайт, браузер довантажує HTML-файл з інформацією про структуру і контент веб-сторінки. HTML ніби вибудовує візуальний фундамент сайту, але не «запускає» сайт самостійно. Він лише вказує, де розташовуються елементи, який у них буде базовий дизайн, звідки брати стилі для елементів і скрипти (зазвичай їх пишуть на JavaScript).
Із чого складається HTML-код
HTML складається з тегів – команд, які вказують браузеру, як відображати поміщений у них текст. Це і є елементи веб-сторінки. У кожного тега є ім’я, яке укладається в кутові дужки < и >.
Наприклад, у тег <p> зазвичай поміщають текст:
<p>Привіт, світе!</p>
Теги бувають парні та непарні. Парні складаються з двох тегів – відкриваючого і закриваючого, а непарні – з одного. При цьому непарний тег теж можна закривати, але це необов’язково.
Наприклад, тег <img>, який дає змогу розмістити картинку на сайті, – непарний:
<img scr=’bird.jpg’ alt=’photo of bird’>
У кожного тега є атрибути. З їхньою допомогою можна передавати елементам веб-сторінки додаткові дані: розміри, унікальний id елемента, посилання на зображення тощо.
Елемент <img> містить у собі два основні атрибути – src і alt. Перший додає посилання на файл, а другий – підпис до картинки, який з’явиться, якщо файл не завантажиться:
Тег <p> – парний, він завжди має закриватися тегом </p>. Парні теги застосовуються для розмітки блоків – елементів, у які можна вкладати інші елементи (зокрема блоки). До них належать:
- контейнери (div);
- абзаци;
- заголовки;
- списки;
- таблиці.
Такий вигляд має код веб-сторінки з тегами <p> і <img>:
<p>
Який-небудь супровідний текст. Зазвичай у прикладах використовують
lorem ipsum, але ми пишемо все самі — хардкор!
</p>
<img src=’image.png’>
<p>А тут ще один абзац, щоб заповнити порожнечу.</p>
Тепер додамо ще один тег – <center>. Він центрує елементи на екрані. Потім покладемо в нього теги <p> і <img>:
<center>
<p>
Який-небудь супровідний текст. Зазвичай у прикладах використовують
lorem ipsum, але ми пишемо все самі — хардкор!
</p>
<img src=’image.png’>
<p>А тут іще один абзац, щоб заповнити порожнечу.</p>
</center>
Як HTML працює на сайтах
Давайте розберемо, як браузери відмальовують веб-сторінки за допомогою HTML-файлів.
Принцип роботи розмітки такий:
- Ви вводите в адресний рядок адресу сайту або сторінки.
- Браузер надсилає запит за цією адресою й отримує файл у форматі HTML.
- Код з отриманого файлу послідовно перетворюється на візуальні об’єкти.
При цьому кожен браузер керується своїми правилами відображення елементів. Раніше розробникам доводилося створювати окремі версії сайтів для Internet Explorer, Firefox, Opera та інших браузерів. Варто було тільки не врахувати якусь особливість браузера, і сайт падав на очах у розчарованих користувачів. На щастя, організація W3C розробила веб-стандарти – щоб сайти відображалися більш-менш однаково у всіх браузерах.
Але і від звичайних помилок ніхто не застрахований. Якщо розробник через неуважність не закриє тег або додасть вміст куди-небудь не туди, на сторінці вилізе щось несподіване. Припустимо, ми написали таблицю:
<table border=’1′>
<tr>
<th>№</th>
<th>Позиція</th>
<th>Ціна за одиницю (грн. )</th>
</tr>
<tr> <tr>
<td>1</td>
<td>Пучка синя</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>Олівець із гумкою</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>Рівничка (30 см)</td>
<td>30</td>
</tr>
<tr> <tr>
<td>4</td>
<td>Крепочка</td>
<td></td>250
</tr>
<tr>
<td>5</td>
<td>Дирокол</td>
<td>100</td>
</tr>
</table>
<table> – це таблиця, <tr> – це ряд, а <th> і <td> – комірки. Якби ми все зробили правильно, у браузері б відобразилася звичайна таблиця. Але зверніть увагу, що в четвертому ряду ціна краватки знаходиться не в комірці, а прямо в ряду.
Що можна і не можна зробити на HTML
HTML – це каркас сайту. За ним браузер відмальовує веб-сторінку, наводить «красу» за допомогою CSS і додає логіку через JavaScript. Наприклад, у HTML-файлі можна прописати:
- гіперпосилання;
- таблиці;
- зображення;
- блоки;
- абзаци;
- форми;
- заголовки.
Можна навіть задавати простий дизайн безпосередньо в HTML – наприклад, встановлювати колір і шрифт тексту або фоновий колір блоку. Однак професіонали не рекомендують так робити – краще вказувати стилі у файлі CSS. Там-то ваша фантазія нічим не буде обмежена: задавайте будь-які відступи, розміщуйте елементи нестандартними способами, грайтеся з прозорістю, тінями й анімацією.
Дії користувачів поки що обробляють переважно за допомогою JavaScript і його фреймворків. Але деякі функції поступово приходять у HTML. Наприклад, перетягування об’єктів, або Drag & Drop, раніше було доступне тільки в JavaScript.
HTML – мова програмування?
Ні. Мовами програмування пишуть… програми та веб-додатки 🙂 Для цього в них є умови, функції, змінні, оператори, класи та багато чого ще. У HTML же є тільки теги, які допомагають браузеру правильно відобразити вміст сайту.
У багатьох джерелах HTML все-таки називають мовою програмування. Не вірте! HTML – це всього лише формат тексту. По суті, HTML-файл нічим не відрізняється від «вордівського» файлу.
Скільки часу потрібно, щоб опанувати HTML
Основи, яких вистачить на створення примітивних сторінок, можна вивчити за годину. Тобто швидше, ніж було написано цю статтю. Але майстерність приходить із практикою. Мало просто створити каркас – потрібно переконатися, що він скрізь правильно відображається.
Фахівці, які можуть написати не кривий адаптивний сайт, цінуються у роботодавців. Але бути просто HTML-верстальником невигідно. Сьогодні це досить рідкісна і низькооплачувана професія. Краще відразу вивчати фронтенд- або бекенд-розробку, а HTML обов’язково знадобиться в процесі.
