Выделить ссылку

Здравствуйте, дорогие читатели!

Большинство пользователей используют внутренние URL-адреса страниц социальной сети ВКонтакте. Это могут быть адреса сообществ, мероприятий или других пользователей соцсети.

Сегодня разберем вопрос о том, как сделать ссылку на человека ВКонтакте словом. Это не обязательно должны быть ФИО, которыми участник социальной сети подписан в ВК. Вы можете использовать сокращенное имя, используемое при общении или любое другое слово на любом известном вам языке.

Зачем нужны текстовые ссылки

Давайте для начала рассмотрим некоторые особенности использования анкора в ВК.

Анкор – это слово или фраза, под которым скрыт URL-адрес. Нажав на него, вы попадете на новую веб-страницу.

• Применение анкора делает пост более привлекательным, чем с использованием обычного URL. Активное слово или словосочетание выделяется синим цветом. При наведении на него курсора, вы увидите краткую информацию о сообществе или юзере, на которого ссылается автор поста.
• На текстовые гиперссылки кликают чаще, чем на обычные.

Использование активной ссылки на пользователя, событие или паблик в ВК преследует две основные цели.

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

Как сделать имя человека ссылкой

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

Рекомендуемый способ

Чтобы сослаться на друга или подписчика во ВКонтакте, выполните следующее.

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

Не нужно копировать адрес веб-страницы полностью. Нужен только идентификатор.

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

С помощью BB-кода

Существует альтернативный вариант написать кликабельное имя или любую другую фразу. Этот метод основан на использовании ВВ-кодов. На мой взгляд, он менее удобен, чем метод, описанный выше, но написать о нем все же стоит.

Открываете квадратные скобки. Указываете ID человека в ВК. На этот раз не получится ввести имя юзера и воспользоваться подсказкой. Необходимо скопировать идентификатор с адресной строки браузера, перейдя в профиль юзера.

Ставите вертикальную черту. За ней указываете имя или любое другое слово или словосочетание, которое будет отображаться вместо URL.

Создание ссылки на сообщества

Вставить URL на группу, сообщество или событие можно по тому же принципу, что и на личную страницу.

Если вам понравился метод с использованием квадратных скобок, то можете использовать и его для работы с сообществами.

Ссылки на внешние сайты

Сослаться на внешний сайт с использованием анкора можно только при помощи заметок.

При публикации новой записи в сообществе или в своей ленте в перечне вложений выберите “Заметка”.

Выделите слово или словосочетание, в которое хотите поместить URL на внешний сайт. Нажмите “Добавить ссылку” (значок в виде стрелки).

Установите чекбокс в положение “Внешняя ссылка”, укажите адрес в соответствующем поле и нажмите “Добавить”.

Кликните на кнопку “Сохранить и прикрепить заметку”, а потом на “Отправить” для окончательной публикации поста.

Теперь осталось только проверить работоспособность опубликованной заметки. Откройте ее и попробуйте кликнуть на фразу, выделенную синим цветом. Если все сделано правильно, то вы попадете на веб-страницу внешнего ресурса, который спрятали в слово или словосочетание.

В остальных случаях (в постах, комментариях и других записях) придется указывать прямой адрес стороннего ресурса прямо в тексте.

Чтобы придать более презентабельный вид длинным URL-адресам в тексте и посту в целом, используйте сервисы сокращения ссылок.

Заключение

На этом у меня все. В этой статье я собрал все работающие на данный момент методы создания текстовых URL. С их помощью можно отметить человека или паблик в своей записи и оформить это очень эстетично.

В ВК пока нет инструментов для создания текстовых адресов на внешние сайты. Но, как только они появятся, я сразу напишу об этом статью. Так что не забывайте следить за обновлениями блога. На сайте есть email-рассылка. Подпишитесь, чтобы первыми узнавать о новых публикациях и других новостях.

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

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

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

• cделать удобную навигацию по сайту и странице;
• или установить картинку рядом со ссылкой, как на Wikipedia.

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

• Индексирование ссылок и анкоров
• Открываем новое окно (вкладку) при клике по ссылке
• Выделяем ссылку в тексте
• Смена цвета и фона ссылки при наведении мышки

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

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

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

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

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

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). Плавная смена достигается при помощи фильтра, которому будет посвящен одна из следующих статей.

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

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность ссылок состоит в том, что она может вести не только на HTML-документ, но и на документ любого типа, причём он может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к документу можно указать в адресной строке браузера, и документ при этом будет открыт, то на него можно сделать ссылку.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью элемента. Общий синтаксис создания ссылок следующий.

Атрибут href определяет адрес документа, на который следует перейти, а содержимое элемента является ссылкой. Текст, расположенный между тегами и , по умолчанию становится синего цвета и подчёркивается. В примере 1 показано создание нескольких ссылок на разные веб-страницы.

Пример 1. Добавление ссылок

В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog. html, а при щелчке на «Кошки» — cat. html.

Результат примера показан на рис. Обратите внимание, что при наведении курсора мыши на ссылку меняется вид курсора, а в строке состояния браузера отображается полный путь к документу.

Рис. Вид ссылок на веб-странице

Если указана ссылка на документ, которого не существует, к примеру, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется «битая». Битых ссылок следует избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 1 в браузере Firefox откроется не сам документ, а окно с предупреждением (рис.

Рис. Результат при открытии битой ссылки

Естественно, подобное сообщение будет различаться в браузерах, но смысл остаётся один — документ, на который ведёт ссылка, не может быть открыт. Чтобы не возникало подобных ошибок, тестируйте все ссылки на их работоспособность и сразу же устраняйте имеющиеся погрешности.

Абсолютные и относительные ссылки

Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. В примере 2 показано создание подобной ссылки.

Пример 2. Использование ссылки

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

Ссылки относительно текущего документа

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

Файлы располагаются в одной папке (рис.

Необходимо сделать ссылку из исходного документа source. html на target. html. В таком случае код будет следующий.

Файлы размещаются в разных папках (рис.

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

Две точки в данном случае означают выйти из текущей папки на уровень выше.

Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.

Аналогично обстоит дело с любым числом вложенных папок.

Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.

Заметьте, что никаких дополнительных точек перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

Каждый файл располагается в своей папке и чтобы перейти из одной папки в другую ссылка будет следующей.

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/folder/target. html». Так, запись Курсы означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index. html.

Опять же, такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

Обычная ссылка

Такое состояние характеризуется для ссылок, которые ещё не открывали. По умолчанию обычные текстовые ссылки изображаются синим цветом и с подчёркиванием.

Посещённая ссылка

Как только пользователь открывает документ, на который ведёт ссылка, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию.

Активная ссылка

Ссылка помечается как активная при щелчке по ней. Поскольку щелчок происходит достаточно быстро, подобное состояние ссылки весьма кратковременно. Цвет такой ссылки по умолчанию красный.

Атрибут target

Основной атрибут href элемента мы уже освоили, рассмотрим полезный, но необязательный атрибут target.

При переходе по ссылке документ по умолчанию открывается в текущей вкладке браузера. При необходимости это условие может быть изменено атрибутом target. Синтаксис следующий.

Такая ссылка открывается в новой вкладке или окне браузера. Где именно откроется ссылка, зависит от настроек браузера и не может быть задано через HTML. Как правило, ссылки открываются в новой вкладке.

В примере 3 показано, как сделать, чтобы ссылка открывалась в новой, а не в текущей вкладке браузера.

Пример 3. Открытие ссылки в новой вкладке

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

Скачивание файла

Пример 4. Атрибут download

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

Другие ссылки

Пример 5. Ссылка на адрес электронной почты

В атрибуте href элемента вначале пишется ключевое слово mailto, затем через двоеточие желаемый почтовый адрес. Подобная ссылка по своему виду ничем не отличается от ссылки на веб-страницу, но при щелчке по ней запускается почтовая программа, установленная по умолчанию. Поэтому в названии ссылки желательно указывать, что она имеет отношение к электронной почте, чтобы читатели понимали, к чему приведёт щелчок по ней.

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject с темой сообщения, как показано в примере 6.

Пример 6. Задание темы сообщения

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.

Ссылка на Skype

Пример 7. Ссылка на Skype

Не все браузеры поддерживают такой формат ссылок.

Ссылка на телефон

На мобильных устройствах вы можете использовать протокол tel, который позволяет использовать ссылку для набора номера и вызова абонента. Номер следует указывать в международном формате, допустимо вставлять в номер дефис или писать его слитно (пример 8).

Пример 8. Ссылка на телефон

При щелчке по такой ссылке откроется приложение для телефона и начнётся вызов абонента.

Я считаю, что ссылки не обязательно подчеркивать. Но неподчеркнутые ссылки — это отстой. Отстой потому, что неподчеркнутая ссылка признак маленького сайта. Но обо всем по порядку. Всем, кто хоть немного думает о юзабельности (прастигоспади) сайта, известна мысль, что ссылка должна своим видом демонстрировать, что она хочет быть откликаной юзером. Для этого существуют три (известные мне) способа:

Оформить ссылку как кнопку

По этому пути идут ребята из Эппл и иже с ними. Меню на их сайте — это аналог меню любой программы в Мак-оси. Способ вполне ничегошный, но есть одна проблема: такой способ подходит только маленьким сайтам с 2-3 страницами. Не представляю себе сайт-каталог, где свалка ссылок оформлены, как кнопочки, с объемчиками, тенюшками и прочее. Сайт Эппл, я согласен, немаленький, поэтому они использую второй прием для выделения ссылок.

Выделить все ссылки одним цветом

Тоже хороший способ, но зачастую, ну не получается все ссылки сделать одного цвета. На том же Эппле посмотрите — кое-где ссылки синие, а где-то совсем даже наоборот серые. Кроме того есть еще одна большая проблема только лишь цветовой идентификации ссылок. Даже если вам удалось на вашем сайте выдержать все ссылки в одним цветом (а для этого ваш сайт должен быть пресно-однотонный со сплошным фоном), это значит что вы забыли про отличное свойство ссылки известное, как Визитед, то есть умением ссылки менять стиль при посещении. Обычно посещенная ссылка меняет цвет, автоматически выбиваясь из общего стиля ссылок. А для больших нелинейных сайтов посещенные ссылки показывать надо, что бы не заблудиться.

Наконец, подчеркнуть

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

А объединять эти три способа, я считаю, вообще издевательство над пользователем. Вместо того, что бы искать нужную ему информацию, он должен разобраться в тонкой идее дизайнера.

Получается, что первый и второй способы не подходят для больших сайтов, но на маленьких сайтах вполне допустим. Я не рассматриваю сейчас веб-сервисы, например, Гмейл, хотя это тоже отстой. Яндекс. почта как-то выкрутилась, сделав декстопно-ориентированный сервис, но при этом сохранив подчернутые ссылки, за что им респектище.

И все бы было ничего, если бы постоянно не попадались заказчики, заказывающие порталы и твердо убежденные в том, что черкать не надо. А еще забавный довод некоторые приводят: подчеркивание выглядит мусорно 🙂 Им бы картины писать, а не сайты делать.

Как сделать активное выделение ссылки?

Здравствуйте. Подскажите мне нужно, чтоб при переходе по ссылкам в меню было видно где ты сейчас находишься т. ссылка должна быть активной как сейчас на главная. По умолчанию сейчас активная главная т. куда бы не перешел главная всегда активна, как сделать, чтоб при переходе на другую ссылку она была активной?
Код

• Вопрос задан

  более трёх лет назад

• 753 просмотра

в тегах к вопросу указаны только html и css, с помощью этих технологий выделить активную ссылку и определить текущий адрес невозможно. С другой стороны, судя по примеру кода, используется шаблонизатор django или подобный. Добавь к вопросу тег djangо.

Есть два варианта выделить ссылку
На бекэнде: при генерации страницы проверять совпадает ли адрес с url в ссылке и если совпадает добавлять класс «active»
примерно так:

Или на на фронтэнде:
На странице разместить javascritpt-код, который будет определять адрес и добавлять ссылке в меню класс «active»

19 сент. 2022, в 22:00

3000 руб. /за проект

19 сент. 2022, в 21:54

50000 руб. /за проект

19 сент. 2022, в 20:55

2000 руб. /за проект