В прошлой записи мы записали в простейший текстовый редактор шаблон для любой странички сайта, который основывался на языке гипертекстовой разметки HTML 5.
На помним вам его:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
Давайте разберёмся что означает все эти символы.
Синтаксис HTML 5
Первое правило: вначале каждой HTML - странице должна быть запись о версии кода, на котором написана даная HTML - страничка. В нашем случае вот она: <!doctype html>
Эта строка означает, что страница сайта написана на коде HTML 5.
Наверняка вы заметели в коде слова в скобочках (<head>, <body>, и т.п.) - это теги. Существуют обычные теги и одиночные.
Обычные теги должны сначала открыться, а потом закрыться:
<body>
Hello world!
</body>
А одиночные не закрываются:
Hello world!<br>
Так же если вы открыли один тег, а потом ещё один тег, то тег который вы открыли позже сначала нужно закрыть, а потом уже закрывать тег, который открыли раньше:
Неправильно:
<html>
<body>
Hello world!
</html>
</body>
Правильно:
<html>
<body>
Hello world!
</body>
</html>
Разбор кода
<!doctype html> - эта запись говорит браузеру на каком коде и какой его версии на писан сайт. В данном случае это HTML 5.
<html> ... </html> - этот тег начинает весь код сайта. Браузер видет его и понимает: "Так, сейчас пойдёт код, который надо считать и правильно отобразить." Этот тег обычный он должен обязательно закрыться.
<head> ... </head> - в переводе слово "head" означает "голова". Так и есть - это "голова" сайта. Здесь находиться вся системная информация про сайт: meta-данные, подключение в скриптам и каскадным стилям, подключение фавиконки и т.п (в дальнейше мы подробнее познакомимся с этими файлами). Эта часть сайта не видна пользователю. Этот тег обычный он должен обязательно закрыться.
<body> ... </body> - это тело сайта. Эта часть сайта видна пользователю. Здесь записан весь контент и шаблон сайта. Этот тег обычный он должен обязательно закрыться.
<header> ... </header> - это шапка сайта. Этот тег обычный он должен обязательно закрыться.
<section> ... </section> - это страница сайта. Этот тег обычный он должен обязательно закрыться.
<footer> ... </footer> - это подвал сайта. Этот тег обычный он должен обязательно закрыться.
Продолжение следует ...
