Приклад HTML-коду: основи веб-розробки

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

За лаштунками інтернету

Відкрийте ваш улюблений сайт в браузері Google Chrome. Цей браузер має саму зручну панель розробки, тому ідеально підходить для навчання.

Щоб швидко дістатися до панелі, натисніть гарячу клавішу F12 на клавіатурі. Якщо раптом з якихось причин це не спрацювало, знайдіть пункт в меню браузера і виберіть його, натиснувши “Додаткові інструменти” > “Інструменти розробника”.

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

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

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

Всі складові сторінки розташовані в ієрархічному порядку. Переглянути вкладені елементи можна за допомогою стрілочок.

На прикладі HTML-сторінка повністю обгорнута в блок з назвою HTML, всередині якого розташовані контейнери head і body. Якщо розгорнути їх, всередині можна виявити ще кілька рівнів елементів з різними назвами.

Все, що знаходиться усередині секції head, не візуалізується браузером. Виняток становить тільки блок title, який відображається у вкладці. У «голові» сайту розташовується службова інформація, необхідна інтернет-браузером для нормальної роботи.

Вміст секції body, навпаки, мабуть користувачеві. Консоль розробника навіть дозволяє побачити, де саме на сторінці розташований кожен конкретний блок. Для цього потрібно просто навести на нього курсор.

На скріншоті видно, як виділяється панель навігації:

Є ще елемент DOCTYPE , розташований на самому верху. Він теж належить до службових даних.