HTML тег ссылки A: что мы можем с ним сделать

ссылка html возможностиВ данной статье представлена информация о практическом применение ссылок на сайте. Конкретнее: информация о HTML теге ссылки <a>.

Именно ссылка приводит на ваш сайт людей, позволяет зарабатывать на сайте, улучшать поведенческий фактор. В конце-концов: пузомерки сайта (тИЦ и PR) именно ссылки позволяют наращивать.

Постоянные читатели сайта уже знают как:

Однако тег <a> позволяет провести еще некоторые настройки, которые могут не только повлиять на отношение к сайту со стороны поисковых систем, но а на поведение посетителя сайта.

Индексирование ссылок и анкоров

Не буду приводить теорию, т.к. она расписана подробнейшим образом на сайте Devaka.ru. Добавить к этому нечего.

Однако в данной статье опущен один момент: как ставить эти самые nofollow и noindex в ссылки.

Накануне в сообщество "F.A.Q Блоггера" я написал небольшую заметку по данному вопросу (ВОТ ОНА). В виду того, что в сообществе на данный момент состоят не все читатели данного блога, решил продублировать сюда информацию, а заодно пропиарить сообщество.

Для многих из вас ссылка выглядит так:

ссылка html

Это кнопка в визуальном редакторе WordPress (на других движках выглядит очень похоже). Перейдя на закладку HTML, вы удивитесь, т.к. ссылка будет выглядеть так:

<a href="http://mojwp.ru/">анкор</a>

Чтобы вставить необходимый параметр nofollow (запрет перехода поискового робота по ссылке), необходимо сделать следующее:

<a href="http://mojwp.ru/" rel="nofollow">анкор</a>

Обратите внимание: мы вставили rel="nofollow" внутри скобок тега. Именно данный вариант на текущий момент является единственно правильным.

Noindex используется немного по-другому:

<noindex><a href="http://mojwp.ru/">анкор</a></noindex>

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

<!--noindex--><a href="http://mojwp.ru/">анкор</a><!--/noindex-->

Открываем новое окно (вкладку) при клике по ссылке

Вы уже обратили внимание, что при клике по некоторым ссылкам новая страница открывается в том же окне браузера. А кликнув на другие ссылки, страница открывается в новом окне (закладке). Делается это так:

<a href="http://mojwp.ru/" target="_blank">анкор</a>

В данном случае команда target="_blank" указывает: для страницы по ссылке открывать новое окно (вкладку).

Настоятельно рекомендую использовать данный параметр для всех внешних ссылок с вашего сайта: кликнув по ссылке человек откроет новую страницу, но ваш сайт останется так же открытым, что увеличит время нахождения в статистике.

Теперь поговорим о визуальном выделении ссылки из общего текста.

Выделяем ссылку в тексте

У большинства из вас ссылка в тексте выделяется цветом, либо нижним подчеркиванием (сразу или при наведении). Но вы видели, что ссылка может выделяться еще больше.

Для чего это нужно?

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

Возьмем к примеру эту ссылку. Перейдя по ней вы попадаете на обычную страницу. Однако для меня она значит совсем другое.

Чтобы выделить ссылку в тексте, необходимо добавить для нее стили. Делается это так:

<a href="http://mojwp.ru/" style="border:1px solid #c4c4c4; 
padding: 3px; color:#444; background:#EFEFEF;">анкор</a>

В результате у вас получится точно такое же оформление ссылки, как у меня на данный момент (февраль 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 к параметрам стилей. Он подсказывает браузерам, что данное значение важнее того, что прописано в файле стилей, либо родительским классам. Примерно вот так может выглядеть (в самом сложном случае):

<a href="http://mojwp.ru/" style="border:1px solid #c4c4c4 !important; 
padding: 3px !important; color:#444 !important; background:#EFEFEF !important;">анкор</a>

Повторюсь: использовать !important может и не пригодиться, либо только для значений color и text-decoration.

Чтобы сделать ссылки "другого типа" для всех статей автоматически, то придется подправить немного файл стилей. Для этого смотрим видео и читаем текст статьи Картинка рядом со ссылкой (указывал ее в начале статьи).

Аналогично ставим задний фон, рамку, цвет и прочие параметры.

Смена цвета и фона ссылки при наведении мышки

Я уже писал как менять цвет элемента при наведении мышки. Ссылка так же является элементом сайта, поэтому применяем к ней те же параметры.

Уточню: у вас уже будет прописано действие a:hover в файле стилей. Осталось только их найти и подкорректировать под свои нужды. Если просмотрели видео с моего канала Ютуб и указанных выше статей, то сможете без проблем отыскать нужные строки в файле стилей, и поставить им соответствующие параметры.

Есть вот такой вариант оформления ссылок:

Здесь каждой ссылке через файл стилей .css задана рамка с задним фоном. При наведении фон и цвет шрифта меняется на другой. При это смена делается плавно, с задержкой в 0,5 сек. (должно отображаться в FireFox, Chrome и Opera). Плавная смена достигается при помощи фильтра, которому будет посвящен одна из следующих статей.

Если что-то не получилось - велком в комментарии. Если же не хотите даже браться за реализацию подобного, но хотите иметь красивые ссылки на сайте - специально для вас создана страница Услуги (цены до неприличия низкие).

У тега ссылки <a> есть еще и другие возможности. о которых я не рассказывал сегодня, т.к. они менее востребованы широкой аудиторией. Почитать об этом можно ЗДЕСЬ.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 17 комментариев
  1. xppx (7 комм.):
    http://www.xppxx.ru/

    Привет, подскажи как фон у ноликса прозрачным сделать?

    • Виталий (1674 комм.):

      добрый.
      в файл стилей шаблона добавить

      #nolix {background:none !important;}
      • xppx (7 комм.):
        http://www.xppxx.ru/

        ой, еще вопрос, а рамку его же, а то (в подписи сайт) не красиво получается

        • Виталий (1674 комм.):

          туда же добавить
          border:none !important;

          после этого попросите шрифт, выравнивание, цвет ссылок))

          в статье есть все, что может понадобиться (сами знания и ссылки на еще порцию знаний).

          • xppx (7 комм.):
            http://www.xppxx.ru/

            Не попрошу, с этим знаком, спасибо что уделили время

  2. Константин (20 комм.):
    http://www,wmascat.ru/

    В принкипе есть ещё одно интересное, но всё таки несколько усложнённое решение, например:

    <a href="#"><span style="color:red">link</span></a>

    В данном случае тест ссылки будет синим, а подчёркивание (именно подчеркивание, а не бордер) будет синим (цвета ссылки по умолчанию).

  3. Томский школьник (5 комм.):
    http://seokos.ru

    Комментарий не в тему, но не смог удержаться. Отличный дизайн, мне очень понравился! Белые тона смотрятся намного лучше черных 🙂

  4. Дмитрий (2 комм.):

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

    • Виталий (1674 комм.):

      это не плагин. сделано вручную (кнопки share42 и форма от feedburner)

  5. Urseo (7 комм.):
    http://urseo.ru

    Классно, спасибо. Полезно, просто и интересно! Юзабилити сейчас ой как в цене!

  6. Александр (9 комм.):
    http://vachzdrav.ru

    Интересно и вроде смотрится хорошо,но сомневаюсь,что это нужно делать для сайта из-за поисковиков. Как они к таким вещам относятся?

    • Виталий (1674 комм.):

      в статье рассказано о нескольких вещах. Не совсем понятно что вы подразумеваете, однако могу сказать: поисковики на это смотрят нормально и не банят (что бы вы не подразумевали).

  7. Александр (2 комм.):

    Спасибо Виталий! Классная штука. Сделал, здорово, только не так плавно, как у вас. Буду ждать вашу статью про фильтры. Еще раз спасибо!

  8. Александр Крылов (11 комм.):
    http://aleksandr-krylov.ru/
    <a href="http://mojwp.ru/" rel="nofollow">анкор</a>

    Ну а вот тут после padding должно быть двоеточие. Опять же - у меня без него отступов нет.

    • Виталий (1674 комм.):
      http://mojWP.ru/

      да. сори. двоеточие забыл.

  9. Александр Крылов (11 комм.):
    http://aleksandr-krylov.ru/

    Блин. Почему то ссылки в коде обрабатываются и получается усечённый вариант. В общем, вот в этом свойстве: padding 3px;

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.98MB | MySQL:81 | 0,835sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html