Структура HTML-страницы
При проверке домашних заданий я пришел к выводу, что большинство наших юных студентов совершают одни и те же ошибки.
- Первая, самая популярная ошибка - не создается сразу правильная структура документа. Но это ведь так несложно, прописали структуру (она одна и та же для всех проектов) и просто пишем код, занимаемся творчеством.
- Нет четкого понимания, что если задана структура, то код сайта пишем в одном месте и больше нигде - между тегами <body> и </body>. Т.е. между открывающим и закрывающим тегом body. Эти теги в структуре документа создаются один раз и больше нигде не дублируются. Ни до открывающего тега body ни после закрывающего тега body код сайта не пишется, там вообще не может быть ничего и не должно быть. То же самое касается открывающего тега <html> и закрывающего тега </html>.
Исходя из этого, мной придумана простая инфографика, которая простым, наглядным образом показывает как должна быть устроена простейшая HTML-страница. Рассмотрим грузовичок, который мы поставили вертикально. Его устройство как нельзя лучше показывает расположение элементов структуры страницы.
Пояснения к инфографике с грузовичком
- При создании HTML-страницы представьте, что вы создаете вертикальный грузовичок. В первую очередь вы новой машине вешаете номерной знак, единственный (передний). Т.е. пишем один раз тег <!DOCTYPE html>. Повесили и забыли! Начало положено.
- У грузовика есть передний бампер и задний бампер. Создадим их, а потом между ними все остальное. Передний бампер - открывающий тег <html>, задний бампер - закрывающий тег </html>. Все, больше бамперов в нашем документе не будет и быть не должно! В переднем бампере мы можем еще разместить фары, которые дадут понять любому браузеру, на каком языке наш сайт - <html lang="ru">. В данном случае мы указали что на русском языке.
- Между передним и задним бамперами мы начинаем строить мотор с кабиной - открываем тег <head> и закрываем тег </head>. Все, кабина с мотором построены. И это делается один раз на весь документ (страницу)! Внутри кабины (между тегами head) мы размещаем всю необходимую информацию для браузеров по нашему сайту, но не сам код сайта. Что мы размещаем в кабину:
- тег title для отображения названия сайта;
- метатеги с различной информацией для браузеров - кодировку сайта (utf-8, к примеру, чтобы мы могли использовать даже китайские иероглифы внутри сайта);
- подключение своего файла стиля (css), чтобы украшать нашу страницу (сайт);
- подключения шрифтов, которые будем использовать на сайте (в дизайне сайта);
- подключения различных вспомогательных скриптов и служебной информации: - И вот уже после кабины мы формируем кузов грузовичка посредством открывающего тега <body> и закрывающего тега </body>, между которыми мы и пишем весь код нашего сайта. Складываем все только в кузов! Данный тег открывается и закрывается в документе только один раз! Задний бампер </html> у нас остается в самом низу, после кузова, и ниже него у нас ничего не должно быть, сколько бы мы всего не погрузили в сам кузов.
Как итог, мы получаем следующую структуру страницы
Которую при любом занятии, ДЗ мы создаем за считанные секунды и занимаемся делом, а не по 40 минут задаем вопросы, как начать, куда писать сайт.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Заголовок страницы для браузера</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--подключаем свой стиль CSS-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--здесь пишем HTML-код страницы-->
</body>
</html>А что грузим в кузов грузовичка?
Далее возникает вопрос о самом коде страницы. Что "положить в кузов грузовичка" между тегами <body> и </body>? В этом вопросе в виде инфографики помогут разобраться старшие студенты.