Как сделать кликабельный текст html

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>

Результат

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

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>

Результат

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

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

1.5. HTML-ссылки

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

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

метод доступа://имя сервера:порт/путь

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

file обеспечивает чтение файла с локального диска:

file:/gallery/pictures/summer.html

http предоставляет доступ к веб-странице по протоколу HTTP:

http://site.ru/

https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS):

https://site.ru/

ftp осуществляет запрос к FTP-серверу на получение файла:

ftp://pgu/directory/library

mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

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

Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:

• 21 — FTP
• 23 — Telnet
• 70 — Gopher
• 80 — HTTP

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

2. Абсолютный и относительный путь

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

2.1. Абсолютный путь

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:

• протокол, например, http (опционально);
• домен (доменное имя или IP-адрес компьютера);
• папка (имя папки, указывающей путь к файлу);
• файл (имя файла).

Существует два вида записи абсолютного пути — с указанием протокола (полный) и без него:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

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

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

http://site.ru/index.html

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

http://site.ru/

Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

2.2. Относительный путь

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

Относительный путь содержит следующие компоненты:

• папка (имя папки, указывающей путь к файлу);
• файл (имя файла).

Путь для относительных ссылок имеет три специальных обозначения:

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

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

3. Якоря

Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи элемента с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак # .

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

Времена года
 
Оглавление
 Лето Осень Зима Весна 
.
 
.
 
.
 
.
 

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

4. Как сделать изображение-ссылку

5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты

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

ссылка на телефонный номер +7 (495) 123-45-67 ссылка на адрес электронной почты [email protected]">[email protected] ссылка на скайп (позвонить) Skype ссылка на скайп (открыть чат) Skype ссылка на скайп (добавить в список контактов) Skype ссылка на скайп (отправить файл) Skype

6. Атрибуты ссылок

Публикации по этой теме:

Красивые кнопки для сайта. Часть 4

Красивые кнопки для сайта. Часть 3

Красивые кнопки для сайта. Часть 2

Красивые кнопки для сайта

2.7. CSS-ссылки

Поделиться:

• HTML
  • 1.1. Основы HTML
  • 1.2. HTML-элементы
  • 1.3. HTML-атрибуты
  • 1.4. HTML-текст
  • 1.5. HTML-ссылки
  • 1.6. HTML-изображения
  • 1.7. HTML-таблицы
  • 1.8. HTML-списки
  • 1.9. Спецсимволы HTML
  • 1.10. HTML-генераторы
  • 1.11. Семантические элементы HTML5
  • 1.11.1. Элемент документа
  • 1.11.2. Метаданные документа
  • 1.11.3. Разделы документа
  • 1.11.4. Группировка содержимого
  • 1.11.5. Семантика уровня текста
  • 1.11.6. Правки документа
  • 1.11.7. Встраиваемое содержимое
  • 1.11.8. Ссылки
  • 1.11.9. Табличные данные
  • 1.11.10 Формы
  • 1.11.11. Интерактивные элементы
  • 1.11.12. Скрипты
  • 1.12. HTML5-аудио
  • 1.13. HTML5-видео
  • 1.14. Необязательные теги HTML5-разметки
  • 1.15. HTML5-формы
  • 1.16. Контентная модель HTML5
  • 2.1. Основы CSS
  • 2.2. CSS блочная модель
  • 2.3. Блочные и строчные элементы
  • 2.4. CSS-позиционирование
  • 2.5. CSS-текст
  • 2.6. CSS-шрифты
  • 2.7. CSS-ссылки
  • 2.8. CSS-таблицы
  • 2.9. CSS-списки
  • 2.10. CSS-фон
  • 2.11. CSS-рамка
  • 2.12. CSS content
  • 2.13. CSS-цвета
  • 2.14. CSS-генераторы
  • 2.15. CSS3 UI
  • 2.16. CSS-градиент
  • 2.17. CSS3-рамка
  • 2.18. CSS3-оформление текста
  • 2.19. CSS-тень блока
  • 2.20. CSS-переходы
  • 2.21. CSS-трансформации
  • 2.22. CSS-анимация
  • 2.23. CSS flexbox
  • 2.24. CSS колонки
  • 2.25. CSS 3D-трансформации
  • 2.26. CSS-медиазапросы
  • 2.27. CSS-фильтры
  • 2.28. CSS Grid
  • 2.29. CSS3-шрифты
  • 2.30. CSS3-переполнение
  • 2.31. CSS3-способы письма
  • 2.32. Объединение и смешивание слоев
  • 2.33. CSS-фрагментация
  • 3.1. Основы JavaScript
  • 3.2. Выражения в JavaScript
  • 3.3. Циклы JavaScript
  • 3.4. DOM — объектная модель документа
  • 3.10. Введение в jQuery
  • 3.11. Методы jQuery
  • 3.11.1. Манипуляции HTML-элементами
  • 3.11.2. Чтение и изменение CSS-свойств, классов и атрибутов
  • 3.11.3. Обход DOM и выборка HTML-элементов
  • 3.11.4. jQuery анимация
  • 3.11.5. Методы объекта window
  • 3.12. События jQuery
  • 3.13. Селекторы jQuery
  • 4.1. Пять принципов выбора и использования шрифтов
  • 4.2. Выбираем шрифт для сайта
  • 4.3. Правила веб-типографики

  Последние записи

  

  

  

  

  

  

  2014-2023 © Елена Назарова,

  Коммерческое использование материалов сайта HTML5BOOK.RU запрещено. В остальных случаях обязательно наличие индексируемой ссылки со словом «Источник» на сайт или на страницу, содержащую этот материал.

  Код ссылки (тег ) | HTML

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

  Всегда ли URL в ссылке начинаются с http://?

  Когда используется слеш (символ /) в конце URL

  Эти страницы для поискового робота являются разными. Они содержание друг друга (подробнее).

  http://shpargalkablog.ru http://shpargalkablog.ru/

  Из них выбирается основная. На Шпаргалке блоггера со слешем ( http://shpargalkablog.ru/ ), так как предполагается что будет продолжение, допустим, http://shpargalkablog.ru/2010/ . С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel=»canonical» . Если ссылка будет иметь вид

  Главная страница Шпаргалки блоггера 

  то посетитель или, в случае rel=»canonical» только поисковый робот, сначала попадёт на http://shpargalkablog.ru , а потом его перебросит на http://shpargalkablog.ru/ .

  

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

  Веб-документы, имеющие окончание, скажем, .html , .png , .css , считаются конечным файлом и косую черту после них писать не желательно. То есть

  http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html

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

  закладка №1

  Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно сделать переход от ссылки до якоря (тег, к которому нужно перейти) плавным.

  http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut

  закладка №2
  закладка №3

  Поисковые системы не рассматривают дубликатами друг друга URL вида

  http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes

  Ссылка для отправки почты

  Звонок по телефону

  Ссылка на скачивание файла

  Открыть ссылку в новом окне, новой вкладке, фрейме

  Нельзя обязать браузер открыть ссылку в новой вкладке, а не в новом окне.

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

  Ссылка «Сохранить в закладки браузера» (HTML)

  Закрыть ссылку в nofollow

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

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

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

  HTML анкор ссылки

  блочный: ссылкой является вся строка

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

  Ссылка в CSS коде

  Как изменить цвет ссылки

  Значение свойства color может быть указано ключевым словом, например, red , green (список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета: #ff0000

  Подчёркивание ссылки

  20 комментариев:

  Tulyka Делаю всё также, как написано здесь. Вроде бы всё правильно: и якорь с латинским именем находится в нужном месте и ссылка на него сделана в соответствии с требованиями. Публикую сообщение и пытаюсь посмотреть что же у меня в итоге вышло? В итоге, ничего не вышло. Для проверки результата, жму на ссылку, в надежде оказаться в нужном месте текста (или блога), а меня, с просматриваемой страницы блога, выкидывает назад, в редактор сообщений. Почему так? NMitra Да, вспомнила об особенности Blogger. Зайдите снова в редактируемое сообщение, но на вкладку «Изменить HTML» (или «HTML» для нового редактора), там подчистите хэш-ссылку до знака #. И не заходя на вкладку «Создать» сохраните.

  Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.

  Я редко пользуюсь вкладкой «Создать», поэтому уж подзабыла. Tulyka Я об этом тоже подумала, но уже после того, как написала Вам. Так оно и есть: если делаешь хэш-ссылку, то в визуальный редактор «Создать» нельзя даже и на секундочку заглянуть, до тех пор, пока не сохранишь сообщение с уже готовыми ссылками.
  Наконец-то, получилось. ) Спасибо! LVE NMitra, подскажите, пожалуйста:
  1. Как вы выделяете в тексте код? Например когда приводите в пример строки кода, то слева от него вы ставите вертикальную линию. Как это задать в html или css?

  2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.? NMitra 1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html

  2) стили можно использовать любые, например, http://shpargalkablog.ru/2011/09/cytata-html.html NMitra stas_dayan, это не URL, а анкор. Мне такую красоту не нужно в комментариях не нужно )) scooter kak sozdati fon NMitra С помощью стилей CSS. Например, так

  анкор NMitra В комментариях стили не пропускаются. Анонимный Здравствуйте NMitra!

  Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.
  У меня в самом верху меню закреплено с помощью position:fixed;
  и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно.
  То есть посетитель теряется и не понимает куда его привела хэш-ссылка.

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

  А если бы еще этот якорь как-нибудь при переходе подсвечивался. ну там бекграунд#FF0000 это было бы круто:)

  С уважением, Владимир NMitra Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ NMitra Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/ Анонимный NMitra, спасибо!

  Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)

  С уважением, Владимир NMitra Как то так http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#background Alex Fialka Здравствуйте! Подскажите, как сделать картинку с ссылкой на конец страницы? NMitra Здравствуйте, вместо смайлика свою картинку

  Использовала id из http://fialkaa.blogspot.ru/ То есть id элемента, который находится как можно ближе к низу страницы. Анонимный Привет. Подскажите пожалуйста, есть кнопка размером 220×58, сделанная в css, и в её центре надпись, которая является ссылкой. Но сам элемент ссылки распространяется только всю ширину блока, то бишь на 100%, так как заключён в тег «center», но без него никак. А нужно чтобы ссылка была такой же, как и размер фона за текстом — 220х58, при этом должна оставаться в теге «center». NMitra Привет. Без кода что-то трудно сказать

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

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

   
  Первый класс
   Математика Русский язык Английский язык 
   

  Отслеживать

  задан 17 июл 2021 в 14:30

  1 1 1 бронзовый знак

  1 ответ 1

  Сортировка: Сброс на вариант по умолчанию

  Я бы предложил разделить «Первый класс» и details , а в summary как раз поставить этот плюсик. Ну и стилизовать как необходимо.

  Первый класс 
  +
   Математика Русский язык Английский язык 
   
   

  .main < position: relative; >/* убираем стрелочку у details */ details > summary < list-style-type: none; cursor: pointer; >details > summary::-webkit-details-marker < display: none; >/********************/ .title < position: absolute; top: 0; >details

  Читать:

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