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

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

Как уже было сказано ранее, HTML — это язык разметки гипертекста. То есть он определяет структуру документа. Давайте рассмотрим простейшую HTML-страничку и на ее примере разберем назначение основных структурных элементов языка HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html4Q/l'oose.dtd">

<Т1таЕ>Домашняя страница Оксаны</ТШЕ> <SCRIPT LANGUAGE="JavaScript"> function opn()

{ window.open('popup.html', '-w', 'toolbar="no",width=200,heighte*400')

}

</SCRIPT> <STYLE type="text/css">

P {color: #000}

BODY {background-color: #FFF) </STYLE> </HEAD>

<BODY>

<Н1>Домашняя страница Оксаны</Н1>

<IMG SRC="img/myphotol.jpg" WIDTH="300" HEIGHT="286" BORDER="0",

alt="moh фотография" ALIGN="left" HSPACE="15"> <Р>Это моя самая лучшая фотография, которую я люблю больше всего.

Вам, наверное, тоже понравится.</Р> <Р>Зовут меня Оксана. Мне <ЕМ>18 лет</ЕМ>. Я живу в городе Житомире,

но скоро перееду в Москву, потому что там мне больше нравится.

Вот только насобираю побольше денег. У меня есть любимая собака <В>Щарик</В>. Скоро я сделаю страничку в Интернете и для нее, чтобы вы смогли увидеть ее фотографию.</Р> , <Р>А пока все. Это был мой первый опыт в изготовлении странички.</Р>

</BODY> </HTML>

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

В глобальном плане HTML-код страницы можно разбить на три части:

D строка, которая содержит информацию о версии языка HTML;

D описательная секция head (в ней содержится служебная информация, которая не отображается в браузере, эта секция находится между тегами

<HEADX/HEAD>);

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

KBODYX/BODY>.

Давайте детально разберем всю нашу страничку, чтобы составить первое представление о структуре документа и о языке HTML в целом. Первая строка — это объявление версии и типа языка HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

По большому счету, до недавнего времени от этой строки ничего не зависело для конечного пользователя. Иными словами, эта строка никак не влияла на отображение HTML-страницы. Однако на данный момент есть три причины для включения версии и типа используемого языка HTML в страницу:

СЧ это требуется стандартом HTML 4.0;

П существуют программы (так называемые HTML-валидаторы), которые позволяют проверять корректность HTML-документа, они используют для анализа именно ту версию языка HTML, которую вы указали;

О с помощью инструкции <! doctype> в браузере Microsoft Explorer 6.0 включается полная поддержка стандарта CSS-1.

Надо сказать, что с выходом шестых версий браузеров возникла проблема, Новые браузеры лучше поддерживают рекомендации консорциума W3C, и появилась возможность писать корректный код, который будет корректно отображаться. Однако старые браузеры такой код могут отображать с ошибками. Для решения этой проблемы использовали DTD (Document Type Declaration), что можно перевести как объявление типа документа. Так как нас интересует только четвертая версия языка HTML, то для нее существуют следующие объявления типа документа.

О strict (строгое определение) включает все элементы и атрибуты, кроме "нежелательных" и не использующихся в документах с фреймами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

П Transitional (переходное определение) включает все, что включено в строгое определение, но, кроме того, и "нежелательные" элементы и атрибуты:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.6rg/TR/REC-html40/loose.dtd">

3 Frameset (определение для фреймов) включает все, что включено в пере-. ходное определение, но, кроме того, и фреймы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

URI в конце каждого объявления версии и типа языка указывает на файл, который содержит описание данного объявления. Браузер может загрузить этот файл и использовать его для корректного отображения документа.

3 <HTML>

Вторая и третья секции должны быть заключены в теги <htmlx/html>. Открывающий тег находится непосредственно перед тегом <head>, а закрывающий в самом конце страницы. Впрочем, и открывающий, и закрывающий теги не являются обязательными, но все же лучше их ставить.

3 <HEAD> ^

Этот тег начинает вторую секцию HTML-документа. В ней содержится информация, которая не отображается браузером (список ключевых слов для поисковых систем, описание документа, конструкции языка JavaScript, каскадные таблицы стилей). Тег также не является обязательным, однако лучще его ставить.

1 <TITLE>

Элемент <title> определяет заголовок страницы.

<Т1таЕ>Домашняя .страница Оксаны</Т1Т1^Е>

В браузерах заголовок страницы обычно выводится как заголовок окна. Этот элемент обязательный и очень важный, в частности, для поисковых систем. Обычно ключевые слова, заключенные в теги <titlex/title>, имеют большой вес, т. е. от них в значительной мере зависит, на каком месте в результатах поиска окажется данная страничка. Так что лучше делать название страницы подробным и максимально информативным. Например, в данном случае лучше было бы такое название для страницы:

<TITLE>OKcaHa Стройнова — профессиональная модель. Домашняя страница.</TITLE>

Далее в коде следует включение скрипта:

OCRIPT LANGUAGE="JavaScript"> function opn() {

window.open('popup.html','w','toolbar="nQ",width=200,height=400') } </SCRIPT>

Элемент <script> служит для включения скриптов в HTML-документ (наиболее часто используемым скриптовым языком является JavaScript, кроме него иногда используют VBScript). Скрипт можно включать и в раздел <head>, и в раздел <body>. В данном случае используется язык JavaScript, это задано в атрибуте language. Однако рекомендуется тип языка задавать через атрибут type. В нашем случае конструкция выглядела бы так:

Дело в том, что идентификаторы языка для атрибута language (типа JavaScript, JavaScript 1.3, VBScript) не являются стандартизированными. Поэтому атрибут language в спецификации языка HTML 4.01 помечен как "нежелательный".

Кстати, в нашем случае описана функция, которая при вызове открывает новое окно шириной в 200 и высотой 400 пикселов без панели управления. В это окно загружается файл popup.html, который должен лежать в том же каталоге на диске, что и страница, с которой вызывается функция.

D Далее в коде идет включение каскадной таблицы стилей:

Р .{color: #000).

BODY (background-color: #FFF) . , </STYLE>

Элемент <style> используется для включения таблиц стилей в HTML-документ. Вообще способов включения несколько (подробнее обсудим этот вопрос позже). Элемент <style> должен находиться в секции <head>. Атрибут type определяет язык таблиц стилей. Самым распространенным является CSS, но существуют и другие, которые, впрочем, практически не используются.

В данном случае используется именно CSS. В стилях задано, что все элементы <р> будут отображаться в браузере черным цветом, а фон страницы будет белым.

П </HEAD>

Этим тегом заканчивается второй блок.

О <BODY>

Этот тег обозначает начало тела документа, т. -е. третьего блока. Именно отсюда начинается та часть документа, которая будет выводиться браузе-ром. У элемента <body> есть несколько атрибутов, которые определяют цвет ссылок, цвет фона, но все они являются "нежелательными", т. к. все оформление можно реализовать с помощью CSS.

<Н1>

Это заголовок.

<Н1>Домашняя страница Оксаны</Н1>

Существует шесть уровней заголовков, которые отличаются цифрами. Самый верхний (самый важный) — <hi>. Он отображается шрифтом самого большого размера из всех заголовков. Самый нижний — <нб>. Он отображается шрифтом самого маленького размера из всех заголовков.

Далее по тексту идет вставка в документ фотографии Оксаны.

<IMG SRC="img/myphotol.jpg" WIDTH="300" HEIGHT="286" BORDER="0" АЬТ="Моя фотография" ALIGN="left" HSPACE="15">

Внедрение изображений в HTML-документ осуществляется с помощью тега <img>. Рассмотрим все его атрибуты. Атрибут src содержит путь к графическому файлу относительно текущего каталога сайта. В данном случае файл myphotol.jpg находится в каталоге img, тогда как сам документ находится на уровень выше графического файла.

Атрибуты width и height определяют ширину и высоту изображения. Они не являются обязательными и в некоторых случаях их можно опускать для сокращения размера кода. Однако при верстке с помощью таблиц лучше ставить ширину и высоту, потому что в таком случае браузер быстрее сможет отобразить таблицу. Дело в том, что браузер начинает отображать содержимое таблицы только в том случае, когда точно знает размеры всех ячеек. Если вы не указали размер изображения, то до тех пор, пока это изображение не загрузится, браузер не сможет узнать его размер, а, следовательно, и размер ячейки, в которую оно вставлено.

Атрибут border определяет ширину рамки вокруг рисунка. Он тоже не является обязательным и по умолчанию равен нулю. Однако если картинка представляет собой ссылку

<A HREF=" index. htnu"XIMG SRC”"img/inain.^pg" BORDER="0" ALT="Ha главную"х/А>

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

Атрибут alt задает краткое описание изображения. Оно нужно в тех случаях, когда у пользователя в браузере отключено отображение графики. Кроме того, при просмотре страницы с помощью некоторых браузеров оно появляется, когда пользователь наводит курсор мыши на изображение. Этот атрибут с недавних пор стал обязательным. Для осмысленных изображений (фотографий, рисунков, схем) надо составить описание, а

для графических элементов, которые входят в художественное оформление страницы (то есть являются элементами дизайна), надо оставлять его пустым (alt=""). Во-первых, поисковые машины при индексации страниц учитывают текст внутри атрибута alt. Во-вторых, посетители сайта, использующие текстовые или голосовые браузеры, смогут понять, что это за картинка.

Атрибут align для тега <img> определяет положение рисунка относительно окружающего текста. В данном случае ALiGN="left" говорит о том, что рисунок выровнен по левому краю, а текст обтекает его справа.

Атрибут hspace задает горизонтальный отступ. У нас он равен 15 пикселам.

<Р>Это моя самая лучшая фотография, которую я люблю больше всего. Вам, наверное, тоже понравится.</Р>

Элемент <р> соответствует абзацу. В тексте перед ним и после него Добавляется символ перевода строки.

</BODY>

Этот тег закрывает третью секцию. Он необязательный.

</HTML>

Этим тегом заканчивается HTML-страница. Он тоже не является обязательным.

Как видите, ничего сверхсложного пока не было. Сделать простейшую страничку можно после часа изучения HTML. Cо структурой мы разобрались, а теперь уделим внимание основным элементам и некоторым особенностям языка HTML. Эта глава не заменяет подробный учебник, так что для полного освоения вам, скорее всего, потребуется купить еще одну книгу. Но здесь содержится много полезного, что вы не всегда найдете в распространенных пособиях и документации. Даже если вы уже более-менее знакомы с HTML, не поленитесь прочитать эту главу, все-таки это не просто справочник по тегам, а взгляд на элементы языка профессионального веб-мастера. А начнем мы с текста.

В начало … Назад … Далее