HTML - без перебільшення, головна мова інтернету, яка народилася разом з ним. У сферу його відповідальності входить базове оформлення веб-сторінок, їх логічне структурування та форматування. За прикладами HTML далеко ходити не потрібно, достатньо просто відкрити браузер. Будь-який сайт - це і є шуканий HTML. Щоб дізнатися його ближче, заглянемо в консоль розробника.
За лаштунками інтернету
Відкрийте ваш улюблений сайт у браузері Google Chrome. Цей оглядач має найзручнішу панель розробки, тому ідеально підходить для навчання.
Щоб швидко дістатися до панелі, натисніть гарячу клавішу F12 на клавіатурі. Якщо з якихось причин це не спрацювало, знайдіть потрібний пункт у меню переглядача і виберіть його, натиснувши "Додаткові інструменти" > "Інструменти розробника".
Відкриється нова панель з кількома вкладками, з яких нам потрібна перша - Elements. Тут якраз і описаний весь HTML-код поточної сторінки.
Структура документа HTML
За допомогою панелі можна на живому прикладі розібратися, як влаштований сайт, побачити його складені частини. Важливо розуміти, що кінцевий вигляд забезпечується не тільки HTML-розміткою, а й стилями, описаними за допомогою CSS. У вкладці Elements можна ознайомитися тільки з базовою структурою.
Всі складові сторінки розташовані в ієрархічному порядку. Ви можете переглянути вкладені елементи за допомогою стрілочок.
На прикладі HTML-сторінка повністю обернута в блок з назвою HTML, всередині якого розташовані контейнери head і body. Якщо розгорнути їх, всередині можна виявити ще кілька рівнів елементів з різними назвами.
Все, що знаходиться всередині секції head, не візуалізується браузером. Виняток становить тільки блок title, який відображається у вкладці. У "голові" сайту розташовується службова інформація, необхідна інтернет-оглядачеві для нормальної роботи.
Вміст секції body, напроти, мабуть користувачеві. Консоль розробника навіть дозволяє побачити, де саме на сторінці розташований кожен конкретний блок. Для цього потрібно просто навести на нього курсор.
На скріншоті видно, як виділяється панель навігації:
Є ще елемент DOCTYPE, розташований на самому верху. Він теж належить до службових даних.
Теги та їхні атрибути
Абревіатура HTML буквально означає "мова гіпертекстової розмітки". Тобто будь-яка веб-сторінка - це просто текст, розмічений певним чином. Для його форматування використовуються спеціальні елементи - теги (дескриптори).
Щоб відрізнити тег від самого тексту, його укладають у кутові дужки. На прикладі HTML-коду можна побачити різні теги: html, head, body, header, div. Вони бувають двох видів:
- Теги, що закриваються, мають дві частини та укладений між ними текст. Закривається, наприклад, дескриптор header. Друга частина відрізняється від першої наявності прямого шару перед назвою тега.
- Незакриваються теги без контенту складаються лише з однієї частини. Прикладом може служити тег meta.
Зверніть увагу, що HTML-дескриптори можуть вільно вкладатися один в одного. Виняток становлять незакривні теги, які не мають змісту, отже, в них нічого не можна вкласти.
Важливо дотримуватися порядку закриття. У консолі видно, як акуратно розташовані вкладені дескриптори. Зовнішній елемент не може закритися раніше внутрішнього.
Будь-який тег може мати ряд параметрів (атрибутів), що визначають його властивості. У HTML прикладом служить дескриптор гіперпосилання a і його атрибут href, що містить адресу сторінки, на яку буде здійснено перехід при натисканні посилання.
Наочне вивчення HTML
Для початківців верстальників, веб-розробників і просто людей, які цікавляться основами інтернет-технологій, вивчення HTML - найперший крок довгого цікавого шляху. Існують сотні курсів і підручників, що викладають інформацію в самому різному вигляді. Вибрати серед них відповідний не складе труднощів.
Але як би хороший не був підручник, для успіху потрібні ще дві складові:
- самостійний досвід верстки;
- вивчення чужих HTML-прикладів.
Консоль розробника в популярних браузерах (крім Google Chrome, хороші панелі можна знайти в Mozilla Firefox і Internet Explorer) - найкращий спосіб вивчати веб-сторінки. Він дозволяє освоїти основні патерни верстки, навчитися бачити кінцеве уявлення коду і навіть динамічно вносити в нього зміни.