Основы языка HTML

Гиперссылки

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

Для создания гипертекстовой ссылки используется пара тегов <A>... </A>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения.

<A HREF="URL_ресурса">фрагмент документа</A>

HREF здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута HREF не обязательны.

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

Пример

<A HREF="example.html">Ссылка</A>

Графические указатели, т. е. изображения-ссылки, выделяются рамкой того же цвета, что и текстовые указатели.

Пример

<A HREF="example.html"><IMG SRC="pict.gif"></A>

Абсолютный и относительный URL

В разделе, посвященном компьютерным сетям и принципам поиска информации в Интернет, было введено понятие URL (универсального локатора ресурса), однозначно определяющего расположение объекта в глобальной сети. В общем случае URL имеет следующий вид (части, заключенные в квадратные скобки, не обязательны и могут быть опущены):

протокол://адрес_узла[:порт]/путь/файл[#метка]

В таблице ниже приведены назначения компонент URL.

URL, заданный в таком виде, называется абсолютным URL, так как он полностью описывает расположение ресурса в глобальной сети.

Пример

При обращении к конкретному ресурсу порт и позиция в документе часто не указываются:

http://www.ctc.msiu.ru/education/book/index1.html

Пример

Рассмотрим ссылку на так называемую домашнюю страницу (Home Page) конкретного пользователя. Предположим, что на сервере www.msiu.ru зарегистрирован человек с пользовательским именем (login) ivanov. Домашней страницей называют файл index.html, находящийся в директории с именем public_html, которая, в свою очередь, должна располагаться в домашней директории пользователя. Тогда ссылка на домашнюю страницу этого человека может быть задана в виде

<A HREF="http://www.msiu.ru/~ivanov">Текст ссылки</A>

Обратите внимание, что имя самого файла при такой записи не указывается. Если потребуется сослаться на какой-либо другой документ данного пользователя, расположенный в директории public_html, например, photo.html, то ссылка примет вид:

<A HREF="http://www.msiu.ru/~ivanov/photo.html">Текст</A>

Относительный URL описывает положение ресурса, на который указывает ссылка, относительно URL текущего документа.

Пример

При задании относительных ссылок указывается путь по файловому дереву до того места, где находится требуемый HTML-ресурс. Вот ссылка на документ image.html, размещенный в текущем каталоге: <A HREF="image.html">Ссылка</A>.

Если файл pict.html лежит в родительском по отношению к текущему документу каталоге, то следует использовать запись

<A HREF="../pict.html">Текст ссылки</a>

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

<A HREF="Picture/pict.html">Текст ссылки</A>

Гиперссылки в пределах одного документа

Другая форма тега <A> предназначена для присваивания имени некоторому фрагменту документа HTML:

<A NAME="имя">фрагмент документа</A>

Тег <A> часто называют тегом якоря (anchor). Если якорь применяется для добавления метки (имени) к фрагменту документа, то его называют именованным якорем.

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

<A HREF="URL_ресурса#имя">Текст ссылки</A>

Если нужно сослаться на фрагмент текущего документа, то URL-ресурса можно опустить:

<A HREF="#имя">Текст ссылки</A>

Пример

Пусть в документе с именем book.html заголовку главы 2 присвоено имя chapter2:

<A NAME="chapter2">Глава 2</A>

Тогда ссылка на эту главу, расположенная в этом же документе, будет иметь вид:

<A HREF="#chapter2">Глава 2</A>

Для задания ссылки на эту же метку файла book.html из другого файла нужно написать:

<A HREF="book.html#chapter2">Глава 2</A>

Ссылка на почтовый ящик

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

<A HREF=mailto:адрес_e-mail>текст ссылки2</A>

Здесь вместо адрес_e-mail нужно поставить адрес почтового ящика. После того, как посетитель активизирует эту ссылку, у него на экране появится специальное окно, позволяющее послать письмо по указанному адресу.

Пример

<A HREF=mailto:sidorov@mail.msiu.ru>Почта автору</A>

Задания

1. Откройте файл image.html и сделайте в нем ссылку в виде картинки на файл first.html.
2. Откройте файл first.html и сделайте в нем текстовую ссылку на файл image.html.
3. Добавьте в файл first.html несколько абзацев текста в таком количестве, чтобы документ уже не помещался целиком в окне браузера. Отметьте последний абзац, присвоив ему имя end.
4. Включите ссылку, ведущую сразу к последнему абзацу файла first.html, в файл image.html.
5. В файл first.html включите ссылку на свой почтовый ящик.