Сегодня я расскажу, как самому сделать кликабельную ссылку в разных редакторах и программах – во Вконтакте, в документах Word и Excel, в PowerPoint презентациях и, конечно же, с помощью HTML тегов.
Трудно себе представить, что бы было с интернетом, если бы нельзя было переходить с одного сайта на другой простым нажатием на ссылку. Уставшие пользователи набивали бы в адресной строке своих браузеров полный URL каждой желаемой страницы, путаясь в буквах и непрерывно матерясь. Я думаю, общая посещаемость сети снизилась бы на порядок. Но, к счастью, есть такая штука как гиперссылки, которые позволяют не писать адреса сайтов, а, иногда, даже их не читать – кликнул мышкой по тексту или картинке и перешёл к нужной информации.
Содержание:
- Как сделать гиперссылку в ВК
- Как сделать гиперссылку в Word
- Как сделать гиперссылку в Excel
- Как сделать гиперссылку в презентации PowerPoint
- Как сделать гиперссылку в HTML (атрибуты ссылок, якоря)
- Для чего нужны ссылки
Содержание получилось насыщенным. Все от того, что в разных местах процесс создания ссылок существенно отличается, хотя, в конечном виде, когда посетитель видит ссылку на странице какого-либо документа, все они выглядят одинаково.
Все различия вытекают из того, что исходный код документов обрабатывается разными программами с разными алгоритмами. Например, Web браузеры обрабатывают HTML код, а Microsoft Office со своими текстовыми и табличными документами работает совсем по-другому.
Но вас пугать все эти различия не должны, так как процесс создания гиперссылок прост везде. Прежде чем перейдем к инструкциям, давайте определимся с несколькими терминами, чтобы в будущем не запутаться:
Гиперссылка (ссылка, линк, link) – это элемент документа (текстовый или графический) нажатие на который мышью приводит к переходу на другой интернет адрес (URL). Текстовые ссылки, как правило, отображаются синим цветом и подчеркнуты сплошной линией, хотя, их стиль может быть изменен на другой.
URL – это адрес интернет страницы. URL размещенный на странице не обязательно является гиперссылкой, ссылка должна быть кликабельной (активной), а URL может быть написан в виде текста и клик по нему ни к чему не приводит.
Анкор (анкорный текст) – это текст ссылки. Текст анкора может быть любым, иногда он совпадает с URL, в этом случае говорят, что ссылка без анкорная.
Как сделать гиперссылку в ВК
Начнем изучение с ВК, так как поисковики интернета в своей статистике говорят, что этот запрос самый популярный. Видимо, с этой сетью у пользователей возникает больше всего затруднений, а ставить ссылки хочется.
Социальная сеть имеет два совершенно разных подхода к ссылкам, они зависят от типа целевых URL адресов:
- ссылки на внутренние страницы Вконтакте (страницы пользователей, групп, фотографий и т.д.);
- ссылки на внешние страницы, принадлежащие другим доменам.
Как сделать ссылку Вконтакте на страницу или группу
ВК поощряет создание страниц и сообществ внутри себя. Социальной сети выгодно, чтобы народ находил информацию не покидая площадки (это прямые доходы от рекламы), поэтому, внутренняя система ссылок Вконтакте отличается от линков на внешние адреса — легче делать и больше возможностей.
Для оформления ссылки на внутренние вконтактовские страницы достаточно прописывать «хвостики», не надо вводить полный URL адрес.
Хвост ссылки в ВК – это та часть, которая идет после доменного имени и является уникальным идентификатором.
Идентификатор может быть:
- числовой в виде id**цифры* (персональная страница), club**цифры* (группа), public**цифры* (публичные страницы)
- буквенный, если его настроил владелец страницы, например, dmitriyzhilin – идентификатор моей страницы
Гиперссылки на внутренние страницы социальной сети можно сделать двумя методами.
Макет с круглыми скобками:
@идентификатор (текст ссылки)
Например, @dmitriyzhilin (страница Дмитрия Жилина) будет выглядеть так:
Макет с квадратными скобками:
[идентификатор|текст ссылки]
Например, [dmitriyzhilin|страница Дмитрия Жилина] будет выглядеть один в один, как и предыдущий вариант.
Какой из этих способов использовать для создания гиперссылки в ВК решайте сами, по функционалу они не отличаются.
Как в ВК сделать гиперссылку на внешний сайт
Работа с внешними ссылками в ВК ограничена. В частности, Вконтакте не позволяет публиковать на стенах, в комментариях и дискуссиях текстовые гиперссылки с произвольными анкорами.
В связи в этим у нас есть 3 варианта:
- Использование безанкорной ссылки
- Использование автоматически подобранного анкора
- Использование вместо анкора изображения
Автоматический анкор во Вконтакте создается на основе информации, размещенной на той странице, ссылку на которую мы хотим запостить. ВК автоматически извлекает с этой страницы ее title (это заголовок, прописанный в соответствующем теге) и устанавливает его в качестве анкора. Если, при этом, на странице есть графические элементы, то будет предложена и картинка. Вот так выглядит добавление ссылки по умолчанию:
Мы можем отказаться от автоматической картинки и от анкора, оставив только изначальный URL – получим безанкорную ссылку. Можно убрать картинку и оставить только автоматический текст. Весь блок удаляется крестиком, находящимся над блоком ссылка, удаление изображения производится большим крестом справа вверху внутри блока.
Как в ВК сделать внешнюю ссылку с произвольным анкором
Самый хитрый вариант – это грамотно подобранная картинка, которая будет работать лучше любого анкора. Допустим мы хотим опубликовать анонс и в конце призвать посетителей перейти по ссылке словами перейти, купить, заказать или читать далее. Для этого мы может сделать картинку с соответствующим текстом добавить ее в конце анонса и сделать ссылкой. Вариант, вообще анонс не писать, а сделать его полностью картинкой.
Для этих целей подойдет не любое изображение, необходимо, чтобы оно было не менее 537 пикселей в ширину – это минимальная ширина картинок, которые Вконтакте делает ссылками, более мелкие не сработают.
Как это сделать:
- Открываем любой графический редактор (paint или фотошоп) и создаем в нем картинку содержащую нужный текст и оформляем призыв к действию похожим на ссылку (синий цвет, подчеркивание);
- Вставляем в ВК ссылку на нужную страницу. В моем примере стоит ссылка на статью о том, как сделать картинку уникальной для поисковиков;
- Меняем автоматически извлеченное со страницы изображение на то, которое создали в п.1. Делается это кнопкой «Выбрать свою фотогорафию», находящейся в левом верхнем углу автоматического изображения. Кнопка похожа на фотоаппарат
- Публикуем и получаем анонс с произвольной ссылкой.
Таким способом можно сделать любой текстовый анкор, можно сделать ссылку в виде кнопки для заказа — одним словом — любую картинку, какую сможете придумать.
Если что-либо осталось непонятным с картинками, то более подробно в статье «Как сделать картинку ссылкой в ВК»
Как сделать гиперссылку в Ворде
При создании текстовых документов гиперссылки используются очень часто, особенно, если этот документ планируется распространять в Интернете в виде электронной книги или чего-то аналогичного. Кстати, рекомендую книги после написания преобразовать из word в pdf – этот формат защищен от внесения изменений и никто не сможет присвоить себе авторство или изменить другие данные внутри.
Еще pdf удобен тем, что ссылки в нем открываются автоматически по клику, а в doc файле при удержании кнопки ctrl, но это так, мелочи и отступление.
Ссылки на сайты в MS Word делаются в 2 шага:
- Выделяем текст, который должен стать ссылкой (анкорный текст) и кликаем правой кнопкой мыши. Далее выбираем в контекстном меню пункт «Гиперссылка»
- В окне прописываем нужный URL и нажимаем «ОК»
Выделенный текст станет синим и подчеркнутым, а при наведении на него курсора будет появляться подсказка с веб-адресом и предложением нажать Ctrl и кликнуть на ссылку мышкой.
Для удаления активной ссылки, снова пользуемся правой кнопкой мыши и в выпадающем меню выбираем «Удалить ссылку». На этом c гиперссылками в Ворде закончили, двигаемся дальше.
Как сделать гиперссылку в Excel
Схема настройки ссылок в Excel очень похожа, на Word, отличие заключается лишь в том, что в Excel сделать гиперссылкой любой произвольный текст не получится. Активный линк присваивается только целой ячейке в таблице.
По шагам это выглядит вот так:
- Выделяем нужную ячейку или группу ячеек (есть и такая возможность)
- Правой клавишей кликаем по выделенным элементам и выбираем в меню «Гиперссылка»
- В окно вставляем необходимый адрес и тычем «ОК», все также, как в Word
На этом ссылочка готова, чтобы по ней перейти надо будет ткнуть левой кнопкой мыши, ничего дополнительно удерживать, как это было в Word, необходимости нет.
Клик сразу будет открывать веб страницу в браузере, который у вас настроен по умолчанию.
Как сделать гиперссылку в презентации PowerPoint
При создании презентаций, как правило, в слайдах все пишут тезисно. Подразумевается, что более полная информация будет раскрываться спикером, который эту презентацию будет озвучивать, либо в самих слайдах будет идти отсылка к поясняющим документам в виде их наименований или гиперссылок на интернет страницы.
Для того, чтобы снабдить ваши слайды активными ссылками, по которым пользователи смогут добраться до нужных web страниц, необходимо сделать следующее:
- Выбираем нужный слайд и выделяем с помощью мыши фрагмент текста или изображение (в зависимости от того, что необходимо превратить в линк) и вызываем контекстное меню щелчком по правой кнопке мыши. Нам нужен пункт «Гиперссылка».
- В окно вставляем адрес web страницы и подтверждаем действие кнопкой «ОК».
Ссылка сразу станет активной и те, кто будут пользоваться вашей презентацией, смогут легко переходить по ней. Только имейте ввиду, что в презентациях PowerPoint ссылки делаются для работы в режиме просмотра, а не редактирования.
Подбираемся к самому интересному — к HTML — святая святых в ссылкостроительстве.
Как сделать гиперссылку в HTML
В подавляющем большинстве графических HTML редакторов процесс создания гиперссылок один в один похож на аналогичную процедуру в Ворде (нажатие на кнопку в виде цепочки и внесение в окно анкора с URL адресом), но это не настоящий HTML, а программная оболочка, которая его создает. Если вы смотрели мои уроки по WordPress, то могли видеть такую цепочку.
Реальные гиперссылки в веб документах создаются с помощью специальных тегов (элементов кода), которые превращаются из символов в кликабельный элемент с помощью браузера, об этом я писал в статье про браузеры.
Выглядит тег, выводящий ссылку, следующим образом:
<a href="адрес веб страницы, ссылка на документ или картинку">анкорный текст</a>
Это базовый макет ссылки, который может быть существенно усложнен, если мы решим придать элементу особые свойства. Например, кроме текста могут быть использованы изображения. Для этого вместо «анкорный текст» вставляется тег, выводящий картинки, получится:
<a href="адрес веб страницы, ссылка на документ или картинку"><img src="https://адрес-картинки"></a>
Что такое якорь
Частным случаем ссылок являются якоря. По сути, якоря — это точно такие же ссылки, только ведут они не на новые страницы, а в какое-то конкретное место внутри уже открытого документа. С помощью якорей создается, например, содержание. Действуют они по такой схеме:
- Вставляем внутрь кода документа специальные идентификаторы;
- Прописываем в ссылке вместо URL адреса хэштег идентификатора.
Теперь по-русски:
Вставка идентификаторов
Первый способ – к одному из тегов в тексте добавляем атрибут id=»идентификатор», например, к подзаголовку:
<h2 id="идентификатор">Глава 3 в статье</h2>
Второй способ – добавить пустую ссылку с идентификатором в атрибуте name в то место, куда нужен переход:
<a name="идентификатор"></a>
Добавление якорной ссылки
Идентификаторы в тексте есть, теперь можем делать ссылки на них:
<a href="#идентификатор">Ссылка на 3 главу</a>
Отличие от обычных гиперссылок на лицо — у якорной ссылки нет полного адреса, начинающегося с HTTP и содержащего название домена — это потому, что якоря являются относительными и действуют только внутри страницы. При переносе страницы с якорями на другой адрес, структура внутренних ссылок не изменится и они будут работать как и раньше. Между тем, создавать полноценные ссылки на якоря можно, достаточно дописать перед идентификатором полный URL:
<a href="http://URL-адрес-страницы/#идентификатор">Ссылка на 3 главу</a>
В таком варианте есть один «+» и один «-«:
«+» — гиперссылку можно разместить в любом месте (на другом сайта, в документе Word) и она будет работать и приведет посетителя сразу на якорное место на странице, в примере — на 3 главу.
«-» — если документ изменит свой URL адрес, ссылка работать перестанет, так как кусок «URL-адрес-страницы» будет вести на устаревшее место.
Если в качестве идентификатора указать пустое место (href=»#»), то переход по этой ссылке приведет к началу страницы сайта. Так делают самый простой вариант кнопки «Наверх» для сайтов — переход мгновенный, без анимации, зато легко реализуем.
Наиболее популярные атрибуты HTML ссылок
Атрибуты – это специальные элементы, добавление которых к тегу приводит к изменению или появлению новых свойств. Одновременно может использоваться несколько атрибутов, для этого все они вставляются внутрь конструкции <a href> через пробел.
Target – задает целевую страницу для открытия гиперссылки. По умолчанию (если его не прописывать или задать значение _self) ссылка открывается в том же окне браузера. Для открытия в новой вкладке используется _blank:
<a href="http://адрес" target="_blank">анкорный текст</a>
Title – название ссылки. Текст, указанный в этом атрибуте появляется в виде всплывающей подсказки, когда курсор мыши наводится на ссылку.
<a href="http://адрес" title="Всплывающее описание ссылки">анкорный текст</a>
Rel – этот атрибут не является видимым для пользователя и не отображается в браузере, но читается поисковыми системами. Его значением определяется отношение исходной страницы к целевой (указанной в href). Значение nofollow рекомендует поисковикам не передавать вес целевой странице. Особенно актуальным было его значение в период, когда ссылки играли важнейшую роль в ранжировании сайтов в результатах поиска.
<a href="http://адрес" rel="nofollow">анкорный текст</a>
Class – данный атрибут является универсальным для множества HTML тегов. Он предназначен для присвоения определенного класса для конкретной ссылки, чтобы иметь возможность изменить стилевое оформление (цвет, шрифт, подчеркивание и т.д.) всех элементов данного класса через CSS. С помощью классов можно придать группе ссылок один внешний вид, а остальным другой, не прописывая подробные свойства каждой из них.
<a href="http://адрес" class="ssylka">анкорный текст</a>
Для чего нужны ссылки
Основное назначение ссылок всех видов и мастей заключается в комфортном серфинге по сети. Пользователи должны легко перемещаться как внутри отдельных сайтов и страниц (привет якорям), так и переходить на другие веб ресурсы.
В этом плане, вебмастера должны стремиться делать ссылки красивыми и вписывающимися в дизайн. Удобство переходов должно достигаться применением соответствующих атрибутов (где надо — новое окно, где не надо — оставить в текущем).
Все побочные факторы связанные со ссылками, в частности, SEO влияние при продвижении, должны отходить на второй план, так как положительный эффект при продвижении оказывают только те ссылки, которые нужны пользователю.