Как сделать ссылку в тексте: Как задать ссылки в тексте? – Справочный центр Vigbo

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

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

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

Получайте до 18% от расходов на контекст и таргет!

Рекомендуем: Click.ru – маркетплейс рекламных платформ:

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

Попробовать бесплатно >> Реклама

Читайте также: Как раскрутить группу ВКонтакте

Как сделать текст ссылкой в ВК на пост или любую страницу: пошаговая инструкция

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

Шаг 1. Для создания такой ссылки введите символ * или @ и вставьте после него нужную вам ссылку.

Шаг 2. После этого через пробел в скобках укажите слово или фразу, которая и будет вести на указанную ссылку. Структура такая: @ссылка (текст).

Также допускается такой вариант: [ссылка|текст].

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

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

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

Ссылки vk.cc, которые нужны для сокращения внешних ссылок, не поддерживаются. При этом 

vk.me для личных сообщений работают.

Ранее в такие ссылки можно было преобразовывать только адреса личных профилей и сообществ. Создаются они так же, но вместо полной ссылки нужно указывать короткое имя страницы или её ID (id### для профилей и club/public/event для сообществ).

Напомним, что в рекламном кабинете ВК также стало возможным массовое копирование объявлений.

Как привязать ссылку к тексту или другому элементу сайта

Ссылка устанавливается на следующие элементы сайта:

В настройках вы можете выбрать один из трёх видов ссылки:

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

Примечание

Возможность установить ссылку на всплывающее окно доступна не для всех виджетов.

Также вы можете выбрать способ открытия ссылки при клике на неё: в текущем или в новом окне. Управление настройкой осуществляется переключателем «Открывать в новом окне».

Сохраните изменения после установки ссылки.

Как привязать ссылку к 

тексту

Нажмите на нужный элемент сайта или выделите часть текста. Щелкните по кнопке «Ссылка», которая появляется над элементом или текстом.

Для виджета «Текст» доступны дополнительные типы ссылок, которые вы можете установить. Помимо внешней ссылки, ссылки на страницу вашего сайта, якорь или всплывающее окно, вы также можете установить ссылку на телефон, чтобы при клике на него с мобильного устройства посетитель мог вам позвонить, а также есть возможность разместить ссылку на E-mail.

Как привязать ссылку к виджету

«Картинка»

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

Как привязать ссылку к виджету

«Галерея»

Нажмите на виджет «Галерея», затем на изображение в нем, на которое хотите установить ссылку, после этого кликните на иконку цепи и установите ссылку.

Как привязать ссылку к виджету

«Слайдер»

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

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

Как привязать ссылку к виджету

«Кнопка»

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

Как привязать ссылку к виджету

«Иконка»

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

Для иконки доступна установка ссылки на внешнюю страницу, страницу сайта, якорь, всплывающее окно, а также возможность поставить специальную ссылку для телефона или e-mail.

Как привязать ссылку к виджету

«Цитата»

В виджете «Цитата» вы можете установить ссылку на текст и на автора цитаты. Выделите текст и кликните на иконку установки ссылки.

Как привязать ссылку к виджету

«Карточка»

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

В тонких настройках в левой панели можно выбрать, какие элементы виджета будут кликабельны:

Как привязать ссылку к виджету

«Таблица»

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

Как привязать ссылку к виджету

«PRO таблица»

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

Двойным нажатием на кнопку откройте её настройки, нажмите на иконку карандаша и установите ссылку.

Как привязать ссылку к виджету

«Этапы»

В виджете «Этапы» установка ссылки возможна на заголовок этапа. Выделите текст, нажмите на иконку цепи во всплывающей панели и установите ссылку.

Как привязать ссылку к виджету

«Таймлайн»

В виджете «Таймлайн» вы можете установить ссылку на заголовок этапа. Для установки ссылки выделите текст и нажмите на иконку цепи.

Как привязать ссылку к виджету

«Прайс-лист»

В виджете «Прайс-лист» возможна привязка ссылки к кнопке. Кликните на неё, нажмите на иконку карандаша и укажите ссылку.

Как привязать ссылку к виджету

«Базовая кнопка»

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

Примечание:

Если кнопка «Ссылка» не появляется, значит сделать элемент или текст кликабельным невозможно.

Помогла ли вам статья?

Статья оказалась полезной для 101 человека

Как сделать ссылку | htmlbook.ru

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>, который имеет единственный обязательный атрибут href. В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Абсолютная ссылка</title>
 </head>
 <body>
  <p><a href="http://www.yandex.ru">Поисковая система Яндекс</a></p>
 </body>
</html> 

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

Примеры относительных адресов

/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Относительная ссылка</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p>
 </body>
</html>

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.

Ссылки HTML, как сделать ссылку (гиперсылку) в html. Уроки для начинающих академия

---

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

---

HTML ссылки-гиперссылки

Ссылки HTML являются гиперссылками.

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

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

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

---

HTML ссылки-синтаксис

В HTML ссылки определяются тегом <a>:

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

Пример

<a href=»https://html5css.ru/html/»>Посетите наш HTML Справочник</a>

href атрибут указывает адрес назначения (https://html5css.ru/HTML/) ссылки.

текст ссылки является видимой частью (см. наш учебник по HTML).

Щелчок по тексту ссылки отправит вас по указанному адресу.

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

---

Локальные ссылки

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

Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www….).

Пример

<a href=»html_images.php»>HTML Images</a>

---

---

Цвета ссылок HTML

По умолчанию ссылка будет выглядеть так (во всех браузерах):

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

Можно изменить цвета по умолчанию с помощью CSS:

Пример

a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

---

HTML ссылки-целевой атрибут

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

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

• _blank — Открытие связанного документа в новом окне или вкладке
• _self — Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)
• _parent — Oручка связанного документа в родительском фрейме
• _top — Открытие связанного документа в полном тексте окна
• framename — Открытие связанного документа в именованном фрейме

В этом примере откроется связанный документ в новом окне обозревателя/вкладка:

Примере

<a href=»https://html5css.ru/» target=»_blank»>Visit html5css.ru!</a>

Совет: Если веб-страница заблокирована в рамке, можно использовать target="_top" для выхода из кадра:

Пример

<a href=»https://html5css.ru/html/» target=»_top»>HTML5 tutorial!</a>

---

HTML ссылки-изображение как ссылка

Он является общим для использования изображений в качестве ссылки:

Пример

<a href=»default.php»>
  <img src=»smiley.gif» alt=»HTML tutorial»>
</a>

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

---

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

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

Пример

<a href=»https://html5css.ru/html/» title=»Go to html5css.ru HTML section»>Visit our HTML Tutorial</a>

---

HTML ссылки-создать закладку

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

Закладки могут быть полезны, если ваша веб-страница очень длинная.

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

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

Пример

Сначала создайте закладку с атрибутом id:

<h3>Chapter 4</h3>

Then, add a link to the bookmark («Jump to Chapter 4»), from within the same page:

<a href=»#C4″>Jump to Chapter 4</a>

Or, add a link to the bookmark («Jump to Chapter 4»), from another page:

Example

<a href=»html_demo.html#C4″>Jump to Chapter 4</a>

---

Внешние контуры

На внешние страницы можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

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

Пример

<a href=»https://html5css.ru/html/default.php»>HTML tutorial</a>

В этом примере ссылки на страницу, расположенную в папке HTML на текущем веб-узле:

Пример

<a href=»/html/default.php»>HTML tutorial</a>

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

Пример

<a href=»default.php»>HTML tutorial</a>

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

---

Справка

• Используйте элемент <a> для определения ссылки
• Используйте атрибут href для определения адреса ссылки
• Использование атрибута target для определения места открытия связанного документа
• Используйте элемент <img> (внутри < a >) для использования изображения в качестве ссылки
• Используйте id атрибут (ID = «value«) для определения закладок на странице
• Используйте href атрибут (href = «#value«) для связи с закладкой

---

Теги ссылок HTML

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

Создание гиперссылок — Изучение веб-разработки

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

Предварительные требования:	Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:	Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.

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

Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

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

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  Ссылки-блоки), который вы хотите превратить в ссылку, в элемент <a>, и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

<p>Я создал ссылку на
  <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
</p>

Это дало нам следующий результат:

Я создал ссылку на домашнюю страницу Mozilla.

Добавляем информацию через атрибут title

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

<p>Я создал ссылку на
  <a href="https://www.mozilla.org/ru/"
     title="Лучшее место для поиска дополнительной информации
     о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla
  </a>.
</p>

Вот что получилось (описание появится, если навести курсор на ссылку):

Я создал ссылку на домашнюю страницу Mozilla.

Примечание: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.

Активное изучение: создаём собственную ссылку

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

• Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
• Теперь превратите некоторые фрагменты документа в ссылки.
• Добавьте ссылкам атрибут title.

Ссылки-блоки

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

<a href="https://www.mozilla.org/ru/">
  <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу">
</a>

Примечание: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

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

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/.

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

Корень структуры — каталог  creating-hyperlinks. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html. На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.

• Тот же каталог: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html), указывающую на contacts.html, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — contacts.html:

  <p>Хотите связаться с конкретным сотрудником?
     Найдите подробную информацию на нашей
    <a href="contacts.html">странице контактов</a>.
  </p>

• Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html), указывающую на projects/index.html, вам нужно спуститься ниже в директории projects перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете — projects/index.html:

  <p>Посетите мою
    <a href="projects/index.html">домашнюю страницу проекта</a>.
  </p>

• Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри projects/index.html, указывающую на pdfs/project-brief.pdf, вам нужно будет подняться на уровень каталога, затем спустится в каталог pdf. «Подняться вверх на уровень каталога» обозначается двумя точками — .. — так, URL-адрес, который вы используете ../pdfs/project-brief.pdf:

  <p>Ссылка на
    <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>.
  </p>

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: 
../../../сложный/путь/к/моему/файлу.html.

Фрагменты документа

Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

<h3>Почтовый адрес</h3>

Затем, чтобы связаться с  этим конкретным  id, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

<p>Хотите написать мне письмо? Используйте наш
  <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>.
</p>

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

<p>
  <a href="#Почтовый_адрес">Почтовый адрес кампании</a>
  можно найти в нижней части этой страницы.
</p>

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

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL:

Абсолютный URL

Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница index.html загружается в каталог, называемый projects, который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com, страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как index.html, для загрузки, если он не указан в URL-адресе.).

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

Относительный URL

Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории pdfs внутри каталога projects, относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf.).

Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.

Советуем вам основательно разобраться в этой теме!

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

Используйте чёткие формулировки описания ссылок

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

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

Взгляните на этот пример:

Хороший текст ссылки: Скачать Firefox

<p><a href="https://firefox.com/">
  Скачать Firefox
</a></p>

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

<p><a href="https://firefox.com/">
  Нажми сюда
</a>
чтобы скачать Firefox</p>

Советы:

• Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
• Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
• Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
• Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.

Используйте относительные ссылки, где это возможно

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта  (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

• Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
• Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

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

Посмотрите на примеры, чтобы увидеть, как добавить описание:

<p><a href="http://www.example.com/large-report.pdf">
  Скачать отчёт о продажах (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Посмотреть видео (видео откроется в отдельном окне, HD качество)
</a></p>

<p><a href="http://www.example.com/car-game">
  Играть в гонки (необходим Flash)
</a></p>

Используйте атрибут download, когда создаёте ссылку

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Скачать Firefox 39 для Windows
</a>

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

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

Что делать:

1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
3. Скопируйте созданное меню в каждую страницу.
4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

Когда закончите задание, посмотрите, как это должно выглядеть:

Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

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

Самыми простыми и часто используемыми формами mailto: являются  subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

<a href="mailto:[email protected]">Отправить письмо для nowhere</a>

В результате получим ссылку вида: Отправить письмо для nowhere.

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».

Особенности и детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

<a href="mailto:[email protected][email protected]&[email protected]&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

Вот несколько примеров использования mailto URLs:

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

Как сделать ссылку на определенный текст, размещенный на странице сайта в Chrome: 2 способа

Возможность обмениваться ссылками на интересные страницы – полезный и важный инструмент Интернета. Но браузер Google Chrome решил расширить эту возможность, формируя ссылки на конкретные фрагменты текста на веб-странице.

♥ ПО ТЕМЕ: iPhone Demo (витринный Айфон): что это, можно ли купить и чем отличается от обычного?

Новая функция получила название Scroll to Text Fragment (прокрутка до фрагмента текста). Изначально она не очень простая в освоении, но мы покажем и научим, как с легкостью можно воспользоваться этим инструментом. Такая возможность кажется востребованной, ведь часто люди просто не могут найти на предложенной им странице нужную информацию.

Если вы не знали, то функция Scroll to Text Fragment работает только в Google Chrome, и появилась она в этом браузере только в июне 2020 года. Инструмент создает специальную ссылку, которая просит Google Chrome не просто открыть страницу, но и прокрутить ее, выделив определенный кусок. Теперь Google использует подобные ссылки в результатах поиска в своем браузере, так что иногда вы будете перемещаться прямо к нужному вам фрагменту текста на странице после нажатия на одну из предложенных по запросу ссылок. Но можно воспользоваться этой функцией и самостоятельно, поделившись ссылкой с друзьями, коллегами или родными.

♥ ПО ТЕМЕ: Как Вконтакте переводить голосовые сообщения в текст?

 

Как сделать ссылку на определенный фрагмент веб-страницы в Chrome при помощи расширения Link to Text Fragment

1. Откройте браузер Google Chrome и перейдите на страницу расширения Link to Text Fragment.

2. Нажмите Установить.

3. Откройте сайт, для которого необходимо создать ссылку и выделите фрагмент текста. Это может быть как одно слово, так и целый абзац.

4. Нажмите правой кнопкой мыши по выделенному тексту и выберите в контекстном меню пункт Copy Link to Selected Text.

Готово! Полученная ссылка была скопирована в буфер обмена.

В зависимости от того, сколько текста вы выберете, ваша ссылка будет выглядеть примерно так:

https://yablyk.com/672758-how-the-guinness-book-of-records-appeared/#mv-content-roll-2708:~:text=%D0%9E%D0%BB%D0%B8%D0%B2%D0%B5%D1%80%20%D0%A1%D1%82%D1%80%D1%83%D0%BC%D0%BF%D1%84%D0%B5%D0%BB%20%E2%80%93%20%D1%81%D1%83%D0%BC%D0%B5%D0%BB%20%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%B5%D1%81%D1%82%D0%B8%20%D0%BD%D0%B0%2040%20%D0%BC%D0%B5%D1%82%D1%80%D0%BE%D0%B2%2025%20%D0%BA%D1%80%D1%83%D0%B6%D0%B5%D0%BA%20%D0%BF%D0%B8%D0%B2%D0%B0

♥ ПО ТЕМЕ: Как научить iPhone проговаривать имя того, кто вам звонит.

 

Как делать ссылки на определенный фрагмент текста веб-страницы в Chrome при помощи специальной закладки

Существует и альтернативный способ создания подобных ссылок. ДЛя этого понадобится установить в Google Chrome специальный букмарклет. Фактически, это закладка, за которой скрывается код Java Script.

1. Активируйте панель закладок, если она неактивна в Google Chrome.

На Windows:
В настройках браузера в меню «Внешний вид» проверьте состояние переключателя напротив опции «Показывать панель закладок». Если вы не видите эту панель, то ее можно активировать нажатием комбинации клавиш Ctrl + Shift + B.

В macOS:
В строке меню выберите пункт «Посмотреть» и установите галочку напротив пункта «Всегда показывать панель закладок» или воспользуйтесь сочетанием клавиш Shift (⇧) + Command (⌘) + B.

2. Перейдите на страницу сайта разработчика Пола Кинлана. Найдите на ней ссылку Find in page и перетащите ее на панель ваших закладок Chrome. Специально для вас мы уже выделили ее как раз с помощью рассматриваемого нами инструмента.

3. Для создания ссылки перейдите на нужную вам страницу, выделите интересующий вас текст и кликните на Find in Page на панели закладок. Для удобства закладку можно переименовать.

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

Смотрите также:

Как ставить ссылки

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

Информативно

Текст, который стоит под ссылкой, должен сообщать, куда ведет гиперссылка. Текст не должен терять смысл при распечатке, если УРЛ сломался или по ссылке открылась ошибка. Поэтому под ссылкой нельзя писать «здесь» и «тут», «документ» и «файл», «ссылка» и «сайт», а еще нельзя просто вставить ссылку в сплошной текст без пояснений:

Связно

Хорошая ссылка — это законченная фраза. Это значит, что предлоги и необходимые подчиненные слова попадают под ссылку:

Привлекательно

Давайте читателю повод перейти по ссылке. Пообещайте что-нибудь интересное или полезное:

Смешивая комки

Старайтесь ставить ссылку не в середину текста, а в начале или в конце, чтобы не было эффекта Википедии. Если ссылок нужно много, продублируйте их в блоке «См. также»:

Полезно

Учитывайте, как люди будут пользоваться этой ссылкой. Если человек будет копировать и вставлять вашу ссылку, то дайте ему такую возможность:

Нет	Да
Если хотите посоветовать друзьям нашу рассылку, отправьте им эту ссылку	Если хотите посоветовать друзьям нашу рассылку, отправьте им ссылку на первый урок: maximilyahov.ru/hello/
Если хотите посоветовать друзьям нашу рассылку, отправьте им ссылку на первый урок

В неформатированном тексте

Если вам пришлось верстать неформатированный текст и вы не можете поставить часть текста под ссылку, придётся приводить ссылку целиком. Но это нестрашно. Запомните правила:

1. Перед полным текстом ссылки объясните, что там и зачем это кликать.
2. Короткую ссылку ставьте в конец абзаца.
3. Длинную ссылку — в отдельный абзац.

Пример в неформатированном тексте:

Подтвердите, что это [email protected] — ваш адрес:

См. также: Горбунов о ссылках в верстке, Лебедев о гипертексте, совет о ссылках по Госту,
Хацкевич толково об эл. адресах, я критикую ссылки в «Медузе»
Как не ставить ссылки

Как вставлять ссылки в текстовое сообщение

Ищете способ добавления гиперссылок в следующее текстовое сообщение? Что ж, у нас плохие новости. Вы не можете технически поместить ссылку hyper в текстовое сообщение. Но не прекращайте читать, потому что вы можете добавить ссылку практически в любое текстовое или SMS-сообщение. Нет, это не так запутанно, как кажется!

Если вас немного смущает разница между ссылками и гиперссылками, вы не одиноки.Мы быстро объясним разницу между ними, покажем, насколько легко можно отправлять текстовые ссылки, и приведем примеры того, как включение ссылок может служить вашим бизнес-целям.

В чем разница между ссылками и гиперссылками?

Хотя ссылки и гиперссылки направляют вас на веб-страницу при нажатии, разница заключается в том, как ссылка представлена.

Гиперссылка — это ссылка, которая активируется при нажатии на определенное выделенное слово или фразу. Обычная ссылка — это просто весь URL-адрес, не встроенный в какой-либо текст.В качестве примера приведу ссылку на наше полное руководство по SMS-маркетингу, представленное двумя способами:

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

💡 SimpleTexting Tip : Если вы хотите отправить текстовую ссылку своим подписчикам, наш сокращатель URL-адресов превратит длинный веб-адрес (как в примере выше) в сжатую ссылку, например: http: // txt.tf / BSIUBR

Отправляйте тексты с отслеживаемыми кликами

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

Попробуйте нас бесплатно

Кредитная карта не требуется

Как добавлять ссылки в текстовые сообщения

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

Для платформы текстового маркетинга SimpleTexting включить короткие URL-ссылки в вашу кампанию так же просто, как скопировать и вставить желаемую ссылку, а затем нажать нашу волшебную кнопку «Сократить URL-адреса»! Этот инструмент не только спасает вас от ценных персонажей, но и преобразует вашу ссылку в инструмент отслеживания, доступный из вашей аналитической панели.Вот что мы имеем в виду.

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

Вы должны начать с обычного ввода сообщения. Но когда вы вставляете ссылку, вам нужно будет нажать кнопку «Сократить URL» над текстом.

С вашей стороны сообщение по-прежнему будет отображаться как полная ссылка, но ваши подписчики получат это:

Сегодня 10:00

JMU Freshman! Дайте нам знать, что вы думаете о ориентационной неделе, чтобы получить шанс выиграть кредит в 100 долларов для книжного магазина! http: // txt.tf / EXPLRO

Отправлять текстовые ссылки — это просто!

Как отслеживать рейтинг кликов по ссылке (CTR)

На этом веселье со ссылками не заканчивается! Отправив текст сокращенного URL-адреса, вы можете отслеживать свое сообщение в режиме реального времени, чтобы узнать, кто перешел по ссылке.

Чтобы узнать свой CTR, нажмите «Аналитика» в боковом меню. Затем прокрутите страницу вниз и найдите свою кампанию.

Вам будет предоставлено много информации, в том числе, сколько сообщений было отправлено, доставлено, открыто, а также сколько людей ответили на вашу кампанию или отписались.Чтобы просмотреть свой CTR, прокрутите страницу до конца вправо, пока не увидите «Нажатие» и «CTR»

.

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

Помимо сбора данных, вы можете предпринять дальнейшие действия, такие как сегментирование списка на основе кликов и отправка последующих сообщений на основе этого поведения!

Зачем включать гиперссылки в вашу SMS-стратегию?

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

• Увеличить продажи
• Объявления об акциях
• Увеличить вовлеченность
• Размещать заказы
• Привлечь больше людей
• Привлечь деньги

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

Так почему бы не попробовать? В конце концов, это займет всего один волшебный щелчок!

Текстовая ссылка | Webflow University

Добавление, размещение и стиль текстовых ссылок.

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

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

Добавление текстовой ссылки

Вы можете добавить текстовую ссылку из панели «Элементы» → «Типографика». Чтобы отредактировать текст, просто дважды щелкните текст или выберите элемент и нажмите клавишу ВВОД.

Вложенные текстовые ссылки

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

Настройки ссылки

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

Стилизация текстовой ссылки

Элементы ссылки имеют по умолчанию синий текстовый стиль и подчеркивание. Вы можете переопределить этот стиль по умолчанию, изменив стиль элемента Text Link. Хороший трюк — стилизовать тег all links , чтобы все ссылки на вашем веб-сайте имели одинаковый стиль.

Совет от профессионалов

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

Стилизация всех ссылок

Чтобы стилизовать все ссылки , тег :

1. Выберите любой элемент ссылки (это важно)
2. Нажмите CMD + ENTER на Mac или CTRL + ENTER на Windows. Откроется меню выбора .
3. Выберите розовый тег «Все ссылки» внизу списка. (Совет: нажатие клавиши со стрелкой ВВЕРХ ↑ выберет тег, нажатие Enter выберет его)

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

Попробуйте Webflow — это бесплатно

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

Текст ссылки | Руководство по стилю документации для разработчиков Google

Ключевой момент: Используйте описательный текст ссылки, который помогает обеспечить контекст.

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

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

Структурирование текста ссылки

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

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

Написание текста ссылки

При написании текста ссылки соблюдайте следующие правила:

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

  Рекомендуется: Для получения дополнительной информации см. Балансировка нагрузки и масштабирование.

  Рекомендуется: Для получения дополнительной информации о планировании задач, видеть Надежное планирование задач в Compute Engine с помощью Cloud Scheduler.

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

  Не рекомендуется: хотите больше? Нажмите здесь! .

  Также не рекомендуется: Для получения дополнительной информации см. этот документ .

  Рекомендуется: Для получения дополнительной информации см. Уход за вомбатом и кормление его .

• Не используйте URL-адрес в качестве текста ссылки. Вместо этого используйте заголовок страницы или описание страницы.

  Не рекомендуется: см. HTTP / 1.1 RFC на http://www.w3.org/Protocols/rfc2616/rfc2616.html .

  Рекомендуется: Дополнительные сведения о протоколах см. HTTP/1.1 RFC .

  Исключение: В некоторых юридических документах (например, в некоторых документах с Условиями обслуживания) это можно использовать URL-адреса в качестве текста ссылки.

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

• Если ссылка загружает файл, напишите текст ссылки, который указывает это действие, а также тип файла.

  Рекомендуется: загрузите файл README.txt .

• Если текст содержит аббревиатуру в круглых скобках, укажите полную форму и аббревиатура в тексте ссылки.

  Не рекомендуется: Google Kubernetes Engine (GKE).

  Рекомендуется: Google Kubernetes Engine (GKE).

Подробнее о тексте ссылки см. Перекрестные ссылки.

Пунктуация при ссылках

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

Не рекомендуется: Для получения дополнительной информации см. Проверьте свой код.

Рекомендуется: Для получения дополнительной информации см. Проверьте свой код .

Стилизация текста ссылки

Если вы пишете CSS для всего сайта, примените стандартный стиль к тексту ссылки. Это помогает читатели находят ссылки в вашем контенте.

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

Текстовые ссылки · Axure Docs

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

Создание и удаление текстовых ссылок

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

Чтобы удалить текстовую ссылку, выберите ее на холсте и нажмите УДАЛИТЬ .

Маска текстовой ссылки

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

Примечание

Маски виджетов, включая маску текстовых ссылок, не применяются в веб-браузере.

Стилизация текстовых ссылок

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

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

Эффекты стиля

Текстовые ссылки имеют эффекты стиля MouseOver и MouseDown , включенные по умолчанию. Чтобы изменить стиль, применяемый этими эффектами, обновите стили виджета Текстовая ссылка, мышь над и Текстовая ссылка, мышь вниз .

Взаимодействие с текстовыми ссылками

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

Для текстовых ссылок доступны следующие события:

• Нажмите или коснитесь
• Мышь Enter
• Выход мыши
• Получил фокус
• Потерянный фокус

Наконечник

Некоторые общие взаимодействия с текстовыми ссылками включают Click or Tap → Scroll to Widget и Mouse Enter → Show Widget .

Вставка или редактирование ссылки в модуле форматированного текста

В модуле форматированного текста вы можете вставить ссылку на одну из ваших страниц HubSpot или внешнюю страницу. Вы также можете создать ссылку mailto или вставить ссылку для загрузки документа в свой инструмент для работы с файлами.

Добавьте ссылку на свой контент

• В своей учетной записи HubSpot перейдите на страницы своего веб-сайта, целевые страницы, блог или электронную почту.
• Наведите указатель мыши на страницу, сообщение или сообщение электронной почты, чтобы отредактировать его, и нажмите Изменить .
• В редакторе содержимого щелкните модуль форматированного текста , куда вы хотите добавить ссылку.
• Выделите текст или изображение , на которое вы хотите создать гиперссылку.
• На панели инструментов щелкните ссылку значок ссылки .
• Щелкните раскрывающееся меню Ссылка на , чтобы выбрать тип ссылки:
  
  • URL: ссылка на внешнюю страницу, которая не размещена на HubSpot. Введите URL-адрес, по которому вы хотите, чтобы посетители переходили по этой ссылке.
  • Одна из ваших страниц: ссылка на одну из ваших страниц HubSpot, сообщения в блоге или статьи базы знаний. Щелкните раскрывающееся меню Page и найдите имя страницы. Щелкните имя страницы, чтобы связать ее со своим содержанием.
  • Встреча: ссылка на одну из ссылок на вашу встречу. Щелкните раскрывающееся меню Встреча и выберите Встреча .
  • Файл: ссылка на файл в вашем файловом менеджере. Щелкните Выберите файл , чтобы выбрать файл.При необходимости нажмите Добавить файл , чтобы загрузить новый файл со своего компьютера, Dropbox или Google Диска. Щелкните имя файла, чтобы связать его со своим содержимым.
  • Адрес электронной почты: эта ссылка откроет программу электронной почты посетителя по умолчанию на его устройстве. Введите адрес электронной почты , на который вы хотите отправить электронное письмо.

• • Якорь на этой странице: ссылка на якорь, вставленный на страницу.Щелкните раскрывающееся меню Якорь и выберите на странице якорь .
• Если вы хотите, чтобы посетители открывали новое окно браузера, когда они щелкают ссылку, установите флажок Открыть ссылку в новом окне .
• Щелкните Применить .

Настройте атрибуты ссылки (необязательно)

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

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

Изменить или удалить ссылку

Чтобы изменить или удалить существующую ссылку в модуле форматированного текста:

• Щелкните текст ссылки в модуле форматированного текста.
• Щелкните значок карандаша edit, чтобы внести изменения в URL-адрес и параметры ссылки, или щелкните значок unlink unlink, чтобы удалить ссылку из текста.

Целевые страницы Электронное письмо Блог Страницы веб-сайта

Использование значимого текста ссылки | Доступные технологии

Обзор

Текст ссылки должен быть уникальным на странице, иметь смысл при чтении вне контекста и помогать пользователям узнать что-то о своем пункте назначения, если они щелкнут по нему.Текст ссылки, такой как «Щелкните здесь» и «Еще», не соответствует этим критериям. Рассмотрим различные способы взаимодействия пользователей со ссылками:

• Пользователи программы чтения с экрана могут создавать список ссылок и перемещаться по ним в алфавитном порядке. Избыточный или неоднозначный текст ссылки, такой как «Еще», не имеет смысла в этом контексте.
• Пользователи технологии распознавания речи могут выбрать ссылку с помощью голосовой команды, например «щелкнуть», за которой следует текст ссылки. Поэтому также полезно использовать уникальный текст ссылки, который будет коротким и легко произносимым.

Методы

Старайтесь всегда использовать текст ссылки, который соответствует критериям, описанным выше. Например, рассмотрим следующий код, в котором текст ссылки «щелкните здесь» не соответствует критериям:

 
 Для получения дополнительной информации о Husky Athletics  щелкните здесь . 
 

Лучше перефразировать предложение так, чтобы текст ссылки был «Хаски Атлетикс»:

 
 Для получения дополнительной информации см.  Husky Athletics . 
 

Если текст ссылки добавляется в конце повторяющихся блоков текста, например, ссылки «Читать дальше» в конце коротких тизеров для сообщений в блогах, существует множество приемлемых методов для того, чтобы сделать эти ссылки более доступными, без добавления беспорядка или жертвуя удобочитаемостью. Например, атрибуты aria-label или aria-labelledby могут быть добавлены к ссылке, обеспечивая более информативный текст ссылки специально для пользователей программ чтения с экрана.В следующем примере большинство программ чтения с экрана будут читать значение атрибута aria-label, а не текст ссылки:

  Подробнее ...  

Список литературы

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

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

По обеим этим причинам длинные URL-адреса следует избегать в качестве текста ссылки (короткие URL-адреса, такие как washton.edu, допустимы, поскольку их легко произносить и они не зависят от контекста).

Описательный текст ссылки | Доступные технологии

При добавлении текстовых ссылок на веб-страницу внимательно выбирайте слова для гиперссылки.Общее практическое правило — всегда связывать ключевых слов с . Связывание ключевых слов:

• помочь улучшить поисковую оптимизацию
• предоставит более подробную информацию пользователям с работающим зрением, которые сканируют вашу веб-страницу.
• предоставляют контекст людям без функционирующего зрения, которые могут использовать экран ридер или другие вспомогательные технологии

Ссылки, средства чтения с экрана и специальные возможности

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

Например, если текст вашей ссылки — «Медная страна», то программа чтения с экрана скажет « link Copper Country» , и пользователь будет знать, что ссылка на веб-страницу, скорее всего, связана с Copper Страна.Если вместо этого текст вашей ссылки будет «нажмите здесь», программа чтения с экрана скажет ссылка нажмите здесь , и пользователь не будет знать, о чем может быть ссылка на веб-страницу.

Хороший пример

Michigan Tech и Copper Country создают ощущение маленького городка.Студенты и члены сообщества говорят, что это правильно, но это не так. большой, что легко заблудиться, но и не слишком маленький. Идеальное место для звонка дом.

Плохой пример

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

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

Советы по написанию текста ссылки

Используйте следующие советы, чтобы обеспечить доступность текста ссылки:

• Избегайте использования URL-адреса в качестве текста ссылки; особенно если он длинный или сложный
  
  • URL-адреса могут быть не легко читаемы людьми или программами чтения с экрана
• Делайте связанные фразы как можно короче, оставаясь при этом значимыми вне контекста.Это сэкономит время пользователей программ чтения с экрана, так как им нужно будет меньше говорить. Например,
  • «сделать подарок» предпочтительнее, чем «сделать подарок онлайн, нажмите здесь»
  • «Свяжитесь с нами» предпочтительнее, чем «Вы можете связаться с нами по телефону»
• Ссылка хотя бы на одно полное слово.Обычно лучше два слова.
  • Ссылка, представляющая собой только букву или символ, будет трудно нажимать и не будет предоставить контекст
• Если вы должны добавить к своей ссылке подсказки о действиях, поместите их в конец. Например,
  • «Свяжитесь с нами (открывает всплывающее окно)» означает «Ссылка открывает всплывающее окно: свяжитесь с нами»
• Не добавляйте в текст слово «ссылка»
• Постарайтесь, чтобы каждая уникальная ссылка на вашей веб-странице использовала уникальный текст ссылки.
  • Если у вас есть две разные ссылки со списком сотрудников, ведущие на одну и ту же страницу, это нормально.Если они переходят на разные страницы, это должно быть по-другому, например «цифровые услуги персонал »и« сотрудники печатных служб »
  • Если вы часто использовали «читать дальше», представьте, как это расстроит экран читатель пользователь слышит «читать дальше» снова и снова без контекста
• Никогда не включать пустые ссылки, используя href = «»

Связывание изображений

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

Пример декоративного изображения

alt =" Список сотрудников " />

Пример информационного изображения

alt = "Диаграмма, показывающая 200 дюймов общего снега; ссылка на ежемесячные промежуточные итоги" />

Дополнительные методы программирования

Могут быть случаи, когда вы хотите сохранить общий текст ссылки, например, «[подробнее].» В этих случаях вы можете использовать aria-label или aria-labelledby, чтобы указать контекст ссылки. для программ чтения с экрана.

aria-label Пример

Большинство программ чтения с экрана прочитают вслух атрибут aria-label вместо текста ссылки. Например, ссылка «читать дальше», относящаяся к Медную страну можно закодировать следующим образом:

aria-label="Copper Country" > [подробнее]

aria-labelledby Пример

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

id = "Copper-country" > Медная страна

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

aria-labelledby=»copper-country» > [подробнее]

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

Текст ссылки тестирования

Использование программы чтения с экрана для озвучивания каждой ссылки на вашей веб-странице — лучшее тестирование, которое вы можете делать.Однако, если у вас нет доступа к программе чтения с экрана, прочтите связанный текст. громко для каждой из ваших ссылок. Может ли кто-нибудь, кого вы читаете, понять, что содержание, на которое вы ссылаетесь, основано только на произнесенных связанных словах?

Узнать больше

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

Omni CMS

Чтобы создать ссылку в содержимом своей веб-страницы, выделите текст или изображение. а затем щелкните значок ссылки на панели инструментов или воспользуйтесь сочетанием клавиш Cmd / Ctrl + K.

Чтобы добавить атрибут aria-label или aria-labelledby , перейдите к исходному коду с помощью панели инструментов.

Чтобы добавить изображение с альтернативным текстом в тело страницы, прочтите шаг 4 в разделе «Вставить изображение». Чтобы изменить альтернативный текст изображения, уже находящегося в основной части вашей веб-страницы, выберите изображение, а затем нажмите кнопку «Вставить / изменить изображение» на панели инструментов.