Использование скелета HTML
Скелет – это несущий каркас организма.
Обычно его делают из чего-то твердого, чтобы защитить более уязвимое тело.
Энциклопедия
У каждого веб-разработчика должен быть скелет HTML.
Его следует держать в кармане и использовать для каждой работы:
Пример
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page 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>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
Нажмите на кнопку «Попробуйте сами», чтобы увидеть, как это работает!
Попробуйте изменить текст «Это заголовок» на «Это моя свадьба».
Ты сделал это?
Поздравляем! Теперь вы знаете, как редактировать HTML.
Объяснение скелета HTML
DOCTYPE должен присутствовать. Он сообщает браузеру, что это HTML-документ:
<!DOCTYPE html>
Начальный и конечный теги html определяют начало и конец HTML-документа.
Язык английский:
<html lang="en">
</html>
Тег meta charset определяет набор символов (UTF-8):
На странице HTML отсутствуют теги заголовка. Теги заголовка не нужны в HTML.
В HTML все, что находится перед тегом body, считается частью заголовка.
<meta charset="UTF-8">
Стандарт HTML требует правильного заголовка страницы:
<title>Page Title</title>
Мета-тег области просмотра позволяет странице хорошо выглядеть на всех размерах экрана (ноутбук, мобильный):
<meta name="viewport" content="width=device-width,initial-scale=1">
Тег link ссылается на таблицу стилей:
<link rel="stylesheet" href="name">
Начальный тег и конечный тег окружают будущие стили CSS:
<style>
</style>
Тег script ссылается на скрипт:
<script src="name"></script>
Начальный и конечный теги окружают видимое тело HTML-документа:
<body>
</body>
Теги изображений определяют HTML-изображения:
<img src="img_la.jpg" alt="LA" style="width:100%">
Сделайте привычкой «упаковывать» HTML-разделы в элементы div.
Приготовьтесь дать каждому разделу имя класса:
<div class="class name">
</div>
Теги заголовков определяют заголовки HTML:
<h1>This is a Heading</h1>
Теги абзаца определяют абзацы HTML:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>