4 подписчика

Разбор полёта

18 августа 201818 авг 2018

1 мин

В прошлой записи мы записали в простейший текстовый редактор шаблон для любой странички сайта, который основывался на языке гипертекстовой разметки 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 5
Разбор кода

В прошлой записи мы записали в простейший текстовый редактор шаблон для любой странички сайта, который основывался на языке гипертекстовой разметки HTML 5.

На помним вам его:

<!doctype html>

<html>

<head>

</head>

<body>

</header>

</section>

</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> - это подвал сайта. Этот тег обычный он должен обязательно закрыться.

Продолжение следует ...