Войти
s-lub » Учебники » HTML » Ссылки в HTML

Ссылки в HTML

Ссылки в HTML

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

За ссылки в HTML документе отвечает атрибут «а», вот так выглядит самая простая ссылка:

<a href="https://s-lub.ru"> ссылка на сайт s-lub.ru </a>

Элемент а (ancor) даёт понять браузеру что это ссылка по которой можно перейти на другую страницу или другой сайт.

А атрибут href ("hypertext reference/гипертекстовая ссылка") – указывает на какую именно страницу или сайт нужно перейти.

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

<a href="/stranica4.html"> ссылка на сайт s-lub.ru </a>

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

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

<h2> <a name="razdel1"></a> Раздел1: </h2>

Но в этом случае вам нужно будет создать блок на странице и назвать его "razdel1"

<h2 id="razdel1">Раздел 1</h2>

С этим более менее разобрались, давайте дальше.

mailto

mailto – означает что ссылка ведёт на адрес электронной почты и по переходу по этой ссылки откроется почтовый сервис, где в адресе получателя будет стоять значение указанное в ссылке.

Пример:

<a href="mailto:admin@s-lub.ru">Написать письмо администрантору s-lub.ru</a>

Атрибуты применяемые в создании ссылок в HTML:

TARGET

TARGET – указывает открывать ссылку в этом же или в новом окне, применять можно только со значением blank, что означает что ссылку нужно открывать в новом окне.

Другими словами, если этот атрибут отсутствует, то ссылка откроется в это же окне, а если прописать target ="_blank". то ссылка откроется в новом окне или новой вкладке (взависимости от браузера).

Пример:

<a href=https://s-lub.ru target="_blank"> ссылка на сайт s-lub.ru </a>

TITLE

TITLE – указывает на заголовок ссылки, проще говоря если прописать TITLE, то при наведении мышкой на ссылку в дополнительном окне.

Пример:

<a href=https://s-lub.ru title="Создание и продвижение сайта "> ссылка на сайт s-lub.ru </a>

Цвет ссылки

Цвет ссылки обычно задаётся одинаковый для всего сайта и прописывается в качестве атрибута к элементу BODY, варианты выделения ссылок через элемент BODY:
LINK - цвет просто ссылок.
ALINK(Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)
VLINK(Visited Link) - цвет уже посещенных ссылок

Но если вы хотите изменить цвет, размер и шрифт ссылок, то можете использовать обычное форматирование текста, только внутри атрибута «а»:

Примеры:
<a href="https://s-lub.ru"> <font color="black"> ссылка на сайт s-lub.ru </font> </a>
<a href="https://s-lub.ru"> <font color="#ff0000"> ссылка на сайт s-lub.ru </font> </a>
<a href="https://s-lub.ru"> <em> ссылка на сайт s-lub.ru </em></a>

Если необходимо ссылкой сделать изображение, то просто вместо анкора (текста) вставьте адрес изображения в таком виде <img src="адрес изображения">, на такую ссылку так же будут распространяться все атрибуты:

Пример:

<a href=https://s-lub.ru target="_blank" title="Создание и продвижение сайта"> <img src="html.jpg"></a>

В данном случае если кликнуть по изображению, то в новой вкладке откроется сайт s-lub.ru.

На этом мы и закончили разбираться с ссылками.


Все статьи по теме HTML:

- Введение и основы HTML
- Структура WEB документа
- Синтаксис в HTML
- Пробуем создать первую страничку
- Оформление текста в HTML (часть 1)
- Оформление текста в HTML (часть 2)
- Создание списков в HTML
- Ссылки в HTML
- Вставляем изображения в HTML документ
- Цвет теста и фона в HTML
- Создаём таблицы в HTML
- Что и для чего прописывать в HEAD
- Заключение и подведение итогов по всем пройденным элементам и атрибутам