Полезные советы по HTML

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

🕛 23.05.2005, 04:41

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

Все по порядку
Не используйте очень большие таблицы на страничке. Если есть возможность, поделите таблицу на несколько более мелких таблиц или вообще откажитесь от них. Это связано с тем, что содержимое таблицы не выводится на экран до тех пор, пока вся таблица не скачана. И у пользователя создается иллюзия медленной загрузки этой страницы, что нежелательно.
Так можно автоматически перенаправить посетителя на другую страницу:

<Html> <Head> <Title>Мы переехали!</title> <Meta Http-equiv="Refresh" Content="5;URL=http://denveroid.narod.ru/"> </Head> <Body BgColor="#ffffff"> <H1 Align="Center">Мы переехали на новое место:</H1> <Hr Width="250"> <H2 Align="Center">Подождите 5 секунд или воспользуйтесь ссылкой: <A Href="http://denveroid.narod.ru">http://denveroid.narod.ru</A></H2> </Body>
</Html>

Если вы используете параметры отступа текста от рабочего края броузера, учтите, что для NN и IE они разные:
1) Для Netscape Navigator: "marginwidth" и "marginheight"
2) Для Internet Explorer: "topmargin" и "leftmargin"
Единственный способ корректного распознавания в обоих броузерах разместите все параметры:
<Body Topmargin="0" Leftmargin="0" Marginwidth="0" Marginheight="0">

Строка DOCTYPE (DTD), расположенная в первой строке HTML документа, описывает стандарт HTML, который используется в этом документе. Два наиболее используемых DTD: 1) HTML 3.2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 2) HTML 2.0: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Чтобы заменить кнопку в форме на изображение используйте:
<Input Type="image" Src="picture.gif" Width="25" Height="15" Border="0" Alt="submit">

Если при размещении странички на сайте не видно картинок, а в локальной версии всё было в порядке, то проверьте следующее:
1. Адреса картинок не относительные, а абсолютные (типа file:///.).
2. Могут стоять неправильные слэши: не "/", а "\". В URL, как правило, применяются прямые слэши "/".
3. FTP может класть на сервер файлики с именами, написанными заглавными буквами - PICTURE.GIF, в то время как в тексте будет прописано picture.gif или Picture.gif - для ОС типа UNIX это не одно и тоже.

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

Чтобы убрать границы шириной 2-3 пискела между фреймами, добавьте в тэге: <Frameset> строчку Border="0" FrameBorder="0".

При использовании тэга:

 <Table BackGround="picture.gif">
IE отображает фоновый рисунок, начиная от начала таблицы, а NN - с начала каждой ячейки. Обойти это неудобство можно, вложив таблицу в другую: <Table Cellspacing="0" Cellpadding=0 Border="0" BackGround="picture.gif"> <Tr><Td Align="Center">
<Table Cellspacing="0" Cellpadding="4" Border="0" Width="100%" BackGround=""> <Tr><Td Align="Left">
Информация в ячейки </Td><Td Align="Right">
Информация в ячейки </Td></Tr>
</Table> </Td></Tr>
</Table>

Обратите внимание на BackGround="" и на то, что в тэгах таблиц не задан атрибут BgColor.

Для того, чтобы "собрать" один HTML-документ из нескольких кусков, нужно использовать команды SSI (Server-Side Includes): <!-#include file="ssi/menu.html" ->
путь к файлу указывается от текущего файла (файла, в котором расположена команда). <!-#include virtual="/ssi/menu.html" ->
путь к файлу указывается от корня сервера.
Таким образом, например, можно задать меню, одинаковое для всех страниц сервера, и хранить его в отдельном файле. Тогда его изменение отразится на всем сервере и не потребует кропотливой работы по правке всех HTML-страниц Вашего сервера.

Как избавиться от противной синей рамки по периметру рисунка, который является ссылкой? <A Href="link.html"><Img Src="picture.gif" Border="0"></A>

У адреса mailto:, применяемого для отправки писем, можно задать и другие опции, крома самого адреса. Например, адрес вида: <A Href='mailto:name@domain.ru?subject="Заголовок письма"&Body="This body of e-mail">Text</A>

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

Набор шрифтов
Хотя почти всегда дизайн опирается только на один шрифт, что вполне понятно, бывают и исключения, когда местный дизайнер, перенося Word'ошный стиль оформления, использует множество шрифтов: начиная с Times New Roman и заканчивая таким как Verdana. Каждому web-мастеру понятно, что смешение шрифтов очень опасно и нежелательно, главным образом из-за того, что это многообразие не выделяет нужную информацию, как хотелось бы, зато опытному глазу режит глаза, когда смешивают рубленый и плавный шрифт (например, Times и Arial).
Размер шрифтов
Как вы знаете размер шрифта можно указывать в пунктах и пикселях (только через CSS). Во втором случае можно указать точный размер независимо от настроек броузера (крупный, средний, мелкий). Обычно с размером проблем не возникает: <Font Face="Tahoma" Size="2"> - для обычного текста и какой-то размер для заголовков.
Фон страниц
Одним из самых важных элементов дизайна HTML является фон или картинка страниц сайта. Понятно, что разница между темно-синим и белым фоном очевидна, однако бывают фоны, которые близки по html-коду, но вызывают самые разные ассоциации.
Цвет объектов
Каждому видимому объекту можно задать цвет, который обязан сочетаться с общим дизайном. Понятно, что сразу появляются ряд ограничений сочетания цветов. В этой ситуации самое простое - использовать серые оттенки.

Набор шрифтов

Когда вы собираетесь сделать какой-либо дизайн, точнее первую страницу вашего сайта, вы задумываетесь о всех компонентах в отдельности и об их сочитаемости. Первое, что нужно подобрать с нужной точностью - набор шрифтов, которые будут использоваться. Самое главное - использовать только стандартные шрифты, какими являются: Times New Roman, Arial, Tahoma, Verdana, Sans-Serif, Courier New, сейчас в этот список пробивается еще один - Comic Sans MS. В противном случае, у пользователя может не быть указанного шрифта, и броузер будет использовать стандартные: Times New Roman - для Body, Arial - для таблиц.
Конечно, если составите дизайн, вместив все так называемые стандартные шрифты, то ничего хорошего не будет. Сразу надо сказать, что все шрифты, в том числе и вышеупамянутые, делятся на два типа: плавные и рубленные. Разобъем их на две группы: Arial, Tahoma, Vеrdana, Sans-Serif - в первой; Times New Roman, Courier New - во второй. Проверено, что для обычного текста, как в таблице, так и прямо в Body лучше всего использовать Tahoma или Sans-Serif, а для различных заголовков подойдет Courier New (жирный) или Verdana.

Размер шрифтов

Если вы используете размер в пунктах, то допустимы следующие варианты:

<Font Face="Tahoma,Arial" Size="1"> - для комментариев 
<Font Face="Tahoma,Verdana,Sans-Serif" Size="2"> - для обычного текста 
<Font Face="Courier New" Size="5"><B> или <Font Face="Verdana,Arial" Size="5"> - для крупных заголовков 
<Font Face="Verdana,Tahoma,Arial" Size="4"> - для средних заголовков

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

{font-family: tahoma,verdana; font-size: 11px;} - для комментариев и многочисленного текста 
{font-family: tahoma,verdana,sans-serif; font-size: 12px;} - для обычного текста 
{font-family: courier new; font-size: 45px;} - для крупных логотипов 
{font-family: courier new; font-size: 22px; font: bold;} - для крупных заголовков 
{font-family: verdana,tahoma; font-size: 22px;} - для средних заголовков 
{font-family: verdana,tahoma; font-size: 18px;} - для посредственных заголовков

Фон страниц

Кроме выбора настроек шрифтов и выбора картинок, один из самых важных компонентов в web-дизайне является фон. Он может состоять либо из монотонного цвета, либо из сложного рисунка; хотя картинка может быть и очень простой, тем не менее она должна загрузится (и далеко не всегда первой). Конечно, главным (и к сожалению единственным) преимуществом графического фона является его "красочность", "изащренность"... В противовес этому - необходимость скачивать этот рисунок и появляющуюся "несолидность" у сайта: так как общепринято, что у страниц фон должен быть монотонным, то есть состоять просто из цвета. Примером могут послужить все самые известные сайты... В этом разеделе существует единственное правило - фон должен быть подложкой, на втором плане, а не центром внимания пользователя; поэтому выбирайте не сочные цвета, близкие к прозрачным.

Сочетание цветов

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

[Совет 1] Не загружайте страничку графикой. Посетитель не будет вам бесконечно благодарен, наблюдая более 5 минут за загрузкой "огромных" картинок.

[Совет 2] Не используйте на страничке большие картинки. Если уж и приспичило, лучше порежьте картинку на более мелкие части и вставьте их в таблицу. Этим вы существенно облегчите загрузку графики.

[Совет 3] Не встраивайте в страничку слишком много Java-скриптов и апплетов, показывая свою крутость. Не думайте, что интернет болен статичностью.

[Совет 4] Если есть возможность сделайте альтернативу картинкам-ссылкам в виде текстовых ссылок. Пусть на сайте присутствует и то, и то, так как некоторые пользователи отключают в своих браузерах загрузку графики.

[Совет 5] Если какой-либо раздел еще не готов не надо мозолить глаза посетителям стандартной анимационной картинкой "Идет строительство" или "Under Construction". Достаточно написать приглашение зайти попозже.

[Совет 6] Не ленитесь указывать в IMG-теге размеры картинки WIDTH и HEIGHT. Иначе при загрузке картинок текст будет прыгать в разные стороны. Посетителю точно это не понравится.

[Совет 7] Пишите в описании картинки ALT-текст. Не заставляйте посетителей ждать полной загрузки желая узнать, что же находится за этой картинкой.

[Совет 8] Не используйте большое число вложенных фреймов с запутанной системой навигации. Если есть возможность, лучше вообще отказаться от фреймов.

[Совет 9] Не используйте в тексте слишком много восклицательных знаков (!!!). Этим вы добьетесь того, что посетитель просто не заметит действительно важной информации.

[Совет 10] Если вы думаете, что много мерцающих ссылок привлекают внимание - вы ошибаетесь. Не думайте, что Интернет болен статичностью. Большое количество таких ссылок не особо радует. После просмотра такого сайта можно получить головную боль до вечера.

[Совет 11] Проверьте, хорошо ли видна страничка в разных разрешениях. Вы должны позаботиться, чтобы она хорошо воспринималась как в разрешении 800х600 так и в 1024х768.

[Совет 12] Старайтесь не прибегать к использованию полосы горизонтальной прокрутки.

[Совет 13] Если вы собрались делать на страничке какой-либо фон: старайтесь подобрать контрастную и одновременно расслабляющую глаза комбинацию шрифта и фона.

[Совет 14] Следите за правописанием на страничке. Если вы собрались создать действительно хороший сайт, то на вашем столе должен быть орфографический словарь.

[Совет 15] Каждый документ вашего сайта должен быть доступен с трех щелчков мыши. Старайтесь следить за этим. В противном случае посетитель будет путаться в навигации вашего сайта.

[Совет 16] Размер одной странички не должен превышать примерно 45-50 кб. Иначе процесс загрузки затянется, что не всегда приятно.

[Совет 17] Не помещайте сайт в одну большую таблицу, ведь содержимое таблицы будет показано только тогда, когда она полностью загрузится.

[Совет 18] Всегда проверяйте корректность внутренних ссылок. Очень часто web-мастера оставляют такие ссылки: file:///C:/...

[Совет 19] Всегда выставляйте цвет основного фона в теге , даже если он белый. Иначе цвет будет по Default`у, а на разных машинах Default разный :-)

[Совет 20] В картинках-ссылках пользуйтесь параметром border="0" (в тегах <a href="...">) этим вы избавитесь от синих рамок вокруг картинки-ссылки.