Web-строителю

Сегодня

Партнерская программа RussianFeme.Com, платим до 1$ за клик!
Партнерская программа на WMlink.ru
Партнерская программа на Loveplanet.ru

WEB-СТРОИТЕЛЮ

FAQ - Наиболее часто задаваемые вопросы
Управление цветом
Как подобрать гармоничную комбинацию цветов для Web-сайта
Магические цифры безопасных цветов для Web
Ваш баннер
Коды символов
Типовые ошибки HTML
Основы сетевой рекламы
Как организовать обмен ссылками (reciprocal links)
Как получить посетителей на свой сайт
Десять заблуждений при раскрутке веб-страниц
Предоставление дополнительной информации о документе с помощью <META>
Справочник по тегам HTML в примерах
Учебник по HTML

ДИПЛОМ, КУРСОВЫЕ, КОНТРОЛЬНЫЕ НА ЗАКАЗ

*Цены*

*О компании*

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

Оговорки.

Я не пытаюсь в данной статье раскрывать смысл использования каких-либо тегов и (или) комментировать спецификации HTML 3.2 - 4.0. Статья строится по принципу: ошибочный (не совместимый) код - комментарий к коду. Неточности кода и его несовместимость рассмотрены применительно к современным броузерам: NN4.05 и IE 4.01

Типовые ошибки при создании страниц.

   Я достаточно долго размышлял над вопросом построения этого раздела. Уж больно объемный материал. В итоге, Вам, уважаемый читатель, предлагается вместе со мною препарировать серию страниц "неизвестного Автора".
   Порядок препарирования, - от простого к сложному.
   Комментарии ошибок в коде помечены красным цветом, комментарии не совместимых тегов и расширений - зеленым. Нажав на строчку ошибочного кода Вы переместитесь к закладке с комментарием.
   Итак, препарируем простейшую страницу без таблиц, фреймов и скриптов.

Код страницы:

<html>

<head>

</head>

<div align=center><center>


<big><big>
"Привет ПИПЛЫ!"
</big></big>

Это моя фотка в возросте 15 лет.
<a href="myfacebig.htm"><img src="/fase.gif" align="center">

Мои линки.
<ul>
<li>Крэки
<li>Тут лежит классный софт! <li>МП-3 - рулезз!
<li>Примочки к мастдаю!
</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)".
Тег в этих строках не закрыт (), что приведет к неадекватному отображению интервалов между параграфами в NN и IE. Хороший стиль требует закрывать тег

Использование Font Face.(Возвратиться к коду)

Использование нестандартных шрифтов на страницах приведет к тому, что страница будет или неудобочитаема, или не читаема вовсе. Для совместимости с браузерами с других платформ необходимо использовать вот такую конструкцию:

Избыточное форматирование стиля шрифта.(Возвратиться к коду)

Конструкция <big><big> избыточна. Предпочтительно использовать для выделения заголовков <H2></H2>, или комбинацию <base font="2" > - сразу за <body> и относительный размер шрифта .

Квотирование в тексте контента.(Возвратиться к коду)

Использование кавычек в таком виде ("") в контенте не допустимо. Необходимо указывать &qwote; Привет Пиплы! &qwote;.

Нарушение порядка закрывания тегов.(Возвратиться к коду)

Теги должны закрываться с учетом порядка их вложения. Правильная конструкция
 … контент …

Отсутствие атрибутов в теге<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>
<li>… контент …</li>
<li>… контент …</li>
<li>… контент …</li>
</ul>

----На один шаг назад----Web-строителю----

Хостинг от uCoz