5 ССЫЛКИ В ДОКУМЕНТАХ HTML

Сервер Web своими руками. Язык HTML, приложения CGI и ISAPI, установка серверов Web для Windows

Вставка ссылки

Ссылка создается с помощью оператора <A>, который используется в паре с оператором </A>. Между этими операторами располагается текст ссылки, который отображается в окне просмотра навигатора и выделяется подчеркиванием, а также изменением цвета.

Перечислим основные параметры оператора <A>.

Параметр	Описание
HREF	Адрес URL файла документа HTML или другого объекта, на который сделана ссылка в операторе <A>. Если в адресе не указан путь, поиск файла будет выполняться в том же каталоге, где находится текущий документ
NAME	Имя ссылки в документе HTML. Используется для организации ссылок внутри одного и того же документа HTML
TARGET	Параметр TARGET задает имя окна, в которое должен быть загружен документ. Этот параметр используется при работе с фреймами, которым в нашей книге посвящена отдельная глава. Можно указывать также следующие значения: _blank документ будет загружен в новое окно; _parent документ будет загружен в окно, которое является родительским по отношению к текущему; _self документ будет загружен в то же самое окно, где расположена ссылка; _top документ займет все окно навигатора
TITLE	Название, которое появится в окне навигатора при выборе ссылки на объект. Удобно при организации ссылок на графические изображения и аналогичные объекты, не имеющих названий

Оставим пока в стороне вопрос использования параметра TARGET. Мы вернемся к этому параметру при обсуждении фреймов, а сейчас приведем несколько простых примеров.

Ссылки на другие документы

Ниже мы показали исходный текст документа HTML, в котором имеется несколько ссылок на другие документы HTML:


<HTML>
  <BODY BGCOLOR="#B0FFD8">
    <BASEFONT SIZE=2>
    <LEFT>
      <A HREF="http://www.glasnet.ru/~frolov/index.html" TARGET="_top">Домашняя страница</A><BR>
      <A HREF="main.htm" TARGET="main page">Добро пожаловать</A><BR>
      <A HREF="news.htm" TARGET="main page">Новости</A><BR>
      <P><A HREF="books.htm" TARGET="main page">Книги</A><BR>
      <P><A HREF="capital.htm" TARGET="main page">КАПИТАЛ</A><BR>
      <A HREF="terra.htm" TARGET="main page">КОМПЬЮТЕРРА</A><BR>
      <P><A HREF="virchk.htm" TARGET="main page">Вирусы</A><BR>
      <P><A HREF="frends.htm" TARGET="main page">Партнеры и друзья</A><BR>
      <P><A HREF="../eng/home.htm" TARGET="_top">Set English Language</A><BR>
    </LEFT>
  </BODY>
</HTML>

Первая ссылка - на адрес http://www.glasnet.ru/~frolov/index.html (это наша домашняя страничка на сервере GlasNet). Адрес URL документа, на который выполняется ссылка, указан с помощью параметра HREF. Здесь мы указали полный путь к документу HTML:


<A HREF="http://www.glasnet.ru/~frolov/index.html" TARGET="_top">Домашняя страница</A><BR>

Параметр TARGET указан потому, что приведенный выше документ является составной частью документа, созданного с использованием фреймов. Он имеет значение _top, поэтому при загрузке документ полностью займет окно навигатора, а не будет загружен в один из фреймов. Если вы не пользуетесь фреймами, параметр TARGET можно не указывать.

Между операторами <A> и </A> расположена строка “Домашняя страница”. При отображении документа эта строка будет выделена подчеркиванием. Если пользователь сделает щелчок по указанной строке, в окно навигатора будет загружен документ HTML с адресом http://www.glasnet.ru/~frolov/index.html.

Следующие несколько ссылок адресуются к страницам, расположенным в том же каталоге, что и текущий документ. Поэтому вместо полного пути в параметре HREF задано только имя файла:


<A HREF="main.htm" TARGET="main page">Добро пожаловать</A><BR>

Содержимое документа будет загружено в окно, созданное с именем main page.

Обратите также внимание на последнюю ссылку в нашем документе:


<P><A HREF="../eng/home.htm" TARGET="_top">Set English Language</A><BR>

Здесь мы ссылаемся на документ, расположенный в каталоге eng. Этот каталог записан в родительском каталоге (по отношению к тому каталогу, в котором находится текущий документ).

Локальные ссылки внутри документа

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

Пусть вы создаете документ с именем book.htm, который состоит из нескольких глав. В начале документа вы желаете разместить оглавление, содержащее ссылки на отдельные главы.

Прежде всего вы должны определить в начале каждой главы локальные метки. Для этого следует использовать оператор <A> с параметром NAME, как это показано ниже:


<H2><A NAME="Chapter1">Первая глава</A></H2>
. . .
Содержимое главы
. . .
<H2><A NAME="Chapter2">Вторая глава</A></H2>
. . .
Содержимое главы
. . .
<H2><A NAME="Chapter3">Третья глава</A></H2>
. . .
Содержимое главы
. . .
<H2><A NAME="Chapter4">Четвертая глава</A></H2>
. . .
Содержимое главы
. . .

Здесь для заголовков глав определяются метки с именами Chapter1, Chapter2, Chapter3 и Chapter4.

Ссылки на созданные таким образом локальные метки выполняются также с помощью оператора <A>, имеющего параметр HREF:


<A HREF="book.htm#Chapter1">Первая глава</A>
<A HREF="book.htm#Chapter2">Вторая глава</A>
<A HREF="book.htm#Chapter3">Третья глава</A>
<A HREF="book.htm#Chapter4">Четвертая глава</A>

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

Заметим, однако, что загрузка большого документа может потребовать много времени. Поэтому следует рассмотреть возможность разделения документа на несколько файлов HTML с организацией оглавления в виде отдельного документа, содержащего только ссылки.

В листинге 5.1 мы привели исходный текст документа HTML, в котором созданы две локальные ссылки на две таблицы, имеющие различное оформление.

Листинг 5.1. Файл chap5\local.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Локальные ссылки в документе HTML</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <P><A HREF="local.htm#tab1_1">Таблица с двойным заголовком</A>
    <P><A HREF="local.htm#tab1_2">Таблица с двойным заголовком и подписью</A>
    <H2><A NAME="tab1_1">Таблица с двойным заголовком</A></H2>
    <TABLE BORDER WIDTH=100%>
      <CAPTION VALIGN=TOP ALIGN=RIGHT>Табл. 1.1. Таблица с двойным заголовком</CAPTION>
        <TR><TH COLSPAN=3>Заголовок для всех столбцов</TH></TR>
        <TR><TH COLSPAN=2>Стобец 1 и 2</TH><TH>Столбец 3</TH></TR>
        <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
        <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
        <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
    </TABLE>
    <H2><A NAME="tab1_2">Таблица с двойным заголовком и подписью</A></H2>
    <TABLE BORDER WIDTH=100%>
      <CAPTION ALIGN=BOTTOM>Табл. 1.2. Таблица с двойным заголовком</CAPTION>
      <TR><TH COLSPAN=3>Заголовок для всех столбцов</TH></TR>
      <TR><TH COLSPAN=2>Стобец 1 и 2</TH><TH>Столбец 3</TH></TR>
      <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
      <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
      <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
     </TABLE>
  </BODY>
</HTML>