mojwp.ru
Назад

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

Опубликовано: 20.02.2013
17
917

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

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

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

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

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

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

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

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

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

ссылка html

Это кнопка в визуальном редакторе 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> есть еще и другие возможности. о которых я не рассказывал сегодня, т.к. они менее востребованы широкой аудиторией. Почитать об этом можно ЗДЕСЬ.

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • xppx
    Опубликовано: 20.02.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 20.02.2013 Ответить на сообщение

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

      #nolix {background:none !important;}
      • xppx
        Опубликовано: 20.02.2013 Ответить на сообщение

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

        • Виталий
          Опубликовано: 20.02.2013 Ответить на сообщение

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

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

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

          • xppx
            Опубликовано: 20.02.2013 Ответить на сообщение

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

  • Константин
    Опубликовано: 20.02.2013 Ответить на сообщение

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

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

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

  • Томский школьник
    Опубликовано: 22.02.2013 Ответить на сообщение

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

  • Дмитрий
    Опубликовано: 22.02.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 22.02.2013 Ответить на сообщение

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

      • Дмитрий
        Опубликовано: 22.02.2013 Ответить на сообщение

        Ясно. Спасибо.

  • Urseo
    Опубликовано: 22.02.2013 Ответить на сообщение

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

  • Александр
    Опубликовано: 27.02.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 27.02.2013 Ответить на сообщение

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

  • Александр
    Опубликовано: 14.03.2013 Ответить на сообщение

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

  • Александр Крылов
    Опубликовано: 28.07.2013 Ответить на сообщение
    анкор

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

    • Виталий
      Опубликовано: 29.07.2013 Ответить на сообщение

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

  • Александр Крылов
    Опубликовано: 28.07.2013 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.