Основные возможности HTML | Как добавить стиль

  Дополнительные возможности

Дэйв Рэгетт, 29 августа 2000 г.

Изучив основные возможности HTML, перейдем к более сложным. Сейчас Вы научитесь:

• использовать принудительные переносы строк
• использовать неразрывные пробелы
• использовать коды для специальных символов
• создавать ссылки на фрагменты текста
• использовать заранее отформатированный текст
• размещать текст вокруг изображений
• определять в изображениях области ссылок
• создавать таблицы
• использовать roll-overs и другие приемы

p.s. Для поддержания порядка в разметке рекомендую использовать HTML Tidy.

Принудительные разрывы строк

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

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

Элемент br не имеет конечного тега. Вообще элементы, не имеющие конечных тегов, называются пустыми.

Использование неразрывных пробелов

Браузеры автоматически разбивают текст, чтобы он соответствовал полям. Разрывы строк производятся в местах пробелов. Иногда необходимо запретить разрыв строки между определенными словами. Например, между словами названия фирмы - "Coke Cola". Для этого вместо пробела следует использовать комбинацию символов  , например:

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

Не следует использовать несколько неразрывных пробелов подряд для смещения текста. Смещение следует организовывать с помощью правил стилей.

Коды специальных символов

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

Обратите внимание, что в HTML 4.0 для обозначения торговой марки определяется комбинация ™, но она не так широко поддерживается, как ™

Другие полезные комбинации:

Кроме того, существуют комбинации для символов с диакритическими знаками и различных других символов набора Latin-1:

Для греческих и математических символов, определенных в Unicode, можно использовать числовые ссылки. Более подробно это обсуждается в спецификации HTML 4. Обратите внимание, что имена комбинаций не распознаются в Navigator 4, поэтому рекомендуется использовать числовые ссылки.

Ссылки на фрагменты Web-страниц

Представьте себе, что Вы написали длинную Web-страницу с оглавлением в начале. Как сделать пункты оглавления ссылками на соответствующие разделы?

Предположим, что каждый раздел начинается с заголовка, например:

<h2>Local Night Spots</h2>

Сделать заголовок целью гипертекстовой ссылки можно, используя следующий код: lt;a name=идентификатор> .... </a>

<h2><a name="night-spots">Local Night Spots</a></h2>

Атрибут name определяет имя, используемое для идентификации цели ссылки, в данном случае: "night-spots". В содержание теперь можно включить следующую ссылку:

<ul>
  ...
  <li><a href="#night-spots">Local Night Spots</a></li>
  ...
</ul>

Символ # перед именем цели обязателен. Если цель ссылки находится в другом документе, поместите web-адрес этого документа перед символом #. Например, если документ расположен по адресу "http://www.bath.co.uk/", ссылка должна быть такой:

<a href="http://www.bath.co.uk/#night-spots">Local Night Spots</a>

В будущем появится возможность определения целей ссылок без элемента <a>. Новый метод гораздо проще, поскольку нужно будет всего лишь добавить в заголовок атрибут id, например:

<h2 id="night-spots">Local Night Spots</h2>

Этот метод не работает для 4-го поколения браузеров или еще более старых браузеров, поэтому его следует использовать осторожно!

Форматированный текст

Одним из преимуществ Web является автоматическое разбиение текста на строки в соответствии с текущим размером окна. Однако иногда возникает необходимость избежать этого. Например, в случае вывода на экран кода программы. Это делается с помощью элемента pre. Например:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

который представляется в следующем виде:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Цвета текста и фона устанавливаются с помощью таблицы стилей. Обратите внимание, что все разрывы строк и пробелы генерируются точно так же, как они представлены в коде HTML. Исключением является перевод строки непосредственно после начального тега <pre> и непосредственно перед конечным тегом </pre>, которые не учитываются. Это означает, что следующие два примера будут генерироваться идентично:

<pre>форматированный текст</pre>

<pre>
форматированный текст
</pre>

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

<style type="text/css">
  pre { color: green; background: white; font-family: monospace; }
</style>

При установке цвета текста рекомендуется также установить и цвет фона. Это гарантирует отсутствие ситуаций, когда цвет фона трудно отличить от цвета текста. Вместо установки цвета фона для элемента pre можно устанавливать его для элемента body, например:

<style type="text/css">
  body { color: black; background: white; }
  pre { color: green; font-family: monospace; }
</style>

Размещение текста вокруг изображений

В HTML можно выбрать, будет ли данное изображение считаться частью текущей строки текста или будет прикреплено к правому или левому полю. Это определяется атрибутом align. Если для атрибута align установлено значение left, изображение прикрепляется к левому полю. Если установлено значение right, - к правому. Например:

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="left"> Этот текст обтекает изображение справа.</p>

Это будет представляться так:

Этот текст обтекает изображение справа.

Вот как используется align="right"

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="right"> Этот текст обтекает изображение слева.</p>

Это будет представляться так:

Этот текст обтекает изображение слева.

Чтобы генерация текста продолжалась под прикрепленным изображением, можно использовать элемент <br clear=all>, например:

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="right"> Этот текст начинается слева от изображения.
<br clear="all">
Здесь начинается новая строка, расположенная под прикрепленным изображением.</p>

Это будет представляться так:

Этот текст начинается слева от изображения.
Здесь начинается новая строка, расположенная под прикрепленным изображением.

Области изображений как ссылки

Следующее изображение представляет собой как бы карту нескольких Web-страниц. Чтобы перейти на соответствующую страницу, нужно щелкнуть по кружку.

Такая карта размечается следующим образом:

<p align="center">
   <img src="pages.gif" width="384" height="245"
      alt="карта сайта" usemap="#sitemap" border="0">
   <map name="sitemap">
      <area shape="circle" coords="186,44,45" 
         href="Overview.html" alt="Начало работы">
      <area shape="circle" coords="42,171,45" 
         href="Style.html" alt="Немного стиля">
      <area shape="circle" coords="186,171,45"
         alt="Дизайн Web-страниц">
      <area shape="circle" coords="318,173,45"
         href="Advanced.html" alt="Углубленный курс HTML">
   </map>
</p>

Атрибут src элемента img определяет изображение "pages.gif". Атрибут usemap задает ссылку на элемент карты. Для этого используется Web-адрес, поэтому и используется символ #. Для атрибута border устанавливается значение "0", чтобы вокруг изображения не представлялась синяя граница.

Элемент map определяет, какие области изображения будут служить ссылками. Атрибут name соответствует атрибуту usemap элемента img и действует почти так же, как атрибут name элемента <a>. На практике элемент map должен находиться в том же файле, что и элемент img.

Элемент area используется для определения области изображения и связывания его с Web-адресом. Атрибут shape определяет форму области: "rect" (прямоугольник), "circle" (круг) или "poly" (многоугольник). Атрибут coords определяет координаты области в зависимости от формы.

• rect: координата x левого ребра, координата y верхнего ребра, координата x правого ребра, координата y левого ребра
• circle: координата x центра, координата y центра, радиус
• poly: x₁,y₁, x₂,y₂, ... x_n,y_n

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

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

      <area shape="circle" coords="186,44,50" nohref>
      <area shape="circle" coords="186,44,100" 
         href="Overview.html" alt="Начало работы">

Первый круг создает неактивную область в круге большего диаметра, создаваемом вторым элементом area. Чтобы неактивная область возымела действие, она должна быть указано до активной, иначе приоритет будет имтеь активная область.

Почему нужно использовать атрибут alt

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

Таблицы

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

Таблицы состоят из одной или нескольких строк ячеек. Вот простой пример:

Вот разметка для этой таблицы:

<table border="1">
<tr><th>Год</th><th>Продажи</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Элемент table служит контейнером таблицы. Атрибут border определяет толщину границы в пикселах. Элемент tr служит контейнером строки таблицы. Элементы th и td служат контейнерами для заголовков и ячеек данных соответственно.

Поля в ячейке

Увеличить поля во всех ячейках одновременно можно с помощью атрибута cellpadding для элемента table. Например, установим поля, равные 10 пикселам:

<table border="1" cellpadding="10">

это будет выглядеть так:

Расстояние между ячейками

Атрибут cellspacing определяет расстояние между ячейками. Установим расстояние между ячейками равным 10:

<table border="1" cellpadding="10" cellspacing="10">

Таблица будет выглядеть так:

Ширина таблицы

Ширину таблицы можно установить с помощью атрибута width. Значением его может быть либо ширина в пикселах, либо процентное значение, представляющее процент пространства между левым и правым полями. Например, становим ширину таблицы равной 80% расстояния между полями:

<table border="1" cellpadding="10" width="80%">

Таблица будет выглядеть так:

Выравнивание текста в ячейках

По умолчанию браузеры выравнивают текст в ячейках заголовков (th) по центру, а в ячейках данных (td) влево. Изменить выравнивание можно с помощью атрибута align, который может применяться к ячейке или к строке (элемент tr). Он может иметь значения "left" (влево), "center" (по центру) или "right" (вправо):

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Год</th><th>Продажи</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

Таблица будет выглядеть так:

Атрибут valign точно так же определяет вертикальное выравнивание содержимого ячейки. Он используется со значениями "top" (вверх), "middle"(посередине) или "bottom" (вниз) и может использоваться с любой ячейкой или строкой. По умолчанию содержимое ячеек заголовков (th) центрируется, а содержимое ячеек данных выравнивается по левому полю и по верху ячейки.

Пустые ячейки

Браузеры по-разному обрабатывают пустые ячейки. Сравните:

и

Последнее происходит, если ячейка пуста:

<td></td>

Чтобы этого избежать, поместите в нее неразрывный пробел:

<td>&nbsp;</td>

Ячейки, занимающие несколько строк или столбцов

Давайте дополним предыдущий пример, разделив продажи в северном и южном регионе:

Заголовок "Год" теперь занимает две строки, а заголовок "Продажи" - три столбца. Это достигается путем установки атрибутов rowspan и colspan соответственно. Вот разметка для этого примера:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Год</th><th colspan="3">Продажи</th></tr>
<tr align="center"><th>Север</th><th>Юг</th><th>Всего</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

Это можно упростить, воспользовавшись тем фактом, что браузеры не требуют конечных тегов для ячеек и строк таблицы:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Год<th colspan="3">Продажи
<tr align="center"><th>Север<th>Юг<th>Всего
<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M
<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M
</table>

Обратите внимание, что, поскольку заголовок "Год" занимает две строки, первый элемент th во второй строке располагается во втором столбце, а не в первом.

Таблицы без обрамления

Такие таблицы широко используются для форматирования страниц и создания на них сетки. Для этого нужно только добавить атрибут border="0" и cellspacing="0" в элемент table:

Это достигается с помощью следующей разметки:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Год</th><th>Продажи</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Если Вы не укажете атрибут cellspacing, между ячейками будет пробел, как показано ниже:

Использование в таблицах цветов

На этой странице для установке разного цвета фона ячеек заголовков и данных используется таблица стиля. Вот какие правила стиля я использовал:

table {
  margin-left: -4%
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

Две последние строки устанавливают цвет фона для ячеек th и td в соответствии с заданными значениями красного/зеленого/синего цветов. Числа должны лежать в диапазон от 0 до 255 (полностью насыщенный цвет).

По-другому установить цвет фона можно с помощью атрибута bgcolor. Такой прием работает почти во всех браузерах и не требует поддержки таблиц стилей. Сначала следует определить шестнадцатеричные значения красного, зеленого и синего компонентов цвета, который Вы хотите использовать. В руководстве по стилям имеется конвертер.

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Год</th>
    <th bgcolor="#CCCC99">Продажи</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">$18M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">$25M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">$36M</td>
  </tr>
</table>

Доступ к таблицам

Если Вы не видите таблицы, трудно понять, о чем в ней идет речь. Имеет смысл указать информацию о назначении и структуре таблицы. Элемент caption позволяет указать заголовок и разместить его над или под таблицей. Элемент caption должен располагаться после элемента tr первой строки.

Эта таблица задается следующей разметкой:

<table border="1" cellpadding="10" width="80%">
<caption>Предполагаемый доход от продаж по годам</caption>
<tr align="center">
  <th>Год</th><th>Продажи</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

Вот та же самая таблица, но в элемент caption добавлен атрибут align="bottom":

Атрибут summary элемента table следует использовать для описания структуры таблицы для тех, кто не сможет эту таблицу просмотреть. Например: "в первом столбце даны годы, а во втором - доход за этот год".

<table summary="в первом столбце даны годы, а во втором - доход за этот год">

Определение отношений между ячейками заголовков и данных

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

Для этого нужно снабдить каждую ячейку заголовка/данных аннотацией. Проще всего добавить в ячейки заголовков атрибут scope. Он может использоваться со следующими значениями:

• row: Ячейка содержит заголовок для оставшейся части текущей строк.
• col: Ячейка содержит заголовок для оставшейся части текущего столбца.

Применим это к нашей таблице:

<table border="1" cellpadding="10" width="80%">
<caption>Предполагаемый доход от продаж по годам</caption>
<tr align="center">
  <th scope="col">Год</th>
  <th scope="col">Продажи</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

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

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

<th abbr="W3C">World Wide Web Consortium</th>

Roll-Overs и другие приемы

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

Roll-Overs

Чаще всего roll-over представляет собой изображение, служащее гипертекстовой ссылкой. Когда указатель мыши попадает на это изображение, оно изменяется, чтобы привлечь внимание к ссылке. Например, можно добавить эффект свечения, тень или просто изменить цвет фона. Вот пример:

<script type="text/javascript">
if (document.images)
{
    image1 = new Image;
    image2 = new Image;
    image1.src = "enter1.gif";
    image2.src = "enter2.gif";
}

function chgImg(name, image)
{
    if (document.images)
    {
        document[name].src = eval(image+".src");
    }
}
</script>

...

<a href="/" onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.gif" border="0" alt="Входите, если рискнете!"></a>

и вот как это выглядит...

Я создал эти изображения с помощью бесплатного графического редактора, добавив эффект горячего воска и тень. С помощью поисковых машин в Web можно найти множество советов и бесплатных картинок.

Баннеры

Если Ваш сайт имеет несколько спонсоров, можно использовать циклическую смену баннеров всех спонсоров по очереди. Прежде всего следует создать баннер для каждого спонсора. Все изображения должны быть одного размера. Соответствующие URL изображений и сайтов затем помещаются в массивы с именами adImages и adURLs, определенные в начале скрипта. Элемент img для каждой ссылки должен инициализироваться первым изображением из массива. Цикл начинается с помощью события onload в элементе body.

<html>
<head>
<title>циклические баннеры</title>
<script type="text/javascript">
if (document.images)
{
    adImages = new Array("hosts/mit.gif",
                "hosts/inria.gif", "hosts/keio.gif");
    adURLs = new Array("www.lcs.mit.edu",
                "www.inria.fr", "www.keio.ac.jp");
    thisAd = 0;
}

function cycleAds()
{
    if (document.images)
    {
        if (document.adBanner.complete)
        {
            if (++thisAd == adImages.length)
                thisAd = 0;

            document.adBanner.src = adImages[thisAd];
        }
    }

    // смена баннера каждые 3 секунды
    setTimeout("cycleAds()", 3000);
}

function gotoAd()
{
    document.location.href = "http://" + adURLs[thisAd];
}
</script>
</head>
<body onload="cycleAds()">
...

<a href="javascript:gotoAd()"><img name="adBanner"
src="hosts/mit.gif" border="0" alt="Our sponsors"></a>

Примечание: рекомендую проверить, действительно ли все изображения имеют одинаковую высоту и ширину. Можно также установить атрибуты width и height для элемента img, чтобы обеспечить одинаковый размер всех изображений.

А что, если браузеры не поддерживают скрипты?

Содержимое элемента noscript отображается, только если браузер не поддерживает скрипты. Он должен использоваться, если Вы хотите дать людям доступ к информации, которая в противном случае была бы им недоступна, если браузер не поддерживает скрипты. Предположим, Вы хотите сделать ссылки на спонсоров в текстовом виде:

<noscript>
Our sponsors: <a href="http://www.lcs.mit.edu/">MIT<,
<a href="http://www.inria.fr/">INRIA</a>, and
<a href="http://www.keio.ac.jp/">Keio University</a>.
</noscript>

Множество бесплатной информации о скриптах можно найти в помощью поисковых машин.

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

Рекомендация W3C HTML 4.0 является нормативной спецификацией HTML. Однако это техническая спецификация. Источником менее специализированной информации могут быть книги по HTML, например "Raggett on HTML 4", опубликованная в 1998 издательством Addison Wesley. См. также книгу "Beginning XHTML", опубликованную в 2000 году издательством Wrox Press, в которой вводится переформулировка W3C HTML как приложения XML. XHTML 1.0 является Рекомендацией W3C.

Удачи и пишите!

Дейв Рэгетт <dsr@w3.org>

Copyright  ©  2000 W3C ^® (MIT, INRIA, Keio ), С сохранением всех прав. Применяются все правила W3C, связанные с ответственностью, торговыми марками, использованием документов и лицензированием программного обеспечения. Ваше взаимодействие с сайтом W3C соответствует нашим заявлениям о конфиденциальности всех пользователей и членов консорциума замечаниям о конфиденциальности.