Ссылки
Наверняка Вы уже заметили, что путешествовать с одного сайта на другой (или по разным страницам одного сайта) можно с легкостью, просто нажав на ссылку. Текст ссылки, как правило, выделяется цветом (обычно ярко синего цвета) или оформляется подчеркиванием (но не всегда). Ссылки в HTML позволяют связать текст или картинку с другими гипертекстовыми документами и позволяют переходить с одной веб-страницы на другую.
Особенность ссылок состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, например на картинки, на музыкальные файлы, на видеофайлы и т.д. Причем этот файл может размещаться совсем в другой стране на другом сайте.
Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.
Общий синтаксис создания ссылок Вы видите в Листинге 9.1 (одинаков для создания ссылок на любые файлы) следующий:
Листинг 9.1.
<a href=”URL”>текст ссылки</a>
|
|
Где:
URL – это адрес сайта или имя файла и путь до этого файла, если файл лежит на этом же сервере. Тег <a href> говорит браузеру что это ссылка. Этот тег парный поэтому его необходимо закрыть </a>. Теги <a href=”URL”> и </a> посетитель страницы не видит, ему видна только надпись текст ссылки эта надпись называется якорь ссылки естественно каждая ссылка имеет свой якорь.
Абсолютные и относительные ссылки
Различают два вида ссылок
-
Абсолютные ссылки – это те, которые лежат на другом сервере. Такие ссылки должны начинаться с указания протокола (обычно http://) и содержать полное имя сайта и страницы, на который следует перейти. Например, ссылка вида:
Листинг 9.2.
<a href=”http://www.russnews.info”>Мониторинг новостей. Все – что произошло в мире за 24 часа.</a>
|
|
А вот что видит посетитель сайта:
Мониторинг новостей. Все – что произошло в мире за 24 часа.
Такая ссылка называется абсолютной – и приведет пользователя на новостной ресурс, расположенный совсем на другом сервере, при этом пользователь попадет на индексную (главную страницу сайта index.html – которая открывается по умолчанию).
А при нажатии, например на эту ссылку: AMD Puma: новая мобильная платформа AMD с Ultra-процессором
Листинг 9.3.
<a href=”http://www.russit.info/processors/news_2008-07-14-09-33-03-784.html”>AMD Puma: новая мобильная платформа AMD с Ultra-процессором</a>
|
|
Пользователь попадет на сайт RussIT.info посвященный компьютерным технологиям в раздел Процессоры и увидет статью про процессоры фирмы AMD.
2. Второй вид ссылок – это относительные ссылки. Эти ссылки ведут на файлы, которые расположенны на Вашем же сервере. Относительные ссылки ведут отсчет от корня сайта или текущего документа. Например, Ваш файл index.html, лежит в какой-либо папке на сервере. В этой же папке лежит другой файл с именем tex_opis.html. Что бы перейти на этот файл относительная ссылка будет иметь вот такой синтаксис:
Листинг 9.4.
<a href=”tex_opis.html”>Технические характеристики автомобиля</a>
|
|
Можно добавить в ссылку некоторые необязательные атрибуты, например:
target=”blank” загружает гиперссылку в новом окне Обозревателя
title=”Технические характеристики автомобиля“ – Текст подсказки, который будет появляться при наведении мышки на гиперссылку.
И окончательный синтаксис ссылки будет иметь вид:
Листинг 9.5.
<a href=”tex_opis.html” target=”blank” title=”Технические характеристики автомобиля“>Технические характеристики автомобиля</a>
|
|
Естественно для того что бы страница на которую ведет ссылка открылась, она должна существовать, поэтому давайте создадим еще одну страничку (механизм точно такой же и при создании страницы index.html) и назовем этот файл tex_opis.html . Пускай в этом файле будут действительно технические характеристики автомобиля. Если у Вас есть вопросы по созданию этого файла, просмотрите преведущие уроки.
Примеры того что должно получиться лежит здесь.
Ссылка на другую страницу (о которой мы с Вами говорили выше) добавлена в самом конце страницы. Ссылка рабочая ведет на страницу tex_opis.html . Так как это у нас с Вами учебные файлы я не стал полностью оформлять эту страницу, добавил только заголовок и ссылку на главную страницу т.е. назад на index.html. Ну а Вы уж потренируйтесь.
|