HTML: Популярный самоучитель, Чиртик Александр Анатольевич

HTML: Популярный самоучитель

на обложку

Чиртик Александр Анатольевич

Шрифт:

Простота, наглядность и в то же время мощь гиперссылки заключаются в том, что ею может быть практически все что угодно: слово в тексте, заголовок, рисунок, элемент таблицы и другие элементы HTML-документа. Для использования гиперссылки от пользователя требуется щелчок кнопкой мыши на тексте, изображении или прочем представлении гиперссылки, остальную работу по поиску и переходу к нужному ресурсу выполнят автоматические системы, начиная с браузера на компьютере пользователя и заканчивая службой DNS, поисковыми машинами Интернета. Вся работа, необходимая для поиска и загрузки нужных ресурсов, скрыта от пользователя. Он только видит результат

и наслаждается легкостью навигации в огромном объеме информации.

5.1. Простой переход к ресурсам

Для создания гиперссылки в тексте HTML-документа используется элемент A, который задается при помощи парных тегов <A> и </A>. Текст, изображение или другой элемент HTML-документа, заключенный между этими тегами, становится представлением гиперссылки в тексте. Обычно браузеры отображают гиперссылки таким образом, что их можно однозначно отделить от прочего содержимого документа, например выделяют цветом, подчеркиванием, меняют форму указателя мыши при наведении его на гиперссылку. Обычным действием браузера при переходе по гиперссылке является открытие указанного HTML-документа в том же или новом окне.

Навигация между HTML-документами

Для создания простейшей гиперссылки, обеспечивающей переход к нужному HTML-документу, достаточно задать в качестве значения атрибута href элемента A URI нужного ресурса (файла HTML-документа). Допустим, что сайт, по которому нужно реализовать навигацию, состоит из пяти страниц. Файлы страниц именуются 1.html, 2.html и т. д. У сайта также есть главная страница (index.html), на которой находится оглавление. Элементы оглавления позволяют перейти к соответствующим страницам, то есть являются гиперссылками. Тогда возможный вариант HTML-документа с оглавлением сайта будет иметь следующий вид (пример 5.1).

Пример 5.1. Простая навигация между документами

<TITLE>Главная страница сайта</TITLE>

<BODY>

<DL>

<DT>Оглавление

<DD>

<A href = "1.html">Первая страница сайта</A>

<A href = "2.html">Вторая страница сайта</A>

<A href = "3.html">Третья страница сайта</A>

<A href = "4.html">Четвертая страница сайта</A>

<A href = "5.html">Пятая страница сайта</A>

</DL>

</BODY>

Для оформления оглавления использовался рассмотренный ранее список определений. При желании это оформление можно легко изменить. Как можно видеть на рис. 5.1, текст, заключенный между тегами элемента A, стал визуальным представлением гиперссылки в документе. На то, что помещается между тегами <A> и </A>, накладывается ограничение, которое нужно помнить: содержимым гиперссылки не может быть другая гиперссылка.

Рис. 5.1. Оглавление сайта

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

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

...

<A href = "index.html">Оглавление</A>

<A href = "2.html">Предыдущая</A>

<A href = "4.html">Следующая</A>

...

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

...

<A href = "1/1.html">Первая страница сайта</A>

<A href = "2/2.html">Вторая страница сайта</A>

...

Для перехода к ресурсам, находящимся за пределами сайта, используются полные URI, например:

<A href = «mydomain.com/homepage.html»>Домашняя страница</A>

Приведенная здесь гиперссылка позволяет перейти к HTML-документу homepage.html, расположенному на сайте mydomain.com.

Загрузка файлов

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

Пример 5.2. Использование ссылок на файлы рисунков

<TITLE>Фотографии из отпуска</TITLE>

<BODY>

<DL>

<DT>Мои фотографии на рыбалке

<DD>

<A href = "1/1.jpg">Вот это рыбина!</A>

<A href = "1/2.jpg">Чуть не искупался</A>

...

</DL>

</BODY>

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

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

Пример 5.3. Использование ссылок на файлы архивов

<TITLE>Концертные записи группы РАСПАД ЭЙНШТЕЙНИЯ</TITLE>

<BODY>

<DL>

<DT>Концерт 22.11.2002 в городе N

<DD>

Скачать 18 самых впечатляющих фотографий можно

<A href = "photo/22-11-2002N.rar">здесь</A>

<DT>Концерт 24.12.2002 в том же городе N

<DD>

Если вы хотите увидеть самые запоминающиеся эпизоды концерта, жмите

</DL>