4.2. Ссылки
Гиперссылки – важное средство языка HTML, благодаря которому возможны переходы между различными документами, объектами и веб - сайтами, размещенными в Интернете. Гиперссылки реализуются с помощью тега <а>. Первым атрибутом тега является href="адрес ресурса". Еще один атрибут name= "ссылка в документе" позволяет установить навигацию внутри документа. Атрибут target содержит имя окна, куда будет загружаться новый документ: target=_blank/_top – загрузка в новое окно; target=_parent – загрузка в родительское окно; target=self – загрузка в текущее окно; target=_search – загрузка в окно поиска. Атрибут title="Пояснительная информация" содержит всплывающую подсказку при наведении курсора на гиперссылку. Атрибут charset="кодировка" указывает, с помощью какой кодировки следует открыть сетевой ресурс.
В следующем примере атрибут href определяет ссылку на другой HTML-документ:
<a href="Minsk.html">Minsk</a>
Если файл, на который указывает ссылка, может быть открыт в браузере, он открывается. В противном случае выполняется загрузка этого файла с сохранением на диске. Если документ, формирующий ссылку, находится не в текущей директории, то подобная ссылка называется относительной. Например:
<a href="Belarus/Minsk.html">Minsk</a>
Ссылки можно формировать на основе URL, например:
<a href="http://www.w3.org/tr/rec-html40"> документ html </a>
Внимания заслуживает применение гиперссылок для отправки писем по электронной почте. Тег <а> позволяет составить шаблон письма, которое клиент может отправить по адресу, указанному в параметре href.
<!Doctype html>
<!--пример pr9: создание ссылок на html-файлы-->
<html>
<head><title>Ссылки на домашней странице</title></head>
<body>
<h1>Внутренние ссылки на части документа</h1>
<hr> Если вас интересует подробная информация, пишите по адресу
<a href="mailto:romanchik@bsu.by">romanchik@bsu.by</a>
<hr> <h2>вы можете:</h2>
<ul>
<li>Посмотреть <a href="pr1.htm">простейший пример</a></li>
<li>Посмотреть <a href="pr2.htm">второй пример</a></li>
<li>Посмотреть <a href="pr3.htm">разбиение текста</a></li>
<li>Узнать <a href="pr4.htm">о линиях</a></li>
</ul>
<p>Над сайтом работали:</p>
<address>
<a href="http://Barsik.com/">Барсик</a>,
<a href="http://Basilii.com/">Вася</a>,
<a href="http://tusic.ru/">Тузик</a>,
</address>
</body></html>
В примере рассматривается также элемент address, который несет в себе контактную информацию людей, связанных с документом. Результат:
Для того чтобы сослаться не просто на документ, а на его определенное место, используются якоря. Сначала с помощью якоря (тега <а> с атрибутом name) помечается место, куда будет осуществлен переход. Чтобы осуществить переход на этот якорь, используется параметр тега <а href = "имя якоря">. Имя якоря содержит URL документа, за которым следует имя якоря, предваряемое символом #. Если якорь находится на текущем документе, то URL не указывается.
<!Doctype html>
<!--пример pr10: Ссылки на якоря-->
<html>
<head><title>якоря на домашней странице</title></head>
<body>
<!-- создание ссылок на якоря -->
<ul>
<li><a href="#section1">введение</a></li>
<li><a href="#section2">обзор</a></li>
<li><a href="#section3">подробное рассмотрение</a></li>
</ul>
<br/> <hr/>
...тело документа...
<hr/>
<!-- установка якорей -->
<h1><a name="section1">Введение</a></h1> <hr/>
...section 1...<hr/>
<h2><a name="section2">Обзор</a></h2><hr>
...section 2... <hr/>
<h3><a name="section3">Подробное рассмотрение</a></h3><hr/>
...section 3... <hr/>
</body> </html>
Подобный эффект можно получить, используя вместо якорей id элементов:
<!--пример: заглавия id вместо якоря-->
<html>
<head><title>ссылки на заголовки</title></head>
<body>
<h1>table of contents</h1>
<a href="#section1">introduction</a><br>
<a href="#section2">some background</a><br>
<a href="#section3">the first part</a><br>
...the rest of the table of contents...
<h2 id="section1">introduction</h2> <hr>
...section 1...<hr>
<h2 id="section2">some background</h2><hr>
...section 2...<hr>
<h3 id="section3">the first part</h3><hr>
...section 3...<hr>
...продолжение документа...
</body></html>
Напомним, что тег <а> позволяет с помощью атрибута target выбрать окно, в котором будет открыт новый объект.
Вместо имени гиперссылки можно указать изображение в виде
<img src="image/img.gif" height="100" width="100">.
Щелкнув по изображению, переходим на указанный адрес. Пример:
<html>
<head>
<title> Создание рисунка-ссылки</title>
</head>
<body>
<a href="sample.html"><img src="image/img.gif"
border="0" height="100" width="100"></a>
</body>
</html>
Гиперссылкой может служить не только целое изображение, но и его фрагменты. Для этого создаются так называемые карты изображений. Карта изображения – это конструкция языка HTML, образованная с помощью тегов <мар> и <area>. Тег <мар> определяет имя карты, по которому она впоследствии связывается с самим изображением.
В теге <img> в параметре usemap=”#mapname” указывается имя карты. Это имя присваивается с помощью дескриптора <мар name= “mapname” >. Внутри конструкции <мар>... </мар> помещаются также теги <area>. Каждый такой тег описывает параметры определенной области изображения, которой поставлена в соответствие гиперссылка. Этими параметрами являются форма, координаты, адрес объекта – ссылка. Здесь, как в теге <а>, действует параметр target и, как в теге <img>, – параметр alt. Форма области определяется параметром shape, который принимает одно из четырех значений: rect (по умолчанию), circ, poly и default. Эти значения соответствуют прямоугольнику, кругу, многоугольнику и всей области изображения. Для каждой из первых трех форм предусмотрена своя система задания координат параметром coords. Значением параметра служит текстовая строка, где через запятую перечислены значения координат (в пикселях), однозначно определяющие размер и положение данной области. Для круга это координаты центра и радиус, для прямоугольника – координаты левой, верхней, правой и нижней сторон, а для многоугольника – координаты вершин. Пример:
<html><head>
<title> Создание карты-изображения</title>
</head>
<body>
<img src=”map.gif” width=300 height=”100” border=”0” usemap=”#map” аlt="Навигация по сайту">
<map name=”map”>
<area shape=” rect” coords="0,0, 100,100" href=linkl.html>
<area shape=” rect” coords="100,0, 200,100" href=link2.html>
<area shape=” rect” coords="200,0, 300,100" href=link3.html>
</map>
</body> </html>