Використання HTML скелета
Скелет - це опорний каркас організму.
Зазвичай його виготовляють із чогось твердого, щоб захистити більш вразливе тіло.
Енциклопедія
Кожен веб-розробник повинен мати скелет HTML.
Його слід тримати в кишені та використовувати для будь-якої роботи:
Приклад
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Назва сторінки</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>Це заголовок</h1>
<p>Це параграф.</p>
<p>Це інший параграф.</p>
</div>
</body>
</html>
Натисніть кнопку «Спробуйте самі», щоб побачити, як це працює!
Спробуйте змінити текст "Це заголовок" на "Це моє весілля".
Чи вдалося?
Вітаємо! Тепер ви знаєте, як редагувати HTML.
Пояснення скелета HTML
Повинен бути присутнім DOCTYPE. Він повідомляє браузеру, що це документ HTML:
<!DOCTYPE html>
Початковий тег html і кінцевий тег html визначають початок і кінець документа HTML.
Мова українська (uk):
<html lang="uk">
</html>
Метатег charset визначає набір символів (UTF-8):
На сторінці HTML відсутні теги head. Теги head не потрібні в HTML.
У HTML все, що передує тегу body, вважається частиною head.
<meta charset="UTF-8">
Стандарт HTML вимагає правильного заголовка сторінки (title):
<title>Заголовок сторінки</title>
Метатег вікна перегляду (viewport) робить сторінку добре виглядаючою на екранах усіх розмірів (ноутбук, мобільні):
<meta name="viewport" content="width=device-width,initial-scale=1">
Тег link посилається на таблицю стилів:
<link rel="stylesheet" href="name">
Початковий та кінцевий теги оточують майбутні стилі CSS:
<style>
</style>
Тег script посилається на скрипт (на мові JavaScript):
<script src="name"></script>
Початковий та кінцевий теги оточують видиме тіло HTML-документа (body):
<body>
</body>
Теги зображень (img) визначають зображення HTML:
<img src="img_la.jpg" alt="LA" style="width:100%">
Візьміть за звичку "упаковувати" розділи HTML в елементи div.
Підготуйтеся дати кожному розділу назву класу:
<div class="class name">
</div>
Теги заголовків (h1-h6) визначають заголовки HTML:
<h1>Це заголовок</h1>
Теги параграфу (p) визначають параграф HTML:
<p>Це параграф.</p>
<p>Це інший параграф.</p>
