Веб Навсегда.инфоHTML-теги → A

Реклама


!!! Ваша ссылка здесь всего за 10 руб в месяц на всех страницах сайта!!!

A

Описание элемента

Один из самых важный и распространённых HTML тегов. Этот тег позволяет создавать ссылки и "якоря", в зависимости от указанных параметров. Давайте подробнее об этом...

Итак, для начала что же такое ссылка и что же такое якорь:

  • Ссылкой (или гиперссылкой) называют запись, связывающую между собой части документа. Ссылки бывают внешние (ведущие на другие HTML страницы и сайты) и внутренние (ссылающиеся на другую часть того же документа) 
  • Якорь (или внутренняя ссылка) - это запись, ссылающаяся на некую часть того же документа.

Как видите понятие ссылки несколько шири, чем понятие якоря... по сути якорь это та же ссылка, но только внутренняя.

Чтобы сообщить браузеру о ссылке необходимо передать ему её как минимум:

  1. Тип (внешняя ссылка или якорь)
  2. URL (Уникальный Указатель Ресурсов).

Есть ещё и другие необязательные параметры, но о них чуть позже...
Вернёмся к самим ссылкам. Адреса ссылки делятся на Абсолютные и Относительные.
Абсолютные ссылки работают всегда и везде, независимо от положения и названия HTML страницы и имени сайта, на котором прописана ссылка, т.к. она содержит полный путь.
Относительная же сильно зависит от положения текущего документа и указывается от корня сайта.

Синтаксис

<a [href || name]=["URL" || "идентификатор"] {target | title="имя" | "значение"}>Видимый текст</a>

Как видите из синтаксиса, ссылка может быть "href" - это внешняя ссылка или "name" - это якорь. В случае обычной ссылки подставляется URL сайта, а в случае якоря подставляется идентификатор якоря (он должен быть предварительно создан). Это были обязательные параметры, а далее могут идти необходимые параметры, которые (как правило), могут принимать какие либо значения. Закрывающийся тег обязателен. Если его не будет, то ссылкой может стать всё содержимое веб-страницы идущее далее, а не только нужная вам часть. Давайте чуть подробнее о параметрах.

Возможные параметры

href - задаёт адрес документа, на который должен перейти браузер.

name - указывает идентификатор (имя) якоря внутри документа

target - Имя окна или фрейма, в котором будет открываться документ

title - Добавляет всплывающую подсказку к ссылке.

А теперь подробнее о каждом параметре...

Параметр HREF

Как уже было сказано ранее, задаёт адрес (URL) документа. Ссылка может быть на любой файл, будь то HTML страница, RAR архив, DOC документ или что-либо ещё. Далее браузер будет уже сам, основываясь на расширении файла определять, что с ним делать. Этот параметр обязателен для ссылок и может не применятся только в случае если ссылка является якорем (т.е. внутренней ссылкой). См. Пример №1.

Возможные аргументы:
Абсолютный или относительный путь к файлу или сайту.

Значение по умолчанию:
Отсутствует.

Параметр NAME

Используется только для закладок (якорей). Прежде чем создавать ссылку на якорь, нужно его создать. Для этого и используют этот  параметр, указывая в качестве аргумента желаемое имя. В этом случае писать текст между открывающимся и закрывающимся тегами не обязательно, хотя, на мой взгляд, это желательно делать. Это и будет то место, куда будет ссылаться ссылка-якорь.
Далее в необходимом месте пишем уже ссылку (т.е. содержащую href), а вместо URL и параметра href указываем введённое выше имя, добавляя спереди спецсимвол "решётка": #. Подробнее смотри Пример №2.

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

Возможные аргументы:
Любое значение с учётом регистра, желательно цифро-буквенное. Использовать кириллицу и спецсимволы лучше не нужно.

Значение по умолчанию:
Отсутствует.

Параметр TARGET

Указывает имя окна или фрейма в котором нужно открывать эту ссылку. В случае если не будет найдено окно или фрейм с указанным именем, то открытие произойдёт в новом окне. Так же есть, так называемые "зарезервированные имя окон". Смотри Пример № 3.

Возможные аргументы:
Имя окна или фрейма или любое из зарезервированных имен:
_blank - Загружает ссылку в новое окно или фрейм.
_self - Загружает ссылку в текущем окне или фрейме.
_parent - Загружает ссылку в родительский фрейм (тот, из которого была открыт этот документ). А если таковой отсутствует, то работает как _self.
_top - Загружает ссылку в полном окне браузера, "съедая" все существующие фреймы. При отсутствии фреймов, опять же работает как _self

Значение по умолчанию:
_self.

Параметр TITLE

Добавляет всплывающую подсказку к ссылке. эта подсказка появляется, если задержать курсор на ссылке неподвижно на несколько секунд (как это, например, у меню нашего портала). А как это сделать, смотрите в Примере № 4

Возможные аргументы:
Любая строка.

Значение по умолчанию:
Отсутствует.

Примеры использования

Пример № 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег A. Параметр HREF.</title>
</head>
<body>
<p><a href="img/Logo.gif">Вот наш логотип! Это относительная ссылка</a></p>
<p><a href="http://webforever.info/viev.phtml?cat=html&teg=A">А вот абсолютная ссылка на эту страницу.</a></p>
</body>
</html>

Пример № 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег A. Параметр NAME. Якоря.</title>
</head>
<body>
<p><a name="verx"></a>Бла-бла-бла много текста, ооочень много всего. Желательно побольше текста сюда вписать, чтобы появлялась полоса прокрутки вниз.. А в самом низу разместите ссылку... вот такую:</p>
<p><a href="#verx">Вверх^</a> При этом произойдёт переход вверх страницы.</p>
</body>
</html>

Пример № 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег A. Параметр TARGET.</title>
</head>
<body>
<p><a href="/index.phtml" target="_blank">Главная страница сайта</a> Эта ссылка откроется в новом окне.</p>
</body>
</html>

Пример № 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег A. Параметр TITLE.</title>
</head>
<body>
<p><a href="/index.phtml" target="_blank" title="ВебНавсегда.инфо - всё о веб технологиях.">Главная страница сайта</a> Эта ссылка не только откроется в новом окне, но и при наведении на неё появится надпись, записанная "в TITLE".</p>
</body>
</html>