| Оговорки. Я не пытаюсь в данной статье раскрывать смысл использования каких-либо тегов и (или) комментировать спецификации 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"> <divalign=center><center>
<palign="center">
<fontface="Xenia">
<big><big><em>
"Привет ПИПЛЫ!"
</big></big>
</em></font> <p>Это моя фотка в возросте 15 лет.
<ahref="myfacebig.htm"><imgsrc="/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> Избыточное форматирование в теге<p> (Возвратиться к коду) Данном случае текст уже отцентрирован и нет необходимости добавлять атрибуты с этой целью. Имеет смысл только использование 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> Отсутствие атрибутов в теге<image> (Возвратиться к коду) Для описания картинок на странице необходимо использовать следующие атрибуты: 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> Препарирование закончено.
| 
Главная страница 
