Гиперссылки в html
Содержание:
Ссылка в HTML — ссылки на электронную почту
Также можно создать гиперссылку на адрес электронной почты. Для этого используйте атрибут mailto в теге ссылки:
<a href="mailto:king_kong@example.com">Email King Kong</a>
Посмотреть пример
Нажатие на эту ссылку приведет к открытию вашего почтового клиента по умолчанию с уже заполненным адресом электронной почты получателя.
Можно автоматически заполнить строку темы для своих пользователей, и даже тело письма. Это делается путем добавления параметров subject и body к адресу электронной почты.
<a href="mailto:king_kong@example.com?subject=Question&body=Hey there">Email King Kong</a>
Посмотреть пример
Другие ссылки
Мы рассмотрели ссылки на документы по протоколу HTTP или HTTPS, но кроме этого существуют и другие ссылки — на адрес электронной почты, номер телефона и др.
Ссылка на адрес электронной почты
Создание ссылки на адрес электронной почты делается почти также, как и ссылка на веб-страницу. Только вместо протокола http указывается mailto, после которого через двоеточие идёт сам адрес почты (пример 5).
Пример 5. Ссылка на адрес электронной почты
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Адрес электронной почты</title>
</head>
<body>
<p><a href=»mailto:vlad@webref.ru»>Задавайте вопросы по электронной почте</a></p>
</body>
</html>
В атрибуте href элемента <a> вначале пишется ключевое слово mailto, затем через двоеточие желаемый почтовый адрес. Подобная ссылка по своему виду ничем не отличается от ссылки на веб-страницу, но при щелчке по ней запускается почтовая программа, установленная по умолчанию. Поэтому в названии ссылки желательно указывать, что она имеет отношение к электронной почте, чтобы читатели понимали, к чему приведёт щелчок по ней.
Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject с темой сообщения, как показано в примере 6.
Пример 6. Задание темы сообщения
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Тема письма</title>
</head>
<body>
<p><a href=»mailto:vlad@webref.ru?subject=Вопрос по HTML»>Задавайте
вопросы по электронной почте</a></p>
</body>
</html>
При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.
Ссылка на Skype
Для вызова программы Skype вы можете использовать протокол callto, после которого через двоеточие следует номер телефона или логин пользователя (пример 7).
Пример 7. Ссылка на Skype
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Skype</title>
</head>
<body>
<p><a href=»callto:vlad»>Мой Skype</a></p>
</body>
</html>
Не все браузеры поддерживают такой формат ссылок.
Ссылка на телефон
На мобильных устройствах вы можете использовать протокол tel, который позволяет использовать ссылку для набора номера и вызова абонента. Номер следует указывать в международном формате, допустимо вставлять в номер дефис или писать его слитно (пример 8).
Пример 8. Ссылка на телефон
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Номер телефона</title>
</head>
<body>
<p><a href=»tel:+1555-2368″>Звоните нам</a></p>
</body>
</html>
При щелчке по такой ссылке откроется приложение для телефона и начнётся вызов абонента.
Создание ссылок
Пример 1. Создание ссылки
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
</head>
<body>
<p><a href=»page/lorem.html»>Ссылка на страницу lorem.html</a></p>
<p><a href=»lorem.zip»>Ссылка на файл lorem.zip</a></p>
<p><a href=»https://webref.ru»>Ссылка на сайт webref.ru</а></p>
</body>
</html>
В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес может быть абсолютным и относительным. К абсолютному адресу относится полный путь к документу, включая протокол и наименование сайта, например http://mysite.ru/about/. Эта форма обращения работает везде и всюду, независимо от имени сайта или веб-страницы, где прописана ссылка. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сайта применяются относительные ссылки. Подобные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Когда путь ведётся от корня сайта, в начале пути добавляют слэш (/), например /source/adm.html. В этом случае сервер понимает, что ему следует загрузить документ по адресу http://mysite.ru/source/adm.html. Учтите, что ссылки относительно корня сайта не работают на локальном компьютере, а только под управлением веб-сервера. Вот некоторые примеры адресов.
//mysite.ru
Обращение к сайту без указания протокола.
/
/demo/
Эти две ссылки называются неполными и указывают веб-серверу загружать файл index.html (или index.php), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов или блокирует доступ к сайту из соображений безопасности.
/images/pic.html
Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведёт на документ pic.html, который находится в папке images. А она, в свою очередь, размещена в корне сайта.
../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке папок сайта.
manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде двух точек, то она размещена внутри текущей папки.
Гиперссылка на место в стороннем документе или сформированной веб-странице
Как сделать в Ворде ссылку на место в документе или веб-странице, сформированной в программе? Первое, с чего вы начинаете – это отметка точки, к которой ссылка будет непосредственно вести.
Работа с местом назначения гиперссылки
Чтобы добиться желаемого результата, необходимо проследовать элементарной инструкции:
- Используя метод, описанный выше, добавьте закладку в веб-страницу или же текстовый документ, который является конечным.
- Теперь откройте тот компонент, в котором должна размещаться активная ссылка на место в документе, открытом ранее.
- Выделите объект, который должен содержать в себе формируемую гиперссылку. Кликните по нему ПКМ, чтобы в контекстном меню выбрать вариант «Гиперссылка…».
Перед вами появится окно, где реализуются различные настройки. Например, в блоке «Связать с» выберите вариант «файлом, веб-страницей». Что касается раздела «Искать в», укажите путь к тому файлу, в котором была сформирована закладка.
Открытая вкладка «Вставка гиперссылки» содержит в нижней части кнопку «ОК». Нажмите по ней, чтобы завершить процедуру.
Дополнительная информация. По сути, сейчас вы добавили гиперссылку в том документе, который был создан. Она ведёт на место в другом компоненте (может быть представлен документом или веб-страницей). Что касается подсказки, по умолчанию она выглядит как путь к первому файлу, который содержит закладку. Чтобы изменить подсказку, воспользуйтесь методом, который описан выше.
Добавление ссылки
Второй шаг в вопросе, как сделать в Ворде ссылку, касается её непосредственного добавления:
- Откройте документ и выделите то, что в дальнейшем превратится в гиперссылку.
- Кликнув ПКМ, отобразится контекстное меню. Выберите опцию «Гиперссылка…», как это делалось ранее.
- Отобразится диалоговое окно для реализации настройки. Что касается раздела, укажите вариант «Место в документе».
- В списке вы должны выбрать либо заголовок, либо закладку. Именно сюда и будет ссылаться активная ссылка.
В конце настройте подсказку, чтобы всё выглядело так, как вам необходимо. После этого жмите на «ОК» для сохранения внесённых изменений.
Есть несколько советов, о которых нужно помнить. Тогда вы будете полноценно разбираться в вопросе, как сделать в Ворде ссылку:
- Если не знали, то вы можете ссылаться на места в документах, сформированных при помощи других программ пакета MS Office. О чём в данном случае речь? Например, подойдут документы Excel или PowerPoint. Популярные продукты, которые пользуются спросом и гарантируют качественный функционал.
- Если хотите создать ссылку на место в книге Excel, потребуется воспользоваться специальной схемой построения данных. Во-первых, вы должны создать в ней имя. Во-вторых, потребуется в гиперссылке в конце имени ввести символ решетки «#». В-третьих, за ней указывается непосредственно имя файла Excel.
- Если хотите реализовать операцию для PowerPoint, действуйте по аналогии. Отличие лишь в том, что после решетки нужно указать номер желаемого слайда.
Ссылки
Последнее обновление: 08.04.2016
Ссылки, которые представлены элементом <a></a>, играют важную роль — они обеспечивают навигацию между отдельными
документами. Этот элемент имеет следующие атрибуты:
Наиболее важным атрибутом является :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ссылки</title> </head> <body> <a href="content.html">Учебник по HTML5</a> </body> </html>
Здесь для ссылки используется относительный путь content.html. То есть в одной папке с данным документом должен находиться файл content.html,
на который будет идти переход по нажатию на ссылку.
Также мы можем использовать абсолютные пути с полным указанием адреса:
<a href="http://metanit.com/web/html5/">Учебник по HTML5</a>
Навигация внутри документа
И также мы можем задать внутренние ссылки, которые будут переходить к определенным блокам внутри элементов:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Внутренние ссылки</title> </head> <body> <a href="#paragraph1">Параграф 1</a> | <a href="#paragraph2">Параграф 2</a> | <a href="#paragraph3">Параграф 3</a> <h2 id="paragraph1">Параграф 1</h2> <p>Содержание параграфа 1</p> <h2 id="paragraph2">Параграф 2</h2> <p>Содержание параграфа 2</p> <h2 id="paragraph3">Параграф 3</h2> <p>Содержание параграфа 3</p> </body> </html>
Чтобы определить внутреннюю ссылку, указывается знак решетки (#), после которого идет id того элемента, к которому надо осуществить переход. В данном
случае переход будет идти к заголовкам h2.
Атрибут target
По умолчанию ресурсы, на которые ведут ссылке, открываются в том же окне. С помощью атрибута target можно переопределить
это действие. Атрибут target может принимать следующие значения:
- : открытие html-документа в новом окне или вкладке браузера
- : открытие html-документа в том же фрейме (или окне)
- : открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме
- : открытие html-документа на все окно браузера
- : открытие html-документа во фрейме, который называется framename (В данном случае framename — только пример, название фрейма может быть произвольным)
<a href="http://metanit.com/web/html5/" target="_blank">Учебник по HTML5</a>
Значение как раз и указывает браузеру, что ресурс надо открыть в новой вкладке.
Стилизация ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a:link {color:blue; text-decoration:none}
a:visited {color:pink; text-decoration:none}
a:hover {color:red; text-decoration:underline}
a:active {color:yellow; text-decoration:underline}
</style>
</head>
<body>
<a href="index.html">Учебник по HTML5</a>
</body>
</html>
Здесь определены стили для ссылок в различных состояниях. применяется для ссылок в обычном состоянии, когда они не нажаты и на них не наведен указатель мыши.
указывает на состояние ссылки, по которой уже был осуществлен переход.
указывает на состояние ссылки, на которую навели указатель мыши.
указывает на ссылку в нажатом состоянии.
Стиль устанавливает цвет ссылки. А стиль устанавливает подчеркивание: если значение , то ссылка поддчеркнута,
если , то подчеркивание отсутствует.
Ссылка-картинка
Поместив внутрь элемента элемент , можно сделать ссылку-изображение:
<a href="index.html"> <img src="cover.png" alt="HTML tutorial"> </a>
НазадВперед
Другие полезные атрибуты анкора
Существуют дополнительные атрибуты, которые можно использовать при работе с анкорами гиперссылок.
Укажите язык целевого анкора: hreflang
Этот необязательный атрибут сообщает браузеру язык документа, на который ведет ссылка. Например, если нужно сообщить браузеру, что целевой источник написан на испанском, мы будем использовать в качестве значения hreflang соответствующий код языка в формате ISO 639-1.
Чтобы сообщить браузеру, что <a href="http://example.com" hreflang="es">ссылка</a> ведет на ресурс на другом языке, можно использовать атрибут <code> hreflang </ code>.
Атрибут rel
Атрибут rel используется для описания отношений между анкором и целевым источником. Например:
Эта статья была написана <a href="https://plus.google.com/+AuthorName" rel="author">Отличным автором</a>.
Существует несколько значений, которые принимает атрибут rel:
- rel=»nofollow»: используйте это значение, если ссылаетесь на ресурс, но не хотите передавать ему ссылочный вес своего сайта. Например, если ссылаетесь на спамовый сайт в качестве примера того, чего не нужно делать.
- rel=»alternate»: если сайт имеет больше одной версии, используйте это значение для идентификации связанного ресурса в качестве альтернативной версии текущей страницы.
- rel=»bookmark»: это значение используется для определения URL-адреса, который является постоянным и может использоваться для закладки.
- rel=»help»: идентифицирует связанный ресурс как файл справки для страницы с этим значением.
- rel=»license»: используйте этот атрибут для ссылки на лицензию авторских прав.
- rel=»next»: используйте это значение для ссылки на следующий документ из серии.
- rel=»prev»: используйте это значение для ссылки на предыдущий документ из серии.
- rel=»noreferrer»: если хотите разместить ссылку на внешний сайт, но не хотите, чтобы целевой источник знал, кто на него ссылается, используйте это значение.
Атрибут type
Необязательный атрибут type используется для идентификации типа интернет-носителя или MIME типа целевого документа. Например, при создании ссылки на сайт можно добавить атрибут type=»text/html», чтобы сообщить браузеру, что ссылка указывает на HTML-документ.
Сейчас этот атрибут не имеет большого значения. Но в будущем он будет сообщать пользователю сайта тип контента еще до нажатия на ссылку.
Значение type должно быть допустимым типом IANA. Некоторые из наиболее часто используемых значений: text/html, text/css, application/javascript и multipart/form-data.
Навигация
Одним из распространенных способов использования ссылок является создание меню навигации, с помощью которого определяется логическая иерархия структуры сайта.
Связанные элементы
| Название элемента | Атрибуты | Примечания |
| link | href rel media title type | Элемент <link> используется для определения отношения между HTML-документом и внешним ресурсом. Он чаще всего применяется для определения взаимосвязи между документом и внешними таблицами стилей CSS. |
| anchor | hreflang download target title href name | Элемент <a> используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице. |
| base | target href | Элемент <base> используется для определения базового адреса, от которого можно создать все относительные URL, отображаемые на веб-странице. Если <base> имеет атрибут target, атрибут target, то он будет использоваться как атрибут по умолчанию для всех гиперссылок, отображаемых в документе. |
Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!
Вадим Дворниковавтор-переводчик статьи «Anchors & Links: How They Work In HTML»
Абсолютные и относительные ссылки
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать имя домена. Относительные ссылки ведут отсчёт от корня сайта или текущего документа.
Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. В примере 2 показано создание подобной ссылки.
Пример 2. Использование ссылки
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абсолютный адрес</title>
</head>
<body>
<p><a href=»//facebook.com»>Facebook</a></p>
</body>
</html>
В данном примере ссылка вида <a href=»//facebook.com»>Facebook</a> является абсолютной и ведёт на главную страницу Facebook. Учтите, что при открытии такой страницы в локальном документе произойдёт ошибка, поскольку такие ссылки работают только на веб-сервере.
Когда в адресе указывается только домен (//webref.ru) или после домена идёт имя папки (//webref.ru/css/), то веб-сервер автоматически загружает документ, обычно с именем index.html или index.php. Таким образом, полный путь к сайту будет https://webref.ru/index.php, а сокращённый — //webref.ru.
Абсолютные ссылки обычно применяются для указания на другой ресурс, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Ссылки относительно текущего документа
При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 3).
Рис. 3
Необходимо сделать ссылку из исходного документа source.html на target.html. В таком случае код будет следующий.
2. Файлы размещаются в разных папках (рис. 4).
Рис. 4
Когда исходный документ хранится в какой-либо папке, а ссылаемый в корне сайта, то перед именем документа в адресе ссылки следует поставить две точки и косую черту (/), как показано ниже.
Две точки в данном случае означают выйти из текущей папки на уровень выше.
3. Файлы размещаются в разных папках (рис. 5).
Рис. 5
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.
Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 6).
Рис. 6
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.
Заметьте, что никаких дополнительных точек перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
5. Файлы размещаются в разных папках (рис. 7).
Рис. 7
Каждый файл располагается в своей папке и чтобы перейти из одной папки в другую ссылка будет следующей.
Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/folder/target.html». Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index.html.
Опять же, такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.
The декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
Альтернативные способы
Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:
<div class="main-content"> <p> <img src="images/headshot-picture.jpg" alt="Снимок лица" class="left" /> Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке. </p> </div>
Задать стили для изображения можно с помощью следующего кода CSS:
.main-content img {
float: left;
padding: 0 20px 20px 0;
}
Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл, что повысит производительность.
Также можно добавить стили непосредственно в HTML-разметку, например:
<p> <img src="images/headshot-picture.jpg" alt="Headshot photo" style="float:left;margin:0 20px 20px 0;" /> Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке. </p>
Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.
Предпочтительной практикой считается, когда стили и структура страницы разделены. Это особенно полезно, когда нужно быстро изменять макет страницы, подстраиваясь под различные размеры экрана и устройства на адаптивном сайте. Наличие стиля страницы, смешанного с HTML, значительно усложнит создание медиа-запросов, которые могут корректировать внешний вид сайта по мере необходимости.
Вадим Дворниковавтор-переводчик статьи «How To Float an Image to the Left of Text on a Webpage»
Фигуры SVG
Для кликабельных изображений можно использовать формат SVG. Самый простой способ сделать часть SVG-изображения кликабельной — это добавить в разметку элемент гиперссылки SVG. Для этого нужно обернуть элемент в <a>. Это может быть простая фигура, сложные контуры или группа SVG-элементов.
В приведенном ниже примере ссылка охватывает круг, а другая – часть фигуры стрелы.
В этой демонстрации я использовала устаревшее свойство xlink:href, чтобы ссылка работала в браузере Safari.
При реализации данного подхода нужно убедиться, что тег <a> находится внутри разметки SVG. А также что он оборачивает фигуру, которую нужно сделать кликабельной.
