03:52 Урок 5 - HTML тег <a>. Ссылки в html, примеры использования тега <a> | |
HTML тег <a>С помощью html тега <A> создаются ссылки на любом сайте, причем как внешние, так и внутренние. Тег <a> встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать в строке браузера вручную. Синтаксис тега <A> <a class="имя_класса" target="параметр" title="подсказка" href="URL">анкор</a> Обязательным параметром у ссылки является только href="URL", т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки, который может состоять из слов, символов, объектов (картинки и прочее). Пример. Html код: <body> ... <a href="http://zarabotat-na-sajte.ru/">как заработать на своем сайте</a> ... </body> Преобразуется на странице в следующее: как заработать на своем сайте К открывающему тегу <a> можно прописывать различные атрибуты. Они являются не обязательными, но очень важными. Давайте рассмотрим их. Атрибуты тега <a>1) Атрибут target="параметр", который может принимать следующие значения:
Пример с target <body> <a target="_blank" href="http://zarabotat-na-sajte.ru/">как заработать на своем сайте</a> </body> В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне. Чаще всего применяется значание _blank, поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке. 2) Атрибут title="подсказка" позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка. Пример с подсказкой title <body> ... <a title="Подсказка для ссылки с использованием title" href="http://zarabotat-na-sajte.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://zarabotat-na-sajte.ru/">как заработать на сайте</a> </body> Преобразуется на странице в следующее: a.list{color: black; text-decoration: none; font-family:Comic Sans Ms; font-weight:bold;font-size:14px} a.list:visited {color: black; text-decoration: none; font-family:Comic Sans Ms; font-weight:bold;font-size:14px} a.list:link {color: black; text-decoration: none; font-family:Comic Sans Ms; font-weight:bold;font-size:14px} a.list:hover {color: orange; text-decoration: underline; font-family:Comic Sans Ms;font-weight:bold;font-size:14px} как заработать на сайте Поясню выше описанный пример. Класс, в котором мы описали тег <a> называется list. Давайте разберемся, что значат приписки visited, link и hover.
4) Атрибут rel="параметр" - определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения: → nofollow - означает то, что вес по ссылке не будет передаваться (робот не будет переходить по ссылке). Например: <a class="list_link" rel="nofollow" href="http://zarabotat-na-sajte.ru/">как заработать на сайте</a> Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel="nofollow", чтобы сохранить вес на Вашем сайте. → canonical - указывает главную страницу, если на сайте есть множество дублей подобных страниц Есть также множество других значений атрибута rel, но они вообще никак не влияют не на внешний вид, ни на поисковые системы, поэтому рассматривать их не вижу смысла. Примечание Если вы открыли тег <a>, то все что следует за ним будет ссылкой, пока не встетиться закрывающийся тег </a>. Ссылкой могут быть любые объекты. Очень часто в виде ссылке делают изображение. Например <a href="URL_SITE"> <img src="URL_IMG"> </a> Как сделать ссылку на адрес почтыУ ссылок есть еще одна интересная возможность: можно сразу указать адрес почты в таком формате, что при переходе по ней у пользователя будет открываться программа по умолчанию по обработке его почты. Возможно это будет OutLook или же браузер по умолчанию с почтой. Сделать ссылку с адресом электронной почты легко. Для этого есть специальное слово malito: <a href="mailto:admin@zarabotat-na-sajte.ru">admin@zarabotat-na-sajte.ru</a> Уважаемый читатель, теперь Вы узнали гораздо больше о html теге a. Теперь советую перейти к следующему уроку. Ссылка на следующий урок: Урок 6. HTML тег table - подробное описание с примерами | |
| Категория: Все о сайтах | Просмотров: 229 | | |
| Всего комментариев: 0 | |