Какую версию HTML лучше использовать?

Нужно соблюдать баланс между использованием новых возможностей и поддержкой устаревших, но все еще актуальных версий браузеров. С этой точки зрения «золотая середина» - стандарт XHTML 1.0 Transitional. Странички, сверстанные с соблюдением этого стандарта, будут гарантированно корректно отображаться во всех будущих клиентах, понимающих XML, но, в то же время, в рамках этого стандарта поддерживаются устаревшие, но все еще необходимые для правильного отображения во многих браузерах теги и атрибуты.

Все примеры HTML-кода в настоящем FAQ даны именно с учетом требований стандарта XHTML 1.0 Transitional.

Есть важное исключение - некоторые теги и параметры, указанные в нескольких пунктах FAQ, специфичны для NN4 или IE; такие теги или параметры, если это возможно, должны вставляться с помощью SSI, PHP или ASP только для соответствующего значения поля User-Agent в HTTP-заголовке. После описания таких параметров будет стоять обозначение (!).

В каком регистре лучше писать HTML-код?

Раньше считалось, что это безразлично. Но с приходом XHTML на этот вопрос появился однозначный ответ - все теги, атрибуты и предопределенные значения пишем в нижнем регистре.

Что такое entities и как их правильно применять?

entities - это комбинации знака «&» и буквенного или цифрового кода после нее, предназначенные для замещения символов, которые не могут встречаться в «чистом» виде в HTML-тексте, например, символа «<». entities применяются в тексте за пределами тегов, а также в значениях параметров, в том числе input value=, img alt=, a href= и т.п.

Например, чтобы на кнопке submit были три угловых скобки, пишем <input type="submit" value=">>>" />

entities должны быть закончены символом «;»

Обязательны к употреблению следующие entities:

Левая угловая скобка: (<) - <

Правая угловая скобка: (>) - >

Двойные кавычки: (") - "

Амперсант: (&) - &

Кроме того, полезно знать такие entities:

  - неразрывный пробел

« - левая двойная угловая кавычка: («)

» - правая двойная угловая кавычка: (»)

® - знак регистрированной торговой марки: (®)

° - знак градуса: (°)

¶ - знак параграфа: (¶)

§ - фигурный знак параграфа: (§)

± - знак плюс-минус: (±)

· - точка в середине строки (по вертикали): (·)

µ - греческая буква "мю" для обозначения единиц измерения: (µ)

¤ - "краб", обобщенный знак денежной единицы (кружок с четырьмя лапками): (¤)

– - короткое тире: (–)

— - длинное тире: (—)

“ - верхние открывающие кавычки-"лапки": (“)

” - верхние закрывающие кавычки-"лапки": (”)

„ - нижние кавычки-"лапки": („)

† - латинский крест: (†)

‡ - двойной крест: (‡)

• - сплошной кружок в середине строки: (•)

… - многоточие: (…)

‰ - знак промилле (процент с дополнительным ноликом): (‰)

€ - знак валюты "евро": (€)

№ - знак номера: (№)

™ - торговая марка: (™)

Как правильно прописывать URL с «&» в строке запроса?

Hеправильно: <a href="my.cgi?x=X&y=Y"><img src="img.cgi?a=1&b=2" alt="" /></a>

Правильно: используем entities: <a href="my.cgi?x=X&y=Y"><img src="img.cgi?a=1&b=2" alt="" /></a>

Исключения: cсылки на CGI-скрипты в директивах SSI #include virtual и #exec cgi. Эти ссылки обрабатываются на сервере, и в них «&» заменять на «&» не надо. Также не нужно заменять «&» в URL при переадресации средствами JavaScript.

Обязательно ли использовать кавычки в значениях атрибутов?

Обязательно. Поверьте, тут экономия на спичках, но код без кавычек не только не удовлетворяет никаким стандартам, но и просто выглядит неряшливо.

Обязательно ли писать alt в <img>?

Да. Это требует стандарт, да и здравый смысл - многие отключают картинки, а некоторые юзеры используют текстовые или даже голосовые браузеры. Если картинка не несет никакой смысловой нагрузки (элемент дизайна, «распорка» и т.п.), то тогда ставим в тег <img> значение alt="".

Зачем делать свою страничку совместимой с XHTML и как это сделать?

Зачем - см. п. 2.1. Как - описано ниже.

в заголовок документа первой ставим строку <?xml version="1.0" encoding="...кодировка вашей странички..."?>

Например: <?xml version="1.0" encoding="KOI8-R"?>

После строки <?xml...?> ставим такой DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

В тег <html> ставим такие параметры: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

Если основной язык вашей странички не русский, то заменяем "ru" на сокращенное обозначение вашего языка: "en" - английский, "de" - немецкий и т.д.

Все теги должны быть корректно закрыты. Стандарт HTML4 допускал, чтобы не закрывались такие теги, как <p>, <option>, <li>, <dd> и т.п. В XHTML это недопустимо.

Теги, которые не имеют парных закрывающих тегов (такие, как <link>, <meta>, <img>, <input>, <br>, <hr>, <col>, <param> и т.п.), должны в конце перед « > » иметь пробел и косую черту: « />», например, <br />, <hr /> и т.д.

Параметры, которые в HTML4 не имеют значений (compact, nowrap, ismap, declare, , checked, disabled, readonly, multiple, selected, noresize, defer), должны иметь значение, равное самому параметру. Например:

Как вставлять комментарии в HTML?

Не допускается пробел между «<!» и «--», но разрешен пробел между «--» и «>». Типичная ошибка - использование цепи дефисов («---») в пределах комментария. Нужно избегать помещения двух или более смежных дефисов внутри комментариев.

Довольно частая проблема - использование оператора уменьшения на единицу в блоке JavaScript (myVar--), вместо этого используйте оператор «-= » (myVar-=1)

Я, к сожалению, употребил

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

Говорят, для поисковиков надо прописать ключевые слова. Что это?

Один из вариантов <meta>, определяющий ключевые слова или краткое описание документа. Hекоторые поисковые роботы обращают на них внимание, а некоторые не обращают. Поисковый робот, знаете ли, тоже нам ничем не обязан.

Слова - <meta name="keywords" content="слово слово слово ..." />

Описание - <meta name="descripton" content="описание документа" />

Чтобы после открытия моей

Если вы имеете доступ к настройкам сервера, то используйте HTTP-заголовок Refresh. Если нет, то можно воспользоваться одним из вариантов <meta>. Интересно отметить, что в подопытном Lynx'е наблюдаются неровности, если адрес перехода задан относительным адресом.

Цифра - время ожидания, URL - адрес перехода (без кавычек).

В чем отличия <b> и <strong>, <i> и <em>?

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

<b> и <i> - тэги физического выделения, то есть вы принудительно заставляете выделять текст каким-то видом шрифта. В HTML4 и XHTML эти теги объявлены устаревшими. <strong> и <em> - тэги логического выделения. Каждый браузер может по-своему выделить текст внутри этих тэгов, так, как удобно его пользователю. <em> означает выделение, а <strong> означает усиленное выделение.

Резюме: если вам нужно выделить текст, пользуйтесь <strong> и <em>. Если вам нужно не выделить текст, а физически сделать его жирным или курсивом, пользуйтесь <span> в сочетании с CSS.

Чтобы страничка не кэшировалась у клиента?

Для этого нужно прописать в HTTP-response со стороны сервера параметры Expires, Pragma и Cache-control.

Если вы не имеете доступа к настройкам сервера, то добавьте в <head> такие <meta>:

Чтобы при нажатии на ссылку появлялся бланк отправления сообщения по e-mail?

<a href="mailto:email@name.ru">ссылка</a>

При этом можно добавить автоматическое подставление темы:

<a href="mailto:email@name.ru?Subject=тема">ссылка</a>

Этот вариант некорректно обрабатывается некоторыми браузерами и мэйлерами.

Чтобы при нажатии на ссылку она открывалась в другом окне или кадре?

У ссылки (тега <a>) есть атрибут target со значениями:

"_blank"	-	новое окно
"_top"	-	верхнее окно, то есть полный экран, а не кадры
"_self"	-	то окно или кадр, где находится ссылка
"_parent"	-	ссылка на кадр, где проводится фреймовая разбивка, часто совпадает с "_top" за исключением случаев иерархии фреймов (в один из фреймов грузится еще один фреймсет)
"имя_окна"	-	имя целевого окна или целевого кадра

Чтобы при нажатии на ссылку менялось содержимое двух кадров?

В href ссылки пишем новый фреймсет с уже измененными кадрами:

<a href="newframes.html" target="...">ссылка</a>

Чтобы нельзя было изменять размер кадра?

Чтобы не было видно границ кадров?

Чтобы изменить размер, оформление

Скроллбар генерится модулем GUI операционной системы, и, соответственно, не может быть изменен с помощью HTML, CSS или JavaScript-кода.

Убрать скроллбар можно, прописав в стили для <body> параметры: position:fixed;overflow:none;

Hо делать так категорически не рекомендуется - при низком разрешении экрана у клиента часть вашей странички окажется недоступной.

Если документ находится во фрейме, то скроллбар появляется только тогда, когда документ не умещается в отведенном ему месте. Если вы не хотите появления скроллбара даже в этом случае, то добавьте в <frame> параметр scrolling="no", но, опять-таки, лучше этого избегать.

В IE5.5+ можно изменять расцветку и оформление скроллбара, но это находится за рамками стандартов HTML и CSS и посему не рекомендовано к применению.

Чтобы выровнять табличку

<table align="center"> - конструкция принципиально неверная. Параметр align в <table> предназначен для того, чтобы задать обтекание таблицы текстом, так же, как аналогичный параметр в <img>.

Правильно так:

Чтобы разместить текст, картинку или табличку в центре экрана?

Человек, который задает такой вопрос, не понимает, что такое HTML. Ему нужно хотя бы поверить в то, что никакого экрана у его клиента нет, что HTML - не привязанный к платформе язык, что браузер для слепых не показывает буквы, а читает их, и так далее.

Для тех, кто упорствует в ереси, есть решение с таблицей. Трудность в том, что никакого атрибута height в стандарте нет, поэтому его реализация - это индивидуальные затеи браузера. Поэтому решение, которое предлагается здесь, нарочито неправильно и нестандартно.

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle"> Текст, картинка или табличка в центре экрана </td> </tr> </table>

Чтобы между картинками не было промежутков?

Здесь мы вынуждены приспосабливаться к браузерам, которые не следуют стандарту и показывают CR LF так, как бог на душу положит. Обычно - как пробел, хотя в стандарте и сказано, что CR LF не должны показываться.

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

Второе решение тоже обходит противоестественные склонности браузеров. Картинки описываются без промежутков между тегами:

Чтобы убрать промежутки

Пропишите в таблице параметры

border="0" cellspacing="0" cellpadding="0"

Во все <img> нужно добавить стиль display:block; или объявить в CSS соответствующий класс с таким стилем.

Также нужно убирать пробелы и возвраты каретки между <td>, <img> и </td>.

Например, так:

<td><img alt="" src="kusok.gif" width="XXX" height="YYY" border="0" /></td> ^^^ ^^^

В местах, отмеченных галочками, пробелов нет!!!

Если на картинки навешаны ссылки, то <a> и </a> тоже должны быть вставлены без пробелов:

И еще раз проверьте, правильно ли вы нарезали картинки и указали их размеры.

Чтобы убрать синюю рамку вокруг картинки-ссылки?

Точно так же, как убирают любую другую рамку вокруг любой другой картинки:

Чтобы при наведении на ссылку

Для отображения всплывающих подсказок в любой элемент HTML может быть добавлен параметр title="Комментарии...". Правда, к сожалению, NN4 не поддерживает эту возможность (это можно поправить, см. пункт 5.8), а IE поддерживает ее не везде (например, не показывает title для <select>). Поэтому не следует возлагать больших надежд на то, что пользователь узнает из title информацию, оказавшуюся для него неочевидной без title.

Параметр alt по стандарту предназначен для описания текста, который должен быть отображен вместо картинки, если браузер не может или не хочет ее показывать. То, что IE и NN4 показывают alt как всплывающую подсказку - их самодеятельность. Для полной совместимости рекомендуется прописывать в <img>

оба параметра - и alt, и title - с одинаковыми значениями.

С <input type="image"> ситуация еще более запутанна - NN4 показывает для нее в качестве подсказки не alt, а значение параметра name. Поэтому делаем так:

Hаконец, если вам не нужно, чтобы комментарий показывался ни в Mozilla/NN6, ни в IE, и в то же время вы хотите, чтобы параметр alt был осмысленным, нужно прописать в <img>:

alt="Описание картинки" title=""

В NN4 приведенный код не сработает и комментарий будет показываться - но это не столь уж большое зло.

Чтобы при нажатии на определенную

Стандарт позволяет пользоваться картами изображений. Полный формат описания карт поищите в стандарте. Обратите внимание, что при описании самой карты пишется просто "имя_карты", а при описании картинки пишется "#имя_карты", то есть здесь уже ссылка.

HomeSite новейших версий содержит неплохой встроенный редактор карт.

Также можно воспользоваться специальными программами для разметки карт:

Mapedit	- http://www.boutell.com/mapedit/
Map This	- http://galadriel.ecaetc.ohio-state.edu/tc/mt
Web Hotspots	- http://www.hooked.net/users/1auto
HoTTmapP	- http://www.tikipub.com/jc/
Embellish/2 v2.02	- http://hobbes.nmsu.edu/os2 далее по ссылкам

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

Как сделать таблицу с большим

Начертить схему таблицы.

Провести до конца пунктирными линиями не доходящие до краев перегородки.

Написать HTML-код таблицы, представив, что пунктирные линии - это сплошные.

Содержимое и параметры фона и выравнивания ячеек с пунктирными линиями прописать в <td> той ячейки, что находится сверху и слева.

Добавить в <td> каждой такой ячейки rowspan и colspan с параметрами, равными количеству ячеек, объединяемых по вертикали и горизонтали соответственно.

Удалить пустые пары <td></td>.

Как можно сделать одинаковые столбцы в таблице?

По стандарту можно использовать для этого теги <colgroup> и <col>

К сожалению, NN4 не понимает <col> и <colgroup>, но для него можно поставить в <table> параметр cols="NNN" (!), где NNN - число столбцов.

<colgroup> удобно применять, когда 100 делится нацело на число столбцов:

Если число столбцов не является делителем 100, придется использовать <col>:

Или так:

И, наконец, самое надежное в плане совместимости с устаревшими браузерами решение - указать в явном виде width="NN%" в каждом <td> (<th>) первого ряда таблицы.

Чтобы HTML-документ выводился

По стандартам HTML 4.0, для встраивания внешних HTML-документов нужно использовать тег <iframe>. Он имеет такие атрибуты:

src="...URL..." - URL встраиваемого документа

name="..." - имя для того, чтобы прописывать его, как target для ссылок, которые должны будут загружаться в этот iframe.

width="WWW" - ширина

height="HHH" - высота

marginwidth="XXX" - отступы содержимого iframe от левого и правого края

marginheight="YYY" - то же, но от верхнего и нижнего края

scrolling="yes|no|auto" - задает наличие или отсутствие полосы прокрутки. При значении auto полоса прокрутки появляется при необходимости, если встраиваемый документ не влезает в размер iframe. В общем случае, отключать скроллинг не рекомендуется.

frameborder="0|1" - задает наличие (1) или отсутствие (0) рамки. По умолчанию рамка присутствует.

align - полностью аналогичен параметру align в <img>.

Тег <iframe> обязательно требует закрывающего тега (</iframe>). Внутри <iframe>...</iframe> прописывается контент для браузеров, не поддерживающих этот тег. Например:

NN4 не поддерживает <iframe>, но иногда это поправимо, см. пункт 5.7.

И еще - <iframe> лучше не злоупотреблять, особенно для ответственных элементов странички. В 90% случаев то, что делают с помощью <iframe>, можно сделать другими способами - см. пункты 3.13, 8.7.

Чтобы в Internet Explorer

Hужно создать файл «favicon.ico» стандартного для Windows формата «*.ICO» размером 16x16 пикселов и поместить его в корень сайта.

Кроме того, нужно прописать в <head>:

Как сделать информацию о

Вместо UIN подставить собственно сам номер. N - вариант индикатора. Их что-то около 17-ти (1-17)

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)