Как работать с гиперссылками HTML

Весь интернет связан ссылками. Любая страница сайта, которую вы когда-либо видели, содержит множество ссылок. При чем, ссылки html могут быть совершенно разными — текстовая ссылка на внутреннюю страницу сайта, на страницу другого сайта, ссылка-картинка, на что либо. В этой статье мы расскажем, как различать ссылки, как создавать их на страницах сайта и как сделать их красивыми.

Для начала, давайте определимся, что такое гиперссылка:

Гиперссылка — это часть html кода страницы, которой может быть что угодно (анимация, текст, картинка). Этот код (ссылка) ведет на какой-то объект или страницу сайта, расположенного в интернете. По умолчанию, гиперссылка выделяется синим цветом.

Если вам необходимо создать html ссылку на другой сайт, используйте тег <a> с атрибутом href. Выглядеть это должно так:

<a href=»URL внешнего ресурса, на который вы хотите сослаться»>Анкор ссылки</a>

<a> — это тег html, который сообщает браузеру, что начинается ссылка.
href=»URL» — это атрибут тега <a>, которому присваивается значение url (вместо url, должен стоять адрес ресурса, на который необходимо сослаться). В нашем примере, после значения этого атрибута закрывается тег <a>.
Анкор ссылки — это часть, которую видит пользователь.
</a> — закрывающий тег ссылки. Если забыть его поставить, то весь текст на странице, после открывающего тега, будет являться гиперссылкой.
Теперь к практике: допустим, вы хотите сослаться на главную страницу этого блога с анкором Free-Webmaster. Тогда следует прописать такой html код:

<a href=»http://free-webmaster.ru»>Free-Webmaster</a>

Выглядеть это будет так:
Free-Webmaster

Как видите, всё довольно просто. И дальше будет не сложней.

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

Так выглядит картинка ссылка в коде html:

<a href=»URL»><img src=»URL картинки, загруженной на хостинг»></a>

Как и в текстовой ссылке, тег <a> и его атрибут href означают то же самое.
<img> — тег, который отображает картинку на веб-странице.
src — атрибут тега <img>, в значении этого атрибута должен быть указан путь к графическому файлу.
Давайте сошлемся на главную этого блога, как в прошлом примере, только вместо надписи Free-Webmaster, в качестве ссылки будет выступать картинка:

<a href=»http://free-webmaster.ru»><img src=»ssilka.png»></a>

Небольшая фишка: если вам нужно, чтобы в качестве ссылки выступал и текстовый анкор, и картинка — просто вставьте анкор:

<a href=»URL»><img src=»URL картинки, загруженной на хостинг»> АНКОР</a>

HTML ссылки внутри страницы
Наверняка, путешествуя по различным веб-страницам, вы видели внутренние ссылки. После нажатия на ссылку, ваш экран перемещается на определенную область страницы. Это и есть внутренние ссылки html.

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

Алгоритм создания.

1-ое действие. Создаем якорь (закладку, чтоб было понятнее) и размещаем его в то место страницы, в которое хотите чтобы перемещало пользователя:

<a name=»NazvanieYakoria»></a>

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

2-ое действие. Теперь можно создать внутреннюю ссылку:

<a href=»#NazvanieYakoria»>Анкор ссылки</a>

Как видите, атрибут href приобретает значение необходимого якоря. Чтобы браузер понимал, что в ссылке не ошибка, а название якоря, добавляется символ #. Анкор внутренней ссылки не отличается от обычной.

Приведем некоторый пример. Создадим ссылку, которая переместит вас в начало этой страницы:

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

Как это можно использовать в своих целях? Просто скопируйте адрес с анкором и отправьте другу, на форум, в соц сеть и т.д. И все, кто перейдет по такой ссылке, попадут на то место, где проставлен анкор.

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

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

Алгоритм создания такого файла:

В текстовом редакторе создаем документ
В этом документе пишем:
[InternetShortcut]
URL=http://Ардес сайта
Присваиваем документу расширение .url
Файл-ссылка готов.

HTML ссылка на электронную почту
Гораздо удобней не заставлять пользователя копировать почтовый адрес, затем вставлять его в строку «Получатели», а просто предоставить ему ссылку.

Чтобы сделать и разместить html ссылку на почту, воспользуйтесь таким кодом:

<a href=»mailto:почтовый адрес»>Анкор ссылки</a>

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

Абсолютные и относительные ссылки в html
Различать и использовать абсолютные и относительные ссылки очень важно. Ведь, если нету навыка использования хотя бы одного их вида, вы теряете много возможностей. Про абсолютные ссылки вы всё узнали из информации выше. Чтобы понять/вспомнить, что такое абсолютная ссылка html, посмотрите на этот код:

<a href=»адрес сайта»></a>

Это и есть абсолютная ссылка.

Из названия «относительная ссылка» должно быть понятно, что такая ссылка указывает объект, который находится по адресу относительно другого объекта/объектов. Такие ссылки придется использовать, если вы занимаетесь разработкой на локальном сервере (или просто на компьютере).

Давайте представим, что мы создали небольшой сайт (несколько страниц). Это сайт визитка небольшой юридической фирмы. У нас есть несколько папок:

Основная папка с сайтом, где находятся все файлы, в том числе glavnaya.html и папки со страницами.
Папка KontaktnayaInfo , в которой размещены страницы o-kompanii.html, kontakty.html
Папка Uslugi, в которой размещены страницы услуг, размещена папка OformlenieFirmy, и в папке OformlenieFirmy размещена страница registraciya.html
У нас есть файл в основной папке. И с этого файла мы будем размещать ссылки.

Если нам нужно разместить ссылку на главную страницу, она будет выглядеть так:

<a href=»/glavnaya.html»>Анкор ссылки</a>

Если необходимо создать ссылку на страницу о компании, пишем:

<a href=»/KontaktnayaInfo/o-kompanii.html»>Анкор ссылки</a>

Теперь представим, что мы хотим поставить ссылку со страницы o-kompanii.html на страницу kontakty.html:

<a href=»kontakty.html»></a>

Ccылка со страницы glavnaya.html на страницу registraciya.html будет выглядеть следующим образом:

<a href=»../../registraciya.html»></a>

Давайте разберем эту ссылку: нам необходимо указать путь к странице registraciya.html. Относительно папки со страницей glavnaya.html, нам нужно зайти в папку Uslugi, потом в папку OformlenieFirmy. В ссылке мы указываем это так: ../ — выйти из основной папки, второй раз ../ показывает, что необходимо выйти из папки услуги и просканировать все папки, которые находятся в папке Uslugi на наличие страницы registraciya.html.

На самом деле, ничего сложного, всё банально просто. Советуем внимательно отнестись к механизму создания относительных ссылок html. Чтобы понять и применить этот механизм, уйдет максимум 40-60 минут.

Оформление ссылок на сайт
css1

Оформление ссылок происходит при помощи CSS стилей. То есть, механизм следующий:

В теге <style> присваеваем html тегу ссылки <a> некоторые атрибуты. Выглядеть это будет так:

<style>

a {
color: #667387
font-size: 5em
}

</style>

Тег <style> должен находиться в теге <head>. Атрибутов, которые вы можете присвоить ссылке, довольно много. Но, чтобы овладеть ими и понять возможности CSS, необходимо немного поучиться.

Также, в ссылка можно присвоить удобный атрибут title. Выглядеть в коде он будет так:

<a href=»URL сайта» title=»Текст, который увидит пользователь при наведении на ссылку»>Анкор ссылки</a>

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

Как открыть html ссылку в новой вкладке
Если вы хотите, чтоб при нажатии на ссылку, у пользователя она открывалась в новой вкладке (что очень удобно), необходимо задать ей атрибут _blank. Например, код ссылки на главную этого сайта будет выглядеть так:

<a href=»http://free-webmaster.ru» target=»_blank»>Анкор ссылки</a>

Если вы работаете в интернете, научиться работать с html ссылками очень важно. Так как всё в интернете построено на ссылках. Обязательно, после изучения каждого абзаца этой статьи, делайте эксперименты. Для этого вам понадобится текстовый редактор, желательно notepad++. В нем очень удобно создавать html страницы.