правила · список вопросов · преамбула · обратная связь
Нужно соблюдать баланс между использованием новых возможностей и поддержкой устаревших, но все еще актуальных версий браузеров. С этой точки зрения «золотая середина» - стандарт XHTML 1.0 Transitional. Странички, сверстанные с соблюдением этого стандарта, будут гарантированно корректно отображаться во всех будущих клиентах, понимающих XML, но, в то же время, в рамках этого стандарта поддерживаются устаревшие, но все еще необходимые для правильного отображения во многих браузерах теги и атрибуты.
Все примеры HTML-кода в настоящем FAQ даны именно с учетом требований стандарта XHTML 1.0 Transitional.
Есть важное исключение - некоторые теги и параметры, указанные в нескольких пунктах FAQ, специфичны для NN4 или IE; такие теги или параметры, если это возможно, должны вставляться с помощью SSI, PHP или ASP только для соответствующего значения поля User-Agent в HTTP-заголовке. После описания таких параметров будет стоять обозначение (!).
Раньше считалось, что это безразлично. Но с приходом XHTML на этот вопрос появился однозначный ответ - все теги, атрибуты и предопределенные значения пишем в нижнем регистре.
entities - это комбинации знака «&» и буквенного или цифрового кода после нее,
предназначенные для замещения символов, которые не могут встречаться в «чистом»
виде в HTML-тексте, например, символа «<». entities применяются в тексте за
пределами тегов, а также в значениях параметров, в том числе input value=,
img alt=, a href= и т.п.
Например, чтобы на кнопке submit были три угловых
скобки, пишем <input type="submit" value=">>>" />
entities должны быть закончены символом «;»
Обязательны к употреблению следующие entities:
Левая угловая скобка: (<) - <
Правая угловая скобка: (>) - >
Двойные кавычки: (") - "
Амперсант: (&) - &
Кроме того, полезно знать такие entities:
- неразрывный пробел
© - знак копирайта: (©)
« - левая двойная угловая кавычка: («)
» - правая двойная угловая кавычка: (»)
® - знак регистрированной торговой марки: (®)
° - знак градуса: (°)
¶ - знак параграфа: (¶)
§ - фигурный знак параграфа: (§)
± - знак плюс-минус: (±)
· - точка в середине строки (по вертикали): (·)
µ - греческая буква "мю" для обозначения единиц измерения: (µ)
¤ - "краб", обобщенный знак денежной единицы (кружок с четырьмя лапками): (¤)
– - короткое тире: (–)
— - длинное тире: (—)
“ - верхние открывающие кавычки-"лапки": (“)
” - верхние закрывающие кавычки-"лапки": (”)
„ - нижние кавычки-"лапки": („)
† - латинский крест: (†)
‡ - двойной крест: (‡)
• - сплошной кружок в середине строки: (•)
… - многоточие: (…)
‰ - знак промилле (процент с дополнительным ноликом): (‰)
€ - знак валюты "евро": (€)
№ - знак номера: (№)
™ - торговая марка: (™)
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.
Обязательно. Поверьте, тут экономия на спичках, но код без кавычек не только не удовлетворяет никаким стандартам, но и просто выглядит неряшливо.
Да. Это требует стандарт, да и здравый смысл - многие отключают картинки, а
некоторые юзеры используют текстовые или даже голосовые браузеры. Если картинка
не несет никакой смысловой нагрузки (элемент дизайна, «распорка» и т.п.), то
тогда ставим в тег <img> значение alt="".
Зачем - см. п. 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" - немецкий и т.д.<p>, <option>,
<li>, <dd> и т.п.
В XHTML это недопустимо.<link>, <meta>,
<img>, <input>, <br>, <hr>,
<col>, <param> и т.п.), должны в конце перед « > »
иметь пробел и косую черту: « />», например,
<br />, <hr /> и т.д.compact, nowrap, ismap,
declare, noshade, checked, disabled,
readonly, multiple, selected, noresize,
defer), должны иметь значение, равное самому параметру. Например:
<ul compact="compact">
<option selected="selected">
<hr noshade="noshade" /><!-- это комментарий -->
<!-- это тоже,
только занимает больше одной линии -->
Не допускается пробел между «<!» и «--»,
но разрешен пробел между «--» и «>».
Типичная ошибка - использование цепи дефисов («---») в пределах комментария.
Нужно избегать помещения двух или более смежных дефисов внутри комментариев.
Довольно частая проблема - использование оператора уменьшения на единицу в
блоке JavaScript (myVar--), вместо этого используйте оператор
«-= » (myVar-=1)
В стандарте можно прочитать, что пользовательские агенты должны игнорировать неизвестные им теги. Браузеры так и делают, показывая в обычном режиме текст и HTML-код, заключенный внутри непонятных им тегов.
Один из вариантов <meta>, определяющий ключевые слова или краткое описание
документа. Hекоторые поисковые роботы обращают на них внимание, а некоторые не
обращают. Поисковый робот, знаете ли, тоже нам ничем не обязан.
Слова - <meta name="keywords" content="слово слово слово ..." />
Описание - <meta name="descripton" content="описание документа" />
Если вы имеете доступ к настройкам сервера, то используйте HTTP-заголовок
Refresh. Если нет, то можно воспользоваться одним из вариантов <meta>.
Интересно отметить, что в подопытном Lynx'е наблюдаются неровности, если адрес
перехода задан относительным адресом.
<meta http-equiv="Refresh" content="5; URL=http://rhc.msk.ru/" />
Цифра - время ожидания, URL - адрес перехода (без кавычек).
Вообще говоря, никакой браузер не обязан вебмастеру показывать жирные или курсивные шрифты. Например, у консольного браузера их нет. Это уже элементы верстки, а HTML предназначен не для верстки, а для логической разметки.
<b> и <i> - тэги физического выделения, то есть вы принудительно заставляете
выделять текст каким-то видом шрифта. В HTML4 и XHTML эти теги объявлены
устаревшими. <strong> и <em> - тэги логического выделения.
Каждый браузер может
по-своему выделить текст внутри этих тэгов, так, как удобно его пользователю.
<em> означает выделение, а <strong> означает усиленное выделение.
Резюме: если вам нужно выделить текст, пользуйтесь <strong> и <em>.
Если вам нужно не выделить текст, а физически сделать его жирным или курсивом,
пользуйтесь <span> в сочетании с CSS.
Для этого нужно прописать в HTTP-response со стороны сервера параметры
Expires, Pragma и Cache-control.
Если вы не имеете доступа к настройкам сервера, то добавьте в <head> такие
<meta>:
<meta http-equiv="Expires" content="Thu, Jan 1 1970 00:00:01 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<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>
<frame name="test" noresize="noresize" />
<frameset border="0">
<frame name="test" src="/mypage.html" frameborder="0" />
Скроллбар генерится модулем GUI операционной системы, и, соответственно, не может быть изменен с помощью HTML, CSS или JavaScript-кода.
Убрать скроллбар можно, прописав в стили для <body> параметры:
position:fixed;overflow:none;
Hо делать так категорически не рекомендуется - при низком разрешении экрана у клиента часть вашей странички окажется недоступной.
Если документ находится во фрейме, то скроллбар появляется только тогда, когда
документ не умещается в отведенном ему месте. Если вы не хотите появления
скроллбара даже в этом случае, то добавьте в <frame> параметр scrolling="no",
но, опять-таки, лучше этого избегать.
В IE5.5+ можно изменять расцветку и оформление скроллбара, но это находится за рамками стандартов HTML и CSS и посему не рекомендовано к применению.
<table align="center"> - конструкция принципиально неверная. Параметр
align в <table> предназначен для того,
чтобы задать обтекание таблицы текстом, так же, как аналогичный параметр в <img>.
Правильно так:
<div align="center">
<table>
...
</table>
</div>
Человек, который задает такой вопрос, не понимает, что такое 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 не должны показываться.
Первое решение с таблицей. Здесь есть надежда, что пустоты, не относящиеся к ячейкам, показаны не будут.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img ... /></td>
<td><img ... /></td>
</tr>
</table>
Второе решение тоже обходит противоестественные склонности браузеров. Картинки описываются без промежутков между тегами:
<img ... /><img ... /><img ... /><br /><img ... /><img ... /><img ... />
Пропишите в таблице параметры
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> тоже должны быть вставлены без
пробелов:
<td><a href="..."><img ... /></a></td>
И еще раз проверьте, правильно ли вы нарезали картинки и указали их размеры.
Точно так же, как убирают любую другую рамку вокруг любой другой картинки:
<img border="0" ... />
Для отображения всплывающих подсказок в любой элемент HTML может быть добавлен
параметр title="Комментарии...". Правда, к сожалению, NN4 не поддерживает эту
возможность (это можно поправить, см. пункт 5.8), а IE поддерживает ее не везде
(например, не показывает title для <select>). Поэтому не следует возлагать
больших надежд на то, что пользователь узнает из title информацию, оказавшуюся
для него неочевидной без title.
Параметр alt по стандарту предназначен для описания текста, который должен быть
отображен вместо картинки, если браузер не может или не хочет ее показывать.
То, что IE и NN4 показывают alt как всплывающую подсказку - их
самодеятельность. Для полной совместимости рекомендуется прописывать в <img>
оба параметра - и alt, и title - с одинаковыми значениями.
С <input type="image"> ситуация еще более запутанна - NN4 показывает для нее в
качестве подсказки не alt, а значение параметра name. Поэтому делаем так:
<input type="image" src="myimg.gif" width="XXX" height="YYY" border="0"
name="Комментарий" alt="Комментарий" title="Комментарий" />
Hаконец, если вам не нужно, чтобы комментарий показывался ни в Mozilla/NN6, ни
в IE, и в то же время вы хотите, чтобы параметр alt был осмысленным, нужно
прописать в <img>:
alt="Описание картинки" title=""
В NN4 приведенный код не сработает и комментарий будет показываться - но это не столь уж большое зло.
Стандарт позволяет пользоваться картами изображений. Полный формат описания
карт поищите в стандарте. Обратите внимание, что при описании самой карты
пишется просто "имя_карты", а при описании картинки пишется
"#имя_карты", то есть здесь уже ссылка.
<img src="адрес_картинки" usemap="#имя_карты" />
<map name="имя_карты">
...
</map>
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 далее по ссылкам |
Однако, если нет серьезной необходимости (например, географическая карта или сложная организационная диаграмма), то лучше разбить картинку на отдельные куски и повесить на них нормальные ссылки, поскольку неграфические браузеры эмулируют карту довольно сложным и неудобным для пользователя образом.
<td> той ячейки, что находится сверху и слева.<td> каждой такой ячейки rowspan и colspan с параметрами, равными количеству ячеек, объединяемых по вертикали и горизонтали соответственно.<td></td>.По стандарту можно использовать для этого теги <colgroup> и <col>
К сожалению, NN4 не понимает <col> и <colgroup>,
но для него можно поставить в <table> параметр cols="NNN" (!),
где NNN - число столбцов.
<colgroup> удобно применять, когда 100 делится нацело на число столбцов:
<table>
<!-- таблица с 5 столбцами -->
<colgroup span="5" width="20%"></colgroup>
<tr>
...
</table>
Если число столбцов не является делителем 100, придется использовать <col>:
<table>
<!-- таблица с 3 столбцами -->
<colgroup width="33%">
<col />
<col width="34%" />
<col />
</colgroup>
<tr>
...
</table>
Или так:
<table>
<!-- таблица с 7 столбцами -->
<colgroup width="14%">
<col span="2" />
<!-- параметр span означает две одинаковые колонки -->
<col width="15%" />
<col span="2" />
<col width="15%" />
<col />
</colgroup>
<tr>
...
</table>
И, наконец, самое надежное в плане совместимости с устаревшими браузерами
решение - указать в явном виде width="NN%" в каждом <td>
(<th>) первого ряда таблицы.
По стандартам 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> прописывается контент для браузеров, не
поддерживающих этот тег. Например:
<iframe name="myIframe" src="myiframe.html" width="X" height="Y">
Ваш браузер не поддерживает вложения HTML-документов.
Нажмите <a href="myiframe.html" target="myIframe">сюда</a>,
чтобы увидеть документ в новом окне.
</iframe>
NN4 не поддерживает <iframe>, но иногда это поправимо, см. пункт
5.7.
И еще - <iframe> лучше не злоупотреблять, особенно для ответственных элементов
странички. В 90% случаев то, что делают с помощью <iframe>, можно сделать
другими способами - см. пункты 3.13, 8.7.
Hужно создать файл «favicon.ico» стандартного для Windows формата «*.ICO» размером 16x16 пикселов и поместить его в корень сайта.
Кроме того, нужно прописать в <head>:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<img alt="ICQ status" src="http://online.icq.com/scripts/online.dll?icq=UIN&img=N" />
Вместо UIN подставить собственно сам номер. N - вариант индикатора. Их что-то
около 17-ти (1-17)
правила · список вопросов · преамбула · обратная связь · наверх
По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)