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

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

Открываем блокнот и пишем первую строку документа:

<!DOCTYPE html public "-//W3C//DTD html 4.01 Transitional//EN">

В этой строке идет указание версии языка html на которой пишется html-документ. В данном случае версия 4.01.

Следующие - это два корневых тега <html> и </html> именно они указывают, что все, что лежит внутри этих тегов и является html-кодом. А что же такое тег? Это и есть ячейка (элемент) языка html из которых мы и делаем разметку всего документа. Тег всегда заключается в угловые скобки < и >. Теги бывают парные и непарные. В данном случае мы видим парный тег. <html> - открывающий, </html> - закрывающий тег. Непарный тег - это тег одинарный: только открывающий.

Вторым элементом структуры html-документа является парный тег <head> и </head>. Это голова документа которая содержит служебную информацию (название страницы, ее кодировку, различные мета-теги для поисковых систем и др.) Первый тег, который помещаем в голову документа тег <title>.

<title>заголовок документа (web-страницы)</title>

Следующий тег в голове документа - тег кодировки:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Это кодировка текста на русском языке. И еще мы видим пример непарного (одинарного) тега.

Не последнее место в структуре html-документа занимает служебный тег мета тег "Keywords":

<meta name="Keywords" content="Ключевые слова">

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

Далее в структуре html-документа идет служебный тег мета "Description":

<meta name="Description" content="Описание страницы">

Это так же тег для поисковиков. В него вписываем краткое описание вашей страницы (о чем ее содержание).

EndSeo.ru - влияние description на продвижение сайта в поисковых системах.

Из всех перечисленных тегов пользователь увидит только тег <title>, который отображается в самом верху браузера.

Основной же контент который будет видеть пользователь размещается между тегами <body> и </body>.

Body с английского - это тело, так-что все прописанное в этом теге есть тело html-документа в котором будет содержаться вся информация, которую увидит пользователь, зашедший на вашу web-страницу.

Давайте теперь просмотрим целиком структуру html-документа, которую мы записали в блокноте:

<!DOCTYPE html public "-//W3C//DTD html 4.01 Transitional//EN">

<html>

<head>

<title>заголовок документа (web-страницы)</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="Keywords" content="Ключевые слова">

<meta name="Description" content="Описание страницы">

</head>

<body>

 

</body>

</html>


Это и есть основная структура html-документа. Осталось наполнить страницу каким-нибудь содержимым, что бы посмотреть результаты работы. Этот каркас документа мы будем использовать во всех страницах, которые будем создавать, лишь будем менять название страницы, ключевые слова и описание страницы.

После того, как вы прописали в блокноте этот html-код, давайте сохраним этот файл в ту папку, которую мы создали для этой цели. Не забудьте при этом дать имя файлу (например: index) и сменить расширение txt на html, что бы операционная система знала, что это html-файл, а не обычный текстовый. Тип файла - все файлы.

Откроем созданный нами файл браузером. Как видим - страница пуста. Это потому, что тег <body> ни чем не наполнен. Так давайте же займемся наполнением нашей web-странички.

Добавим в тело нашей страницы два абзаца, применив при этом парный тег <p>. Там где абзац начинается ставим открывающий тег <p>, где абзац заканчивается ставим закрывающий тег </p>.

Пример:

<p>Первый абзац</p>

<p>Второй абзац</p>


Добавьте эти два абзаца (можно вставить свой текст) в html-файл и просмотрите в браузере результат.

Как открыть html-файл в браузере можно узнать в следующем уроке.