ОГЛАВЛЕНИЕ
1 Представление ссылок на Web-странице
1.1 Задание параметров ссылок
1.2 Использование CSS в ссылках
1.3 Изображение курсора на Web-странице
1.4 Сегментированная графика
1.5 Использование локальних ссылок
Пример 1
1 Представление ссылок на Web-странице
Ссылки в html - это выделенные объекты на Web-странице (слова, изображения и др.), которые при наведении курсора мыши меняют свои параметры с появлением на экране изображения "ладошки". После щелчка мыши по ссылке происходит поиск и загрузка требуемой Web-страницы.
1.1 Задание параметров ссылок
Для задания ссылки и ее параметров используется тэг-контейнер <A>ссылка </A> (Anchor - якорь), который содержит такие параметры:
- HREF - указывает URL-адрес Web-страницы, которая будет загружена после щелчка мыши по ссылке;
- NAME - указывает имя в документе, куда будет перемещен указатель при внутреннем использовании ссылок (см. пункт 1.4);
- TARGET - указывает имя окна (фрейма), куда будет загружена вызываемая Web-страница;
- TITLE - задает поясняющую надпись под ссылкой, которая появляется некоторое время спустя после наведения мыши на ссылку.
Например, для задания ссылки со стандантными параметрами, с помощью которой производится загрузка Web-страницы с описанием, используется следующий тэг:
<A HREF="prim1-1.htm">Урок № 1</A>
Для изменения параметров цвета ссылки ипользуются следующие параметры тэга <BODY>:
- LINK - задает цвет непросмотренной ссылки (по умолчанию синий);
- VLINK - задает цвет посещенной ссылки (по умолчанию красноватый);
- ALINK - задает цвет сылки после щелчка мыши по ней, но до загорузки Web-страницы (используется редко).
Ссылка может быть задана также с помощью рисунка. Для этого необходимо тэг <IMG >, задающий рисунок, поместить внутри контейнера <A> </A>:
<A HREF="lab2.htm"><IMG SRC="fish.gif"></A>
В примере №1 приведено использование стандартных ссылок, а также ссылок в виде изображения.
1.2 Использование CSS в ссылках
В каскадных листах стилей для ссылок имеются псевдоклассы с таким форматом:
- A:link{ } - для задания параметров (цвета, формы и др.) тех ссылок, которые еще не были использованы для загрузки Web-страниц;
- A:visited{ } - для задания параметров тех ссылок, которые уже были использованы для загрузки Web-страниц;
- A:active{ } - для задания параметров тех ссылок, которые были использованы, но загрузка Web-страницы еще не произошла;
- A:hover{ } - для задания параметров тех ссылок, на которые наведен курсор мыши.
Псевдоклассы и их свойства описываются там же, где и классы (см. внешнее и внутреннее задание CSS в лабораторной работе №2).
Если на Web-странице нужно использовать несколько изображений для ссылок, необходимо вместе с псевдоклассами задавать обычные классы. Например, можно создать класс изображений ссылок в виде кнопок. Ниже приводятся каскадные листы стилей, которые описывают класс ссылок "kn", задающий для трех состояний ссылок (link, visited и hover) такие параметры, как цвет, тип и размер текста, тип состояния кнопки (отжата - outset, нажата - inset) и цвет фона:
A.kn:link{color:#004040; font:italic 0.6cm; border:outset #FF00AA 5; background:#E0E0E0; text-decoration:none}
A.kn:visited{color:#0000A0; font:italic 0.6cm; border:outset #FF00AA 5; background:#00E0E0; text-decoration:none}
A.kn:hover{color:white; font:italic 0.6cm; border:inset #FF00AA 5; background:#FF60a0; text-decoration:none}
Эти описания параметров ссылок добавлены во внешний файл CSS "my.css" (теперь он называется "my_d.css") и используются в примере №1 для задания параметров ссылок с помощью каскадных листов стилей.
Ссылка класса "kn" задается так:
<A CLASS="kn" . . . >
1.3 Изображение курсора на Web-странице
При наведении курсора мыши на ссылку обычно появляется изображение "ладошки". В CSS имеется возможность изменить вид курсора (и не только для ссылок, но и для других элементов Web-страницы, например, изображений). Для этого необходимо использовать свойство cursor , которое имеет следующие значения:
- default - изображение, задаваемое по умолчанию (обычно это "ладошка");
- hand - "ладошка";
- text - текстовый курсор;
- help - в виде знака вопроса ("?");
- wait - в виде песочных часов (означает "подождите");
- e-resize или w-resize - двойная горизонтальная стрелка (восток - запад);
- ne-resize или sw-resize - двойная стрелка направления северо-восток - юго-запад;
- nw-resize или se-resize - двойная стрелка направления северо-запад - юго-восток;
- s-resize или n-resize - вертикальная двойная стрелка (север - юг);
В примере №1 показано использование изображение курсора в виде знака вопроса.
1.4 Сегментированная графика
К сегментированной графике относятся изображения, условно разбитые на отдельные части в виде определенных геометрических фигур, каждая из которых представляет собой область чуствительности к щелчку мыши и является ссылкой.
Для перечисления областей чувствительности используется тэг-контейнер <MAP>, параметр которого NAME задает имя карты с описанием этих областей.
Каждая область чуствительности описывается с помощью одиночного тэга <AREA>, который содержит такие параметры:
- SHAPE - задает геометрическую фигуру, описывающую форму области чуствительности:
- rect - прямоугольник;
- circ - окружность;
- poly - многоугольник.
- COORDS - задает коодинаты этих фигур:
- для прямоугольника - в виде координат его левого правого угла и левого нижнего (x1,y1,x2,y2);
- для окружности - в виде пары координат центра и величины радиуса (x,y,r);
- для многоугольника - в виде пар координат для каждой вершины (x1,y1,x2,y2, . . ).
- HREF - задает URL-адрес требуемой Web-страницы;
- NOHREF - указывает на то, что данная область нечуствительна к наведению мышки (должна быть объявлена первой);
- ALT - задает поясняющую надпись под ссылкой, которая появляется некоторое время спустя после наведения указателя мышки на ссылку (аналогично параметру TITLE тэга A).
Например, для задание фигур и координат трех областей чуствительности (они выделены цветом) изображения 
используются следующие значения параметров SHAPE и COORDS:
- для прямоугольника - SHAPE=rect COORDS=10,6,50,30
- для треугольника - SHAPE=poly COORDS=10,40,10,80,50,40
- для окружности - SHAPE=CIRC COORDS=88,49,20
В примере №1 показано использование сегментированной графики на Web-странице.
1.5 Использование локальных ссылок
Локальные ссылки используются для облегчения доступа к отдельным частям документа, представленного на Web-странице. Для этого в HTML-документе с помощью тэга <A> в требуемых местах документа устанавливаются метки доступа. При этом в тэге <A> вместо параметра HREF используется параметр NAME, задающий имя метки доступа. К этому месту на Web-странице можно обратиться с помощью обычной ссылки, в которой в качестве значения параметра HREF указывается имя метки с предшедствующим знаком #.
Локальные ссылки можно также использовать для доступа к внутренним частям другого документа. В этом случае к URL-адресу документа добаляется знак # и имя внутренней ссылки в этом документе.Например, с помощью ссылки
<A HREF="html-ssilka2.htm#2">
обеспечивается доступ не к началу описания на странице № 2, а к ее разделу 2.
В примере (№1) показано применение локальных ссылок для внутреннего и внешних документов.
Пример 1
<HTML>
<HEAD>
<TITLE> Ссылки в HTML </TITLE>
<LINK REL=stylesheet HREF="my_d.css">
<STYLE>P, TABLE{color:#0000c0; font: 6mm} </STYLE>
</HEAD>
<BODY>
<A NAME="beg"></A><BR>
<TABLE WITH=80% HEIGHT= 130% ALIGN=center>
<TR><TD> Ссылка со стандартными параметрами:
<TD>
<A HREF="prim1-1.htm"> Ssilka № 1 </A>
<TR><TD> Локальная ссылка:
<TD><A HREF="#text"> Текст HTML-документа </A>
<TR><TD> Ссылка в виде рисунка:
<TD><A HREF="prim5-1.htm"
TITLE="Использование графики в ссылках">
<IMG SRC="fish.gif"></A>
<TR><TD> Ссылка в виде кнопки на раздел 2 документа:
<TD><A CLASS="kn" HREF="html2.htm#2">
Ssilka№ 2 </A>
<TR><TD>Ссылка-справка:
<TD>
<A CLASS="kn"
STYLE="border-style:none; cursor: help" HREF="prim3-1.htm"> Списки </A>
<TR><TD> Ссылка в виде сегментированной графики:
<TD><IMG SRC="seg.bmp" ALIGN=middle
BORDER=0 USEMAP="#my_map">
<TR><TD> Ссылка в виде кнопки-изображения:
<TD><A HREF="prim4-1.htm" CLASS="kn" style= "border-width:10" >
<IMG DYNSRC="Orbit.avi" START=fileopen LOOP=1
HEIGHT=40 ></A>
</TABLE>
<MAP NAME="my_map">
<AREA SHAPE=circ COORDS=88,49,5 NOHREF>
<AREA SHAPE=rect COORDS=10,6,50,30 HREF= "prim1-2.htm"
ALT="Задание параметров шрифтов">
<AREA SHAPE=poly COORDS=10,40,10,80,50,40 HREF="prim1-3.htm"
ALT="Физическое и логическое форматирование текста">
<AREA SHAPE=CIRC COORDS=88,49,20 HREF= "prim2-1.htm"
ALT="Использование CSS для форматирования текста">
</MAP>
<A NAME="text"></A><BR>
<A CLASS="kn" HREF="#beg">Начало</A>
<P> Текст HTML-документа
</BODY>
</HTML>
