Как вставить ссылку в текст в html: Как сделать ссылку | htmlbook.ru

Содержание

Как сделать ссылку | 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.

Атрибут target | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+2.1+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. В XHTML применение этого атрибута запрещено.

Синтаксис

<a target="имя окна">...</a>

Обязательный атрибут

Нет.

Значения

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

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут target</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть в новом окне</a></p>
 </body>
</html>

Ссылки | htmlbook.ru

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

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

<a href="URL">текст ссылки</a>

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано создание нескольких ссылок на разные веб-страницы.

Пример 8.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="dog.html">Собаки</a></p>
  <p><a href="cat.html">Кошки</a></p>
 </body>
</html>

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

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

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

Если указана ссылка на файл, которого не существует, например, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется битая. Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 8.1 в браузере Safari откроется не сам документ, а окно с предупреждением (рис. 8.2).

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

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

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно (рис. 8.3).

Рис. 8.3. Окно для выбора действия с файлом в Firefox

Абсолютные и относительные ссылки | htmlbook.ru

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

В примере 8.2 показано создание абсолютной ссылки на другой сайт.

Пример 8.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="http://htmlbook.ru">Изучение HTML</a></p>
 </body>
</html>

В данном примере ссылка вида <a href="http://htmlbook.ru">Изучение HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.

При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.

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

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

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

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

Рис. 8.4

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

<a href="Ссылаемый документ.html">Ссылка</a>

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

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

Рис. 8.5

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

<a href="../Ссылаемый документ.html">Ссылка</a>

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

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

Рис. 8.6

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

<a href="../../Ссылаемый документ.html">Ссылка</a>

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

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

Рис. 8.7

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

<a href="Папка/Ссылаемый документ.html">Ссылка</a>

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

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>

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

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись <a href="/course/">Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

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

Атрибуты ссылок | htmlbook.ru

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

target

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

<a target="имя окна">...</a>

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

  • _blank — загружает страницу в новое окно браузера.
  • _self — загружает страницу в текущее окно (это значение задается по умолчанию).
  • _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

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

Пример 8.4. Открытие ссылки в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Ссылка в новом окне</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть
      в новом окне</a></p>
 </body>
</html>

Атрибут target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

title

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

<a title="текст">...</a>

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

Пример 8.5. Создание всплывающей подсказки

<!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="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>
 </body>
</html>

Результат данного примера показан на рис. 8.8.

Рис. 8.8. Вид всплывающей подсказки в браузере

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

Как вставить ссылку в HTML, тег a и его атрибуты

Здравствуйте, уважаемые читатели сайта Uspei.com. В этом коротком уроке мы с вами успеем изучить технологию создания ссылок. Что бы вставить ссылку в html давайте перейдем в код нашей странички и найдем текст «http://www.howtocorp.com/typepilot». У меня это 73 строка документа. Открыть данный файл можно с помощью нашего текстового редактора Notepad++.

К оглавлению ↑

Тег ссылки <a> и его атрибуты

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

<a> http://www.howtocorp.com/typepilot</a>

Теперь нам необходимо прописать атрибуты для тега <a>, так как без них браузеру непонятно, что делать с нашей ссылкой дальше. Прописываем первый обязательный атрибут для ссылки – href. Это самый главный атрибут для ссылки. Он указывает, куда ведет эта ссылка. В нашем случае ссылка ведет на сайт http://www.howtocorp.com/typepilot. Поэтому его и пропишем для атрибута href.

<a href=”http://www.howtocorp.com/typepilot”>http://www.howtocorp.com/typepilot</a>

Теперь давайте посмотрим, что у нас получилось, в браузере.

реклама

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

<a href=”http://www.howtocorp.com/typepilot” target=”_blank”>http://www.howtocorp.com/typepilot</a>

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

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

реклама
<a href=”http://www.howtocorp.com/typepilot “ target= ”_blank” title=”Программа type pilot”>http://www.howtocorp.com/typepilot</a>

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

К оглавлению ↑

Как сделать ссылку для скачивания файла

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

Ссылка на time.pdf

Давайте сделаем внизу ссылочку на скачку данной статьи в формате pdf. Но прежде, давайте создадим отдельный каталог для наших файлов и назовем его files. В эту папку поместим наш файл time.pdf.

 

реклама

После этого открываем наш файл с кодом и в самом низу перед закрытием тега <body> создаем абзац:

<p>Скачать эту статью в формате PDF</p>

Сохраним наш файл и проверим, появился ли абзац.

Абзац появился, и теперь наша задача сделать этот абзац ссылкой на закачку файла. Для этого заключаем абзац в тег <a>. Для тега прописываем атрибут href и для него прописываем не ссылку на страницу, а ссылку на конкретный файл.

<p><a href=”files/time.pdf”>Скачать эту статью в формате PDF</a></p>

реклама

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

К оглавлению ↑

Относительные и абсолютные ссылки, их отличие

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

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

реклама
<a href=”http://www.howtocorp.com/typepilot” >Нажмите сюда</a>

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

Итак, мы с вами рассмотрели процесс создания ссылок в 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>Определяет гиперссылку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сегодня 10:00

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

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

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

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

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

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

.

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

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

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

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

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

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

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

Как создать гиперссылку (создание интерактивных ссылок за 3 шага)

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

Может быть, вы хотите дать ссылку на авторитетный контент из своего нового блога. Или, возможно, вам нужно быстрое напоминание о том, как сделать ссылку в HTML интерактивной.

В любом случае, мы вас прикрыли.

Что такое гиперссылка?

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

При нажатии они либо сразу перейдут на веб-адрес, либо, для определенных типов файлов, предоставят вам возможность открыть документ с помощью приложения (например, Adobe Reader для открытия PDF-файла).

Гиперссылки перейдите к:

Давайте рассмотрим несколько методов вставки гиперссылок.

Как создать гиперссылку

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

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

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

Есть два способа встраивания гиперссылок:

  1. Использование текстового редактора
  2. Использование HTML

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

Давайте посмотрим, как встроить ссылку в текст с помощью текстового редактора на вашем веб-сайте:

  1. Выделите текст, на который вы хотите создать ссылку.

  1. Щелкните значок «Добавить ссылку» на панели редактирования текста или воспользуйтесь сочетанием клавиш Ctrl + K. Откроется поле, в котором вы должны ввести местоположение, на которое хотите создать ссылку.

  1. Введите полный адрес (включая https) или расположение файла, к которому вы хотите перейти по ссылке, в поле и нажмите Enter.

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

Как вставлять ссылки в изображения:

  1. Выберите изображение, щелкнув по нему.

  1. Теперь щелкните значок «Добавить ссылку» на панели (или Ctrl + K), чтобы открыть поле. Введите местоположение, на которое вы хотите создать ссылку (как в нашем предыдущем примере).

В этом примере я установил ссылку на PDF-файл, хранящийся на моем Google Диске. Читатели могут открыть или загрузить страницу с помощью приложения по своему выбору.

Тот же процесс применяется независимо от того, редактируете ли вы сообщение или страницу в WordPress.

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

Вот как создать гиперссылку в Gmail:

  1. Выделите текст, на который вы хотите создать ссылку.

  1. Щелкните значок «Добавить ссылку» на панели редактирования текста (или Ctrl + K).

  1. Вставьте или введите URL-адрес, на который вы хотите создать ссылку, в поле и нажмите «ОК».

Теперь у вас есть гиперссылка.

Процесс аналогичен в Microsoft Outlook и других почтовых клиентах.

Как создать гиперссылку в Word

  1. Чтобы вставить ссылку в текст в Microsoft Word, начните с выделения текста.

  1. Затем нажмите Вставить в верхней строке меню.

  1. Теперь нажмите: Ссылки → Ссылка → Вставить ссылку (появится окно).

Затем вы можете добавить URL-адрес в поле «Адрес» или ссылку на:

    • Другой документ
    • Другое место в том же документе
    • Или адрес электронной почты

Как сделать Интерактивная ссылка с HTML?

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

Укажите цель, на которую вы ссылаетесь, с помощью атрибута href:

Happy Hyperlinking

Теперь вы знаете, как сделать гиперссылку.

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

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

Развлекайтесь со своей новой суперсилой!

Чтобы вставить веб-ссылку:

Чтобы вставить веб-ссылку:

Вставьте внешнюю веб-ссылку

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

  1. Введите текст, который вы хотите использовать для ссылки.

  2. Выделите текст.

  3. Щелкните, вставьте гиперссылку.

  4. В поле URL-адрес связанной страницы или файла введите URL-адрес сайта, на который вы ссылаетесь (если он внешний). Если вы ссылаетесь на привязку на другой странице, вам нужно будет добавить строку «#bookmark name» к URL-адресу. Если вы устанавливаете ссылку на внутреннюю привязку, пропустите это поле и перейдите к шагу 5.

  5. Если вы не начинаете URL-адрес с соответствующего протокола (например, mailto: для ссылки адреса электронной почты или http: // для веб-сайта), откроется всплывающее окно подтверждения, предлагающее вставить правильный префикс.

  6. При необходимости выберите якорь. Любая привязка, которую вы определили в своем документе, появится в этом раскрывающемся списке привязок. Строка «#bookmark name» будет вставлена ​​в поле URL ссылки.

  7. Если вы создаете ссылку только на внутреннюю привязку, вам не нужно указывать URL. См. Раздел «Вставка якоря (закладки)».

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

  9. Щелкните "Вставить". Вы вернетесь в визуальный редактор CMS, где выделенный текст указывает на активную ссылку.

  1. Щелкните ссылку правой кнопкой мыши.

  2. Щелкните «Вставить / изменить ссылку».

  3. В окне «Гиперссылка» отредактируйте URL-адрес.

  4. Щелкните ОК.

  5. Примечание: Если вы указали коды источника или подисточника в форме пожертвования, вы можете редактировать коды, выбрав ссылку и щелкнув «Вставить ссылку» или щелкнув ссылку правой кнопкой мыши и выбрав «Вставить / изменить ссылку» в контекстном меню. .

  1. Щелкните ссылку правой кнопкой мыши.

  2. Щелкните, разорвите связь.

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

Из этого туториала Вы узнаете, как создавать ссылки на другие страницы в HTML.

Создание ссылок в HTML

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

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

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

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

Однако вы можете перезаписать это с помощью CSS. Подробнее о стилях ссылок.

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

Ссылки указываются в HTML с помощью тега .

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

Текст ссылки

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

   Поиск в Google 
 Учебная республика 

    воздушные змеи
  

Атрибут href указывает цель ссылки. Его значение может быть абсолютным или относительным URL-адресом.

Абсолютный URL-адрес - это URL-адрес, который включает в себя все части формата URL-адреса, такие как протокол, имя хоста и путь к документу, e.g., https://www.google.com/ , https://www.example.com/form.php и т. д. В то время как относительные URL-адреса - это пути, относящиеся к странице, например, contact.html , images / smiley.png и т. Д. Относительный URL-адрес никогда не включает префикс http: // или https: // .


Установка целей для ссылок

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

  • _blank - открывает связанный документ в новом окне или на новой вкладке.
  • _parent - открывает связанный документ в родительском окне.
  • _self - открывает связанный документ в том же окне или на той же вкладке, что и исходный документ. Это значение по умолчанию, поэтому явно указывать это значение не требуется.
  • _top - открывает связанный документ в полном окне браузера.

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

   О нас 
 Google 

    Облачное небо
  

Совет: Если ваша веб-страница размещена внутри iframe, вы можете использовать target = "_ top" в ссылках, чтобы выйти из iframe и показать целевую страницу в полном окне браузера.


Создание якорей закладок

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

Создание закладок - это двухэтапный процесс: сначала добавьте атрибут id к элементу, куда вы хотите перейти, затем используйте значение атрибута id , которому предшествует знак решетки ( # ) в качестве значения . href тега , как показано в следующем примере:

   Перейти к разделу A 

Раздел A

Lorem ipsum dolor sit amet, conctetur adipiscing elit...

Совет: Вы даже можете перейти к разделу другой веб-страницы, указав URL-адрес этой страницы вместе с привязкой (например, #elementId ) в атрибуте href , например Перейти к TopicA .


Создание ссылок для загрузки

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

В следующем примере мы создали ссылки для загрузки файлов ZIP, PDF и JPG.

   Загрузить Zip-файл 
 Загрузить файл PDF 
 Загрузить файл изображения   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление доступного контента и ссылок на сайт SharePoint Online

После создания сайта SharePoint в Microsoft 365 с использованием шаблона со специальными возможностями используйте правильное форматирование, стили и альтернативные описания, чтобы сайт оставался доступным.

Примечание. При использовании SharePoint в Microsoft 365 мы рекомендуем использовать Internet Explorer в качестве браузера.

В этой теме

Добавить и отформатировать текст

Ваш сайт SharePoint в Microsoft 365 уже содержит некоторые основные элементы, такие как панель поиска и область документов. Добавить собственный контент на сайт SharePoint в Microsoft 365 очень просто.

  1. Чтобы открыть ленту Редактирование и войти в режим Редактировать , на странице, которую вы хотите редактировать, выберите ссылку Редактировать .

  2. Чтобы добавить текст в существующую веб-часть, наведите на нее фокус, а затем с ленты Edit вырежьте, скопируйте, вставьте или отформатируйте текст, как в Word для Интернета.

  3. Чтобы выбрать формат текста, откройте группу Стили .

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

  4. Когда вы закончите, выберите Сохранить .

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

  • Используйте простые шрифты и используйте не более двух или трех начертаний шрифта.

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

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

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

Добавьте заголовки, чтобы упростить сканирование содержимого

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

  1. Чтобы открыть ленту Редактирование и войти в режим Редактировать , на странице, которую вы хотите редактировать, выберите ссылку Редактировать .

  2. Выделите текст, который хотите использовать в качестве заголовка.

  3. Откройте группу Стили и выберите нужный уровень заголовка.

    Совет: Заголовки иерархические. Стиль Заголовок 1 является наиболее важным в документе и обычно является верхним заголовком. Заголовок 2 - средний уровень. Заголовок 3 может использоваться для подзаголовков, и ему всегда предшествует в документе по крайней мере один заголовок с примененным стилем Заголовок 2 .

  4. Когда вы закончите, выберите Сохранить .

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

Добавить таблицы и сделать их доступными

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

  1. Чтобы открыть ленту Edit и войти в режим Edit , выберите ссылку Edit .

  2. Поместите фокус в то место, где должна располагаться таблица.

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

  4. Поместите фокус в верхний левый ряд новой таблицы и выберите вкладку Design .

    Примечание. Вкладка Design видна только тогда, когда курсор находится в проектируемом элементе, таком как таблица.

  5. Установите флажок Строка заголовка .

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

  6. Когда вы закончите, выберите Сохранить .

Указания по доступности столов

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

  • Заголовки таблицы не должны быть пустыми.

  • Добавьте краткое описание таблицы в качестве заголовка.

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

Добавить доступные гиперссылки

  1. Чтобы открыть ленту Edit и войти в режим Edit , выберите ссылку Edit .

  2. Поместите фокус в то место, где должна располагаться гиперссылка.

  3. Чтобы открыть диалоговое окно Вставить гиперссылку , на вкладке Вставить выберите Ссылка и с адреса или нажмите Ctrl + K.

  4. В поле Текст для отображения введите место назначения ссылки.

    Совет: Текст ссылки часто является названием веб-сайта или заголовком страницы. Отображаемый текст ссылки должен иметь смысл в любом контексте и никогда не должен быть чем-то вроде «Щелкните здесь».

  5. В поле Адрес введите или вставьте URL-адрес.

    Совет: Чтобы убедиться, что ссылка работает так, как вы хотите, выберите Попробовать ссылку .

  6. Когда вы закончите, выберите OK .

Связанная информация

Ресурсы для создания доступных сайтов в SharePoint Online

Сочетания клавиш в SharePoint Online

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

Примечание. При использовании SharePoint мы рекомендуем использовать Microsoft Edge в качестве браузера.

В этой теме

Добавить и отформатировать текст

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

  1. Чтобы войти в режим Edit , на странице, которую вы хотите редактировать, выберите ссылку Edit .

  2. Чтобы добавить текст в существующую веб-часть, наведите на нее фокус и нажмите кнопку Изменить веб-часть .

  3. Чтобы выбрать формат текста, откройте редактор форматированного текста .

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

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

  • Используйте простые шрифты и используйте не более двух или трех начертаний шрифта.

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

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

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

Добавьте заголовки, чтобы упростить сканирование содержимого

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

  1. Выберите ссылку Edit на странице, которую вы хотите отредактировать.

  2. Выделите текст, который хотите использовать в качестве заголовка.

  3. Откройте меню Стили и выберите нужный уровень заголовка.

Совет: Заголовки иерархические. Стиль Заголовок 1 является наиболее важным в документе и обычно является верхним заголовком. Заголовок 2 - средний уровень. Заголовок 3 может использоваться для подзаголовков, и ему всегда предшествует по крайней мере один заголовок в стиле Заголовок 2 .

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

Добавить разделы макета и сделать их доступными

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

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

  2. Поместите фокус в то место, где вы хотите добавить таблицу.

  3. Выберите ссылку Добавить новый раздел или веб-часть .

  4. Выберите макет раздела, который вы хотите использовать.

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

Добавить доступные гиперссылки

  1. Выберите ссылку Изменить раздела, в который вы хотите добавить гиперссылку.

  2. Выберите ссылку Добавить новую веб-часть .

  3. Выберите Ссылка в меню Веб-часть .

  4. Вставьте адрес целевой ссылки.

  5. В поле Адрес введите или вставьте URL-адрес.

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

Связанная информация

Ресурсы для создания доступных сайтов в SharePoint

Сочетания клавиш в SharePoint

Вставка ссылок | Основы | SharePoint Responsive

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

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

  • Важно периодически просматривайте свои ссылки, обновляйте и исправляйте неработающие ссылки на своем сайте.
  • Лучше всего размещать текст контекстной ссылки, а не использовать «щелкните здесь» в качестве текста ссылки. Щелкнуть здесь труднее увидеть, делает ваш контент длиннее и менее доступен для людей, использующих вспомогательные технологии, такие как программы чтения с экрана. Вышеупомянутый маркер представляет собой пример контекстной ссылки, например: Подробнее о Маскировка ссылок для кампаний печати и электронной почты.

Ссылка на веб-страницу

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

Видеоурок

Пошаговое руководство

Ссылка с адреса позволяет вам перейти на любую страницу вашего веб-сайта или другого веб-сайта.Это самый быстрый метод, который заключается в простой вставке URL-адреса в ссылку из адресного окна.

  1. Войдите на свой сайт, перейдите на страницу и нажмите Изменить .
  2. Откройте страницу, на которую вы хотите создать ссылку, в другой вкладке или в другом окне. Скопируйте URL-адрес из адресной строки.
  3. Вернитесь на исходную вкладку со страницей, которую вы редактируете. Выделите слова, которые вы хотите превратить в ссылку. (См. Выше рекомендации по созданию контекстных ссылок.)
  4. Щелкните вкладку Insert , а затем щелкните нижнюю часть кнопки Link . В раскрывающемся меню выберите С адреса .
  5. Вставьте URL-адрес в поле Адрес .
  6. Когда вы закончите редактировать страницу, не забудьте «Сохранить и закрыть» и «Вернуть».

Видеоурок

Пошаговое руководство

Ссылка из SharePoint позволяет вам ссылаться только на страницу или документ на вашем сайте.Это не будет работать со ссылками на страницы других веб-сайтов DePaul или сайтов за пределами DePaul. Этот метод состоит из навигации по структуре вашего веб-сайта и указания страницы или документа, на которые вы хотите создать ссылку.

  1. Войдите на свой сайт, перейдите на страницу и нажмите Изменить .
  2. Выделите слова, которые вы хотите превратить в ссылку. (См. Передовой опыт создания контекстных ссылок выше.)
  3. Щелкните вкладку Insert , а затем щелкните в нижней части кнопки Link .В раскрывающемся меню выберите Из SharePoint .
  4. Появится окно для добавления ссылки с вашего сайта, показывающее структуру вашего сайта, а также библиотеки изображений, документов и страниц. Обратите внимание на то, где вы находитесь в структуре сайта в левом столбце - по умолчанию он может отличаться от того, где вы планировали, поэтому вам придется перемещаться туда.
  5. Разверните дочерний сайт, на котором находится страница, на которую вы хотите создать ссылку, и щелкните библиотеку Pages этого дочернего сайта.
  6. Выберите страницу, на которую вы хотите создать ссылку, и нажмите Вставить .
  7. Когда вы закончите редактировать страницу, не забудьте «Сохранить и закрыть» и «Вернуть».

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

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

Видеоурок

Пошаговое руководство

Linking использует тот же процесс, что и Link to Address, описанный выше.Единственное отличие - это добавление "mailto:" перед адресом.

  1. Войдите на свой сайт, перейдите на страницу и нажмите Изменить .
  2. Выделите адрес электронной почты в содержании.
  3. Щелкните вкладку Insert , а затем щелкните нижнюю часть кнопки Link. В раскрывающемся меню выберите С адреса .
  4. В поле Адрес введите mailto: , а затем адрес электронной почты.Убедитесь, что не ставите пробелы между словами или после двоеточия. Например, если вы хотите сделать ссылку на основной адрес электронной почты для допуска DePaul, в адресной строке введите mailto: [email protected]
  5. .
  6. Когда вы закончите редактировать страницу, не забудьте «Сохранить и закрыть» и «Вернуть».

Ссылка на документ PDF

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

Видеоурок

Пошаговое руководство

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

  1. Войдите на свой сайт, перейдите на страницу и нажмите Изменить .
  2. Выделите слова, которые вы хотите превратить в ссылку. (Обычно это заголовок документа. Рекомендации по созданию контекстных ссылок см. Выше.)
  3. Щелкните вкладку Insert , а затем щелкните нижнюю часть кнопки Link . В раскрывающемся меню выберите Из SharePoint .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *