Автор: Никита Иванов | 30 января 2013 16:21

Урок 4. Ссылки в html

Что такое ссылка html?

Ссылка html - это одно из основных понятий в создании html-документов. Каждый пользователь интернета хотя бы раз ими пользовался. Каждый раз нажимая в интернете на зайти, просмотреть, прочитать, подробнее, переходя по новостям и прочее Вы пользуетесь ссылками! Страницы, по которым Вы переходите, могут находиться на абсолютно разных сайтах.
Ссылка, как правило, выделяется нижним подчёркиванием и синим цветом. Однако в качестве ссылки могут выступать ссылки других цветов, изображения и области сайта.

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

Рассмотри пример конструкции ссылки:

<html>
   <head>
   <title>Ссылка в html</title>
   </head>
<body>

   <a href="http://www.yandex.ru">Перейти на Яндекс</a>

</body>
</html>

В результате получаем

Перейти на Яндекс
Как Вы видите ссылка состоит из Слов (Перейти на Яндекс), которые вставлены между открывающим и закрывающим тегами a и Адреса ( http://www.yandex.ru ), который прописывается в атрибуте href в кавычках.

Тег a обозначает ссылку. У него обязательно должна быть закрывающая часть. У тега a есть несколько атрибутов.

Атрибут href и адреса ссылок

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

Адрес ссылки бывает абсолютный и относительный.

В абсолютном прописывается полный URL адрес, например http://tradebenefit.ru/index.html (используется при ссылке на другой сайт или файл другого сайта).

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

Для понимания вышесказанного рассмотрим пример кода

<html>
   <head>
   <title>Атрибут href в ссылках html</title>
   </head>
<body>

<a href="http://tradebenefit.ru/index.php">Абсолютная ссылка</a>
<a href="rules.php">Относительная ссылка</a>

</body>
</html>

С первой ссылкой я думаю всё понятно, дан адрес целиком.
Во втором случае прописывается укороченный адрес, так как файлы находятся на одной машине (сервере). Если файл будет находиться на папку глубже, допустим у нас есть файл index.html и папка data, в которой есть файл info.html, то ссылка будет выглядеть так

<a href="data/info.html">Относительная ссылка</a>

Если файл, на который ссылаемся, находится наоборот, на папку выше, то делаем так

<a href="../info.html">Относительная ссылка</a>

Атрибут target

При использовании атрибута target чаще всего используются три значения: _self, _new, _blank.

_self страница по ссылке открывается в этом же окне (также происходит по умолчанию, если атрибут не использован).
_new страница по ссылке откроется в новом окне. Данное значение не всегда отрабатывается как надо, поэтому в некоторых браузерах может открыть новое окно
_blank страница по ссылке открывается в новой вкладке. Чаще всего атрибут target используют именно с этим значением.

Теперь рассмотрим пример кода

<html>
   <head>
   <title>Атрибут target в ссылках html</title>
   </head>
<body>

<a href="http://www.yandex.ru">Яндекс откроется в этой же вкладке</a>
<a href="http://www.yandex.ru" target="_self">Яндекс принудительно откроется в этой же вкладке</a>
<a href="http://www.yandex.ru" target="_new">Яндекс откроется в новом окне</a>
<a href="http://www.yandex.ru" target="_blank">Яндекс откроется в новой вкладке</a>

</body>
</html>

Пример ссылки, открывающейся в новой вкладке. Данный вид ссылок очень полезен тем, что пользователь переходя на другой сайт, не закрывает Ваш.

Перейти на Яндекс

Атрибут title

Атрибут title служит для того, чтобы при наведении на ссылку выплывала подсказка. В атрибуте title соответственно прописывается текст подсказки или пояснения

<html>
   <head>
   <title>Атрибут title в ссылках html</title>
   </head>
<body>

<a href="http://www.yandex.ru" title="Ссылка на Яндекс">Яндекс</a>

</body>
</html>

При наведении на ссылку высветится сообщение 'Ссылка на Яндекс'.

Атрибут charset

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

<html>
   <head>
   <title>Атрибут charset в ссылках html</title>
   </head>
<body>

<a href="http://www.unicode.org/" charset="utf-8">Сайт в кодировке utf-8</a>

</body>
</html>

Спасибо за внимание! Урок очень важный! Использование ссылок - основа основ! Удачи!

30 января 2013 16:37	Урок 10. Форма и элементы: флажок, радиокнопка, поле
21 января 2013 16:53	Что такое html, основные понятия
30 января 2013 16:37	Урок 11. Элементы формы: текстовая область и список.
25 января 2013 17:13	Урок 3. Заголовки и форматирование текста
25 января 2013 17:08	Урок 2. Структура html документа (страницы)