В прошлой статье я рассказывал, как сделать первую страничку.
Теперь, давайте создадим структуру для нашего html - документа и попытаемся разобрать, что в ней находится и за что отвечает.
Изначально в Visual Studio Code установлен набор плагинов для текстовых редакторов под названием Emmet. Он преобразует простые аббревиатуры в полноценные блоки кода, тем самым, ускоряя написание кода, и делает нашу работу проще.
Вот наглядный пример:
Удалим строчку Hello World в созданном ранее файле index .html
Далее поставим восклицательный знак(!) и нажмем клавишу Enter.
Перед нами появится базовая структура html-документа.
Абсолютно любой HTML - документ начинается с декларации типа документа (доктайп), это нужно чтобы браузер мог определить версию HTML и правильно отобразить страницу. Что мы и видим на первой строке структуры доктайп (или тип документа) является HTML.
Далее простейшая HTML - страница состоит как минимум из трёх тегов.
Это:
<html>
<head>
<body>
HTML - тег – это специальный код, элемент или команда, позволяющая определить структуру и внешний вид документа при его отображении браузером.
Теги записываются в угловых скобках <имя тега> и бывают следующими:
· Парные — имеют открывающий и закрывающий тег, перед именем закрывающего тега ставят знак слеш (косая черта /). Пример: <h1> </h1> — заголовок,
· Одиночные — не имеют закрывающего тега. Пример: <img> — изображение,
· Блочные — в начале и конце автоматически ставится перенос строки, также они занимают всю ширину родительского элемента. Пример: <h1> </h1> — заголовок первого уровня,
· Строчные — не переносится строка. Например: <i> </i> — наклонный шрифт,
Новые HTML5 — это новые теги, в спецификации языка HTML5.
Верхнего уровня теги отвечают за создание HTML-документа:
· <html></html> — начало и конец;
· <head></head> — голова;
· <body></body> — тело HTML - документа.
Тег <html> - является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>. Как правило прописывается с атрибутом lang и указывает на язык.
В теге <head> обычно находятся теги отвечающие за описание страницы, за подключение внешних файлов и другие, они не видны пользователю. Единственный head тег, который видит пользователь, это тег <title>.
Тег <body> - предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
По вопросам сотрудничества, поддержки, предложений пишите на почту - kostylew212@gmail.com