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

❮ Предыдущая Далее ❯

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

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

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

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

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

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

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

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

Пример

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

Посетить W3Schools.com!

Попробуйте. О себе »

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

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

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

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

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

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

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

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

Пример

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

Посетите W3Schools!

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

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

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

Локальная ссылка (ссылка на страницу в пределах того же веб-сайта) указывается с относительный URL (без часть «https://www»):

Пример

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

w3.org/»>W3C

Google

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

HTML-изображения

CSS Учебное пособие

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

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

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

Пример

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

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

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

Пример

Отправить письмо

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

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

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

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

Пример

Учебное пособие по HTML

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

Совет: Узнайте больше о JavaScript в нашем учебном пособии по JavaScript.

Заголовки ссылок

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

Пример

Посетите наш учебник по HTML

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

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

Пример

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

руководство по HTML

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

Пример

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

asp»>руководство по HTML

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

Пример

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

руководство по HTML

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

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

Резюме главы

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

Теги ссылок HTML

Полный список всех доступных HTML-тегов см. в нашем справочнике по HTML-тегам.

❮ Предыдущий Далее ❯

О нет! Мы не смогли найти ничего подобного.

Попробуйте еще раз поискать, и мы постараемся.

Получите доступ к нашей бесплатной коллекции лайфхаков, советов и шаблонов по кодированию HTML и CSS.

Загрузить сейчас: 25 советов по HTML и CSS

Джинни Минео

Обновлено: 25 августа 2022 г.

Опубликовано: 27 июля 2022 г.

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

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

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

Примечание. Если вы являетесь клиентом HubSpot, следуйте этим инструкциям.

Как сделать ссылку на определенную часть страницы

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

1. Назовите объект или текст, на который вы хотите сослаться.

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

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

Пример

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

facebook_ads_example

Теперь переходим к следующему шагу.

2. Возьмите выбранное вами имя и вставьте его в открывающий тег ссылки HTML.

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

Пример

 
 <а> 
 

3. Поместите этот полный открывающий тег

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

При этом устанавливается местоположение ссылки. Вот как теперь должен выглядеть ваш код:

Объект, на который вы хотите сослаться.

Пример

 
 Это пример объявления Facebook, на который я хочу сослаться.  
 

4. Создайте гиперссылку, которая приведет вас к этому тексту или объекту.

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

< a href =»#INSERT_YOUR_OBJECT_NAME_HERE»>Нажмите здесь, чтобы просмотреть содержимое ниже. a>

Пример

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

И все готово — у вас есть действующая гиперссылка между двумя элементами контента на одной странице. Просто как тот.

(Привет, любопытные люди из введения! Нажмите здесь, чтобы вернуться к тому месту, где вы остановились.)

Темы: Ресурсы по созданию контента

Не забудьте поделиться этим постом!

Связанные статьи

• hubspot.com/marketing/jump-link-same-page»>

  Как создать ссылку для перехода к определенной части страницы [Совет]

  27 июля 2022 г.

• 10 инструментов курирования контента, которые нужны каждому маркетологу

  02 авг. 2021 г.

• hubspot.com/marketing/free-content-marketing-tools-list»>

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

  21 декабря 2016 г.

• Окончательный список веб-сайтов, которые каждый блоггер должен добавить в закладки

  15 декабря 2016 г.

• hubspot.com/marketing/interactive-content-tools»>

  7 простых в использовании инструментов интерактивного контента, которые стоит изучить

  30 мая 2015 г.

• 9 отличных инструментов, которые помогут вам лучше писать и редактировать сообщения в блогах

  16 марта 2015 г.

• hubspot.com/marketing/content-creation-partner-resources»>

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

  12 сентября 2014 г.

• Фотошопа нет? Нет проблем: 10 инструментов визуального контента для начинающих

  08 июля 2014 г.