Содержание

Ссылки в HTML

Здравствуйте уважаемые начинающие веб-мастера.

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

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

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

Для создания ссылки, применяется тег <a></a>, как видим парный, и являющийся встроенным элементом , а это значит, что его можно размещать в любой части текста, на картинке или метке.

Короче везде где есть строка, внутрь неё можно вставить ссылку.

С тегом <a>, всегда применяется атрибут href. Во всех видах ссылок. В значении его указывается адрес, на который ведёт данная ссылка.

Затем идёт анкор — текст ссылки, который отобразиться на экране, и этот текст, должен сообщать пользователю о том, куда эта ссылка ведёт.

Гиперссылка

Гиперссылка — это ссылка ведущая на отдельную страницу.

Давайте напишем ссылку на этот сайт.

<a href="https://starper55plys.ru" >Старпер55плюс</a>

Теперь добавим пару необходимых атрибутов.

Во-первых — target=»_blank», который подскажет браузеру открыть данную страницу в отдельном окне.

Во вторых — атрибут title=»О создании сайта», при помощи которого браузер, при наведении курсора мыши на ссылку, выведет окошечко с текстом «О создании сайта».

Теперь полностью, и вставим эту ссылку в текст.

Создаём ссылку на сайт <a href="https://starper55plys.ru" target=”_blank” title=”О создании сайта”>Старпер55плюс</a> Надеюсь получится неплохо.

Результат:

Создаём ссылку на сайт Старпер55плюс.

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

Попробуйте по ней щёлкнуть и проверить, откроется ли главная страница этого сайта в отдельном окне.

Якорная ссылка

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

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

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

Для этого в первом заголовке расположим идентификатор id со значением nev (якорь). Слово в значении может быть любым.

<h2>Название статьи</h2>

Теперь опустимся в самый низ, и в конце кода страницы, напишем код и текст самой ссылки.

<p><a href="#nev">Вверх</a></p>

Можно сделать несколько якорных ссылок, на разные места страницы.

Для этого в других ссылках нужно вместо значения nev, написать, допустим, test и в якоре, и в коде ссылки.

Теперь посмотрим, как делается якорная ссылка на другую страницу.

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

Например вот так:

<a href=”https://starper55plys.ru/#nev”>Текст ссылки</a>

Теперь на странице сайта появиться ссылка, пройдя по которой, Вы окажитесь в месте отмеченном якорем.

Ссылка на изображениях

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

Для этого необходимо код картинки заключить в код ссылки.

<a href="https://starper55plys.ru">
<img src="https://starper55plys.ru" align="right"
title="Название" alt="Описание"
height="100" hspace="20" vspace="20" target="_blank"></a>

Давайте ещё раз повторим, какие теги и атрибуты мы тут использовали.

<a>— тег ссылок (он единственный, все ссылки везде заключены в тег «а»).

href — атрибут, всегда и обязательно применяемый в теге «а». В его значении указан адрес ресурса.

<img> — одиночный тег изображений.

src — обязательный атрибут тега изображений, указывает адрес изображения.

target=»_blank» — атрибут, предписывающий открывать ссылку в отдельном окне.

title=» описание» — атрибут предписывающий вывести окошко с описанием ресурса, куда ведёт ссылка, при наведении курсора на изображение.

width=»400″ — атрибут, указывающий ширину изображения

height=»400″ — атрибут, указывающий высоту изображения

alt=» Koala» — атрибут, выводящий на экран название картинки, если сама картинка, по каким либо причинам, не появилась

align=»left» — атрибут, указывающий, с какой стороны от текста (относительно текста), будет расположена картинка.

hspace=»50″ — атрибут, задающий горизонтальный отступ от текста

vspace=»50″ — атрибут, задающий вертикальный отступ от текста

Ссылка на обратную связь

Ссылка на обратную связь – это обычно ссылка на Email автора сайта. Удобство этой ссылки в том, что посетителю не придётся идти в свою почту, набирать там Ваш адрес, что занимает какое-то время.

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

Возможно Вам по каким-то причинам захочется, чтобы письма приходили к Вам по почте Windows Live, или какому другому сервису.

В общем, пригодится или нет, но ссылку эту желательно знать. Давайте посмотрим, как пишется её код

<a href=”mailto:адрес почты”>Обратная связь</a>

Пока по ссылкам всё. Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перемена

А ведь в 19-м веке словосочетание «получить ссылку» имело совсем другое значение

Урок в школе:
— Моня, допустим у тебя шесть яблок, половину ты отдал Абраму. Сколько яблок у тебя осталось?
— Пять с половиной.

Картинки < < < В раздел > > > Таблицы

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

Ссылки. Гиперссылки в html. Учебник html

Глава 5

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

Лирическое отступление:
Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую:
Принеси мне вот тот документ, правда я не знаю где он и какой!! Что стоишь? Бегом давай!! Опаздываю я!!!

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

На данный момент с помощью блокнота мы создали только один HTML документ у меня он с именем index.html (зачем выбрал такое странное название index.html и зачем оно нужно смотрите в полезных советах) у Вас не знаю с каким, Вы сами имя придумывали, но думаю, Вы его помните и знаете где он лежит, если конечно Вы не мой начальник штаба :).. В этом документе мы попробуем создать ссылку на другой документ, которого у нас еще нет.. Так что прежде чем на него ссылаться, его нужно создать, благо Вы это уже умеете.

  1. Открываем блокнот.
  2. Пишем код на html языке. к примеру страничку с рядом фотографий.
  3. Сохраняем его как html страничку в ту же рабочею папку, где уже есть созданный нами первый документ. Давайте, что б не путаться назовем его primer.html, да и первый тоже пожалуй переименуйте в index.html

Теперь я знаю, что у Вас два html документа index.html и primer.html и что теперь у Вас есть минимальный набор для дальнейшего обучения.

Знакомимся тег <a> (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега <a> href задаёт имя и путь к документу на который указывает ссылка.

Всё вместе пишется так:

<a href=»primer.html»>Здесь мои фотки!!</a>

Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись «Здесь мои фотки!!» это кусочек текста из файла index.html.

По аналогии с рисунками тег <img> путь ссылки к открываемому документу прописывается теми же способами:

<a href=» stranica/primer.html»>Здесь мои фотки!!</a> — Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html
<a href=»../primer.html»>Здесь мои фотки!!</a> — А это значит, что файл primer.html размещен на уровень выше от документа
<a href=»http://www.site.ru/primer.

html»>Здесь мои фотки!!</a> — документ расположен на сайте www.site.ru..

Ну что давайте попробуем? Ниже приведен пример сразу двух документов в которых прописаны ссылки указывающие друг на друга.

Пример:

Файл index.html:

<html>
<head>
<title>Делаем ссылкой кусочек текста</title>
</head>
<body>
<div align=»center»>
<br><br><br><b>Скажи мне, милый ребёнок: в каком ухе у меня жужжит?</b>


<br><br><br>
В <a href=»primer.html»>правом</a> или <a href=»primer.html»>левом</a>?
</div>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>Перешли по ссылке сюда</title>
</head>
<body>
<br><br><br><br>
<div align=»center»><font size=»+2″>А вот и не угадал! У меня жужжит в обоих ухах.

</font></div>
<br><br><br>
<div align=»center»><a href=» index.html»>Ну я так не играю…</a></div>
</body>
</html>

смотреть пример  

Из примера видно, что ссылки выделяются цветом, по умолчанию синеньким — ссылка, а красненьким — уже посещенная ссылка, эти цвета можно изменить с помощью уже хорошо известного нам открывающего тега < body > и его атрибутов.

link

— цвет ссылки.
alink — цвет нажатой, активной ссылки.
vlink — цвет посещенной ссылки.

Пишется так:

<body link=»#008000″ alink=»#ff0000″ vlink=»#ffff00″>

Продолжая говорить о цвете текстовой ссылки стоит упомянуть, что при необходимости можно принудительно выделять цветом как всю ссылку, так и отдельные её части (фразы слова буквы) знакомым тегом <font> </font> и его атрибутом color. Впрочем, это касается не только цвета так же отдельно можно задать размер, стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить внутри тега

<a>вот здесь</a> а не за бортом, иначе цвет ссылки будет либо по умолчанию, либо так как прописано в теге <body>

Пример:

Файл index.html:

<html>
<head>
<title>Радуга</title>
</head>
<body link=»#008000″ alink=»#ff0000″ vlink=»#ffff00″>
<center>
<h4>Посмотрите на фразу которая поможет Вам запомнить места цветов в радуге</h4>


<br>
<a href=»primer2.html»>
<font size=»+1″ color=#ff0000>Р</font>
<font size=»+2″ color=#ff8c40>А</font>
<font size=»+3″ color=#ffff00>Д</font>
<font size=»+3″ color=#008000>У</font>
<font size=»+2″ color=#0000ff>Г</font>
<font size=»+1″ color=#800080>А</font>
</a>
</center>
</body>
</html>

Файл primer. html:

<html>
<head>
<title>Радуга</title>
</head>
<body link=»#008000″ alink=»#ff0000″ vlink=»#ffff00″>
<center>
<font size=»+3″>
<font color=#ff0000>Каждый</font>
<font color=#ff8c40>охотник</font>
<font color=#ffff00>желает</font>
<font color=#008000>знать</font>
<font color=#40caff>где</font>


<font color=#0000ff>сидит</font>
<font color=#800080>фазан</font>
</font>
<br><br><br>
<a href=»index.html»>вернуться на главную</a>
</center>
</body>
</html>

смотреть пример  

Такие вот дела…

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

Вот так:

<a href=»primer3.html»><img src=»knopa.gif»></a>

Перед тем как привести очередной пример расскажу про то, как при переходе по ссылке открыть документ в новом окне браузера, до этого если Вы обратили внимание он у нас открывался в текущем, что не всегда удобно. Решает эту проблему атрибут target (цель) и его значение _blank.

Пишется так:

<a href=»primer3.html» target=»_blank»>открыть в новом окне</a>

Пример:

Файл index.html:

<html>
<head>
<title>кнопка</title>
</head>
<body>
<center>
<h2> Не в коем случае не нажимайте на эту кнопку!!!</h2>
<br>
<a href=»primer3. html» title=»Не нажимать!!!» target=»_blank»><img src=»graphics/knopa.gif» border=»0″ alt=»Не нажимать!!!» ></a>
</center>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>итог..</title>
</head>
<body>
<div align=»center»><font size=»+3″>Ракеты ушли… Америки больше нет…</font></div>
</body>
</html>

смотреть пример  

Я надеюсь, Вы не додумались нажать большую красную кнопку? Ох уж этот русский менталитет.. 🙂

Что ещё можно почерпнуть из этого примера?

Во-первых. Мы применили уже знакомые атрибуты описания title=»Не нажимать!!!» для тега <a> и одновременно alt=»Не нажимать!!!» для тега <img> если Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе рисунок является ссылкой?.. долгая история, когда ни будь напишу статью: «Спецификации HTML, браузеры и головная боль..» — а сейчас скажу лишь то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты. А описание для ссылки картинки нам просто таки необходимо! Помните, я рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для них.

Во-вторых. В примере использован атрибут тега <img> border=»0″ — рамка рисунка. 0 — это значит выключить рамку, так как она портит весь вид страницы в данном примере, но бывают случаи когда рамки рисунка вполне актуальны и так сказать вписываются в страницу. Здесь нужно помнить, что когда рисунок является ссылкой, его рамка окрашивается в цвета ссылки: link — цвет ссылки, alink — цвет нажатой, активной ссылки, vlink — цвет посещенной ссылки тега <body>.

Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю.. Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас думаю так будет удобнее Вам читать, и мне писать.. : Да и подразумеваю что Вы уже самостоятельно можете вставлять теги в нужные места.

Напишите мне письмо.. — строчка из того примера..

Для того что бы сделать текст или рисунок ссылкой на e-mail — почтовый ящик его нужно заключить в тег <a>, но не простой, а с использованием mailto

Пишем так:

<a href=»mailto:[email protected]»> Напишите мне письмо.. </a>

Эта непривычная запись будет говорить что, кликнув по тексту ссылке «Напишите мне письмо..» посетитель сайта попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик karlson@kruha. ru

Пример:

<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h3>
<a href=»mailto:[email protected]»> Напишите мне письмо.. </a>
</h3></center>
</body>
</html>

смотреть пример  

Помимо этого в почтовом бланке можно заранее прописать следующие вещи:

?subject= — Тема пиcьма
&Body= — Текст сообщения
&cc= [email protected],[email protected] — Копии письма
&bcc= [email protected],[email protected] — Скрытые копии письма

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

Пример:

<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h3>
<a href=»mailto:karlson@kruha. ru?subject=А у вас молоко убежало.. &Body=Текст письма &[email protected] &[email protected]»>Напишите мне письмо.. </a>
</h3></center>
</body>
</html>

смотреть пример  

Закладки или якоря — это особый вид ссылок. Данные ссылки, как правило, не ведут к какому либо документу, а предназначены для навигации внутри страницы.

Предположим на странице в удобном месте находится некое содержание или меню.. по принципу:

Глава1
Глава2
Глава3

А далее идет большой текст с этими главами, так вот чтобы посетитель страницы нажав на одну из этих глав «перенёсся» в нужное место текста нам нужно сделать две вещи:

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

Вот так:

<а name=»glava1″>Глава1 </а>
<а name=»glava2″>Глава2 </а>
<а name=»glava3″>Глава3 </а>

Имя можно присвоить любое необязательно glava1

А теперь собственно прописываем на них ссылки в нашем меню, содержании.

Вот так:

<a href=»#glava1″> Глава1</a>
<a href=»#glava2″> Глава3</a>
<a href=»#glava3″> Глава3</a>

Замете перед каждым именем ставим знак решётки #.

Ладно, думаю, на примере будет понятнее:

<html>
<head>
<title>Закладки</title>
</head>
<body>
<h3>А. С. ПУШКИН</h3>
<a href=»#skazka1″>Сказка о попе и работнике его Балде</a><br>
<a href=»#skazka2″>Сказка о рыбаке и рыбке</a><br>
<a href=»#skazka3″>Сказка о царе Cалтане</a>
<h4><a name=»skazka1″>Сказка о попе и работнике его Балде</a></h4>
<pre>
Жил-был поп,
Толоконный лоб.
… … …
</pre>
<h4><a name=»skazka2″>Сказка о рыбаке и рыбке</a></h4>
<pre>
Жил старик со своею старухой
У самого синего моря.
… … …
</pre>
<h4><a name=»skazka3″>Сказка о царе Cалтане</a></h4>
<pre>
Три девицы под окном
Пряли поздно вечерком.
… … …
</pre>
</body>
</html>

смотреть пример  

Хотя, как я уже говорил, закладки используют для навигации внутри страницы, на них всё же можно ссылаться с других страниц или сайтов

<a href=»primer.html#glava1″> идем к главе1 с другой страницы сайта</a>
<a href=»http://www. site.ru/ primer.html#glava2″> разместив такую ссылку на любом другом сайте мы согласно указанному пути сначала попадаем на наш сайт www.site.ru надём там документ primer.html и сразу начинам читать главу2</a>

Ну а теперь, как и обещал, выкладываю «большой» пример он тоже состоит из двух отдельных страниц:

Файл index.html:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#ffffff» background=»graphics/fon.jpg»>
<center>
<table cellpadding=»5″ cellspacing=»2″ border=»1″>
<tr>
<td colspan=»3″ bgcolor=»#b2ff80″>
<center><img src=»graphics/privet.jpg» alt=»Привет мир!!!»></center>
</td>
</tr>
<tr>
<td bgcolor=»#ffa0cf»>
<center><b><a href=» index. html»>Обо мне!!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=» myfoto.html»>Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=»mailto:[email protected]»>Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan=»3″ valign=»top» bgcolor=»#b2ff80″>
<img src=»graphics/foto.jpg» align=»left» hspace=»10″ alt=»Это моя фотка!!!»>
<p align=»justify»>&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! … … …</p>
</td>
</tr>
</table>
</center>
</body>
</html>

Файл myfoto. html:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#ffffff» background=»graphics/fon.jpg»>
<center>
<table cellpadding=»5″ cellspacing=»2″ border=»1″>
<tr>
<td colspan=»3″ bgcolor=»#b2ff80″>
<center><img src=»graphics/privet.jpg» alt=»Привет мир!!!»></center>
</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff»>
<center><b><a href=» index.html»>Обо мне!!!</a></b></center>
</td>
<td bgcolor=»#ffa0cf»>
<center><b><a href=» myfoto.html»>Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=»mailto:karlson@kruha. ru»>Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan=»3″ valign=»top» bgcolor=»#b2ff80″>
<img src=»graphics/foto1.jpg» align=»middle» vspace=»10″ hspace=»10″ alt=»Это моя фотка!!!»>
это я <br>
<img src=»graphics/foto2.jpg» align=»middle» vspace=»10″ hspace=»10″ alt=»Это моя фотка!!!»>
и это я <br>
<img src=»graphics/foto3.jpg» align=»middle» vspace=»10″ hspace=»10″ alt=»Это моя фотка!!!»>
снова я
</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример  

Фух.. ну вроде всё.. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур.. да и как сайт с точки зрения построения имеет законченный вид. ..

Он улетел — но обещал вернуться!.. 🙂

Вполне нормальный сайт-визитка получился.. конечно, дизайн не вдохновляет, но зато теперь у Вас будет стимул сделать лучше!! Теперь этот сайт можно выложить в свет, как это сделать читайте в статье «Публикация сайта»

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

  • Одна из Ваших страничек на сайте обязательно должна называться index.html. Именно файл с таким названием на Вашем сайте будет искать программа робот, когда человек введет имя Вашего сайта. Так как страница index.html будет открываться первой, делайте её главной. Остальные страницы можете называть, как угодно… больше никаких нюансов с именами нет.

  • Про регистр.. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.

  • Правило трех кликов..

    Старайтесь формировать «дерево ссылок» таким образом, чтобы посетитель сайта мог из любой его страницы попасть в любое место сайта за минимальное число переходов по ссылкам. Больше трёх переходов к нужному месту на сайте это уже не есть хорошо.. Бесконечные загрузки ненужных человеку страниц могут привести к нервному расстройству и преждевременному закрытию сайта. Берегите время деньги и нервы людей.


Учебник HTML — Ссылки

❮ Назад Далее ❯

Ссылки встречаются почти на всех веб страницах. Ссылки позволяют пользователям переходить со страницы на страницу.

HTML Ссылки — Гиперссылки

HTML ссылки — это гиперссылки.

Вы можете нажать на ссылку и перейти к другому документу.

Когда вы наведете курсор мыши на ссылку, стрелка мыши превратится в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любым другим HTML элементом!

HTML Ссылки — синтаксис

HTML тег <a> определяет гиперссылку. Он имеет следующий синтаксис:

<a href=»url«>текст ссылки</a>

Самый важный атрибут элемента <a> — это атрибут href, что указывает на пункт назначения ссылки.

Текст ссылки это та часть, которая будет видна читателю.

Нажав на текст ссылки, читатель отправится на указанный URL-адрес.

Пример

В этом примере показано, как создать ссылку на Schoolsw3.com:

<a href=»https://schoolsw3.com/»>Посетить Schoolsw3.com!</a>

Попробуйте сами »

По индексу ссылки будут отображаться следующим образом во всех браузерах:

  • Не посещенная ссылка подчеркнута синим цветом
  • Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
  • Активная ссылка подчеркнута красным цветом

Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы получить другой вид!

HTML Ссылки — атрибут target

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

Атрибут target указывает, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

  • _self — По умолчанию. Открывает документ в том же окне / вкладке, в котором он был нажат
  • _blank — Открывает документ в новом окне или вкладке
  • _parent — Открывает документ в родительском фрейме
  • _top — Открывает документ во всем теле окна

Пример

Используйте target="_blank", чтобы открыть связанный документ в новом окне браузера или на новой вкладке:

<a href=»https://schoolsw3.com/» target=»_blank»>Посетить Schoolsw3!</a>

Попробуйте сами »

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

В обоих приведенных выше примерах используется абсолютный URL (полный веб-адрес) в атрибуте href.

Локальная ссылка (ссылка на страницу внутри того же веб-сайта) указывается с помощью относительного URL (без "https://www"):

Пример

<h3>Абсолютные URLы</h3>
<p><a href=»https://www.w3.org/»>W3C</a></p>
<p><a href=»https://www.google.com/»>Google</a></p>

<h3>Относительные URLы</h3>
<p><a href=»html_images.php»>HTML Изображения</a></p>
<p><a href=»/css/index.php»>CSS Учебник</a></p>

Попробуйте сами »

HTML Ссылки — использование изображения в качестве ссылки

Чтобы использовать изображение в качестве ссылки, просто поместите тег <img> внутри тега <a>:

Пример

<a href=»index.php»>
<img src=»smiley.gif» alt=»HTML учебник»>
</a>

Попробуйте сами »

Ссылка на адрес электронной почты

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

Пример

<a href=»mailto:someone@example. com»>Отправлять электронную почту</a>

Попробуйте сами »

Кнопка как ссылка

Чтобы использовать HTML кнопку в качестве ссылки, вы должны добавить некоторый код JavaScript.

JavaScript позволяет указать, что происходит при определенных событиях, таких как нажатие кнопки:

Пример

<button>HTML Учебник</button>

Попробуйте сами »

Совет: Узнайте больше о JavaScript в разделе JavaScript Учебник.

Названия ссылок

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

Пример

<a href=»https://schoolsw3.com/html/» title=»Идти к Schoolsw3 HTML раздел»>Посетите HTML Учебник</a>

Попробуйте сами »

Подробнее об абсолютных и относительных URL-адресах

Пример

Используйте полный URL-адрес для ссылки на веб страницу:

<a href=»https://schoolsw3. com/html/index.php»>HTML учебник</a>

Попробуйте сами »

Пример

Ссылка на страницу, расположенную в папке html на текущем веб сайте:

<a href=»/html/index.php»>HTML учебник</a>

Попробуйте сами »

Пример

Ссылка на страницу, расположенную в той же папке, что и текущая страница:

<a href=»index.php»>HTML учебник</a>

Попробуйте сами »

Подробнее о путях к файлам вы можете прочитать в этой главе HTML Пути к файлам.

Краткое содержание главы

  • Используйте элемент <a> для определения ссылки
  • Используйте атрибут href для определения адреса ссылки
  • Используйте атрибут target для определения места открытия связанного документа
  • Используйте элемент <img> (внутри <a>) чтобы использовать изображение в качестве ссылки
  • Используйте mailto: схему внутри атрибута href, чтобы создать ссылку, которая открывает программу электронной почты пользователя

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте правильный HTML код, чтобы превратить приведенный ниже текст в ссылку на «index. html».

>Посетите HTML учебник.

Начните упражнение

HTML Ссылки теги

ТегОписание
<a>Определяет гиперссылку

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

❮ Назад Далее ❯

Ссылка (link) — прямая ссылка на сайт или страницу сайта

А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0-9

Оглавление

  1. org/ListItem»> Типы интернет-ссылок
  2. Как сделать ссылку

С

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

Гиперссылку легко распознать визуально – обычно она выделена цветом, при наведении курсора может появиться подчеркивание или измениться цвет, в нижнем левом углу браузера при этом появляется адрес, куда эта ссылка ведет

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

Типы интернет-ссылок

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

  • Внутренние и внешние. Первые указывают на элементы и страницы того же сайта, где они и расположены, вторые указывают на сторонние ресурсы.
  • Естественные и покупные/SEO-ссылки. Естественные ссылки ставят пользователи или администраторы сайта, когда хотят поделиться какой-либо полезной информацией или указать источник данных. Покупные или SEO-ссылки используются для улучшения позиций сайта в поисковой выдаче и не несут никакой пользы для посетителей сайта. Поисковые системы крайне отрицательно относятся к их размещению – за использование SEO-ссылок сайты могут попасть под санкции, потерять позиции в поиске и трафик.
  • Прямые/активные и неактивные. Прямая ссылка оформлена как гиперссылка и, нажав на нее, пользователь сразу переходит по указанному адресу. Неактивная ссылка представляет собой просто текст с URL, который пользователь должен скопировать и вставить в адресную строку.
  • Входящие и исходящие ссылки. Входящие ссылки – это все ссылки, указывающие на определенную веб-страницу. Исходящие ссылки – все ссылки с веб-страницы, указывающие на другие веб-документы.
  • Анкорные и безанкорные. Анкорные ссылки представляют собой часть текста и изображение, при нажатии на которые пользователь переходит по указанному адресу. Безанкорные ссылки оформляются в виде URL сайта.
  • Открытые и закрытые. Открытые ссылки доступны для индексации поисковым роботам, закрытые – нет.
  • Вечные и арендованные. Данная характеристика относится к покупным ссылкам – размещение вечной ссылки вебмастер оплачивает один раз, и она покупается на долгий период, а размещение арендованной ссылки оплачивается каждый месяц, и ссылка снимается сразу, как заканчивается оплаченный период.
  • Редирект. С помощью специального скрипта такие ссылки перенаправляют пользователя на другой сайт или URL вместо того, куда он собирался изначально.
  • Битые ссылки ведут пользователя на несуществующую страницу или файл.

Как сделать ссылку

Чтобы разместить на своем сайте ссылку на сторонний ресурс или файл можно воспользоваться двумя способами:

  • Функцией «Гиперссылка» в текстовом редакторе,
  • HTML-тегами.

Функция «Гиперссылка» в текстовом редакторе

Чтобы вставить ссылку в текст, например, созданный в Word, можно воспользоваться функцией «Гиперссылка»:

  • Сначала необходимо скопировать URL нужной страницы,
  • В тексте выделить слово, на котором будет стоять ссылка, правой кнопкой мыши кликнуть по нему и выбрать «Гиперссылка»:

  • В появившемся окне в строку «Адрес» вставить скопированный ранее URL. После этого выделенное слово будет оформлено как активная ссылка.

Создание ссылки с помощью HTML-тегов

Для создания ссылки с использованием HTML-тегов нужен любой текстовый редактор.

Простая текстовая ссылка создается в три этапа:

  • Сначала пишем слово, на котором будет стоять ссылка, и заключаем его в теги a (открывающий тег) и /a (закрывающий тег),
  • В открывающий тег добавляем URL, заключенный в кавычки, с атрибутом href=
  • Полученную строку вставляем в HTML-код страницы.

Синонимы: Линк
Все термины на букву «С»
Все термины в глоссарии

(Голосов: 11, Рейтинг: 4)

Как сделать ссылку на сайт

«Как сделать ссылку на сайт?» — вопрос, которым задаются многие владельцы сайтов, блогеры и SEO-разработчики. Сложностей мало, если подобрать соответствующий алгоритм. Ссылка — это определенный элемент текста, который открывает другую страницу или закладку исходного документа. В любом коде (HTML или JavaScript) она отображается в следующем виде:

  • <a> — указывающий тег. Обязателен к размещению. Помните, что его необходимо закрывать.
  • Адрес — это административное имя нового веб-сайта, который будет открываться при нажатии.
  • Анкор — текстовое отображение перехода. Вставляется в статьи, выделяется синим/голубым цветом или подчеркиванием.

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

Идентификатор — своеобразный якорь, установленный на текстовый блок, который определяет цель клика по ссылке. Он вводится, когда требуется быстро перейти в нужный раздел или главу. Такой вариант поможет за короткое время определиться с «местом назначения». Это оптимальное решение при наличии внутреннего меню.

Атрибуты

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

Элемент <а> имеет свою атрибутику. Выглядит она так:

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

Как сделать ссылку на свой сайт с открытием в новом окне?

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

В HTML рекомендуется ввести новый тег target со значением _blank. Последний атрибут — указатель перехода на новое окно. Результат:

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

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

Для этого понадобится ввести небольшой тег title. Описание будет отображаться в виде всплывающей подсказки.

Rel=»значение» — важно и нужно ли?

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

  • nofollow. Регулирует команду отказа передачи веса странички, где она расположена. Веб-мастер таким образом демонстрирует системам свое нежелание передачи части своего авторитета или усиления другому файлу. Это подходящее решение для продвижения, где ценится вес.
  • sidebar. Дает уникальную возможность закрепить полезный материал непосредственно в закладках. Это полезный и оригинальный прием, который ценится потенциальной аудиторией. Внедрите ее, и вы увидите, что количество сохранений намного улучшится. Это сразу же отобразится на вашей статистике активности.

Что такое якоря?

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

Якорь располагается исключительно в том месте, куда будет совершаться пролистывание. Пример:

Работа с конструкторами

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

  • Зайдите в редактор, где уже будет отображен текстовый материал, размещенный, например, в блоге. Выделите словосочетание, которое послужит переходным анкором. Нажмите кнопку на панели, отображающую связывание.
  • В окне необходимо вставить URL веб-страницы, на которую пользователь должен перейти.
  • Нажмите «Добавить».

Как сделать внешние ссылки на сайт

Неотъемлемая часть поисковой оптимизации — внешние или входящие анкоры. Это помогает поисковым роботам чаще «посещать» ваш веб-ресурс. Дополнительный плюс — поисковики повысят вас в выдаче, так как будут считать, что на вас часто ссылаются. Такие голоса определяют рейтинг интернет-площадки. Соответственно, чем их больше, тем выше ваши позиции в ТОПе.

Один из популярных путей получения — привлечение других интернет-ресурсов. Обратите внимание, что вам понадобится предложить уникальный контент. Источники, на которые ссылаются, схожие по тематике. Это поможет определить показатель тИЦ (формируется Яндексом). Получить желаемый показатель не всегда удается, поэтому рекомендуется применить другой метод — приобретение ссылок.

Безопасные варианты получения:

  • Регистрировать в специализированных каталогах или картах.
  • Отвечать в комментариях со ссылками на ваш сайт.
  • Размещать тематические посты с указанием вашего интернет-ресурса.
  • Сервисы отзывов.
  • Упоминать свой URL на форумах, группах, социальных сетях.

Каких методик следует избегать:

  • Получать через биржи.
  • Приобретать, оставляя спам.

Последние способы могут привести к блокировке поисковиками. При приобретении обратите внимание на коэффициент PR (PageRank, параметр, определяющий важность страницы для Гугл; рассчитывается на основании качества и количества ссылок на эту страницу). Он может привести к попаданию в черный список. С одной стороны, они полезны. Другая сторона медали — Google не считает их естественными.

Как сделать ссылку на страницу на сайте в виде картинки

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

Ссылка-картинка добавляется аналогично обычной ссылке: вставьте картинку в текст, выделите ее и нажмите «Вставить/редактировать ссылку». Поле «Отображаемый текст» заполнять не нужно. Используйте alt. Он выведет оптимизацию на желаемый уровень.

Ссылка-кнопка CSS стилями

Когда рекомендуется прибегнуть именно к такому типу отображения? Кнопка размещается в любом участке, но чаще всего это центр. Кликабельность (то есть возможность нажать на кнопку) будет присваиваться исключительно в области расположения фигуры. Это очень удобно, так как они интуитивно понятны и выступают призывом к действию. Примеры надписей: «Зарегистрироваться», «Стать участником курса» и т.д.

Создать ее просто, следуйте классическому алгоритму введения гиперссылки. Единственное отличие — наличие ID. Он дописывается к <a>, выставляется знак равенства. Далее понадобится прописать стиль оформления style.css. Как все выглядит:

Единственная проблема, которая может возникнуть, — название ID. Если на сайте уже есть такие имена, то произойдет конфликт. Тогда придется везде видоизменять заголовки.

Как сделать ссылку активной на сайте: рекомендации и советы по внедрению

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

  • Применяйте изображения. Это поможет разбавить обычный текст, оформить его, изменить компоновку. К тому же они лучше воспринимаются посетителями и, соответственно, улучшают поведенческий фактор.
  • Активность ссылок. Перемещение будет работать при любом способе, который был указан выше. Подберите подходящий вариант для себя. Не забудьте в теге прописать ключевое слово, оно увеличит активность. Такая методика простая, но действенная, используется всеми веб-мастерами. Если вы планируете войти в их число, то попробуйте. Внимание: помните обо всех символах, нужных при добавлении ссылки (кавычках, знаках равенства и пр.), и не удаляйте их. Без них ничего не будет работать. Проверьте результат после повторной загрузки документа.
  • Знайте меру. Логично, что не каждый интернет-портал состоит из большого количества разделов. Запомните: чем меньше ваш блог, тем меньше на нем должно присутствовать ссылок. Если вы не можете определиться с количеством, то воспользуйтесь негласным правилом: число активных ссылок на сайте не превышает 100.
  • Читабельность. Анкор, как и любой текстовый элемент, должен быть понятным. Для этого позаботьтесь о нормальном звучании всего предложения в посте. Здесь имеется в виду, что текст ссылки должен иметь логическую связь со всей остальной информацией. Пример: нельзя писать об особенностях выращивания рассады в домашних условиях, а ссылку ставить на утюжки для волос. Лучше, когда читатель сразу понимает, о чем идет речь. Переход — это своеобразное продолжение мысли, а не ее обрыв.
  • Заботьтесь о посетителях. Если материал, который откроется после нажатия, имеет большой объем, предупредите их об этом. Вы не потеряете аудиторию и заработаете себе дополнительный балл. Как это можно реализовать? Например, допишите перед ссылкой: «Объемный материал по теме представлен на странице».
  • Проверяйте внешние файлы. Ссылаясь на данные другого информационного ресурса, убедитесь в его корректности. Вам потребуется: проверить источник на работоспособность, заспамленность и вирусы, наличие платных нажатий и всплывающих окон. Если вы отнесетесь к этому халатно, то есть шанс попасть под санкции. Они могут быть наложены на вас после поисковой индексации. Если вы не можете избежать такого партнерства, то уведомите об этом роботов ― исключите ссылку из индексации поисковиками. Введите в кодовую конфигурацию rel, пропишите значение nofollow. Так вы точно сохраните свою репутацию.
  • Избегайте «битых» перемещений. Со временем некоторые данные устаревают, их попросту удаляют. Соответственно, вставка будет вести в никуда. Ежемесячно устраивайте технический аудит, чтобы сохранить актуальность файлов. В результате это сэкономит вам время и нервы. Не нужно нажимать на каждую ссылку. Воспользуйтесь бесплатными сервисами: Broken link checker или Xenu Link Sleuth.

Не относитесь халатно к текстам адресов. Это один из существенных моментов перелинковки. Ключевые нюансы процесса:

  • Информативность. Во фразах лучше не злоупотреблять словами «здесь», «тут», «сюда». Они, безусловно, хорошо воспринимаются людьми и роботами, однако всего должно быть в меру. Полезность и естественность — ключевые указатели. Никто не кликнет на пустой или просто неинтересный адрес. Не забывайте о тематике. Информация о машинах никого не заинтересует в блоге о моде.
  • Лаконичность. Не надо придумывать заголовок длиной в абзац. Достаточно обычного словосочетания. Человек не будет тратить свое время на вычитку всего текстового сообщения. Большие объемы текста отпугивают, в названии — тем более. Заголовок нужен, чтобы продемонстрировать, о чем речь пойдет дальше. Если там много текста, посетители не станут даже обращать внимание. Традиционные временные затраты на чтение — не более 1-2 секунд. Уложились в этот показатель? Отлично!
  • Стандарты оформления. Придерживайтесь классического отображения анкорных данных: подчеркивание, синий или голубой оттенок. Дизайнерские нововведения могут попросту запутать пользователя. Не нужно подстраивать оттенок под цвет букв в статье. В противном случае человек и не поймет, что там стоит ссылка, по которой можно перейти.
  • Уникальность. Обратите внимание на этот параметр. Не ленитесь и старайтесь постоянно придумывать оригинальное и необычное название. Неопытные оптимизаторы иногда вставляют один и тот же текст ссылок на всех продвигаемых страницах. Ни к чему хорошему это не приводит, поисковые роботы их склеивают, и результат получается нулевой. Поэтому возьмите себе за правило: каждой странице — уникальный анкор.

Особенности использования внешних ссылок с точки зрения Яндекса

  1. Партнерские ссылки должны содержать нормальное описание ресурса. Обычный адрес необходимо дополнить описаниями.
  2. При использовании ссылки в средствах массовой информации необходим корректный анкор, то есть фраза, определяющая смысл страницы, на которую ссылаются.
  3. Регистрация в каталогах — неплохой способ продвижения. Но для достижения положительного результата необходимо подобрать качественный каталог. Признаки такого сервиса:
    • Наличие модерации.
    • Удобная с точки зрения пользователя навигация по сайту.
    • Размещение в соответствующих разделах ссылок на лидеров в нише (если крупные игроки на рынке поддерживают партнерство с каталогом, это свидетельствует о надежности последнего).
    • Грамотность и читабельность текста ссылок.
    • Отсутствие назойливой рекламы, которая мешает воспринимать контент.

Пользуясь этими советами, вы сможете провести качественную внешнюю оптимизацию.

что это такое, на что она ссылается на сайте и как ее сделать

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

Заказывайте честное и прозрачное продвижение

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Активная ссылка – это ссылка, при нажатии на которую происходит переход на другую страницу или сайт.


Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

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

  • Почему лучше на сайте использовать активную, а не неактивную ссылку
  • Как создать активные ссылки в HTML, визуальном редакторе, в соцсетях: ВК, Инстаграм
    • Как сделать активную ссылку в HTML
    • Как сделать активную ссылку в визуальном редакторе
    • Как сделать активную ссылку в Инстаграме
    • Как сделать активную ссылку ВКонтакте
    • Как сделать ссылку активной в Ворде

Почему лучше на сайте использовать активную, а не неактивную ссылку

Преимущество использования активных ссылок перед неактивными в том, что аудитории легче получать информацию:

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

Как создать активные ссылки в HTML, визуальном редакторе, в соцсетях: ВК, Инстаграм

Как сделать активную ссылку в HTML

Тег активной ссылки на языке HTML для страницы site.ru выглядит следующим образом:

 <a href="site.ru">анкор ссылки</a>

Чтобы браузер открывал ссылку в новом окне впишите в ссылку атрибут target:

<a href="/" target="_blank">site.ru</a>

Здесь присвоенное атрибуту target значение _blank означает новую страницу. Оно самое распространенное. Есть и другие, но они используются крайне редко при указании на страницы, использующие алгоритмы языка Java.

Это один из самых простых и действенных способов оформления активных ссылок в интернете.

Другой способ создания активных ссылок выглядит так:

[url=адрес ссылки, скопированный из адресной строки браузера]название ссылки[/url]

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

Как сделать активную ссылку в визуальном редакторе

Этот способ еще проще, чем создание ссылки через HTML. Например, вы используете WordPress – самую популярную CMS для создания сайтов.

  • Выделяйте в тексте фрагмент, который хотите сделать кликабельным.
  • Находите в панели инструментов вверху значок «Вставить ссылку». Кликаете на него.
  • Под тем участком текста, который мы выделили, появится поле. В него вписываем адрес ссылки.
  • После этого выделенная фраза становится кликабельной и ведет на ту страницу, которую мы указали. О том, что по тексту можно кликнуть, говорит его оформление.
  • Текст подчеркнут и выделен другим цветом. Так пользователь видит, что по этому фрагменту можно кликнуть.

Как сделать активную ссылку в Инстаграме

Активной ссылку в Инстаграме можно сделать только в профиле и в комментариях. Любая ссылка в профиле автоматически становится активной. В комментариях воспользуйтесь HTML кодом:

<a href="site. ru">анкор ссылки</a>

В постах сделать ссылки активными невозможно из-за борьбы сети со спамом.

Как сделать активную ссылку ВКонтакте

Анкорные ссылки ВКонтакте могут быть только внутренними, то есть переадресующими на собственные страницы социальной сети: профили, паблики, сообщества и события. Если вам требуется вставить в запись или в комментарий ссылку на чей-либо профиль, то делается это следующим образом: в квадратных скобках прописывается id страницы, а через вертикальную черту – ее анкор, после чего квадратные скобки закрываются. Аналогично вписываются и ссылки:

  • cообществ с атрибутом club;
  • пабликов атрибутом public;
  • событий с атрибутом event.

Например, id пользователя – 60230983, имя – Иван Иванов. Мы хотим упомянуть этого человека в записи. Для этого нужна следующая запись:

[id60230983|Иван Иванов]

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

Как сделать ссылку активной в Ворде

Чтобы сделать ссылку активной в Miscrosoft Word есть два метода:

  1. Вставить ссылку из адресной строки браузера, а затем нажать клавишу Enter.
  2. Выделить слово или фразу, которая будет анкором ссылки, затем нажать на выделенный участок правой кнопкой мыши. Далее в выпавшем меню выбрать опцию «Гиперссылка».

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

Над материалом работали:

Анна Серебрякова

руководитель SEO отдела

Как создавать ссылки на другие веб-страницы