Трохи теорії
Базова структура документу
HTML-код складається із символів, які знаходяться всередині кутових дужок — це елементи HTML. Елементи зазвичай складаються з двох тегів — того,
що відкривається (<>) та того, що закривається (</>). Кожний елемент HTML повідомляє браузеру інформацію, яка знаходиться між його двома вищезазначеними тегами.
Таким чином, елементи HTML — це будівельні блоки веб-сторінки. Нижче показаний рекомендований мінімальний скелет документа HTML, який складається з базових елементів.
- <!DOCTYPE html> — це інструкція, яку потрібно вказувати на початку кожного HTML-документа. Вона повідомляє веб-браузеру, який тип документа він буде обробляти. У даному випадку це HTML5.
- Весь документ міститься в елементі html. Елемент html називається кореневим елементом, оскільки він містить усі елементи документа, і не може знаходитися в будь-якому іншому елементі.
- Елемент head в HTML використовується для збереження метаданих про веб-сторінку, які не відображаються безпосередньо на сторінці. Наприклад, це можуть бути заголовок сторінки, зовнішні файли стилів, скрипти, метатеги, що впливають на SEO тощо. Всі ці дані відображаються в браузері відвідувача у вигляді вкладки заголовка сторінки, а не на самій сторінці.
- Елемент meta використовується для надання додаткових метаданих про документ HTML, таких як його опис, автор, ключові слова та кодування сторінки. Ці дані не відображаються на веб-сторінці, але можуть бути корисними для пошукових систем та інших інструментів, що обробляють веб-сторінки.
- Текст, який з'являється в назві вікна браузера або на вкладці, коли відкрита ваша веб-сторінка, знаходиться в елементі title. Іншими словами, це заголовок веб-сторінки.
- Основною частиною веб-сторінки є елемент body. В ньому розташовується контент веб-сторінки: зображення, тексти, відео та інші елементи, які користувач побачить на сторінці.
Нарешті практика
протягом декількох уроків ви навчитесь створювати свій перший односторінковий сайт, який містить в собі основні елементи HTML. пропонується побудувати сайт вигаданого детективного агенства "Секрет"
Як ви можете побачити, в прикладі ідентичний код до того, який був розглянутий в блоці із теорією. Ми тільки додали заголовок веб-сторінки в елемент title та текстовий контент в елемент body. Даний код можна редагувати. Спробуйте внести певні зміни до вмісту елементу body. Внесені зміни будуть відразу відображатися в правому вікні екрану з прикладом — Result.
See the Pen
Untitled by first_code (@maryna_kriukova)
on CodePen.
Таким чином, ми розібралися, як побудована структура HTML документу.
