Шаг 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 для изображений.


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.