Виды гиперссылок существуют html

Гиперссылки HTML

Для создания ссылок используется тег с атрибутом href .

a href="http://www.wantweb.ru">ссылка на этот сайт/a>

Между открывающим и закрывающим тегом могут содержаться строчные и строчно-блочные элементы, такие как: span, code, strong, img .. ,
а также перенос строки

Предупреждение!

Спецификацией не допускается вложения в ссылки блочных элементов!
Браузер вас, вероятнее всего, привычно простит . , но вы получите ошибку валидации. Нам оно нужно?

Атрибуты ссылки

Тег а может содержать несколько атрибутов. Наряду с общими для большинства тегов class, style, id , используется с некоторыми специфическими атрибутами.

href

Обязательный атрибут гиперссылки. Применяется для определения URL цели гиперссылки.

URL (Uniform Resource Locator) — универсальный указатель ресурсов.

Значением href может быть любой допустимый абсолютный или относительный url, включающий идентификатор фрагмента или фрагмент кода JavaScript.

target

Не обязательный. Обычно этот атрибут использует 2 значения:

target=»_self» — значение по умолчанию для тега a . Документ, на который указывает гиперссылка, должен быть отображен в том же окне.

target=»_blank» — Документ, на который указывает гиперссылка, будет открыт в новом безымянном окне.

title

Необязательный атрибут. Позволяет определить текст, который вы сочтете нужным вывести на экран в виде подсказки, при наведении указателя на гиперссылку.

Значением атрибута является произвольная строка, заключенная в кавычки. Можно использовать для вывода названия документа, или при использовании вместе с атрибутом target=»_blank» , вежливо предупредить, что документ откроется в новом окне

a hrеf="images/pic_01.gif" target="_blank" title="откроется в новом окне"> img srс="images/pic_01_small.gif" alt="название изображения"/> /a>

Остальные атрибуты, при необходимости, вы можете посмотреть в справочнике. Они не так часто употребляются, поэтому здесь не рассматриваются.

Относительные и абсолютные ссылки

Относительные ссылки

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

Обычно в относительном URL имя сервера опущено, и указывается сокращенный адрес документа, который автоматически комбинируется с базовым адресом.

Разберем как будет формироваться относительный URL, в зависимости от расположения файлов. Легче понять на примере.

Основной документ — ссылающийся документ в котором находится ссылка

Цель ссылки — запрашиваемый документ

Текущая папка — где расположен основной документ

Вложенная папка — внутри текущей

Соседняя папка — вместе с текущей, располагается в общей родительской

Родительская папка — внешняя по отношению к текущей

  a href="цель-1.html">Цель-1/a> a href="вложенная/цель-2.html">Цель-2/a> a href="../соседняя/цель-3.html">Цель-3/a> a href="../цель-4.html">Цель-4/a>

Бывают и более сложные варианты с большим числом уровней вложенности.

Можно сформулировать несколько простых правил:

Если цель ссылки находится в том же каталоге что и основной документ,
путь = цель

Если цель находится в другой папке текущего каталога (вложенной),
путь = имя_каталога/цель

Имя внешнего (по отношению к текущему) каталога не указывается, а в начале пути ставится 2 точки и слэш — ../ и далее путь

Абсолютные ссылки

Если запрашиваемый документ находится на другом сервере, то необходимо указывать абсолютный URL

URL типа http

Самый обычный URL, наиболее часто применяемый в качестве цели гиперссылки. Выглядеть может вот так:

В общем виде данный тип имеет следующий формат: http://сервер:порт/путь

Путь — это иерархическая последовательность, указывающаяся местоположение документа на сервере.
Одно или несколько имен, разделенных наклонной чертой. Все имена, кроме последнего — имена каталогов. Последнее имя — имя документа (по умолчанию веб-серверы принимает имя файла index.html)

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

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

URL типа file

Файловый URL указывает на файл, хранящийся на компьютере, без регламентирования протокола, применяемого для его загрузки. Это позволяет вам загружать и выводить на экран локальный документ.

File-сервер, как и http-сервер, должен быть доменным именем или IP-адресом компьютера, содержащего скачиваемый файл. Отличие — протокол соединения не указывается. Файловый сервер может быть неквалифицированным, но уникальным именем компьютера в личной сети, или устройством хранения информации.
Путь к запрашиваемому файлу на указанном сервере может различаться в зависимости от операционной системы на сервере

 a href="file://D:\путь\имя_файла.html">ссылка для Windows-систем/a> a href="file://D:/путь/имя_файла.html">ссылка для Unix-систем/a> a href="file://localhost/home/document.html">Документ/a> a href="file://server-name.com/document.html">Документ/a>

URL для mailto

a hrеf=«mailtо:fоg@fоgnsnow.ru»>письмо мне/a> a hrеf=«mailto:fоg@fоgnsnow.ru?subject=Test mailto»>письмо мне + тема/a>

URL типа ftp

Указатель ресурса типа ftp используется для получения документов с FTP-серверов. В общем виде выглядит так:

FTP (Fail Transfer Protocol) — служба, требующая аутентификации. Значит для получения документа с сервера, вы должны быть зарегистрированным пользователем и знать пароль.
Многие FTP-серверы дают ограниченный доступ к своему содержимому всем желающим под логином — anonymous или quest, а порой и без всякого логина (подразумевается по умолчанию)

Никогда!
Не помещайте ftp URL с именем пользователя и паролем ни в какой документ!
Браузер сам предложит вам их ввести после соединения с сервером

Сервер и порт указываются по тем же правилам, что и в http URL (если порт не указан, то по умолчанию назначается порт 21)

Путь — последовательность каталогов, разделенных символом наклонной черты, ведущей к запрашиваемому файлу.
Код_типа передачи — по умолчанию файлы передаются как двоичные. Если указать type=
d — название каталога
a — файл содержащий ASCII-текст
остальное смотрите в справочнике.

 a href="ftp://www.site-name.ru/my_files/file_1">/a>  a hrеf="ftp://name@sitе-name.com/ctl_name;type=d">/a>  a hrеf="ftp://user:mуPswd@sitе-name.com/file_2;type=a">/a>

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

Обычно такие ссылки называют якорями.

Для создания ссылки на определенный фрагмент на той же странице нужно выполнить два действия:

1. Создать фрагмент, который будет служить целью для гиперссылки
2. Создать ссылку на этот фрагмент

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

После этого создается сама ссылка, у которой атрибуту href задается значение идентификатора фрагмента после знака решетки (#)

 h3 id="Atribut_link">Атрибуты ссылки/h3> . a href="#Atribut_link">Фрагмент "Атрибуты ссылки"/a>

Если бы фрагмент, созданный выше, находился на другой странице, например somepage.html, то адрес этой страницы должен быть включен в URL перед знаком #

a href="somepage.html#Atribut_link">Фрагмент на другой странице/a>

По ссылке будет осуществлен переход к указанному фрагменту на другой станице.

При использовании абсолютного URL, адрес формируется аналогично:

a href="http://site-name.com/somepage.html#Atribut_link"> Абсолютная ссылка на фрагмент /a>

Изображения в качестве ссылок

Изображение по умолчанию является строчно-блочным элементом и может быть использовано как содержимое гиперссылки.

Чтобы сделать картинку ссылкой, достаточно вложить его в тег a :

 a href="document.html"> img src="image.jpg" alt="Изображение-ссылка" /> /a>

В приведенном примере при клике на изображение в этом же окне откроется document.html

Если нужно, чтобы при клике открылось полноразмерное фото в новом окне, нужно в качестве цели указать адрес этого фото и добавить атрибут target .

 a href="images/full-size-foto.jpg" target="_blank" title="в новом окне"> img src="images/small-foto.jpg alt="Большое фото" /> /a>

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

Стили ссылок. Псевдоклассы

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

Ссылка — строчный элемент. Иногда это может доставить неудобства, например нельзя задать размеры.

Как сделать ссылку блочной

Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.

/* CSS. Создаем классы и индексы для ссылки */ /* делаем ссылку блочной */ a.block_link {display: block;} /* плавающей (автоматически становится блочной */ a#float_link {float: left;} /* абсолютной (автоматически становится блочной */ а.absolut_link {position: absolute;}

После этого со ссылкой вида

a class="block_link" href="#/">Блочная ссылка/a>

можно обращаться как с блочным элементом.

href — обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/ .При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.

Псевдоклассы

Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):

— Цвет. Обычно браузеры отображают не посещенную ссылку синим цветом
— Подчеркивание
— При наведении на ссылку, вид курсора меняется
— При клике, цвет ссылки меняется на красный
— После посещения, цвет ссылки становится фиолетовым

При отображении гиперссылок большинство браузеров по умолчанию использует определенные стилевые правила.

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

Но что делать с изменением цвета при клике на ссылку, или после посещения?

Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
a:псевдокласс

Различают 4 специальных состояния гиперссылок.

1. a:link — не выбранная пользователем, непосещенная гиперссылка
2. a:visited — ссылка, посещенная ранее
3. a:hover — выбранная ссылка, на которую наведен указатель курсора
4. a:active — выбранная ссылка, в настоящий момент обрабатываемая браузером
   (при нажатии на кнопку мыши)
5. a:focus — ссылка, получившая фокус

Как сделать ссылку кнопкой

 a href="#/" class="link_button">Кнопка/a>

Псевдоклассы можно применять как непосредственно к тегу a , так и к классу ссылки

/*-- CSS. --*/ .link_button { padding: 4px 12px; border: 1px solid #CDECD3; background: #E9FFEE; border-radius: 6px; } .link_button:hover { background: black; color: #fff; } .link_button:active { color: red; }

Внимание специфичность!

Почему иногда псевдоклассы не работают?

Т.к все рассмотренные псевдоклассы имеют одинаковый приоритет, то следующий переопределяет предыдущий. Здесь важен порядок записи стилей.

«LoVe & HAte» — любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.

Фокусы с гиперссылками

Что можно делать с помощью только CSS без использования сценариев JavaScript и пр.

Секрет достаточно прост. Псевдокласс :hover позволяет управлять параметрами элементов, содержащихся в теге a , А он может содержать разные элементы, например изображение или текст.

Значит при наведении курсора на ссылку, содержащую определенный элемент, мы можем изменять цвет текста ( color ), видимость элемента ( visibility: hidden|visible ), управлять выводом элементов ( display: none|block|inline|. ), цветом фона, адресом фонового рисунка ( background: цвет url(имя файла) ) и т.п.

Этот элемент мы можем позиционировать абсолютно ( position:absolute )! Он тут же выпадет из общего потока и прилипнет к верхнему левому углу ближайшего позиционированного родительского блока.

Остается лишь поместить элементы в нужную область содержащего позиционированного блока с помощью свойств left, top, right и bottom (более того, мы можем вынести элемент за пределы родительского блока, присвоив соответствующему из перечисленных свойств отрицательное значение), при необходимости, задав размеры, отступы и прочие параметры.

Вот и все. Создается визуальная иллюзия самостоятельности элемента.

Не забываем, что наш «независимый элемент» остается частью ссылки и при наведении на него курсора (если не отменен вывод) происходит то же, что и при наведении на ссылку. Это можно считать минусом рассмотренного метода. Немного смягчить столь явную связь ссылки с удаленным объектом можно, присвоив свойству cursor:default . По крайней мере, при наведении курсора на объект он будет выглядеть как обычный указатель.

× Данный пример — всего лишь демонстрация возможностей псевдоклассов, а не рекомендация к практическому использованию 🙂

Источник