«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML



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

Ссылки позволяют переходить в браузере с одного сайта на другой. При помощи ссылок устанавливается связь между внутренними страницами сайта. А также, ссылками пользуются для перемещения между разделами/частями в пределах одной страницы.

Ссылка представляет собой фрагмент html-кода. Ссылку создают при помощи тега <a>: указывается элемент, который будет являтся ссылкой: текст, кнопка, изображение и адрес объекта, к которому будет осуществлен переход по ней.

Чтобы перейти по ссылке необходимо навести на нее курсор (при этом указатель курсора изменится на руку) и нажать на левую кнопку мыши - "Кликнуть по ссылке".



Текстовые ссылки

В сети Интернет наиболее распространены текстовые ссылки. Для создания текстовой ссылки внутри тега <a> располагают нужный текст, который и будет являться ссылкой.

С помощью обязательного атрибута href тега <a> задается адрес страницы на которую нужно перейти. В качестве значения атрибута href выступает абсолютный или относительный путь к файлу (подробнее здесь...).

При помощи атрибута target тега <a> указывают - в каком окне открывать страницу при переходе по ссылке. По умолчанию страница при переходе по ссылке открывается в текущем окне. Если же атрибуту target тега <a> присвоить значение blank, то страница откроется в новом окне.

Фрагмент кода
Относительная <a href = "view_tag.php?id=3" target="_blank"> Ссылка на тег a </a>
Результат

Относительная Ссылка на тег a

Изображение-ссылка

В качестве ссылок часто используют изображения.

Для создания ссылки-изображения внутри тега <a> располагают тег <img>, предназначенный для вставки изображения на страницу.

Фрагмент кода
Изображение-ссылка <a href = "view_tag.php?id=27" title="Ссылка на тег img" target="_blank"> <img src="img/peng_64.gif"> </a>
Результат

Изображение-ссылка

Пингвин в примере - это изображение-ссылка.

С помощью атрибута href тега <a> указываем адрес страницы на которую нужно перейти (Абсолютный или относительный путь к файлу (подробнее здесь...). При помощи атрибута title тега <a> добавлена всплывающая подсказка Ссылка на тег img, которую Вы увидите, если наведете курсор на изображение.

Вокруг изображения-ссылки по умолчанию рисуется рамка (отображается не во всех браузерах), цвет которой совпадает с цветом текстовых ссылок на странице. Избавиться от нее можно с помощью атрибута border тега <img>, присвоив ему значение 0 пикселей.

Цвет ссылок

По умолчанию все ссылки на странице имеют синий цвет, посещенные ссылки имеют фиолетовый цвет, и активные ссылки (ссылка является активной при нажатии на нее кнопкой мыши) - красный.

Цвет ссылок можно менять, используя атрибуты link, vlink и alink тега <body> (при это изменится цвет всех ссылок на странице):

- link - задает цвет не посещенных ссылок
- vlink (visited link) - задает цвет посещенных ссылок
- alink (active link) - задает цвет активных ссылок

Можно менять цвет отдельных ссылок с помощью тега <font> (Цвет можно задать двумя способами (подробнее здесь...)).

Фрагмент кода
<body link="red" alink="green" vlink="yellow">
Результат

Создайте простой html-документ, для которого укажите свои цвета для ссылок!

Ссылки внутри страницы

Ссылки внутри документа используют для удобной навигации по странице.

Возьмем для примера текущую статью: в ее начале расположен список существующих на этой странице разделов. Каждый элемент списка - это внутренняя ссылка, кликнув по которой Вы переходите к соответствующему разделу.

Для создания такой навигации, сначала необходимо поставить метку (метки) в нужном месте страницы: устанавливается метка при помощью атрибута name тега <a> или с помощью элемента id; далее метке присваивается какое-либо имя (любое - подходящее/удобное для Вас).

Затем, с помощью атрибута href тега <a>, в любом месте страницы, делаем ссылку на метку, указав ее имя с символом #.

Фрагмент кода
<a name="up"> </a> или <a id="up"> </a>
<p> <a href="#up"> Тег a </a> - ссылка на ссылку!</p>
Результат

Тег a - ссылка на ссылку!

Пояснение к примеру:

В начале этой страницы я установил метку с именем "up". Текст между тегами <a name="up"> и </a> не нужен, так как мы всего лишь указали место, в которое будет осуществлен переход по ссылке.

Затем создаем ссылку, для которой в качестве значения атрибута href указываем имя метки с символом #.

Теперь, кликнув по созданной ссылке, мы переходим к установленной метке. Все очень просто!

Нюанс: элемент id можно использовать внутри любого тега, в то время как name является атрибутом тега <a> и только!

В XHTML и HTML5 вместо атрибута name для установки метки требуется указывать атрибут id.

Ссылка на метку на другой странице

Можно сделать сылку на метку, расположенную на другой странице сайта (текущего или какого-либо другого).

Для этого, при создании ссылки, в качестве значения атрибута href указываем адрес страницы на которую нужно перейти (Абсолютный или относительный путь к файлу (подробнее здесь...), сразу после которого указываем имя метки с символом #.

Фрагмент кода
<p> <a href = "tag.php?id=3#name"> Ссылка </a> - на атрибут Name тега а на другой странице!</p>
Результат

Ссылка - на атрибут name тега а на другой странице!

Обязательным условием работоспособности подобных межстраничных ссылок, является использование атрибута name тега <a> при установке метки: name="имя метки"

В XHTML и HTML5 вместо атрибута name для установки метки требуется указывать атрибут id.

Ссылка на электронную почту

Ссылку на адрес электронной почты используют для отправки сообщения непосредственно с веб-страницы.

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

Необходимый адрес электронной почты следует указать в качестве значения атрибута href тега <a> после элемента mailto. Этот адрес будет автоматически указан в поле Кому: окна отправки сообщения Вашей почтовой программы.

Фрагмент кода
<p> <a href = "mailto:MyMail@mail.ru"> Отправить сообщение по электронной почте. </a> </p>
Результат




HTML по шагам

Все теги HTML

Тематические публикации

Тематические публикации