Как я уже сказал выше, для того, чтобы создать ссылку-картинку, нужно вместо текста использовать изображение. Пример такой ссылки выглядит так:
< a href="http://www.seoded.ru/">< img src="logo.jpg">< /a>
А браузер покажет:
По-умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту «border» тега IMG нужно присвоить значение 0:
< a href="http://www.seoded.ru/">< img src="logo.jpg" border="0">< /a>
Текстовые и графические ссылки можно комбинировать. Если написать:
< a href="http://www.seoded.ru/">< img src="logo.jpg"> Главная страница< /a>
, то ссылкой будет как картинка, так и текст «Главная страница»
Главная страница
Для комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута «href» указывается якорь ссылки. Якорь создается атрибутом «name»:
< a name="имя якоря">текст< /a>
Имя якоря задается произвольно. Тут стоит сказать, что не все браузеры понимают русские имена якорей, поэтому рекомендую использовать латиницу. Текст между тегами < A> и < /A> для создания якоря не обязателен и чаще всего не указывается.
Якорь располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке.
Как я уже сказал выше, в атрибуте «href» внутренней ссылки вместо адреса указывается имя нужного якоря с обязательным символом решётки («#») перед ним. Разберём на примере.
Я создал якорь с именем «zagolovok» и разместил его рядом с заголовком этого урока («Гиперссылки в HTML»). Код якоря следующий:
< a name="zagolovok">< /a>
HTML-код внутренней ссылки будет выглядеть так:
< a href="#zagolovok">К заголовку< /a>
, а в браузере так
К заголовку
После щелчка по этой ссылке, ты попадёшь к заголовку этого урока.
Если ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера:
Используя эту особенность, можно ссылаться на определённое место страницы с любого ресурса в Интернете! Т.е., допустим, ты создал страницу с объёмной статьёй о чём-то (или выложил на странице большое число фотографий) и разметил её внутренними ссылками. Находясь в социальной сети ВКонтакте, тебе потребовалось сослаться не просто на страницу со статьёй (или фотографиями), а на определённое место на ней (или определённую фотографию). Используя вариант с внутренней ссылкой в адресе, ты с лёгкостью добьёшься нужного.
Также ссылки бывают абсолютными и относительными. Абсолютная ссылка — это обычная ссылка вида:
< a href="http://www.site.ru/">Главная страница< /a>
А вот с относительными ссылками немного посложнее. В таких ссылках адрес указывается либоотносительно корневой папки сайта (той, в которой лежит главная страница), либо относительно исходной страницы. Такие ссылки нужны, например, в том случае, если сайт лежит на домашнем компьютере. Или это не сайт, а страница-указатель на другие документы.
Разберём сначала создание ссылки относительно корневой папки сайта.
Допустим нам нужно сослаться на страницу klienty.html, которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид:
< a href="/klienty.html">Клиенты< /a>
А теперь предположим, что в одной папке с главной страницей лежит папка «zakazy» и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким:
< a href="/zakazy/klienty.html">Клиенты< /a>
Т.е. при формировании ссылки относительно корневой папки сайта мы опускаем начальную часть адреса http://www.site.ru и оставляем всё остальное. Использование слеша «/» в началеобязательно!
Теперь рассмотрим создание гиперссылок относительно исходной страницы. Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html Тут бывают следующие типовые варианты:
1. Страницы price.html и klienty.html находятся в одной папке Тогда код ссылки будет таким:
< a href="klienty.html">Клиенты< /a>
2. Страница klienty.html и папка «zakazy» находятся в корневой папке сайта, страница price.html лежит в папке «zakazy» (т.е. страница klienty.html относительно исходной страницы price.html лежит на один уровень выше) Код станет таким:
< a href="../klienty.html">Клиенты< /a>
Две точки показывают, что нужно выйти из текущей папки на уровень выше.
3. Страница klienty.html и папка «zakazy» находятся в корневой папке сайта, папка «mebel» лежит в папке «zakazy», страница price.html лежит в папке «mebel» (т.е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше) Код ссылки примет вид:
< a href="../../klienty.html">Клиенты< /a>
Т.е. каждый уровень обозначается двумя точками и слешем «/».
4. Страницаprice.html(исх. страница) и папка «zakazy» находятся в корневой папке сайта, страницаklienty.htmlлежит в папке «zakazy» (т.е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже) Теперь код ссылки будет таким:
< a href="zakazy/klienty.html">Клиенты< /a>
В этом случае точки и слеши не ставятся.
5. Страница price.html (исх. страница) и папка «zakazy» находятся в корневой папке сайта, папка «mebel» лежит в папке «zakazy», страница klienty.html лежит в папке «mebel» (т.е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже) Код ссылки такой:
< a href="zakazy/mebel/klienty.html">Клиенты< /a>
6. В корневой папке сайта лежат две папки: «zakazy» и «oplata». Страница klienty.html лежит в папке «zakazy», исходная страница price.html лежит в папке «oplata» (т.е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта) Код ссылки станет следующим:
< a href="../zakazy/klienty.html">Клиенты< /a>
По аналогии создаются относительные ссылки и в том случае, если страницы лежат на разных уровнях относительно корневой папки. Будет меняться лишь количество указателей уровня (две точки и слеш) и адрес страницы, на которую ставится ссылка.
Для того, чтобы создать ссылку на почту, нужно вместо URL-адреса в значении атрибута «href» написать адрес электронной почты с указанием протокола (mailto:). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так:
< a href="mailto:aleksei.seoded@gmail.com">Моя почта< /a>
, а в браузере так
Моя почта
Атрибуты тега «A»
У тега «A», как и у остальных тегов в HTML есть свои атрибуты. Рассмотрим некоторые из них.
Атрибут «target» По-умолчанию, браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это, используется атрибут тега «A» «target». Он имеет следующие значения:
_blank — открывает ссылку в новом окне (в современных браузерах в новой вкладке);
_parent — загружает ссылку в родительском окне;
_self — по умолчанию. Открывает ссылку в этом же окне.
Это не все значения атрибута target, но это самые основные. Пример использования этого атрибута:
< a href="http://www.seoded.ru/" target="_blank">Главная страница< /a>
Атрибут «title» В теге «A» можно также использовать атрибут «title». С его помощью создаётся всплывающая подсказка, которая появляется при наведении мыши на ссылку.
< a href="http://www.seoded.ru/" title="Перейти на главную страницу">Главная страница< /a>
