HTML тег ссылки A: что мы можем с ним сделать
В данной статье представлена информация о практическом применение ссылок на сайте. Конкретнее: информация о HTML теге ссылки <a>.
Именно ссылка приводит на ваш сайт людей, позволяет зарабатывать на сайте, улучшать поведенческий фактор. В конце-концов: пузомерки сайта (тИЦ и PR) именно ссылки позволяют наращивать.
Постоянные читатели сайта уже знают как:
- cделать удобную навигацию по сайту и странице;
- или установить картинку рядом со ссылкой, как на Wikipedia.
Однако тег <a> позволяет провести еще некоторые настройки, которые могут не только повлиять на отношение к сайту со стороны поисковых систем, но а на поведение посетителя сайта.
Индексирование ссылок и анкоров
Не буду приводить теорию, т.к. она расписана подробнейшим образом на сайте Devaka.ru. Добавить к этому нечего.
Однако в данной статье опущен один момент: как ставить эти самые nofollow и noindex в ссылки.
Накануне в сообщество "F.A.Q Блоггера" я написал небольшую заметку по данному вопросу (ВОТ ОНА). В виду того, что в сообществе на данный момент состоят не все читатели данного блога, решил продублировать сюда информацию, а заодно пропиарить сообщество.
Для многих из вас ссылка выглядит так:
Это кнопка в визуальном редакторе WordPress (на других движках выглядит очень похоже). Перейдя на закладку HTML, вы удивитесь, т.к. ссылка будет выглядеть так:
анкорЧтобы вставить необходимый параметр nofollow (запрет перехода поискового робота по ссылке), необходимо сделать следующее:
анкорОбратите внимание: мы вставили rel="nofollow" внутри скобок тега. Именно данный вариант на текущий момент является единственно правильным.
Noindex используется немного по-другому:
Так же можно встретить подобную конструкцию, которая равносильна предыдущей:
анкорОткрываем новое окно (вкладку) при клике по ссылке
Вы уже обратили внимание, что при клике по некоторым ссылкам новая страница открывается в том же окне браузера. А кликнув на другие ссылки, страница открывается в новом окне (закладке). Делается это так:
анкорВ данном случае команда target="_blank" указывает: для страницы по ссылке открывать новое окно (вкладку).
Настоятельно рекомендую использовать данный параметр для всех внешних ссылок с вашего сайта: кликнув по ссылке человек откроет новую страницу, но ваш сайт останется так же открытым, что увеличит время нахождения в статистике.
Теперь поговорим о визуальном выделении ссылки из общего текста.
Выделяем ссылку в тексте
У большинства из вас ссылка в тексте выделяется цветом, либо нижним подчеркиванием (сразу или при наведении). Но вы видели, что ссылка может выделяться еще больше.
Для чего это нужно?
При правильно подходе визуально выделенная ссылка может принести вам дополнительный доход, либо добиться поставленной цели.
Возьмем к примеру эту ссылку. Перейдя по ней вы попадаете на обычную страницу. Однако для меня она значит совсем другое.
Чтобы выделить ссылку в тексте, необходимо добавить для нее стили. Делается это так:
анкорВ результате у вас получится точно такое же оформление ссылки, как у меня на данный момент (февраль 2013). Пояснения:
- border:1px solid #c4c4c4; - рамка в 1 пиксель, непрерывная, цвета #c4c4c4;
- padding: 3px; - внутренний отступ от рамки (чтобы не слипался текст с рамкой);
- color:#444; - цвет шрифта ссылки;
- background:#EFEFEF; - задний фон ссылки в пределах рамки
При желании можно задать:
- font-size:20px; - размер шрифта;
- font-family:Arial; - семейство шрифта;
- text-decoration:underline; - нижнее подчеркивание ссылки. Чтобы от него избавиться, делаем text-decoration:none;
- другие параметры
Кто сейчас ринулся у себя на сайте делать подобное может разочароваться: "не работает, хотя все делаю как в статье". Дело в том, что в вашем шаблоне уже прописаны стили для ссылок в теле статьи, сайдбаре, футере и прочее. Здесь нужно "перебить" параметры, либо подправить сам файл стилей шаблона (который имеет расширение .css).
Если вы хотите сделать видимой ссылку в отдельно взятом случае (используете плагин New Adman, где прописали рекламный текст с ссылкой на партнерку, как часто делаю я), то достаточно добавить !important к параметрам стилей. Он подсказывает браузерам, что данное значение важнее того, что прописано в файле стилей, либо родительским классам. Примерно вот так может выглядеть (в самом сложном случае):
анкорПовторюсь: использовать !important может и не пригодиться, либо только для значений color и text-decoration.
Чтобы сделать ссылки "другого типа" для всех статей автоматически, то придется подправить немного файл стилей. Для этого смотрим видео и читаем текст статьи Картинка рядом со ссылкой (указывал ее в начале статьи).
Аналогично ставим задний фон, рамку, цвет и прочие параметры.
Смена цвета и фона ссылки при наведении мышки
Я уже писал как менять цвет элемента при наведении мышки. Ссылка так же является элементом сайта, поэтому применяем к ней те же параметры.
Уточню: у вас уже будет прописано действие a:hover в файле стилей. Осталось только их найти и подкорректировать под свои нужды. Если просмотрели видео с моего канала Ютуб и указанных выше статей, то сможете без проблем отыскать нужные строки в файле стилей, и поставить им соответствующие параметры.
Есть вот такой вариант оформления ссылок:
Здесь каждой ссылке через файл стилей .css задана рамка с задним фоном. При наведении фон и цвет шрифта меняется на другой. При это смена делается плавно, с задержкой в 0,5 сек. (должно отображаться в FireFox, Chrome и Opera). Плавная смена достигается при помощи фильтра, которому будет посвящен одна из следующих статей.
Если что-то не получилось - велком в комментарии. Если же не хотите даже браться за реализацию подобного, но хотите иметь красивые ссылки на сайте - специально для вас создана страница Услуги (цены до неприличия низкие).
У тега ссылки <a> есть еще и другие возможности. о которых я не рассказывал сегодня, т.к. они менее востребованы широкой аудиторией. Почитать об этом можно ЗДЕСЬ.
