Типовые ошибки HTML

Типовые ошибки будут рассмотрены на примере этого кода страницы:

< 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" >

< font< A> >

< big> < big> < em>

" Привет! "

< /big> < /big>

< /em> < /font>

< p> Это моя фотка в возросте 15 лет.

< ahref=" myfacebig.htm" > < img 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>

Избыточное форматирование в теге< 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>

Таблица цветов: