Ссылки в HTML. Тег <A> и его параметры.

Ссылки на сайте предназначены для того, чтобы объединить все страницы сайта воедино. Могу сказать вам со стопроцентной гарантией: на сегодняшний день в Интернете не существует сайта, где бы напрочь отсутствовали ссылки — такое нереально просто физически. Исключением может быть лишь домашняя страница, скажем, Васи Пупкина. Но как вы и сами понимаете, страница — еще не сайт. Словом, совершенно очевидно, что ссылки необходимы вашему ресурсу, как воздух человеку. А потому, не мешкая больше ни секунды, приступим к их изучению. И вот единственно нужный нам тег:

<A> — контейнерный тег HTML, добавляющий на страницу ссылку. В контейнере размещается текст ссылки.

Вы уже освоили тег <img>, а значит для вас не составит проблем изучить и <a>. Потому что несмотря на одно существенное различие (тег <img> — одиночный, а <a> — контейнерный) у этих двух тегов схожие свойства. В частности, у тега <a>, как и у <img> есть свой обязательный параметр.

href — параметр тега <a>, указывающий браузеру адрес точки назначения; а иными словами адрес страницы, или иного файла, на который ведет ссылка.

Например, для того, чтобы создать ссылку на сайт Яндекса, нужно написать следующий фрагмент кода:

<a href="yandex.ru">Яндекс</a>

В данном примере слово «Яндекс», заключенное в контейнер тега <a>, является текстом ссылки, или так называемым якорем. Теперь создайте свою ссылку. На какой-угодно адрес, это не имеет никакого значения.

Ссылка может вести как на html-страницу, так и на любой другой файл. Например, если тег <a> ссылается на файл с расширением .rar, т.е. архив, то такая ссылка будет скачивающей. Посетитель, нажав на нее, сможет загрузить указанный архив на свой жесткий диск. Переходим к следующему параметру.

Взгляните на представленную ниже ссылку:

Нажав сюда, вы попадете на страницу, где расположено много полезной информации и не только. Щелкайте скорее, предложение ограничено - акция действительна только до конца месяца.

Согласитесь, выглядит не очень. Во первых, неэстетично. Ну а во-вторых, просто неудобно. Поэтому ни одному здравомыслящему вебмастеру и в голову не придет создавать подобные линки на страницах своего сайта. Вместо этого он постарается сделать свои ссылки максимально короткими и предельно ясными. А там, где нельзя обойтись без пояснений, воспользуется всплывающими подсказками. Для их создания к тегу <a> применяется тот же параметр, что и к тегу <img>.

title — параметр тега <a>, добавляющий к ссылке ее наименование, отображающееся при наведении курсора на ссылку. Значения параметра — текстовые. title уже вам знаком, поэтому не буду на нем останавливаться.

Ссылки можно форматировать, аки обычный текст. К ним можно применять все теги, описанные в статье, посвященной форматированию текста. В частности, если вам нужно сделать шрифт ссылки жирным, то нужно создать такую конструкцию.

<a href="yandex.ru"><b>Яндекс</b></a>

Обратите внимание на тот факт, что в контейнере оформительского тега <b> помещается только якорь, а не весь контейнер ссылки. То же самое касается и других тегов оформления — <i> и <font>. Например, создадим ссылку с гарнитурой шрифта «Tahoma», размером в 4 условные единицы, зеленого цвета.

<a href="yandex.ru"><font face="Tahoma" size="4" color="green">Яндекс</font></a>.

А вот так будет выглядеть код той же ссылки, но с добавлением жирности и курсива:

<a href="yandex.ru"><b><em><font face="Tahoma" size="4" color="green">Яндекс</font></em></b></a>.

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

По умолчанию ссылки отображаются в браузере подчеркнутыми. Как убрать это подчеркивание, я расскажу в статье, посвященной параметру style. Пока же не будем его трогать, как и тег оформления <u>, в силу его ненужности в данной ситуации.

Только что мы рассмотрели теги оформления текста применительно к ссылкам. Теперь перейдем к тегам непосредственного форматирования текста опять же по отношению к ссылкам. Здесь картина прямо противоположна той, что наблюдалась с тегами оформления. Одиночные теги непосредственного форматирования нужно помещать перед контейнером ссылки, а не перед ее якорем. Например для переноса ссылки на новую строку, нужен фрагмент кода:

<br><a href="site.ru">Ссылка;</a>.

А для помещения ссылки в начале абзаца, такой фрагмент:

<p><a href="site.ru">Ссылка</a>.

Если в качестве ссылки выступает заголовок (что редко, но бывает), то опять же в контейнер тега <h1> помещается весь контейнер ссылки, а не только якорь:

<h1><a href="site.ru">Ссылка</a></h1>.

Ну вот, этой информации вполне достаточно, чтобы создать и оформить ссылку на ваше усмотрение. На этом наш с вами разговор об элементах, размещаемых на html-странице завершен. В следующей короткой статье поговорим о тегах, которые пишутся в контейнере тега <head> — мета-тегах.