В этом разделе мы постараемся рассмотреть некоторые отступления которые
может себе позволить автор HTML от "правильного" стиля написания кода.
Если внимательно прочитать спецификацию HTML 4.0 то можно обратить
внимание что под категорию нежелательных, устаревших и необязательныз
элементов попали казалось бы неотъемлемые части любого HTML файла. Так, к
категории нежелательных элементов относятся:
APPLET, BASEFONT, CENTER,
DIR, FONT, ISINDEX, MENU, S, STRIKE и U.
Нежелательными атрибутами
являются все которые описывают представление элемента. Вместо них
рекомендованно пользоваться CSS.
Необязательными являются:
<HTML>, </HTML>, <HEAD>, </HEAD>, <BODY>, </BODY>,
</TR>, </TD> и еще ряд других.
Таким образом, если брать за основу офицальные рекомендации W3C
разработчикам, то код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<META http-equiv=content-type content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin=0 topmargin=0>
<table>
<tr>
<td align=right class=red>Красная ячейка</td>
<td align=center class=yell>Желтая ячейка</td>
<td class=blue>Cиняя ячейка</td>
</tr>
<tr>
<td align=right class=blue>Cиняя ячейка</td>
<td align=center class=red>Красная ячейка</td>
<td class=yell>Желтая ячейка</td>
</tr>
<tr>
<td align=right class=yell>Желтая ячейка</td>
<td align=center class=blue>Синяя ячейка</td>
<td class=red>Красная ячейка</td>
</tr>
</table>
</body>
</html>
вполне можно представить так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<META http-equiv=content-type content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
<table>
<tr>
<td align=right class=red>Красная ячейка
<td align=center class=yell>Желтая ячейка
<td class=blue>Cиняя ячейка
<tr>
<td align=right class=blue>Cиняя ячейка
<td align=center class=red>Красная ячейка
<td class=yell>Желтая ячейка
<tr>
<td align=right class=yell>Желтая ячейка
<td align=center class=blue>Синяя ячейка
<td class=red>Красная ячейка
</table>
Но не стоит обольщаться. Даже среди выбранных нами за основу броузеров
правильно подобный код отобразит только Opera 5.12. И NN и MSIE
"споткнуться" и выведут полную чушь. Причиной этому станет отсутствие
закрывающих тегов </TD>. Кроме того NN при отсутствии тега <BODY>
отображает фон всех элементов, которым он не прописан отдельно, цветом
стоящим по умолчанию в настройках броузера. Как правило это белый. К тому
же подавляющее большинство програмистов при написании кода внутри атрибута
BODY размещают атрибуты 'marginwidth=0 marginheight=0 leftmargin=0
topmargin=0'. Так как 'marginwidth' и 'marginheight' не имеют аналогов в
текущей спецификации CSS но необходимы для правильного отображения
документа в NN то возможности обоцтись без этого элемента нет.
Окончательным парадоксом является то что для достижения того же эффекта в
Opera атрибуты marginwidth, marginheight, leftmargin и topmargin вообще не
нужны. По какой-то неизвестной причине в Opera работает только атрибут
PADDING который нужно прописывать или внутри STYLE или во вншнем CSS
файле. Никакому разумному обьястнению эта специфика не поддается но
разработчикам приходится вставлять все атрибуты для того чтобы они
дублировали одни и те же параметры для всех броузеров. Закрывающий BODY
можно не ставить. Что же касается остальных необязательных элементов то и
без них все будет выглядеть замечательно. Правильно этот код отобразит и
Lynx. Однако при использовании внешнего навигационного .js файла
пользователь Lynx не будет иметь возможности передвижения по сайту. Для
решения этой проблемы существуют элементы <link>
Поместив внутри заголовка страницы запись вида:
<link rel="значение_атрибута" href="локальный_адрес"> вы позволите
пользователю Lynx передвигаться по вашему сайту альтернативным образом.
Графические броузеры этот элемент не выводят. Значениями атрибута
rel могут быть:
"top" - вершина, первый файл некоторого набора документов.
"contents" - указывает на файл, где приводится оглавление к данному
документу.
"index" - файл для индексного поиска по этому документу
"glossary" - файл где можно найти значения терминов применяющихся в этом
документе
"copyright" - файл где указанны авторские права разработчика
"next" - следующая страничка на которую вы хотите отправить посетителя
"previous" - предыдущая страничка
"search" - поисковая страничка
Пользуясь этими значениями можно составить полноценный маршрут по которому
посетитель сможет исследовать ваш сайт.
Вообще, проблеме совместимости кода для всех броузеров посвященно много
литературы. Мы не будем останавливаться на ней подробно, поскольку в для
этого пришлось бы писать отдельную книгу, но необходимо указать следующий
момент. Скрипты которые вы хотите использовать на сайте, должны работать в
обоих броузерах (NN и MSIE) обязательно. Если у вас есть скрипт который
очень вам нравится но работает только в MSIE (как бывает довольно часто)
то все-таки лучше отказаться от его использования. Альтернативой может
быть поиск скрипта дающего тот же эффект но работающего везде или
написание подобного скрипта самому, однако это уместно при условии что NN
поддерживает этот эффект в принципе
Еще одной проблемой которую часто приходится решать при написании кода,
является форматирование таблиц. Если сайт пишется под разрешение 800Х600
то все в порядке. Но если надо сделать так чтобы он занимал все
пространство экрана при любом разрешении больше 800Х600? Как правило это
решается следующим образом: на страничке созрается некая таблица, один из
столбцов которой прописывается шириной 100%, а все остальные пишутся в
пикселях. В результате этот столбец или ячейка стремиться занять все
свободное место и при увеличении разрешения экрана растягивается. Однако
тут возникает еще одна проблема. Заключается она в том что эта самая
"резиновая" ячейка должна не только растягиваться но и сжиматься, и
сжиматься она должна не бесконечно, а до определенных размеров. Лучше
всего это продемонстрировать на примере:
Пример:
<table width="100%">
<tr>
<td width="100px">Ячейка А</td>
<td width="100%">Ячейка В</td>
<td width="300px">Ячейка С</td>
</tr>
</table
В данном примере таблица шириной 100% содержит 3 ячейки центральная из
которых имеет ширину 100%, то есть занимает все свободное место. Однако
если данный пример вставить в код и просмотреть в броузере то вы увидите
что на самом деле ячейки А и С приблизительно равны по ширине. Это
произошло потому что текст который они содержат занимает гораздо меньшее
расстояние чем те размеры которые даны этим ячейкам и ячейка В оставляет
им ровно столько места сколько нужно под текст. Чтобы этого не происходило
многие дизайнеры вставляют внутрь ячеек прозрачный GIF Как правило он
называется spacer.gif или что-то в этом роде. Происходит это так:
<table width="100%">
<tr>
<td width="100px">
<img src="spacer.gif" height="1" width="100">Ячейка А</td>
<td width="100%">Ячейка В</td>
<td width="300px">
<img src="spacer.gif" height="1" width="300">Ячейка С</td>
</tr>
</table
Теперь невидимый для посетителя GIF будет служить той "распоркой" которая
не даст ячейкам А и С стать меньше своих размеров. Как правило такой же
GIF вставляется и в центральную ячейку чтобы при разрешении экрана меньше
800Х600 она не становилась меньше и в окне броузера появлялся
горизонтальный скроллер. В этом случае размеры GIF'a рассчитывааются таким
образом чтобы сумма ширины всех ячеек по в одном ряду не превышала 770
пикселей. В нашем случае это будет: 770-(100+300)= 370 Теперь вставив
элемент: <img src="spacer.gif" height="1" width="370"> в центральную
ячейку мы получим вполне приемлимую, на первый взгляд конструкцию. Но
таковой она будет являться до тех пор пока на сайт не зайдет человек у
которого в настройках броузера не отключенна загрузка рисунков. Страничка,
которую он увидит будет отформатированна без 'spacer.gif' и все наши
дизайнерские потуги будут напрасны. Учитывая скорость загрузки на наших
линиях графика отключена у многих пользователей. Особенно если сайты
которые они посещают ценны информацией а не графикой. Впрочем если вы
решите создать порносайт то вам подобные посетители вряд ли угрожают
:-)
Поэтому при форматировании таблиц удобнее полшьзоваться атрибутом 'style'
внутри которого вы, с помощью CSS определяете размеры блока. В этом случае
наш пример будет выглядеть следующим образом:
<table width="100%">
<tr>
<td style="width:100;">Ячейка А</td>
<td width="100%">
<img src="spacer.gif" height="1" width="370">
Ячейка В</td>
<td style="width:300;">Ячейка С</td>
</tr>
</table>
К сожалению данный способ не подходит для NN поскольку он не полностью
поддерживает CSS. Оптимальным таким образом является комбинация этих двух
вариантов.
<table width="100%">
<tr>
<td style="width:100;">
<img src="spacer.gif" height="1" width="100">
Ячейка А</td>
<td width="100%">
<img src="spacer.gif" height="1" width="370">
Ячейка В</td>
<td style="width:300;">
<img src="spacer.gif" height="1" width="300">
Ячейка С</td>
</tr>
</table>
Из-за неполной поддржки таблиц стилей в NN при форматировании таблиц
приходится прибегать к избыточности кода. Но такова плата за
универсальность, и тут ничего не поделаешь. Впрочем способы описания тех
или иных обьектов HTML иогут различаться в зависимости от конкретного
примера.Следует лишь обратить ваше внимание на то что применение большого
количества вложеных таблиц может замедлить построение странички броузером.
Так же к увеличению времени загрузки приводит использование абсолютных и
относительных координат в CSS (поддерживается всеми броузерами) и
прозрачности (поддерживается только MSIE). Кроме того у MSIE и NN
несколько различающиеся системы относительных координат. Opera расчитывает
положение элемента на странице точно так же как и NN. Особенно долго
обрабатываются UA графические элементы расположенные в полупрозрачных
слоях.
В конце хотелось бы добавить немного о элементах META и их использовании
при индексации вашего сайта поисковыми роботами.
META, увеличивают размер странички и поэтому зачастую(хотя в последнее
время все реже :-)) ими пренебрегают начинающие разработчики предпочитая
"мануальную" регистрацию в различных каталогах и поисковых машинах. Тут
надо понять отличие индексирования и регистрации. При регистрации вы
сообщаете поисковику адрес, тематику и общее описание сайта. При
индексации робот помимо вышеперечисленных данных загружает тексты странц
сайта, что позволяет выводить его в списке найденных, если слово,
запрошенное в поиск, содержится в статье сайта, но не содержится в его
описании или ключевых словах. Фактически элементы META с атрибутом
'http-equiv' являются аналогами http-заголовков формируемых сервером при
отдаче странички по клиентскому запросу. Каждый элемент META может
содержать атрибуты 'http-equiv' или 'name' значение этих атрибутов
пишется внутри атрибута 'content'. Количество элементов META и значения их
атрибутов зависят от назначения сайта, квалификации разработчика :-) и
правил хостинга. В зависимости от настроек сервера некоторые
http-заголовки он может формировать сам. Так, например Russian Apache
автоматически перекодирует страничку в зависимости от клиетского броузера
и в подавляющем большистве случаев запрещает ее кэширование на прокси
формируя заголовок Expires: Thu, 01 Jan 1970 00:00:01 GMT. Последнее не
совсем удобно т.к. при правильном подходе к этой возможности можно
существенно ускорить загрузку страничек. Подробнее с тонкостями
кэширования и его настроек применительно к PHP-сайтам вы можете прочесть в
работе "PHP и Web. Кэширование" доступной на www.infocity.kiev.ua Вообще
кэширование является палкой о двух концах:кэшировать - возрастает скорость
загрузки страниц к клиентам но есть возможность того что посетитель увидит
старую версию или версию не в той кодировке которая стоит по умолчанию в
его броузере; не кэшировать - значит клиент всегда будет получать свежую
версию странички, но возрастет нагрузка на сервер. А сервер так настроен
что большая часть процессорного времени у него уходит на то чтобы понять
что клиенту вообще от него надо, а сколько страничек выдавать 1 или 20 ему
в принципе по фигу. В любом случае прежде чем забивать заголовки странчек
META-тегами неплохо бы связаться с хостером и выяснить у него все
http-заголовки передающиеся клиентам по умолчанию. Как правило основные из
них сообщаются в правилах хостинга, но некоторые могут и умалчиваться.
Я не вижу смысла писать здесь о META подробно но достаточно полная
информация представленна в статье "Использование метаданных (HTTP-EQUIV,
NAME, REL, REV, BASE) при создании HTML документов" А. Аликберова. Статья
так же доступна на www.infocity.kiev.ua
HTML
![Проект [-=DaGo=-] по безопасности компьютерных сетей и защите информации](http://www.netsecurity.r2.ru/img/dagobutton.gif){kind=small}
