www.ПЕРВЫЕ ШАГИ.ru :: Шаг 10 - Бросаем якоря

Сейчас я вам расскажу как создать ссылки на различные документы. Для начала создадим два файла:

exam1.html

<html>
 <body text=black bgcolor=white link=red vlink=green>
  <p>Первый документ
 </body>
</html>

exam2.html

<html>
 <body text=black bgcolor=white link=blue vlink=yellow>
 <p>Второй документ
 </body>
</html>

Связываем два документа

Для связи страниц используется элемент <a>. У него существует несколько параметров :

href: Этот параметр как раз и задает ссылку на другой документ. В него можно записывать относительный путь или конкретный URL.
name: Этот атрибут задает название для закладки, но об этом подробее чуть ниже.

Для связывания первого файла exam1.html со вторым Вам потребуется вставить в него следующую строку:

  <p>Первый документ
  ...
  <a href=exam2.html>Второй документ</a>

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

Для создания ссылки на другой сайт или ресурс, вы должны указать:

 <a href=http://www.microsoft.com/>Visit Our Dear Friend</a>

Здесь без комментариев.

Создаем закладки

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

Для того чтобы создать эту закладку надо вставить такую вот строчку:

 <a name=mark1>

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

  <a href=#mark1>Первая метка</a>

Давайте поподробнее рассмотрим их использование :

<h3>Оглавление</h3>
 <a href=#head1>Заголовок 1</a><br>
 <a href=#head2>Заголовок 2</a><br>
 ...
<hr>
<a name=head1>
<h3>Заголовок 1<h3>
....
<a name=head2>
<h3>Заголовок 2<h3>

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

<a href=exam2.html#mark3>Закладка во втором документе</a>

В качестве сслылок прекрасно выступают изображения. Для этого внутри <a>...</a> указывайте <img src=...>.

  <a href=http://www.rambler.ru/><img src="rambler.gif"></a>

В этом случае изображение будет обводится рамкой в 2 пиксела, и если вам это мешает то вспомните о атрибуте border=0 для изображений.