Как добавить ссылку в текст в html
Перейти к содержимому

Как добавить ссылку в текст в html

  • автор:

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

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

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

Рис. 1. Строка браузера при наведении курсора на ссылку

Чтобы пользователи сразу видели куда ведёт ссылка, мы можем автоматически добавить адрес к тексту ссылки через CSS. Для этого используем псевдоэлемент ::after и свойство content в сочетании с функцией attr() и значением href .

a::after

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

content: '[' attr(href) ']';

Пользовательский текст берётся в двойные или одинарные кавычки. Аналогично можно выводить и желаемые символы:

content: '�� ' attr(href);

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

Пример 1. Вывод адреса после текста ссылки

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

a::after < content: '[' attr(href) ']'; text-decoration: none; /* Вот это работать не будет */ >

См. также

  • content
  • quotes
  • relative и absolute
  • Аккордеон меню
  • Анимация ссылок при наведении
  • Атрибуты ссылок
  • Всплывающая подсказка
  • Доступность
  • Игра с картинками
  • Не только текст
  • Отображение атрибутов элемента
  • Псевдоэлементы
  • Псевдоэлементы ::after и ::before
  • Работа с кавычками
  • Функция attr()

HTML Ссылки

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

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

По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной. Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.

  • не посещенные ссылки: подчеркнутый текст синего цвета
  • посещенные ссылки: подчеркнутый текст фиолетового цвета
  • активные ссылки: подчеркнутый текст красного цвета

Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей.

Синтаксис

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

Выглядит это так :

a href="url">текст ссылкиa>.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h2>Пример ссылки h2> a href="https://ru.w3docs.com/">W3Docs.com a> body> html>

Результат

Пример ссылки

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

Атрибут target

Для того, чтобы ссылка открывалась в новом окне, необходимо добавить атрибут target , значением которого является«_blank» .

Не забудьте добавлять слеш (/) к ссылке.

Атрибут ID

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

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

  1. Создать уникальный идентификатор для этой части текста. Идентификатором может быть слово или фраза (если вы используете фразу, между словами не должно быть пробела, можно использовать нижнее подчеркивание).
    Пример. Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку.
  1. Создать гиперссылку с указанием id, которому предшествует символ решетка #.
    Пример. Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример”

Теперь давайте посмотрим, как это выглядит в коде HTML.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h2>Пример ссылки с атрибутом id h2> a id="пример">Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку a> a href="#пример">Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример” a> body> html>

Результат

Пример ссылки с атрибутом id

Как добавить гиперссылку к изображению

  1. src — источник изображения
  2. alt — альтернативный текст
  3. width — ширина изображения
  4. height — высота изображения

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> a href="https://ru.w3docs.com/"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" /> a> body> html>

Результат

Кликните по изображению внизу, и вы будете перенаправлены на домашнюю страницу нашего сайта.

logo

Об HTML изображениях мы поговорим подробнее в следующей главе.

Практикуйте свои знания

Что такое HTML ссылки и какие они бывают?

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

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

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

Ссылки в HTML

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

Такая часть HTML как «Гипертекст» определяет, какой вид ссылок мы используем: гипертекстовые ссылки (или гиперссылки).

В HTML ссылки — это строчные элементы, написанные с помощью тега .

Атрибут href (hypertext reference) используется для определения цели ссылки (куда вы переходите при щелчке по ней).

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

Есть три вида цели, которые вы можете определить:

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

Ссылки с якорем

Ссылки с якорем предназначены для навигации в пределах одной страницы. Предваряя значение атрибута href с #, вы можете настроить переход к элементу HTML с определённым атрибутом id .

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

Относительные адреса

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

Но по отношению к чему? Ну, относительно текущей страницы.

Давайте используем простой пример, в котором папка my-first-website содержит два файла HTML.

В home.html вы хотите определить ссылку на contact.html. Поскольку эти два файла находятся в одной папке, вы можете просто написать в home.html:

На реальном сайте процесс аналогичен.

Скажем, у вас есть сайт с именем http://ireallylovecats.com, на котором у вас есть две веб-страницы: index.html и gallery.html:

В index.html вы могли бы написать следующую ссылку:

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

Абсолютные адреса

Если вы хотите поделиться с другом своей галереей кошек, то не можете просто отправить gallery.html, так как этот относительный адрес работает только для HTML-документов, которые находятся на том же компьютере или домене.

Вам нужен полный адрес вашего HTML-документа: http://ireallylovecats.com/gallery.html.

Этот URL может быть разбит на три части:

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

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

В файле http://ireallylovecats.com/gallery.html, вы могли бы написать:

Относительные или абсолютные ссылки?

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

Как добавить ссылку для текста?

Чтобы добавить ссылку к тексту, выделите фразу или слово в редакторе — сверху появится панель редактирования. Выберите пункт Ссылка:

Похожие вопросы
  • Как добавить ссылку на конкретное место на странице (якорь)?
  • Как добавить кнопку?
  • Как добавить свой HTML, CSS или Javascript-код?
  • Как сделать всплывающее окно?
  • Как добавить видео?

Этот ответ был вам полезен?

Просмотры: 51889

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

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

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