Зміст курсу
Основи HTML
Основи HTML
Структура HTML Документа
По-перше, ми досліджуємо структуру HTML-документа.
Структура HTML-документа
Кожен HTML-документ повинен дотримуватися послідовної структури. Елементи, описані тут, встановлюють основу для організації контенту, визначення структури сторінки та покращення користувацького досвіду в інтернеті.
тег html
Тег <html>
є кореневим елементом HTML-документа. Всі інші елементи будуть записані всередині нього. Відкриваючий тег <html>
позначає початок HTML-документа, а закриваючий </html>
позначає кінець.
Приклад:
тег head
Тег <head>
містить метаінформацію про HTML-документ, таку як заголовок, кодування символів та зовнішні ресурси, такі як стилі та скрипти. Він не містить контенту, безпосередньо видимого користувачеві на веб-сторінці.
Приклад:
Пояснення:
- Тег
<title>
визначає заголовок веб-сторінки. Він відображається в заголовку браузера або вкладці браузера. Заголовок сторінки дає короткий огляд її змісту, що полегшує користувачам розуміння призначення сторінки та навігацію через кілька вкладок більш ефективно; <meta charset="UTF-8">
відповідає за вказівку кодування символів, яке використовується в HTML-документі. Це кодування символів визначає, як веб-браузери інтерпретують та відображають текст;- Деякі загальні мета-теги включають:
<meta name="description" content="Короткий опис сторінки">
: Надає короткий опис змісту сторінки, який може з'явитися в результатах пошукових систем;<meta name="keywords" content="ключове слово1, ключове слово2, ...">
: Вказує ключові слова, що стосуються змісту сторінки, допомагаючи покращити оптимізацію для пошукових систем (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Визначає налаштування вікна перегляду для адаптивного дизайну, забезпечуючи правильне масштабування на різних пристроях.
тег body
Тег <body>
містить основний контент, видимий користувачам на веб-сторінці. Цей контент складається з тексту, зображень, посилань, форм та інших елементів, з якими користувачі можуть взаємодіяти під час відвідування веб-сайту. По суті, тег <body>
містить те, що користувачі бачать і з чим взаємодіють, коли переглядають веб-сайт.
Приклад:
Оголошення типу документа ()
Оголошення типу документа інформує веб-браузер про версію HTML, що використовується в документі. Це оголошення забезпечує правильне відображення документа веб-браузером, дотримуючись вказаного стандарту HTML. Для документів HTML5 оголошення типу документа виглядає як <!DOCTYPE html>
.
Приклад:
Результуюча структура
Щоб підсумувати, давайте зберемо всі елементи, які ми розглянули, і об'єднаємо їх в один HTML-документ.
Нижче ви можете побачити, як HTML-документ виглядає у веб-браузері.
Відео-урок
Дякуємо за ваш відгук!