Структура HTML кода. Урок 3

Обучение html

На прошлом уроке мы с вами познакомились с редактором кода, как он работает и научились создавать «html» файлы. Теперь давайте узнаем из чего состоит скелет html кода, разберем каждую находящуюся в ней строку. Как вы помните структура выглядит таким образом.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>   
</body>
</html>

При создании каждого html файла в обязательном порядке создается структура интернет страницы. Давайте разложим всю структуру по полочкам.

DOCTYPE html

В первой строке идет формулировка <!DOCTYPE html>, обозначает тип документа. Это сокращения английского языка.

DOC – Документ, Type – тип

Складываем слова по смыслу и в результате получаем логическое выражение – Тип документа html. То есть в самом начале, мы говорим браузеру, что это такое и как с этим работать.

Тег html

Вторая строчка парный тэг, сообщает что мы начинаем создавать сайт на гипертекстовой разметке. Забежим немного вперед и расскажем, что теги бывают парные и одиночные. У нашего тега имеется закрывающийся друг, близнец, который находится в самом низу, их отличие только в косой линии < / > которая символизирует закрытие. Подробнее про виды тегов мы будем говорить на следующем занятии. Сейчас структура. Заметили рядом с тегом стоит слово Lang = “en” — это атрибут тега, который рассказывает на каком языке контент сайта.

Тег head

Третья строка кода звучит в переводе — голова. В ней мы храним и создаем самую ценную информацию для браузеров. Пути к внешним файлам css, подключаем библиотеки скриптов, указываем кодировку сайта. Все вы это будете знать подробно и досконально, но позже. Сейчас просто возьмите во внимание, что в этом разделе подключается дополнительная информация.

Meta charset=”UTF-8″

Четвертая строка говорит о кодировке сайта. Это не параметр, который дает определение, а именно подсказывает. Например: вы обучились ремеслу FrontEnd на нашем блоге, и получили свой первый заказ на доделку какой-то странички действующего проекта, начали его верстать. И чтобы не совершать кучу движений для определения кодировки, вы можете посмотреть на этот «мета-тег».

ЮТФ-8

Мультибайтовая кодировка, содержит в себе большое количество данных и помогает правильно отобразить информацию. Живой пример: интернет портал webm.tech наполнен русифицированным контентом, наша кодировка UTF-8. И благодаря ей весь контент отображается правильно, без кракозябр и разных бяк.

На заметку, предыдущая кодировка называлась Windows 1251, однобайтовая. UTF – 8 пришла на смену.

<title>Document</title>

Пятая строка обозначает заголовок, который браузер показывает пользователю во вкладке. Посмотрите наглядный пример.

Структура HTML кода. Урок 3

Важная часть кода и составляющая львиную долю правильного продвижения, сейчас дадим немного SEO информации. Заголовок должен нести в себе не более 75 символов. Они же и отображаются в поисковой выдаче Яндекса и Гугла.

Структура HTML кода. Урок 3

</head> – закрывающий тег

Шестая строчка кода закрывает элемент head. Помните мы говорили, что теги бывают одиночные и парные. – открывающий тег – закрывающий тег, обратите внимание у него добавлен символ / Вместе они пара. Поэтому парный тег.

<body>

Седьмой пункт открывает тело документа, где мы творим все чудеса web индустрии. Пишем текста, вставляем картинки. Материал, который сейчас читаете, находится внутри <body> тут весь контент </body>

</body> и </html> закрыли документ

Восьмая и девятая – надеюсь вы уже догадываетесь, что они делают. Правильно, они закрывают тело, и документ.

Итог урока

Вы познакомились со структурой web документа, узнали, что присутствует абсолютно везде. Теперь понимаете, за что отвечает каждый элемент в структуре, где отображается контент, а где вносим важную информацию для браузеров. Не нужно каждый раз писать ее самостоятельно, с чистого листа. Не просто так на прошлом занятии установили плагин Emmet. Учитесь пользоваться горячими клавишами «!+tab». Экономьте свое рабочее время.

webm.tech