Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS 29


Самоучитель по HTML и CSS

Добрый день.

Вначале, как обычно, ответы на вопросы предыдущего выпуска.

1. Пространство имен.
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. Изменить кодировку документа.

3. Синтаксис XHTML

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

Правила XHTML следующие.

  1. Все теги и параметры должны быть набраны в нижнем регистре (строчными символами).
  2. Значения любых параметров необходимо заключать в кавычки.
  3. Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
  4. Должна соблюдаться правильная вложенность тегов.
  5. Нельзя использовать сокращенные атрибуты тегов.
  6. Вместо параметра name следует указывать атрибут id.
  7. Следует определять DTD (document type definition, описание типа документа) с помощью элемента <!DOCTYPE>.

Теги должны быть набраны в нижнем регистре

Это правило возникло из-за того, что XHTML чувствителен к регистру символов, поэтому для него теги <HR> и <hr> различаются. Чтобы не возникало путаницы, синтаксис принудительно заставляет указывать все теги, а также их параметры в нижнем регистре. В примере 3.1 приводится неверное использование тегов.

Пример 3.1. Ошибочное написание тегов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<BODY>
<P>Lorem ipsum dolor sit amet...</P>
</BODY>
</html>

В данном примере теги <body> и <p> набраны прописными символами, что является ошибкой. В примере 3.2 показан корректный код.

Пример 3.2. Правильное написание тегов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>

Замечание

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

Значения любых параметров необходимо заключать в кавычки

Хотя в HTML также требуется заключать аргументы в кавычки, но их отсутствие никак не влияет на корректность кода. Так что можно сказать, что в HTML применение кавычек это лишь рекомендация. В XHTML же использование кавычек возведено в правило и любые значения параметров требуется указывать только в них (пример 3.3).

Пример 3.3. Использование кавычек

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<table width="200" border="1" cellpadding="5" cellspacing="0">
<tr>
<th scope="col">Чебурашка</th>
<th scope="col">Шапокляк</th>
</tr>
<tr>
<td>1</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>13</td>
</tr>
</table>
</body>
</html>

В данном примере все параметры тега <TABLE>, а также <TH> задаются в кавычках.

Требуется закрывать все теги

В HTML теги делятся на две категории — парные теги, называемые еще контейнерами и одинарные теги. Парные теги состоят из открывающего и закрывающего тега, причем в некоторых случаях закрывающий тег можно опустить, поскольку браузер добавляет его автоматически. В XHTML закрывающий тег требуется всегда и везде. В примере 3.4 показан код с ошибкой, из-за того, что отсутствует тег </p>.

Пример 3.4. Нет закрывающего тега

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<p>и лезет, крадучись, в самолёт,
<p>и бомбу в брюхо ему кладёт,
<p>и прочь неслышно бежит, как кот;
<p>а дальше - не наше дело.
</body>
</html>

Обычно разработчики игнорируют закрывающие теги </li>, </p>, </td>, но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное использование списков.

Пример 3.5. Добавление списка

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<ul>
 <li>Восток</li>
 <li>Запад</li>
 <li>Юг</li>
 <li>Север</li>
</ul>
</body>
</html>

В данном примере каждому открывающему тегу соответствует его закрывающий тег.

Замечание

Элемент <!DOCTYPE> не является частью XHTML-документа, поэтому для него закрывающего тега не требуется.

Что касается одинарных тегов, то они должны завершаться слэшем перед закрывающей угловой скобкой, как показано в примере 3.6.

Пример 3.6. Добавление изображения

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
 <p><img src="test.gif" width="873" height="620" alt="тестовая картинка" /></p>
</body>
</html>

В данном примере обратите внимание на обязательный пробел, который предшествует конструкции />.

В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.

Табл 3.1. Сопоставление HTML и XHTML-тегов
HTML-тег XHTML-тег
<br> <br />
<hr> <hr />
<input> <input />
<img> <img />
<meta> <meta />

Должна соблюдаться правильная вложенность тегов

XHTML критично относится к ошибкам следующего типа: некорректная вложенность одного тега в другой и расположение тега в несоответствующем контейнере.

Правильная вложенность тегов

Каждый тег должен располагаться внутри другого тега, при этом недопустимо их «пересечение», как это показано в примере 3.7.

Пример 3.7. Ошибка с положением тегов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<p>Lorem <b><i>ipsum dolor sit</b></i> amet...</p>
</body>
</html>

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

Замечание

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

Иерархия тегов

Все теги имеют строгую иерархическую систему в том смысле, что каждый тег должен находиться внутри другого тега и никак иначе. На условной вершине находится корневой элемент <HTML>, а все остальные теги могут содержать внутри себя другие теги, которые называются дочерними. Соответственно дочерние теги располагаются в родительском элементе.

Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. В примере 3.8 показана базовая структура документа.

Пример 3.8. Структура документа

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Новый документ</title>
</head>
<body>
<p>...</p>
</body>
</html>

В данном примере вначале приводится тег <HTML>, внутри которого располагаются теги <HEAD> и <BODY>. Внутри раздела <HEAD> хранится заголовок документа (<TITLE>) и кодировка страницы (<META>).

Нельзя использовать сокращенные атрибуты тегов

Сокращенным атрибутом называется параметр без присвоенного значения. В примере 3.9 приведена форма с использованием таких атрибутов.

Пример 3.9. Ошибка при использовании параметров

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi" method="post">
<fieldset>
<input type="text" value="Совет дня" readonly />
</fieldset>
</form>
</body>
</html>

«Пустое значение», как еще называется подобная ошибка, легко исправляется, если присвоить параметру аргумент, совпадающий с названием атрибута. В табл. 3.2 приведены некоторые параметры и как они записываются в HTML и XHTML.

Табл 3.2. Сопоставление параметров в HTML и XHTML
HTML XHTML
checked checked="checked"
compact compact="compact"
disabled disabled="disabled"
ismap ismap="ismap"
multiple multiple="multiple"
nohref nohref="nohref"
noresize noresize="noresize"
noshade noshade="noshade"
nowrap nowrap="nowrap"
readonly readonly="readonly"
selected selected="selected"

В примере 3.10 показано корректное использование вышеприведенной формы.

Пример 3.10. Правильное использование параметров

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi" method="post">
<fieldset>
<input type="text" value="Совет дня" readonly="readonly" />
</fieldset>
</form>
</body>
</html>

Вместо параметра name необходимо указывать атрибут id

Параметр name определяется в HTML для тегов <A>, <FRAME>, <IFRAME>, <IMG> и <MAP> и предназначен для обозначения элемента с целью последующего к нему обращения. В XHTML параметр name вышел из употребления, а вместо него следует использовать id, как показано в примере 3.11.

Пример 3.11. Идентификатор рисунка

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML</title>
</head>
<body>
<p><img src="bgtop.gif" id="pic1" alt="Картинка" /></p>
</body>
</html>

Следует определять DTD

Все XHTML-документы обязательно должны содержать элемент <!DOCTYPE> в первой строке кода, а также придерживаться иерархической структуры вложения тегов.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное