Структура html документа

Школа Продающих Сайтов

Бесплатный видео курс - Простой сайт без знания HTML

A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Структура html документа (6 Урок)

Автор: MilovanovV
Категория: HTML сайты » Создать сайт в блокноте
27-08-2013, 15:24

Продолжаем курс «Как создать сайт в блокноте». В прошлом уроке, мы с Вами научились создавать html файлы. Мы отметили, что html файлы имеют определенную структуру.

Хочу Вам напомнить, что в самом начале курса «Как создать сайт в блокноте», мы договорились, что html страница, html файл и html документ, являются равноценными понятиями.

В этом уроке мы рассмотрим структуру html документа.

Какие бы файлы и документы, мы с Вами не использовали при работе на компьютере, все они имеют вполне определенную структуру. То же самое относится и к html документам и html файлам.

Что касается структуры html документа, то она определяется несколькими специальными, обязательными тегами, которые формируют основу, костяк любого html документа.

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

Итак, вот теги, формирующие структуру html документа:


<!DOCTYPEhtml PUBLIC "-//W3C//DTD html 4.1 Final//EN">
<html>
 <head>
 <title>Структура html документа</title>
<metahttp-equiv="Content-Type" content="text/html;charset=windows-1251">
 </head>
<body>
 
</body>
</html>

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

После указания типа документа, тегом <html>, объявляется начало html кода. Сразу отметим, что завершается html код тегом </html>, который устанавливается в конце html документа и указывает браузеру на окончание html документа.

Нам осталось рассмотреть два важных блока, формирующих структуру html документа.

Первый блок – это заголовок html документа:<head> </head>. Заголовок html документа содержит специальные элементы – мета теги, которые используют браузер и поисковые системы.

В частности, заголовок html документа содержит тег<title></title>, который передает информацию поисковым системам о содержимом текущего html документа или данной web страницы.

Содержимое тега title имеет большое значение при продвижении Ваших сайтов в поисковых системах Интернета. И еще, содержимое тега title при открытии html документа, выводится в верхнюю панель браузера.

Теперь, еще один пример, обратите внимание на строку:

Данной строкой браузеру передается, что настоящий html документ имеет русскую кодировку windows-1251.

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

Эта информация прописывается с помощью различных мета тегов и тега title. Содержимое заголовка не отображается на странице, но содержимое тега title, выводится в верхней части браузера.

Ну а теперь мы перейдем к блоку <body></body>.
Блок body содержит всю информацию, которая выводится в окно браузера. Как правило, содержимое веб страницы называют – контент (content).

То есть, всю информацию, которую мы с Вами хотим вывести на страницу, или другими словами все элементы, которые мы с Вами хотим разметить на странице, должны находиться между тегами <body></body>.

Итак, мы с Вами рассмотрели основные элементы структуры html документа.

Теперь откроем с помощью блокнота Notepad++ файл index.html, который мы создали в прошлом уроке. Добавим в него код структуры, расположенный в начале данной статьи. Сохраним файл index.html.

Следующим шагом, откроем файл index.html, с помощью браузера. Мы с Вами увидим, что страница пустая, хотя она и содержит обязательные html теги.

Мы теперь знаем, что страница пуста, так как в теле документа, между тегами <body></body> ничего нет.

Еще обратите внимание на верхнюю панель окна браузера, здесь Вы увидите содержимое тега title.

Мы с Вами сохранили структуру html документа в файле index.html, теперь мы можем данный файл использовать для создания любых web страниц.

Сохраните файл index.html в отдельную папку, данный файл Вам может еще не раз пригодиться.

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

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

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

Перейти к Уроку 7: html справочник

Перейти к Уроку 5: Как создать html файл

Автор:Виктор Милованов

Оставить комментарий