HTML тег a
С помощью html тега <A> создаются ссылки на сайте. Причем как внешние, так и внутренние. Тег a встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать вручную.
Синтаксис тега <A>
| <a class="имя класса" target="параметр" title="подсказка" href="URL">анкор</a> |
Обязательным параметром у ссылки является только href="URL", т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки.
Пример. Html код:
|
<body>
...
<a href="http://www.zarabotkii.ru/index/0-23">как заработать на своем сайте</a>
...
</body>
|
Преобразуется на странице в следующее:
К открывающему тегу <a> можно прописывать различные атрибуты. Они являются не обязательными, но очень важными. Давайте рассмотрим их.
Атрибуты тега a
1) Атрибут target="параметр", который может принимать следующие значения:
→ _blank - открывает страницу в новом окне
→ _self - загружает страницу в текущее окно
→ _parent - загружает страницу во фрейм-родитель
→ _top - отменяет все фреймы и загружает страницу в полном окне браузера
Пример
|
<body>
<a target="_blank" href="http://www.zarabotkii.ru/">как заработать на своем сайте</a>
</body>
|
В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.
2) Атрибут title="подсказка" позволяет прописать подсказку, которая высветится при наведении курсора на ссылку.
Пример
|
<body>
...
<a title="Подсказка для ссылки на главную страницу сайта" href="http://www.zarabotkii.ru/">
как заработать на своем сайте</a>
...
</body>
|
Преобразуется на странице в следующее:
В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки.
3) Атрибут class="название класса" задает класс для ссылки со стилями. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.
Пример
|
<head>
<style type="text/css">
a.list:link{
color: black;
text-decoration: none;
font-family:Comic Sans Ms;
font-weight:bold;
font-size:14px;
}
a.list:visited {
color: black;
text-decoration: none;
}
a.list:hover{
color: orange;
text-decoration: underline;
}
</style>
</head>
<body>
<a class="list" href="http://www.zarabotkii.ru/">как заработать на сайте</a>
</body>
|
Преобразуется на странице в следующее:
Поясню выше описанный пример. Класс, в котором мы описали тег <a> называется list. Поясню, что значат приписки visited, link и hover.
→ a.list:visited прописывается стиль для ссылки, который пользователь уже посетил.
→ a.list:link прописывается стиль для тех ссылок, которые ещё не посещал пользователь (a.list - делает то же самое).
→ a.list:hover прописывается стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы выделить ссылку от контента.
4) Атрибут rel="параметр" - определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения:
→ nofollow - означает то, что вес по ссылке не будет передаваться. Например:
| <a class="list" rel="nofollow" href="http://zarabotkii.ru/">как заработать на сайте</a> |
Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel="nofollow", чтобы сохранить вес на Вашем сайте.
→ canonical - указывает главную страницу, если на сайте есть множество дублей подобных страниц
Есть также множество других значений атрибута rel, но они вообще никак не влияют не на внешний вид, ни на поисковые системы, поэтому рассматривать их не вижу смысла.
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге a. Теперь советую перейти к следующему уроку.
Ссылка на следующий урок: Урок 6. HTML тег table - подробное описание с примерами
← Перейти в каталог html уроков и советов
|
