Секреты HTML
Автор: Антон Околелов
Источник: www.realcoding.net

Представьте себе на секунду, что вы - HTML-coder большой преуспевающей компании, и ваша зарплата составляет 1000 долларов США. Представили? Я думаю, без проблем! Вообразите также, что фирма получила заказ на сайт средней руки. Цена, допустим, уже обговорена, дизайнер, пускай, тоже отмучился.

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

В общем, все это сваливается на вашу бедную голову, которая, в свою очередь, порождает извечный вопрос: что делать? Ответить на него очень просто. Если вы вообще в первый раз слышите, что такое HTML, то советую немедленно застрелиться, так как у вас нет никаких шансов! Но если вы знаете хотя бы азы, например, как сделать текст полужирным или поставить ссылку на любимый ресурс (www.idiot.ru?), то я помогу вам оправдать возложенное на вас высокое доверие. Итак, начнем.

Быть или не быть?
Первым делом надо решить проблему с фреймами (их еще называют кадрами), а именно: будут они или нет. Нельзя не отметить, что все дизайнеры всегда выступают за фреймы, я полагаю, это у них в крови. Объяснения этому могут быть разные: быстрее грузится, постоянное неподвижное оформление и т.п. Но я могу назвать сразу несколько причин, почему нельзя использовать сайты с кадрами:

- Такие ресурсы очень плохо индексируются поисковыми системами. Фактически, нормально отображаться будет только главная страница, т.к. остальные попросту не содержат фрейм-структуру. Можно, конечно, выкрутиться из этой ситуации при помощи JavaScript и PHP, но стоит ли игра свеч?

- Если сайт состоит из двух страниц, одна из которых главная, а вторая "О нас", то флаг вам в руки. Но серьезные сайты не могут позволить себе прокрутку посреди экрана, когда меню не помещается на страницу. Даже если как-нибудь схитрить со структурой информации, сократив таким образом количество пунктов до минимума, а потом принудительно запретить полосу прокрутки, то все равно пользователи не смогут работать с сайтом в маленьком окне или при низком разрешении монитора.

- Владельцы других ресурсов не смогут поставить ссылку на конкретные страницы вашего сайта, им придется писать так: "сайт www.takoy-to-site.ru, раздел такой-то-раздел". Вместо: www.takoy-to-site.ru/takoy-to-razdel.html. Для простого посетителя второй вариант проще, потому что можно одним кликом попасть куда надо, а не искать в глючной навигации чужеродного сайта нужную информацию.

- Еще один аспект. Допустим, вам надо отмечать текущее местонахождение пользователя крестиком у соответствующего пункта меню. Вы представляете, сколько там будет скриптов, возможно, даже DHTML? То же относится и к так называемой "дороге" ("хлебным крошкам").

- Даже сам Билл Гейтс со всем своим штатом сотрудников не сможет сделать выпадающее меню (если, конечно, таковое необходимо), пересекающее границу между фреймами.

Другими словами, если нет "мудрых" указаний сверху или особенной специфической ситуации, фреймы использовать не стоит. Поехали дальше!

Хирургическое вмешательство
Теперь начинайте резать. Что-что вы сказали? Дизайнера? Да нет, конечно, ведь ваша фирма без профессионала в этой области просто развалится. Я могу себе представить, как вы со своим боссом пытаетесь придумать внешний вид сайта! Не так-то это просто, как кажется, ведь для этого надо иметь небольшой, но стабильный сдвиг (шутка). А теперь серьезно - ведь пора заняться делом.

Прежде чем начинать расчленять изображение на элементы, четко определитесь, где у вас находится текст, а где графика. Первое уменьшает "вес" (размер) страницы. Второе, наоборот, увеличивает, зато смотрится красиво. Думайте сами. Затем посмотрите, какие из картинок лучше "загифовать", а какие "зажпеговать".

Как, неужели вы никогда не слышали таких слов!? Значит, придется на этом кратко остановиться. Как гласят предания, когда Бог создавал Всемирную Паутину, он придумал три формата графических изображений: gif, jpeg и png. Поэтому, если вы еще не поняли, про ваш любимый bmp, увы, придется забыть.

Формат gif используется для изображений, где важна четкость и содержится мало цветов (кстати, чем меньше цветов в gif-картинке, тем она "легче"). Типичные примеры: надписи, карты, линии и т.д.

Jpeg является антиподом gif и создан для полноцветных фотоподобных рисунков. Беда у него одна - чем ниже качество, тем выше эффект Гиббса (расплывчатость на границах резких переходов цветов), поэтому никогда не используйте его для надписей, карт, линий и т.д.

Png в будущем должен заменить gif, но сейчас применяется редко.

Вся информация у вас есть, можете начинать "операцию". Оперируя, никогда не раздирайте объект "руками", на это существуют специальные программы, например, Adobe ImageReady. Лучше потратить время на изучение таковых, чем, вооружившись блокнотом и ручкой, часами записывать координаты, размеры и названия нарезанных элементов.

Сборка
Но даже если вы максимально автоматизировали процесс резки и на выходе получили HTML-эскиз, все равно вам придется его исправлять. Почему? Наверное, потому, что человеческий мозг все еще незаменим.

При правке также следует пользоваться каким-нибудь мощным инструментом, так как позиционируются элементы друг относительно друга за счет невидимых таблиц, таблиц в таблицах и т.п. Править такие "HTML-спагетти" полностью вручную просто безумие. Я пользуюсь Dreamweaver'ом - на мой взгляд, это самый лучший HTML-редактор за всю историю интернет-цивилизации, хотя есть, конечно, и другие мнения.

Допустим, вы все сделали. Не спешите прыгать по офису с криками "Yes! I did it!" и звать босса. Сначала посмотрите, как это выглядит в Netscape. Я живо представляю себе ваше лицо при виде расползающихся во все стороны надписей, кусков картинок и кнопок. Есть невероятное множество причин, которые могут повлиять на внешний вид вашего сайта. Вот некоторые из них:

ћ Если вы убрали стандартный отступ на странице с помощью

<BODY leftmargin="0" topmargin="0">

, то ребятам из Netscape на это плевать. Делайте так:

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

.

ћ По возможности расставляйте все размеры: таблиц вообще, отдельных их ячеек и изображений. Это убережет вас от большей части неприятностей.

ћ Уберите все пробелы и переводы строк (они трактуются, как пробелы) в тегах <TD>, иначе рисунки сместятся так, что можно остаться заикой на всю жизнь. Вот пример правильного HTML:

:
<TR>
<TD width="10" height="10"><IMG src="/images/sq.gif" width="10" height="10"></TD>
</TR>
:

- Если меню текстовое, то оно может "плавать" в зависимости от установок пользователя, я имею в виду размер шрифта. Иногда это недопустимо. Чтобы этого избежать, ставьте фиксированную высоту букв с помощью CSS (Cascade Style Sheet). Вы можете не захотеть изучать еще и CSS, но боюсь, что другого выхода нет, т.к. тег официально считается отмененным (www.w3.org). А вот все основные тексты должны быть именно плавающими, так как зрение у посетителей бывает разное.

- Единственный способ сделать таблицу с двумерной рамкой единичной толщины, правильно отображающуюся даже в старых броузерах:

<table cellspacing="0" cellpadding="1" border="0">
<tr>
<td bgcolor="black">
<table cellspacing="0" border="0">
<tr>
<td bgcolor="white">Надпись в рамке</td>
</tr>
</table></td>
</tr>
</table>

Будем надеяться, что у вас все получилось. Кстати, не забывайте проверять все ссылки на сайте сразу после закачки файлов в Интернет. Дело в том, что на серверах обычно используются операционные системы, различающие большие и маленькие буквы в именах файлов, и если вы назвали файл "SuperFile.html", а ссылку прописали как

<a href="superfile.html">Ссылка на суперфайл</a>,

то получите сообщение об ошибке ї404, хотя дома все работает. Могу дать ценный совет: называйте все файлы маленькими буквами, и не будет проблем.

Опять режем?
Да, режем, только на этот раз не изображение сайта, а уже HTML-эскиз. Сейчас объясню, для чего.

Предположим, что вы взяли эскиз за образец и решили на его основе делать страницы, заменяя только контент. Этот способ, в принципе, хорош, но только до тех пор, пока вы к своему ужасу, не осознаете, что забыли, к примеру, вставить в меню пункт "О нас". А потом вы понимаете, что этот проклятый "О нас" надо вставлять вручную уже в 100 страниц! Причем, все исправления придется заново закачивать на сервер.

Что делать? Ответ один: SSI. SSI (Server Side Include) - это настолько нужная вещь, что заменить ее могут только такие технологии, как PHP, Perl или ASP. Но не о них сейчас речь. Мы сейчас обсуждаем язык серверных подстановок.

Все очень просто, вы называете файл, допустим, index.shtml (SSI должен поддерживаться сервером, так что narod.ru отпадает сразу). Вписываете в него что-то вроде:

<html>
<body>
Вставляемый текст:<br>
<!--#include virtual="file.htm"-->
<br>Конец вставки.
</body>
</html>

Если закачать это на сервер и, кроме того, создать еще файл-вставку file.htm, содержащий одну только надпись "проба", тогда вы увидите в броузере что-то вроде:

Вставляемый текст:

проба

Конец вставки.

Теперь понятно, для чего нужен Server Side Include? Поэкспериментируйте, вам понравится. У SSI есть и еще директивы (помимо include), но это тема для отдельного разговора.

Итак, "менюшки" будем вставлять таким вот образом. Но и здесь надо проявлять бдительность при расчленении эскиза, чтобы не попасть впросак. Для этого надо просто-напросто предусмотреть все. Прикиньте, какие части вашего сайта различаются или будут различаться от страницы к странице (тег

<title>

, "дорога" и т.д.). Подумайте, не захотите ли вы в будущем добавить вниз каждого документа

"designed by :"?

Или добавить счетчик?

Вот пример страницы, которая могла бы существовать в природе:

<!--#include virtual="/templates/before-title.htm"-->www.tibet.spb.ru - Далай Лама Тибета<!--#include virtual="/templates/before-menu.htm"-->
<a href="index.htm">Главная</a> > Далай Лама
<!--#include virtual="/templates/menu.htm"--> А здесь основной HTML.
<!--#include virtual="/templates/niz.htm"-->

По-моему, просто загляденье! Можно еще сделать вместо

/templates/menu.htm

что-нибудь вроде

/cgi-bin/menu.pl?active=3

, и с помощью специальной программы menu.pl на языке Perl выделять активные пункты меню.

Если нет SSI
Если вы всего-навсего бедный студент, а никакой не тысячедолларовый специалист, и делаете сайт для себя на старом добром "народе", который, как отмечено выше, не поддерживает SSI, можно выкрутиться с помощью JavaScript:

Файл index.html:

<html>
<body>
<script language="javascript" src="include.js"></script>
</body>
Файл include.js:
var s="";
s+='<table cellspacing="0" cellpadding="1" border="0">';
s+='<tr >';
s+='<td bgcolor="black">';
s+='<table cellspacing="0" border="0">';
s+='<tr>';
s+='<td bgcolor="white">Надпись в рамке</td>';
s+='</tr>';
s+='</table></td>';
s+='</tr>';
s+='</table>';
document.writeln(s);

Одним словом, это работает точно так же, как и SSI, но менее удобно и требует от пользователя поддержки javascript.

Главный секрет HTML
Главный секрет HTML заключается в максимальном упрощении поставленной задачи. Это возможно почти всегда: или коррекция дизайна, или правка контента, или отказ от ненужных "наворотов", или перекладывание части задания на кого-нибудь еще. Кроме того, никогда не изобретайте велосипед, лучше задайте вопрос на каком-нибудь форуме или спросите у крутого друга-"спеца". Выгоднее прослыть "ламмером", но быстро стать профессионалом, чем "гнуть пальцы" на пустом месте.