Ссылки в HTML

Ссылки в HTML являются основой, так называемой Всемирной Паутины, они могут быть в виде текста или изображения, но в любом случае кликнув по ним, осуществляется мгновенный переход в любую точку (адрес URL) гиперпространства независимо от того где они находится в реальности ( имеется ввиду реальное географическое местоположение). Наверное, трудно было бы представить современный Интернет без ссылок, да и выглядел бы он как, своего рода, рабочий стол с грудой наваленных бумаг никак не связанных между собой.

Содержание:

• Внешние ссылки, атрибут HREF.
• Абсолютные и относительные ссылки.
• Атрибут TITLE.
• Ссылки электронной почты.
• Внутренние ссылки, атрибут NAME.
• Атрибут TARGET.

Внешние ссылки, атрибут HREF

Ссылки в HTML обозначаются якорным элементом < а > < /а >. Атрибут href применяется для указания URL адреса ссылки, а текст, расположенный между открывающим и закрывающим тегами, становится связанным.

<a href="https://www.smartincom.ru/html/">Знакомство с языком HTML</a>

В браузере отображается:

 

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

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

Абсолютной ссылкой является ссылка с указанием точного адреса, с указанием домена, всех подкаталогов и имени файла, на который она указывает. Пример: < a href=”https://www.smartincom.ru/html/text.html” >ссылка на предыдущую страницу< /a >.

В браузере увидим:

Относительной ссылкой называется ссылка на файлы находящиеся на одном сервере или, если выразиться другими словами, рядом. Связать web-страницы находящиеся в одном каталоге можно просто указав имя файла. Пример: < a href=”/text.html” >ссылка на ту же предыдущую страницу < /a >.

В браузере снова увидим:

Если необходимо сослаться на страницу, которая находится в подкаталоге, то перед именем файла прописывается подкаталог – …/html/text.html. Чтобы переместиться из каталога в другой каталог – …/svoy-site/html/text.html.

Атрибут TITLE

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

<a href="https://www.smartincom.ru/html/" title="Знакомство с языком HTML. Руководство по написанию грамотного и оптимизированного кода самостоятельно от начала и до конца.">Знакомство с языком HTML</a>

Браузер покажет:

Ссылки электронной почты

Ссылки могут указывать не только на другие web-страницы. Тот же атрибут href можно использовать для перенаправления на адреса электронной почты. Ссылка электронной почты – это ссылка, которая вместо перехода на другую страницу открывает окно приложения для работы с электронной почтой. Для этого необходимо в значение атрибута href добавить префикс mailto: после которого прописывается адрес электронной почты получателя. Смотрим пример:

< a href="mailto:mr.terdrft@mail.ru">Адрес моей электронной почты< /a >

В браузере видим:

Внутренние ссылки, атрибут NAME

Как включаются внешние ссылки мы уже поняли, сейчас разберемся с внутристраничным связыванием. Внутренние ссылки позволяют переходить к определенным местам web-страницы (якорям), а не на страницу в целом. Эти ссылки создаются с использованием знака #, за которым указывается соответствующее имя. После определяется местоположение с использованием атрибута name, значение которого соответствует имени указанному в ссылке. На этой странице якорями являются заголовки 3 уровня, в коде это выглядит так:

<h3><a name="vnutr">Внутренние ссылки, атрибут NAME:</a></h3>

Рассмотрим на общем примере, пишем HTML-код ссылок:

<a href="# vnesh">Внешние ссылки, атрибут HREF.</a>
<a href="# tip">Абсолютные и относительные ссылки.</a>
<a href="# title">Атрибут TITLE.</a>
<a href="# mail">Ссылки электронной почты.</a>
<a href="# vnutr">Внутренние ссылки, атрибут NAME.</a>
<a href="# target">Атрибут TARGET.</a>

Смотрим в браузере:

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

<a href="https://www.smartincom.ru/html/#html">Создаем html-страницу</a>

В браузере отобразится:

Атрибут TARGET

При включении ссылок в HTML- языке можно управлять тем, куда будет открываться страница. По умолчанию ссылки открываются в том же окне, где открыта исходная страница. Но если есть необходимость открыть страницу в новом окне, то необходимо к тегу < a > прописать атрибут target со значением _blank. А чтобы открыть страницу в родительском окне у атрибута target должно быть значение _parent. Посмотрим пример:

<a href="https://www.smartincom.ru/">Ссылка откроется в том же окне</a>

<a href="https://www.smartincom.ru/" target="_blank">Ссылка откроется в новое окно</a>

В браузере:

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