HTML 5, CSS 3 и Web 2.0. Разработка современных Web сайтов - Владимир Дронов, читать онлайн бесплатно (полностью) 9 стр.

указывает на файл article1.html, хранящийся в папке articles, вложенной в корневую папку Web-сайта.

Такие интернет-адреса называют абсолютными и используют, если нужно создать гиперссылку на файл, хранящийся в "глубине" Web-сайта (скажем, в другой папке, нежели файл текущей Web-страницы).

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

Рассмотрим несколько примеров подобных интернет-адресов. Интернет-адрес

archive.zip

указывает на файл archive.zip, хранящийся в той же папке, что и файл текущей Web-страницы.

Интернет-адрес

chapter3/page1.html

указывает на Web-страницу page1.html, хранящуюся в папке chapter3, вложенной в папку, в которой хранится текущая Web-страница.

Следующий интернет-адрес

../contents.html

указывает на Web-страницу contents.html, хранящуюся в папке, в которую вложена папка, где хранится текущая Web-страница. (Обратим внимание на две точки в начале пути - так обозначается папка предыдущего уровня вложенности.)

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

НА ЗАМЕТКУ
Во многих случаях лучше поэкспериментировать с разными интернет-адресами, чтобы выяснить, какой именно подойдет - абсолютный или относительный.
ВНИМАНИЕ !
В Web-страницах, которые не должны быть опубликованы на Web-серверах, а будут открываться с диска клиентских компьютеров, следует применять только относительные интернет-адреса. Дело в том, что файловая система компьютера не знает, какую папку считать корневой, поэтому не сможет правильно интерпретировать абсолютные интернет-адреса. (Разумеется, гиперссылки, ссылающиеся на другие Web-сайты, должны содержать полные интернет-адреса.)

Разобравшись с гиперссылками и интернет-адресами, свяжем, наконец, наши Web- странички в единый Web-сайт. Чтобы нам было удобнее, создадим в папке, где хранятся все файлы нашего Web-сайта, папку tags. В эту папку перенесем все Web- страницы, описывающие теги HTML (их у нас пока что четыре), и сопутствующие им файлы (их три: изображение, аудио- и видеоролик). Файл index.htm никуда из корневой папки перемещать не будем - ведь он хранит Web-страницу по умолчанию.

Откроем Web-страницу index.htm и найдем в ней HTML-код, формирующий список тегов. Создадим там гиперссылки, указывающие на соответствующие Web-страницы.

Вот HTML-код, создающий гиперссылку, указывающую на Web-страницу с описанием тега <AUDIO>:

<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>

Остальные гиперссылки создаются аналогично.

Перейдя на Web-страницу, описывающую какой-либо тег, посетитель должен иметь возможность вернуться назад - на главную Web-страницу. Конечно, это можно сделать, нажав кнопку возврата назад на панели инструментов Web- обозревателя или клавишу <Backspace> на клавиатуре. Но правила хорошего тона Web-дизайна требуют, чтобы на Web-странице присутствовала соответствующая гиперссылка.

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

<A HREF="../index.htm">На главную Web-страницу</A>

Осталось создать на главной Web-странице гиперссылку на Web-страницу Русской Википедии, которая содержит статью, посвященную языку HTML. Вставим ее в конец большой цитаты (листинг 6.1).

Листинг 6.1
<BLOCKQUOTE>
HTML (от англ. HyperText Markup Language - язык разметки гипертекста) - стандартный язык разметки документов во Всемирной паутине. (<A HREF="http://ru.wikipedia.org/wiki/HTML" TARGET="_blank">вся статья</A>)
</BLOCKQUOTE>

Здесь мы указали для тега <A> атрибут TARGET со значением "_blank". И Web-страница с текстом статьи о HTML будет открываться в новом окне Web-обозревателя. Так что посетитель сможет "залезть" в Википедию, не покидая нашего Web-сайта.

Почтовые гиперссылки

HTML позволяет нам создать гиперссылку, указывающую на адрес электронной почты (почтовую гиперссылку). Щелчок на ней запустит программу почтового клиента, установленную в системе по умолчанию. Интернет-адрес такой гиперссылки записывается особым образом.

Пусть мы хотим создать гиперссылку, указывающую на почтовый адрес: user@mailserver.ru

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

mailto:user@mailserver.ru

причем между двоеточием после mailto и собственно адресом не должно быть пробелов.

Тогда наша почтовая гиперссылка будет выглядеть так:

<A HREF="mailto:user@mailserver.ru">Отправить письмо</A>

В конце главной Web-страницы у нас приведены сведения о правах разработчиков. Давайте превратим слово "читатели" в почтовую гиперссылку. Создающий ее HTML-код будет выглядеть так:

<A HREF="mailto:user@mailserver.ru">читатели</A>

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

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

Язык HTML предлагает нам некоторые дополнительные возможности для создания гиперссылок. Их применяют нечасто, но иногда они полезны.

Прежде всего, мы можем указать для гиперссылки "горячую" клавишу. Если посетитель нажмет эту клавишу, удерживая нажатой клавишу <Alt>, Web-обозреватель выполнит переход по данной гиперссылке.

Для указания "горячей" клавиши предусмотрен необязательный атрибут ACCESSKEY тега <A>. Значение этого атрибута - латинская буква, соответствующая нужной клавише:

<A HREF="http://www.somesite.ru/pages/page125.html" ACCESSKEY="d">Страница №125</A>

Здесь мы указали для гиперссылки "горячую" клавишу <D>. И, чтобы перейти по ней, посетителю будет достаточно нажать комбинацию клавиш <Alt>+<D>.

На гиперссылках можно щелкать мышью - так поступает большинство пользователей. Но по ним также можно "путешествовать" с помощью клавиатуры. В этом случае говорят о фокусе ввода - признаке, какая гиперссылка будет обрабатывать нажатия клавиш. Гиперссылка, имеющая фокус ввода, выделяется тонкой черной штриховой рамкой.

- Если нажать клавишу <Enter>, Web-обозреватель выполнит переход по гиперссылке, имеющей в данный момент фокус ввода.

- Если нажать клавишу <Tab>, Web-обозреватель перенесет фокус ввода на следующую гиперссылку.

- Если нажать комбинацию клавиш <Shift>+<Tab>, Web-обозреватель перенесет фокус ввода на предыдущую гиперссылку.

Порядок, в котором выполняется перенос фокуса ввода с одной гиперссылки на другую при нажатии клавиш <Tab> или <Shift>+<Tab>, так и называется - порядок обхода. По умолчанию он совпадает с порядком, в котором гиперссылки определены в HTML-коде Web-страницы. Но мы можем указать свой порядок обхода с помощью атрибута TABINDEX тега <A>. Его значение - целое число от –32 767 до

32 767 - номер в порядке обхода.

- Если указан положительный номер, именно он будет определять порядок обхода. Иными словами, сначала фокус ввода получит гиперссылка с номером 1, по- том - с номером 2, далее - с номером 3 и т. д.

- Если указан номер, равный нулю, обход будет осуществляться в порядке, в котором гиперссылка определена в HTML-коде Web-страницы. Фактически ноль - значение атрибута тега TABINDEX по умолчанию.

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

Рассмотрим небольшой пример:

<A HREF="page1.htm" TABINDEX="3">Страница 1</A>

<A HREF="page2.htm" TABINDEX="2">Страница 2</A>

<A HREF="page3.htm" TABINDEX="1">Страница 3</A>

Этот HTML-код создает три гиперссылки с "обратным" порядком обхода. Сначала фокус ввода получит гиперссылка "Страница 3", потом - "Страница 2" и напоследок - "Страница 1".

Графические гиперссылки

В начале этой главы говорилось, что гиперссылка может быть в виде не только фрагмента текста, но и картинки или даже представлять собой фрагмент графического изображения. Вот графическими гиперссылками мы сейчас и займемся.

Изображения-гиперссылки

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

Для создания изображения гиперссылки достаточно поместить внутрь тега <A> тег <IMG>:

Этот HTML-код создает изображение-гиперссылку, указывающую на Web-сайт организации W3C. А в качестве самого изображения выбран логотип этой организации, который мы сохранили в файле в той же папке, где находится файл текущей Web-страницы.

А этот HTML-код создает почтовую изображение-гиперссылку.

Правила вывода изображений-гиперссылок Web-обозревателем:

- изображение-гиперссылка окружается рамкой, имеющей соответствующий гиперссылке цвет: синий - для непосещенной, темно-красный - для посещенной и т. д.;

- при помещении курсора мыши на изображение-гиперссылку Web-обозреватель меняет его форму на "указующий перст", как и в случае текстовой гиперссылки.

Рамка вокруг изображения-гиперссылки зачастую выглядит непрезентабельно, по- этому ее обычно убирают, задав соответствующее представление. О представлении Web-страниц мы поговорим в части II.

Изображения-карты

А еще HTML позволяет превратить в гиперссылку часть графического изображения. Более того, мы можем разбить изображение на части, каждая из которых будет представлять собой гиперссылку, указывающую на свой интернет-адрес. Такие изображения называют изображениями-картами, а ее части-гиперссылки - "горячими" областями.

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

Изображение-карту создают в три этапа. Первый этап - создание самого изображения с помощью хорошо нам знакомого тега <IMG>:

Второй этап - создание карты, особого элемента Web-страницы, который описывает набор "горячих" областей изображения-карты. Сама карта на Web-странице никак не отображается.

Карту создают с помощью парного тега <MAP>:

ВНИМАНИЕ !
Здесь для описания формата тега <MAP> впервые применяются типографские соглашения, перечисленные во введении этой книги. Автор настоятельно рекомендует прежде ознакомиться с ними.

С помощью обязательного атрибута NAME тега <MAP> задается уникальное в пределах Web-страницы имя карты. Оно однозначно идентифицирует данную карту, может содержать только латинские буквы, цифры и знаки подчеркивания и начинаться должно с буквы:

После создания карты следует привязать ее к созданному на первом этапе изображению. Для этого мы применим обязательный в данном случае атрибут USEMAP тега <IMG>. Его значение - имя привязываемой к изображению карты, причем в начале этого имени обязательно следует поставить символ # ("решетка"). (В имени, заданном атрибутом NAME тега <MAP>, символ # присутствовать не должен.)

На третьем этапе создают описания самих "горячих" областей в карте. Их помещают внутрь соответствующего тега <MAP> и формируют с помощью одинарных тегов

<AREA>:

<AREA [SHAPE="rect|circle|poly"] COORDS="<набор параметров>" HREF="<интернет-адрес гиперссылки>"|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-код, создающий изображение-карту.

Листинг 6.2
. . .
<MAP NAME="samplemap">
<AREA SHAPE="circle" COORDS="50,50,30" HREF="page1.html">
<AREA SHAPE="circle" COORDS="50,150,30" HREF="page2.html">
<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>
<AREA SHAPE="rect" COORDS="0,100,30,100" HREF="appendix.html" TARGET="_blank">
</MAP>

Здесь мы создали две круглые "горячие" области, указывающие на Web-страницы page1.html и page2.html, многоугольную область, не ссылающуюся никуда, и прямоугольную область, ссылающуюся на Web-страницу appendix.html. Причем последняя "горячая" область при щелчке на ней откроет Web-страницу в новом окне Web-обозревателя.

Вот и все об изображениях-картах и о графических гиперссылках вообще.

Полоса навигации

Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.

Полоса навигации может быть расположена по горизонтали, вверху или внизу Web- страницы, или по вертикали, слева или справа. Горизонтальную полосу навигации можно сформировать с помощью обычного абзаца или таблицы с одной строкой и нужным числом ячеек (каждая гиперссылка располагается в своей ячейке таблицы). Вертикальную полосу навигации обычно формируют с помощью таблицы из одного столбца и нужного числа ячеек (опять же, каждая гиперссылка располагается в своей ячейке таблицы), набора абзацев (каждая гиперссылка представляет собой отдельный абзац) или в виде списка (гиперссылки представляют собой пункты этого списка).

Гиперссылки полосы навигации могут быть текстовыми или графическими. В последнем случае практически всегда применяют изображения-гиперссылки. Зачастую для изображений-гиперссылок реализуют особое поведение, заменяющее изображение другим при наведении на соответствующую гиперссылку курсора мыши. (О поведении Web-страницы мы поговорим в части III.)

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

Давайте создадим на главной Web-странице нашего Web-сайта полосу навигации с гиперссылками, указывающими на другие его Web-страницы: посвященную CSS, содержащую список примеров и сведения о разработчиках. Для простоты реализуем ее в виде абзаца, содержащего нужные гиперссылки. Поместим ее в самом верху Web-страницы, перед заголовком (листинг 6.3).

Листинг 6.3
. . .
<BODY>
<A HREF="css_index.htm">CSS</A> |
<A HREF="samples_index.htm">Примеры</A> |
<A HREF="about.htm">О разработчиках</A>
<H1>Справочник по HTML и CSS</H1>
. . .

Как видим, наша первая полоса навигации очень проста - обычный абзац с набором гиперссылок, разделенных символом | (вертикальная черта). Ну так ведь и наш первый Web-сайт не слишком сложен...

При желании мы можем создать остальные Web-страницы нашего первого Web- сайта. Но не будем сильно в этом усердствовать - все равно мы его потом переделаем.

HTML 5, CSS 3 и Web 2.0. Разработка современных Web сайтов - Владимир Дронов 9 стр.