Структура HTML-документа

Рубрикатор статьи

Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим освоение html-кода. В прошлый раз мы говорили о DOCTYPE, о его назначении и о том, какой из предложенных вариантов выбрать для себя. Теперь, я предлагаю пойти дальше и создать первый документ в формате html. Конечно, ничего особенного в этом документе не будет, но понять структуру html-документа мы сможем. Что собственно и является темой данной статьи.

Структура HTML-документа

Итак. Что нам понадобится для работы. Любой текстовый редактор, например NotePad. Ну, на крайний случай и блокнот подойдет. В принципе, больше ничего не потребуется для создания html-документа.

Самая примитивная структура очень проста и в нее входят только обязательные теги. Ниже мы можем видеть код документа. Что и является структурой html-документа. Данный код вы можете скопировать. Создать новый документ в текстовом редакторе и вставить этот код. Вообще, если планируете основательно изучать html и постоянно создавать новые html-страницы, рекомендую сохранить данную структуру и использовать, как каркас любого html-документа.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

1
2
3
4
5
6
7
8
9
<!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-документа.

У меня на этом все.

Удачи!

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 7.5/10 (4 голосов)
Автор: Михаил Веб Дата публикации: 07.05.2013