Ссылки

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

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

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

Общий синтаксис создания ссылок Вы видите в Листинге 9.1 (одинаков для создания ссылок на любые файлы) следующий:

Листинг 9.1.

Где:

URL – это адрес сайта или имя файла и путь до этого файла, если файл лежит на этом же сервере. Тег <a href> говорит браузеру что это ссылка. Этот тег парный поэтому его необходимо закрыть </a>. Теги <a href=”URL”> и </a> посетитель страницы не видит, ему видна только надпись текст ссылки  эта надпись называется якорь ссылки естественно каждая ссылка имеет свой якорь.

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

Различают два вида ссылок

1. Абсолютные ссылки – это те, которые лежат на другом сервере. Такие ссылки должны начинаться с указания протокола (обычно http://) и содержать полное имя сайта и страницы, на который следует перейти. Например, ссылка вида:

Листинг 9.2.

А вот что видит посетитель сайта:

Такая ссылка называется абсолютной – и приведет пользователя на новостной ресурс, расположенный совсем на другом сервере, при этом пользователь попадет на индексную (главную страницу сайта index.html – которая открывается по умолчанию).

А при нажатии, например на эту ссылку: AMD Puma: новая мобильная платформа AMD с Ultra-процессором

Листинг 9.3.

Пользователь попадет на сайт RussIT.info посвященный компьютерным технологиям в раздел Процессоры и увидет статью про процессоры фирмы AMD.

2. Второй вид ссылок – это относительные ссылки. Эти ссылки ведут на файлы, которые расположенны на Вашем же сервере. Относительные ссылки ведут отсчет от корня сайта или текущего документа. Например, Ваш файл index.html, лежит в какой-либо папке на сервере. В этой же папке лежит другой файл с именем tex_opis.html. Что бы перейти на этот файл относительная ссылка будет иметь вот такой синтаксис:

Листинг 9.4.

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

target=”blank” загружает гиперссылку в новом окне Обозревателя

title=”Технические характеристики автомобиля“ – Текст подсказки, который будет появляться при наведении мышки на гиперссылку.

И окончательный синтаксис ссылки будет иметь вид:

Листинг 9.5.

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

Примеры того что должно получиться лежит здесь.

Ссылка на другую страницу (о которой мы с Вами говорили выше) добавлена в самом конце страницы. Ссылка рабочая ведет на страницу tex_opis.html . Так как это у нас с Вами учебные файлы я не стал полностью оформлять эту страницу, добавил только заголовок и ссылку на главную страницу т.е. назад на index.html. Ну а Вы уж потренируйтесь.