faq of Ru.html.Chainik


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

2. Вопросы от незнания HTML

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

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

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

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

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

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

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

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

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

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

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

Левая угловая скобка: (<) - &lt;
Правая угловая скобка: (>) - &gt;
Двойные кавычки: (") - &quot;
Амперсант: (&) - &amp;

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

&nbsp; - неразрывный пробел
&copy; - знак копирайта: (©)
&laquo; - левая двойная угловая кавычка: («)
&raquo; - правая двойная угловая кавычка: (»)
&reg; - знак регистрированной торговой марки: (®)
&deg; - знак градуса: (°)
&para; - знак параграфа: ()
&sect; - фигурный знак параграфа: (§)
&plusmn; - знак плюс-минус: (±)
&middot; - точка в середине строки (по вертикали): (·)
&micro; - греческая буква "мю" для обозначения единиц измерения: (µ)
&curren; - "краб", обобщенный знак денежной единицы (кружок с четырьмя лапками): (¤)
&#8211; - короткое тире: ()
&#8212; - длинное тире: ()
&#8220; - верхние открывающие кавычки-"лапки": ()
&#8221; - верхние закрывающие кавычки-"лапки": ()
&#8222; - нижние кавычки-"лапки": ()
&#8224; - латинский крест: ()
&#8225; - двойной крест: ()
&#8226; - сплошной кружок в середине строки: ()
&#8230; - многоточие: ()
&#8240; - знак промилле (процент с дополнительным ноликом): ()
&#8364; - знак валюты "евро": ()
&#8470; - знак номера: ()
&#8482; - торговая марка: ()

2.4. Как правильно прописывать 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&amp;y=Y"><img src="img.cgi?a=1&b=2" alt="" /></a>

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

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

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

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

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

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

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

  1. в заголовок документа первой ставим строку
    <?xml version="1.0" encoding="...кодировка вашей странички..."?>
    Например:
    <?xml version="1.0" encoding="KOI8-R"?>
  2. После строки <?xml...?> ставим такой DTD:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. В тег <html> ставим такие параметры:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    Если основной язык вашей странички не русский, то заменяем "ru" на сокращенное обозначение вашего языка: "en" - английский, "de" - немецкий и т.д.
  4. Все теги должны быть корректно закрыты. Стандарт HTML4 допускал, чтобы не закрывались такие теги, как <p>, <option>, <li>, <dd> и т.п. В XHTML это недопустимо.
  5. Теги, которые не имеют парных закрывающих тегов (такие, как <link>, <meta>, <img>, <input>, <br>, <hr>, <col>, <param> и т.п.), должны в конце перед « > » иметь пробел и косую черту: « />», например, <br />, <hr /> и т.д.
  6. Параметры, которые в HTML4 не имеют значений (compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer), должны иметь значение, равное самому параметру. Например:
    <ul compact="compact">
    
    <option selected="selected">
    
    <hr noshade="noshade" />
2.8. Как вставлять комментарии в HTML?
<!-- это комментарий -->
<!-- это тоже,
     только занимает больше одной линии -->

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

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

2.9. Я, к сожалению, употребил тег, который поддерживается только в браузере XXX. Что же увидят пользователи других браузеров?

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

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

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

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

2.11. Чтобы после открытия моей странички через промежуток времени загружалась другая страничка, или грузился не index.html, а main.html?

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

<meta http-equiv="Refresh" content="5; URL=http://rhc.msk.ru/" />

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

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

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

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

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

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

Для этого нужно прописать в 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" />
2.14. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения по e-mail?
<a href="mailto:email@name.ru">ссылка</a>

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

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

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

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

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

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

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

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

<a href="newframes.html" target="...">ссылка</a>
2.17. Чтобы нельзя было изменять размер кадра?
<frame name="test" noresize="noresize" />
2.18. Чтобы не было видно границ кадров?
<frameset border="0">
<frame name="test" src="/mypage.html" frameborder="0" />
2.19. Чтобы изменить размер, оформление и расположение полосы прокрутки (скроллбара) или вообще убрать ее?

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

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

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

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

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

2.20. Чтобы выровнять табличку по центру документа? И почему в NN4 и Opera не работает <table align="center">?

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

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

<div align="center">
  <table>
...
  </table>
</div>
2.21. Чтобы разместить текст, картинку или табличку в центре экрана?

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

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

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle">
Текст, картинка или табличка в центре экрана
    </td>
  </tr>
</table>
2.22. Чтобы между картинками не было промежутков?

Здесь мы вынуждены приспосабливаться к браузерам, которые не следуют стандарту и показывают 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 ... />
2.23. Чтобы убрать промежутки между ячейками в таблице, которая получилась в результате разрезки целой картинки на куски?

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

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>

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

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

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

<img border="0" ... />
2.25. Чтобы при наведении на ссылку, картинку или другой объект показывался комментарий? И почему Mozilla/NN6 не отображает как комментарий параметр alt в <img> и <input type="image">? Как сделать, чтобы alt не показывался как комментарий в IE?

Для отображения всплывающих подсказок в любой элемент 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 приведенный код не сработает и комментарий будет показываться - но это не столь уж большое зло.

2.26. Чтобы при нажатии на определенную область картинки происходил переход на один адрес, а при нажатии в другой области - на другой?

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

<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 далее по ссылкам

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

2.27. Как сделать таблицу с большим количеством произвольно объединенных по вертикали и горизонтали ячеек?

  1. Начертить схему таблицы.
  2. Провести до конца пунктирными линиями не доходящие до краев перегородки.
  3. Написать HTML-код таблицы, представив, что пунктирные линии - это сплошные.
  4. Содержимое и параметры фона и выравнивания ячеек с пунктирными линиями прописать в <td> той ячейки, что находится сверху и слева.
  5. Добавить в <td> каждой такой ячейки rowspan и colspan с параметрами, равными количеству ячеек, объединяемых по вертикали и горизонтали соответственно.
  6. Удалить пустые пары <td></td>.

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

По стандарту можно использовать для этого теги <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>) первого ряда таблицы.

2.29. Чтобы HTML-документ выводился в некоторую область внутри другого HTML-документа (например, в <div> или в ячейку таблицы)?

По стандартам 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.

2.30. Чтобы в Internet Explorer и Mozilla при заходе на мой сайт и при добавлении его в Favorites в адресной строке и меню показывалась не стандартная, а нарисованная мной иконка?

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

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

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
2.31. Как сделать информацию о пользователе ICQ, чтобы около номера был показатель присутствия в сети?
<img alt="ICQ status" src="http://online.icq.com/scripts/online.dll?icq=UIN&amp;img=N" />

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


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


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


главная :: общий раздел FAQ :: форум :: контакты