Разбор кода

Разберем код простой XHTML-страницы без добавления стилей.

Строка 1-2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Здесь мы видим объявление DOCTYPE XHTML 1.0 Strict. Так мы указываем браузерам, что код страницы следует обрабатывать как полностью совместимый с XHTML.
Мы постоянно будем использовать именно этот DOCTYPE, что означает отказ от устаревшего HTML. Если вам требуется поддержка устаревших HTML-тегов, например фреймов, следует указать другой DOCTYPE.

Строка 3
<html xmlns="http://www.w3 .org/1999/xhtml" lang="en" xml:lang="en">
Здесь мы видим открывающийся тег html, для которого ранее указывать атрибуты не следовало. Теперь он содержит ссылку на пространство имен (набор объявлений и атрибутов XML) для данного документа.
Объявление DOCTYPE и пространства имен гарантируют, что браузер корректно обработает код вашей страницы.

Строка 4
Этот тег открывает заголовок документа. Заголовок страницы заключен между тегами head и /head и содержит информацию, невидимую для посетителя (за исключением названия страницы). Помимо необходимых тегов head мы также указали необязательные мета-теги (строки 5-9), содержащие различную служебную информацию (описание страницы, ключевые слова, имя автора), используемую поисковыми службами или другими программами индексирования.
Здесь также могут быть расположены теги стилей с правилами JavaScript или CSS, применяемыми исключительно для данной страницы.

Строка 5
<title>A Sample XHTML Document</title>
Технически добавлять строку с именем страницы необязательно, но, если вы не добавили ее, валидатор выдаст рекомендацию сделать это.

О тегах заголовков
Заголовки страниц, отображаемые в самом верху окна браузера, несут на себе большую нагрузку с точки зрения поисковых служб. Например, попробовав задать поиск на сайте Google, вы увидите, что первыми в списке результатов отображаются страницы, содержащие слова вашего запроса именно в заголовке. Поэтому имеет смысл задавать имена страниц, содержащие слова, которые могут быть заданы пользователями в виде ключевых при поиске содержимого ваших страниц. Не стоит тратить заголовок на что-то банальное и бессодержательное вроде «Добро пожаловать!».

Строки 6-7
<meta http-equiv= "Content-type" content="text/html; charset=iso-8859-1" />
<meta http-eguiv="Content-Language" content="en-us" />
Эти два обязательных мета-тега содержат информацию, необходимую серверу и браузеру для корректной обработки и отображения страницы.
По правилам XHTML необходимо всегда указывать информацию о кодировке. В данном случае это iso-8859-1 - кодировка Latin-1, используемая для текста на английском и некоторых других языках. Для кириллицы используйте windows-1251. Обратите внимание, что эти невмещающие теги закрыты с помощью косой черты и правой угловой скобки.
Второй тег указывает язык страницы, в данном случае это американский английский. Для русского следует указать ru-ru вместо en-us. Некоторые значения, например для китайского языка, отображают символы справа налево.

Строки 8-9
<link href="demo_styles.css" rel="stylesheet" type="text /css" />
</head>
С помощью link мы задаем ссылку на таблицу стилей CSS, представляющую собой отдельный файл, указанный с помощью href. С помощью link можно указать ссылку на один и тот же файл со стилями для всех страниц сайта, чтобы придать им всем одинаковый облик. Также можно указать ссылку на файл со стилями и с помощью тега @import. Не забудьте закрыть тег head.

Строка 10
<body>
Начинается тело документа, оно вмещает в себя все содержимое, отображаемое на странице.

Строка 11
<!—header->
Это комментарий. Он не отображается на экране пользователя, а просто поясняет код. Обратите внимание, что в XHTML требуется использовать два дефиса вместо любого их числа, допустимого в HTML.

Строка 12
<div id="logo"> <img src="images/stylin_logol.gif" width="150" height="80" alt="Stylin logo" /> С помощью div мы делим страницу на прямоугольные разделы, невидимые пользователю, если только мы не включим отображение их границ или применим к ним фоновый цвет. Тег div в нашем случае имеет атрибут id со значением "logo" - мы можем использовать это имя id для применения правил CSS к данному элемент, его выравнивания, указания размера, фонового цвета и т.п. Более того, div позволяет организовать все содержимое внутри него в виде группы и применять стили к каждому тегу, содержащемуся внутри. Тег изображения с логотипом (img) не является вмещающим элементом и поэтому закрыт с помощью косой черты и закрывающейся угловой скобки. Обратите внимание на тег alt, содержащий описание изображения, которое отображается, пока изображение не загрузится или если оно недоступно, а также если страница считывается с помощью программы считывания текста с экрана. Следует добавлять тег alt ко всем изображениям, указывая в них текстовый эквивалент рисунка. Если же изображение не несет смысловой нагрузки, просто укажите "". Обратите также внимание, что все значения атрибутов заключены в кавычки.

Имена классов и идентификаторов
Атрибуты класса (class) и идентификаторы (id) идентифицируют теги. Добавить их можно к любому тегу, но наиболее часто они применяются к блочным элементам. Идентификаторы и классы помогают привязать правила CSS к нужным элементам или набору элементов. Значением атрибута должно быть одно слово, хотя можно использовать и несколько слов, указанных через дефис или нижнее подчеркивание: class="navigation_links".
Так как браузер может неверно истолковать имена атрибутов из множества нескольких слов, советуем начинать их с буквы или слова, а не с цифры или символа. Так как единственным предназначением класса или идентификатора является назначение имени элемента, которое можно использовать прикрепления правил CSS или кода JavaScript, в качестве имени может использоваться любое слово. Поэтому желательно называть классы и идентификаторы осмысленно. Также не рекомендуется применять сокращения. Лучше укажите footer, а не fr, так как через неделю вы потратите немало времени, пытаясь вспомнить, что значит то или иное сокращение.

Строки.13-15
<h3>a Hew Riders book by Charles Wyke-Smith</h3>

Заголовок третьего уровня является блочным элементом и поэтому располагается на новой строке, или, точнее говоря, под предыдущим элементом. Теги br для перехода на новую строку не нужны. Не забудьте закрыть раздел заголовка страницы с помощью </div>.

Строки 16-20
<!-main content->
<div id="concentarea">
<h1>Moving to XHTML</h1>
<p>Creating XHTML compliant pages simply requires following a few simple roles. These rules may seem counter-intuitive or just a lot of extra work at first, but the benefits are significant and actually make coding sites much easier. Also, XHTML code can be easily validated online so you can be-sure your code is correctly written.</p>
<p>Here are the key requirements for successful validation of your XHTML code.</p>
Теперь с помощью div начинается область основного содержимого, являющаяся блочным элементом. Мы указали для нее заголовок первого уровня, затем идут два абзаца. Обратите внимание, что абзацы являются блочными элементами и по умолчанию окружены отступами со всех сторон.

Строки 21-31
<Ol>
<li>Declare a DOCTYPE</li>
<li>Declare an XML namespace</li>
<li>Declare your content type</li>
<li>Close every tag, enclosing or non-enclosing</li>
<li>All tags must be nested correctly</li>
<li>Inline tags can't contain block level tags</li>
<li>l,i.ite tags in lowercase</li>
<li>Attributes must have values and must be quoted</li>
<li>Use encoded equivalents for left brace and ampersand</li>
</ol>
Это нумерованный список, каждый его элемент располагается под своим номером. Ненумерованный список (ul) использует круглые маркеры для каждого пункта.

Строка 32
<а href="more.htm">more about these reguirements
Это гиперссылка, указывающая на страницу more.htm, расположенную в той же папке, что и наша страница.

Строки 33-34
</div>
<!-end main content->
Закрывающий div области основного содержимого и закрывающий необязательный комментарий.

Строки 35-37
<!—navigation->
<div id="navigation">
<p>Here are some useful links from the web site of the w3C (World Wide Web Consortium), the guiding body of the web's development.</p>
Считается разумным выделять сокращения из общего текста. Internet Explorer по умолчанию никак не выделяет акронимы, Safari отображает их курсивом. Если добавить к акрониму тег title, при наведении на него указателя мыши пользователь увидит всплывающую подсказку с текстом. Указать пользователю на возможность просмотреть расшифровку акронима можно, добавив к нему пунктирное подчеркивание. Точно так же можно использовать и тег abbr.

Строки 38-45
<li><a href="http://validator.w3.org">W3C's XHTML validator</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/">W3C's CSS validator</a></li>
<li><a href="http://www.w3.org/MarkUp/">XHTML Resources</a</li>
<li><a href="http://www.w3.org/Style/CSS/">CSS Resources</a</li>
<!—end navigation->
Эта секция навигации является, по сути, простым списком из гиперссылок. Они помещены внутрь блока div с идентификатором, позволяющим точно ссылаться на данный элемент при добавлении стилей. Обратите внимание, что здесь также не требуются теги перехода на новую строку, так как элементы списка по умолчанию являются блочными и располагаются на отдельных строках.

Строка 46-50
<!-footer->
<div id="homepagefooter">
<р>&сору; 2004</p>
<!-end footer->
Последним элементом страницы является div, содержащий текст нижнего колонтитула внутри тега абзаца.

Строки 51-53
</body>
</html>
<!-end sample doc->