HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
32 767 — номер в порядке обхода.
— Если указан положительный номер, именно он будет определять порядок обхода. Иными словами, сначала фокус ввода получит гиперссылка с номером 1, потом — с номером 2, далее — с номером 3 и т. д.
— Если указан номер, равный нулю, обход будет осуществляться в порядке, в котором гиперссылка определена в HTML-коде Web-страницы. Фактически ноль — значение атрибута тега TABINDEX по умолчанию.
— Если указан отрицательный номер, данная гиперссылка вообще исключается из порядка обхода. До нее невозможно будет добраться с помощью клавиатуры — можно будет только щелкать мышью.
Рассмотрим небольшой пример:
<A href="#" TABINDEX="3">Страница 1</A>
<A href="#" TABINDEX="2">Страница 2</A>
<A href="#" TABINDEX="1">Страница 3</A>
Этот HTML-код
Графические гиперссылки
В начале этой главы говорилось, что гиперссылка может быть в виде не только фрагмента текста, но и картинки или даже представлять собой фрагмент графического изображения. Вот графическими гиперссылками мы сейчас и займемся.
Изображения-гиперссылки
Язык HTML позволяет использовать в качестве содержимого гиперссылки любой фрагмент любого блочного элемента, в том числе и графическое изображение, т. е. создать изображение-гиперссылку.
Для создания изображения гиперссылки достаточно поместить внутрь тега <A> тег <IMG>:
<A href="#"><IMG SRC="w3logo.gif"></A>
Этот HTML-код создает изображение-гиперссылку, указывающую на Web-сайт организации W3C. А в качестве самого изображения выбран логотип этой организации, который мы сохранили в файле в той же папке, где находится файл текущей Web-страницы.
<A href="#"><IMG SRC="email.gif"></A>
А этот HTML-код создает почтовую изображение-гиперссылку.
Правила вывода изображений-гиперссылок Web-обозревателем:
— изображение-гиперссылка окружается рамкой, имеющей соответствующий гиперссылке цвет: синий — для непосещенной, темно-красный — для посещенной и т. д.;
— при помещении курсора мыши на изображение-гиперссылку Web-обозреватель меняет его форму на "указующий перст", как и в случае текстовой гиперссылки.
Рамка вокруг изображения-гиперссылки зачастую выглядит непрезентабельно, поэтому ее обычно убирают, задав соответствующее представление. О представлении Web-страниц мы поговорим в части II.
Изображения-карты
А еще HTML позволяет превратить в гиперссылку часть графического изображения. Более того, мы можем разбить изображение на части, каждая из которых будет представлять собой гиперссылку, указывающую на свой интернет-адрес. Такие изображения называют изображениями-картами, а ее части-гиперссылки — "горячими" областями.
С помощью изображений-карт часто создают заголовки Web-сайтов, фрагменты которого представляют собой гиперссылки, указывающие на определенную Web- страницу. Пик популярности изображений-карт давно прошел, однако их еще можно довольно часто встретить.
Изображение-карту создают в три этапа. Первый этап — создание самого изображения с помощью хорошо нам знакомого тега <IMG>:
<IMG SRC="map.gif">
Второй этап — создание карты, особого элемента Web-страницы, который описывает набор "горячих" областей изображения-карты. Сама карта на Web-странице никак не отображается.
Карту создают с помощью парного тега <MAP>:
<MAP NAME="<имя карты>"></MAP>
ВНИМАНИЕ!
Здесь для описания формата тега <MAP> впервые применяются типографские соглашения, перечисленные во введении этой книги. Автор настоятельно рекомендует прежде ознакомиться с ними.
С помощью обязательного атрибута NAME тега <MAP> задается уникальное в пределах Web-страницы имя карты. Оно однозначно идентифицирует данную карту, может содержать только латинские буквы, цифры и знаки подчеркивания и начинаться должно с буквы:
<MAP NAME="samplemap"></MAP>
После создания карты следует привязать ее к созданному на первом этапе изображению. Для этого мы применим обязательный в данном случае атрибут USEMAP тега <IMG>. Его значение — имя привязываемой к изображению карты, причем в начале этого имени обязательно следует поставить символ # ("решетка"). (В имени, заданном атрибутом NAME тега <MAP>, символ # присутствовать не должен.)
<IMG SRC="map.gif" USEMAP="#samplemap">
На третьем этапе создают описания самих "горячих" областей в карте. Их помещают внутрь соответствующего тега <MAP> и формируют с помощью одинарных тегов
<AREA>:
<AREA [SHAPE="rect|circle|poly"] COORDS="<набор параметров>" href="#"text_emphasis"><интернет-адрес гиперссылки>"|NOHREF TARGET="<цель гиперссылки>">
Необязательный атрибут SHAPE задает форму "горячей" области. Обязательный атрибут COORDS перечисляет координаты, необходимые для построения этой области. Значения атрибута SHAPE:
— "rect" — прямоугольная "горячая" область. Атрибут COORDS в этом случае записывается в виде COORDS="<X1>,<Y1>,<X2>,<Y2>", где X1 и Y1 — координаты верхнего левого, а X2 и Y2 — правого нижнего угла прямоугольника. Кстати, если атрибут SHAPE отсутствует, создается именно прямоугольная область;
— "circle" — круглая "горячая" область. В этом случае атрибут COORDS имеет вид COORDS="<X центра>,<Y центра>,<радиус>";
— "poly" — "горячая" область в виде многоугольника. Атрибут COORDS должен иметь вид COORDS="<X1>,<Y1>,<X2>,<Y3>,<X3>,<Y3>…", где Xn и Yn — координаты соответствующей вершины многоугольника.
Атрибут HREF задает интернет-адрес гиперссылки — он, собственно, нам уже знаком. Он может быть заменен атрибутом без значения NOHREF, задающим область, не связанную ни с каким интернет-адресом. Это позволяет создавать оригинальные изображения-карты, например, карту в виде бублика, "дырка" которого никуда не указывает.
Также знакомый нам атрибут TARGET задает цель гиперссылки. (Конечно, указывать его имеет смысл только в том случае, если мы создаем именно "горячую" область, а не "дырку" с атрибутом NOHREF.)
Листинг 6.2 содержит полный HTML-код, создающий изображение-карту.
<IMG SRC="map.gif" USEMAP="#samplemap">
Листинг 6.2
.
<MAP NAME="samplemap">
<AREA SHAPE="circle" COORDS="50,50,30" href="#">
<AREA SHAPE="circle" COORDS="50,150,30" href="#">
<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>
<AREA SHAPE="rect" COORDS="0,100,30,100" href="#" TARGET="_blank">
</MAP>