Гиперссылки

Для связи различных документов HTML предусматривает использование ссылок. Сам термин HTML (Hyper Text Markup Language) подразумевает их широкое использование. Для реализации ссылок в HTML используется тег <a> … </a>, который, как и большинство html-тегов, является контейнерным. Основным атрибутом этого тега является href, который собственно и содержит адрес ресурса, на который указывает ссылка. Внутри тега <a> … </a> помещается текст ссылки.

В ссылках может использоваться как относительная, так и абсолютная адресация. В случае абсолютной адресации атрибуту href присваивается абсолютный URL адрес ресурса:

<a href="http://server.com/doc3.htm">Ссылка на документ с абсолютным адресом http://server.com/doc3.htm</a>

В случае использования относительной адресации указывается путь к документу относительно текущей страницы:

<a href="doc1.htm">Ссылка на документ с относительным адресом doc1.htm</a>

Если в заголовочной части документа использован тег <base>, то отсчет будет вестись от адреса, заключенного в этом теге.

Помимо веб-страниц допускается ссылаться и на другие интернет-ресурсы: e-mail, ftp, Ghofe, WAIS, Telnet, newsgroup. Ниже приведен пример ссылки на адрес электронной почты:

<a href="mailto:[e-mail]">Ссылка на адрес электронной почты [e-mail]</a>

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

<ul> <li>Пункт 1</li> <ol> <li><a name="Пункт 1.1"></a>Пункт 1.1</li> <li>Пункт 1.2</li> </ol> <li><a name="Пункт 2"></a>Пункт 2</li> <ol type="i"> <li>Пункт 2.1</li> <li>Пункт 2.2</li> <li>Пункт 2.3</li> </ol> <li>Пункт 3</li> <ol type="I"> <li>Пункт 3.1</li> </ol> </ul>

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

<a href="#Пункт 1.1">Ссылка на пункт 1.1</a>

и

<a href="#Пункт 2">Ссылка на пункт 2</a>

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

<a href="doc2.htm#Пункт 3 Документа 1" >Ссылка на Пункт 3 Документа 1</a>

Использование рисунков в роли ссылок

В роли ссылок могут выступать и рисунки. Для этого сначала надо вставить рисунок с помощью тега <img>. У атрибута src данного тега устанавливается значение, соответствующее имени файла рисунка:

<img src="fig1.jpg">

Далее, рисунок «обертывается» в тег ссылки:

<a href="link2.htm"><img src="fig1.jpg" border="0"></a>

Карты изображений

Для задания конфигурации карты-изображения используется парный тег <map> … </map>. Он имеет единственный атрибут name, являющееся именем карты, которое указывается в атрибуте usemap тега рисунка, являющегося ее основой:

<map name="Map"> ………………………………………………… ………………………………………………… </map>

Внутри тега <map> задаются непосредственно области карты-изображения, которые задаются при помощи тега <area>. Тег <area> имеет следующие атрибуты: shape, coords, href, nonhref, target и alt. Допустимыми значениями атрибута shape являются: rect, circle, poly, default. По умолчанию устанавливается значение rect, задающий область в виде прямоугольника.

Значением атрибута coords являются координаты области, которые задаются в виде списка. Для прямоугольника (rect) задаются координаты левого верхнего и правого нижнего углов:

<area shape="rect" coords="-1,1,264,232" href="fromimagemap2.htm" alt="На Документ 2">

Для круга (circle) – координата центра и радиус:

<area shape="circle" coords="133,116,59" alt="Нет ссылки (nonhref)" nonhref>

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

cords="355,75,400,99,450,130,363,295,356,313,348,348,181,291,189, 281,260,291,305,290,316,248,317,224,318,197" href="fromimagemap3.htm" alt="На Документ 3">

Назначение атрибутов href, target и alt такое же, как и в случае тега <a>.

Ниже приведен пример создания карты изображения:

<img src="fig1.jpg" border="0" usemap="#Map"> <map name="Map"> <area shape="poly" cords="4,43,31,45,162,10,198,9,205,21,211, 63,221,204,233,258,199,268,132,275,72,290,48,249,33,149" href="#" alt="На Документ 1"> <area shape="poly" coords="262,20,270,20" href="#"> <area shape="poly" cords="215,18,268,18,350,38,313,186,300, 282,257,282,196,271,240,261,234,199,221,133,220,89" href="fromimagemap2.htm" alt="На Документ 2"> <area shape="poly" coords="355,75,400,99,450,130,363,295,356, 313,348,348,181,291,189,281,260,291,305,290,316, 248,317,224,318,197" href="fromimagemap3.htm" alt="На Документ 3"> </map>

Атрибут nonhref используется для того, чтобы указать, что область не является активной. Например, его можно использовать, чтобы сделать активной область в виде кольца.

<img src="fig2.gif" border="0" usemap="#Map2"> <map name="Map2"> <area shape="circle" coords="133,116,59" alt="Нет ссылки (nonhref)" nonhref> <area shape="circle" coords="133,117,89" href="fromimagemap1.htm" alt="На Документ 1"> </map>

13. CSS – КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ

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

Рис. 16. Коробочная модель форматирования (увеличить)

В качестве примера приведем форматирование двух абзацев текста при помощи стиля style1:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> <!-- .style1 { font-family: "Times New Roman", Times, serif; font-size: 24px; font-style: italic; font-weight: bold; background-color: #CCCCCC; text-align: left; padding: 50px; height: 200px; width: 400px; margin-top: 40px; margin-right: 80px; margin-bottom: 40px; margin-left: 80px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-top-style: groove; border-bottom-style: groove; border-top-color: #0000FF; border-bottom-color: #0000FF; } --> </style> </head> <body> <p class="style1">Абзац 1</p> <p class="style1"> Абзац 2</p> </body> </html>

Стиль определяется в заголовке веб-страницы (тег <HEAD>). Форматирование тега выполняется при помощи атрибута class:

<p class="style1">Абзац 1</p>

Существует три способа задания стиля: в заголовочном файле при помощи тега <style>, как в предыдущем примере; в отдельном файле и внутри тега.

Если стили заданы в отдельном файле его необходимо подключить при помощи тега <link>:

<link href="/StyleA.css" rel="stylesheet" type="text/css">

Файл, содержащий стили, должен иметь расширение .css. Если необходимо задать стиль внутри тега, то он определяется при помощи атрибута style:

<p style="position:absolute;top:40;left:60;color:red">Абзац 3</p>

Механизм CSS позволяет переопределить теги HTML (как, впрочем, и любые другие теги), т. е. определить способ их отображения по умолчанию:

<style type="text/css"> <!-- h1 { font-family: "Times New Roman", Times, serif; font-size: 34px; color: #FF0000; text-align: center; } --> </style>

Для управления отображением гиперссылок используются так называемые псевдостили. Они позволяют определить вид непосещенной ссылки (a:link); ссылки, по которой пользователь уже совершал переход (a:visited), а так же вида ссылки, над которой находится курсор (a:visited) и активной ссылки (a:active):

a:link { font-family: Geneva, Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: underline; background-color: #CCFFFF; }

a:hover { font-family: "Times New Roman", Times, serif; font-size: 22px; font-style: italic; font-weight: bold; color: #FFFF00; text-decoration: blink; }

a:visited { color: #660000; }

a:active { font-size: 18px; color: #000099; text-decoration: blink; }

14. JAVASCRIPT