Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим освоение html-кода. В прошлый раз мы говорили о DOCTYPE, о его назначении и о том, какой из предложенных вариантов выбрать для себя. Теперь, я предлагаю пойти дальше и создать первый документ в формате html. Конечно, ничего особенного в этом документе не будет, но понять структуру html-документа мы сможем. Что собственно и является темой данной статьи.
Итак. Что нам понадобится для работы. Любой текстовый редактор, например NotePad. Ну, на крайний случай и блокнот подойдет. В принципе, больше ничего не потребуется для создания html-документа.
Самая примитивная структура очень проста и в нее входят только обязательные теги. Ниже мы можем видеть код документа. Что и является структурой html-документа. Данный код вы можете скопировать. Создать новый документ в текстовом редакторе и вставить этот код. Вообще, если планируете основательно изучать html и постоянно создавать новые html-страницы, рекомендую сохранить данную структуру и использовать, как каркас любого html-документа.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Содержимое документа
</BODY>
</HTML>
После вставки кода в документ, его необходимо сохранить в формате html. При использовании NotePad++ достаточно просто выбрать формат документа при его сохранении. Если же мы используем обычный блокнот, то необходимо выбрать «Сохранить как», и после названия добавить .html. После чего документ будет сохранен в нужном формате.
И сразу хотелось бы обратить внимание на то, что теги можно писать, как верхнем, так и в нижнем регистре.
Теперь немного подробней о данном коде. Первая строка,как мы помним, обозначает тип документа. Подробнее об это в статье, о DOCTYPE.
Вторая и последняя строка обозначают начало и конец html-документа. Тег html является обязательным тегом для любого документа подобного формата. И имеет открывающий тег и закрывающий, со слешем.
Затем идут две обязательные составляющие любого html-документа. Это теги head и body. Они также имеют, как открывающий тег, так и закрывающий. Между тегами head располагается часть данных, которая не выводится на страницу, а выполняет «техническую» функцию. Например, между данными тегами подключаются различные скрипты и файлы. Кроме того, между тегами head назначается заголовок документа, как в нашем примере, он же тайтл (title). Он также не виден на странице. Но все же title необходим. Та как заголовок используют поисковые системы при составлении сниппета в результатах выдачи поисковых систем. А также заголовок можно увидеть во вкладках браузера.
А тег body отвечает как раз за все видимое содержимое, которое сможем увидеть мы и наши пользователи. Именно между тегами body и расположен код,с помощью которого на сайте выводятся контент, ссылки, картинки и многое другое. Если мы откроем документ в веб-браузере, мы увидим текст «Содержимое документа». И больше ничего. Только то, что находится между тегами body.
Вот такой не сложный и не громоздкий код содержит всю структуру html-документа.
У меня на этом все.
Удачи!
