Я не пытаюсь в данной статье раскрывать смысл
использования каких-либо тегов и (или) комментировать спецификации HTML
3.2 - 4.0. Статья строится по принципу: ошибочный (не совместимый) код -
комментарий к коду. Неточности кода и его несовместимость рассмотрны
применительно к современным броузерам: NN4.05 и IE 4.01
Я достаточно долго размышлял над вопросом построения
этого раздела. Уж больно объемный материал. В итоге, Вам, уважаемый
читатель, предлогается вместе со мною препарировать серию страниц
"неизвестного Автора".
Порядок препарирования, - от простого к
сложному.
Комментарии ошибок в коде помечены красным цветом,
комментарии не совместимых тегов и расширений - зеленым. Нажав на строчку
ошибочного кода Вы переместитесь к закладке с комментарием.
Итак,
препарируем простейшую страницу без таблиц, фреймов и скриптов.
Код страницы:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=KOI8">
<title>Home Page</title>
</head>
<body
background=c:\..\..\images\buttonweb.gif
bgproperties="fixed"
topmargin="1" leftmargin="1">
<align=center><center>
<palign="center">
<fontface="Xenia">
<big><big><em>
"Привет
ПИПЛЫ!"
</big></big>
</em></font>
<p>Это моя фотка в возросте 15 лет.
<a><src="/fase.gif"
align="center">
<p>Мои линки.
<ul>
<li><b><font
face="AdverGothic">Крэки</font></b>
<li><b><font
face="AdverGothic">Тут лежит классный софт!</font></b>
<li><b><font face="AdverGothic">МП-3 -
рулезз!</font></b>
<li><b><font
face="AdverGothic">Примочки к
мастдаю!</font></b>
</ul>
</center></div>
</body>
</html>
Ошибки в атрибутах тега
<body>
На данной странице в качестве
бэкграунда бэкграунд должен использоваться внешний гиф. Ошибка в описании
пути. Путь к файлу описан относительно диска c:\ на локальной машине.
Такой бэкграунд не будет отображен у клиента. Правильный
код:
background="../../images/buttonweb.gif"
Не совместимые атрибуты.
Не совместимый код:
bgproperties="fixed" topmargin="1" leftmargin="1"
NN не понимает ракие
расширения, для совместимости кода необходимо дополнительно указать
MARGINWIDTH="1" MARGINHEIGHT="1"
Для корректного отображения
страницы в броузерах с отключенной графикой желательно также указывать
цвет бэкграунда,. bgcolor=""
Избыточное форматирование.
Особенность HTML редактора Front
Page. Достаточно использовать один из тегов, либо <div
align="center"> либо абсолютно идентичный ему <center>
Избыточное форматирование в теге
Данном случае текст уже отцентрирован
и нет необходимости добавлять атрибуты с этой целью. Имеет смысл только
использование Align="left(right)".
Тег <p> в этих строках не
закрыт (</p>), что приведет к неадекватному отображению интервалов
между параграфами в NN и IE. Хороший стиль требует закрывать тег
<p>
Использование Font Face.
Использование нестандартных шрифтов
на страницах приведет к тому, что страница будет или неудобочитаема, или
не читаема вовсе. Для совместимости с броузерами с других платформ
необходимо использовать вот такую конструкцию:
<font face="Arial,
Arial Cur, Helvetica">
Избыточное форматирование стиля
шрифта.
Конструкция <big><big>
избыточна. Предпочтительно использовать для выделения заголовков
<H2></H2>, или комбинацию <base font="2" > - сразу за
<body> и относительный размер шрифта <font
size="+3">.
Квотирование в тексте контента.
Использование кавычек в таком виде
("") в контенте не допустимо. Необходимо указывать &qwote; Привет
Пиплы! &qwote;.
Нарушение порядка
закрывания тегов
Теги должны закрываться с учетом
порядка их вложения. Правильная
конструкция
<font><b><em> … контент
…</em></b></font>
Отсутствие атрибутов в
теге
Для описания картинок на странице
необходимо использовать следующие атрибуты:
width="",
height=""
Если их не указать, то страница не будет загружаться до тех
пор, пока не загрузится до конца картинка.
border=""
Отсутствие
этого атрибута приведет к тому, что вокруг картинки, если "навесить" на
нее гиперссылку, появится окантовка с цветом гиперссылки
alt=""
Отсутствие данного атрибута
сделает информацию о картинке недоступной в браузерах с отключенной
графикой.
Правильный код описания картинки выглядит вот
так:
<img src="face.gif" width="454" height="341" alt="Это мое фото"
border="0">
Незакрытый анкер, и атрибуты
анкера.
Анкер подлежит обязательному
закрытию. Хороший стиль программирования подразумевает следующее
построение:
<a href="mybigfase.htm" target="_self">… контент ...
</a>
Примечание.
Указание тега <base target="">
позволит в дальнейшем не указывать в расширении анкера TARGET.
В
случае, если анкер закрыть с переводом строки, или не закрыть его вовсе то
NN отрендерит такой код с маленькой черточкой, что сильно заметно на
страницах со светлым фоном.
Форматирование списков.
При форматировании списков необходимо
закрывать тег <li>, форматирование текста в каждой строке списка
имеет смысл только в случае выделения строк. Правильный код.
<ul><font color=""
size="">
<li>… контент …</li>
<li>… контент
…</li>
<li>… контент
…</li>
</font></ul>
Препарирование закончено.
Домой
