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

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

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

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

• использовать принудительные переносы строк
• использовать неразрывные пробелы
• использовать коды для специальных символов
• создавать ссылки на фрагменты текста
• использовать заранее отформатированный текст
• размещать текст вокруг изображений
• определять в изображениях округа ссылок
• создавать таблицы
• использовать 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="/img/site/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("/img/site/mit.gif",
 "/img/site/inria.gif", "/site/img/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="/img/site/mit.gif" border="0" alt="Our sponsors"></a>

Наши спонсоры:

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

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

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

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

Множество безвозмездной информации о скриптах разрешено найти в подмогой поисковых машин.