Html указание ссылки: Как сделать ссылку

Posted:

Июн 28, 2023

Comments:

Html указание ссылки: Как сделать ссылку | htmlbook.ru

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
1.0+	1.0+	2.1+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <a> является одним из важных элементов
HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется
закладка внутри страницы, которую можно указать в качестве цели ссылки. При
использовании ссылки, которая указывает на якорь, происходит переход к закладке
внутри веб-страницы.

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

Синтаксис

<a href="URL">...</a>
<a name="идентификатор">...</a>

Атрибуты

accesskey: Активация ссылки с помощью комбинации клавиш.
coords: Устанавливает координаты активной области.
download: Предлагает скачать указанный по ссылке файл.
href: Задает адрес документа, на который следует перейти.
hreflang: Идентифицирует язык текста по ссылке.
name: Устанавливает имя якоря внутри документа.
rel: Отношения между ссылаемым и текущим документами.
rev: Отношения между текущим и ссылаемым документами.
shape: Задает форму активной области ссылки для изображений.
tabindex: Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
target: Имя окна или фрейма, куда браузер будет загружать документ.
title: Добавляет всплывающую подсказку к тексту ссылки.
type: Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег А</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p> 
</body>
</html>

Строчные элементыСсылки

Атрибут target
Атрибуты ссылок
Блочные элементы
Изображение в качестве ссылки
Как сделать ссылку
Правила вложений для тега <a>
Свойства ссылок
Ссылка на адрес эл. почты
Ссылка на адрес электронной почты
Ссылка на новое окно
Ссылки
Ссылки без подчеркивания
Ссылки внутри страницы
Ссылки во фреймах
Строчные элементы
Что всё это значит?
Элемент base
Якоря

HTML ссылки

Доброго времени суток, уважаемые читатели Nejalko.ru!

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

Если Вы помните, в предыдущем уроке мы научились создавать HTML-списки, так вот, если элементы списка сделать ссылками, то можно получить стандартное HTML-меню, такое, как используются на Nejalko.ru в боковых сайдбарах.

Как и прочие элементы HTML, гипертекстовые ссылки задаются с помощью специальных тегов, выглядят эти теги следующим образом:

<a>Анкор ссылки</a>

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

Теги эти парные, обязательно нужен и открывающий и закрывающий тег, не забывайте.

Но это только самый общий вид, на самом деле, давайте подумаем, зачем нам нужны ссылки в HTML, да и не только? Правильно, чтобы по ним переходить на какие-то страницы или получать доступ к каким-либо файлам. Следовательно, что должен содержать тег ссылки? Конечно адрес этой самой ссылки! Согласитесь, все логично — ссылка получает адрес и в дальнейшем переводит всех, кто на нее нажимает по этому адресу.

Предлагаю рассмотреть полную конструкцию стандартной HTML-ссылки.

Конструкция ссылок в HTML

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

<a href="https://nejalko.ru">Главная страница сайта Nejalko.ru</a>

Мы видим, что тег ссылки имеет атрибут «href=» с помощью которого прописывается, собственно, адрес главной страницы Нежалко ру. Таким образом атрибут «href=»/ (hypertext reference) является основным атрибутом ссылок, так как указывает тот адрес, на который осуществится переход, если кто-либо кликнет по ссылке. Обычно в роли содержимого атрибута href выступает интернет-адрес нужной страницы, либо расположенный по определенному адресу файл.

Обратите внимание в HTML-ссылках, работающих в интернете, перед абсолютным адресом всегда указывается протокол передачи гипертекста «http://«, данный протокол позволяет браузеру клиента и серверу, дающему доступ к сайту/файлу взаимодействовать друг с другом. В общем, запомните, в HTML-ссылках, направленных в интернет, всегда необходимо прописывать протокол http:// и только затем адрес сайта или страницы, причем вся пунктуация должна быть точно сохранена, то есть 4 буквы, затем двоеточие и 2 правых слеша. Если поставить точку с запятой или обратные слеши — ссылка не будет работать.

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

Итак, мы рассмотрели атрибут «href» и узнали, что он служит для спецификации адреса, по которому должна работать ссылка, перейдем к другим атрибутам тега ссылок <a></a>.

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

C помощью атрибута «target» мы можем указать браузеру каким образом открыть ссылку. По умолчанию все ссылки на сайтах открываются в том же окне, в котором они были нажаты. Если Вы хотите, чтобы ссылки открывались в новых вкладках следует прописать следующий код (возьмем снова пример с главной страницы Нежалко.ру):

<a href="https://nejalko.ru" target="_blank">Главная страница Nejalko.ru</a>

Значением атрибута target может быть несколько команд, по умолчанию, для открытия ссылки в той же вкладке, устанавливается команда «_self», для открытия ссылки в новой вкладке используется «_blank», причем перед названием команды должно стоять нижнее подчеркивание. Если кто не знает, как сделать нижнее подчеркивание, то зажмите клавишу «Shift» и нажимайте клавишу «-» на основной клавиатуре (той, где есть !,»,№ и прочие знаки). Принцип работы данного атрибута можно посмотреть на карте сайта, попробуйте нажать на любую ссылку, и она откроется в новой вкладке (и эта ссылка тоже откроется в новой вкладке).

Данный атрибут имеет и другие значения, но они нам точно не пригодятся.

У HTML-ссылок есть еще один атрибут, который отвечает за вывод всплывающей подсказки при наведении на ссылку указателя мыши. Это атрибут «title» и прописать его можно все там же, внутри тега <a>.

<a href="https://nejalko.ru" target="_blank" title="Самая главная страница сайта">Главная страница Nejalko.ru</a>

Наведите курсор на анкор ссылки и посмотрите на результат.

Обобщим информацию по атрибутам ссылок:

href=»https://ссылка» — указание адреса ссылки, основной атрибут.
target=»_blank» — указание браузеру открыть ссылку в новой вкладке.
title=»всплывающая подсказка» — текст, появляющийся при наведении на ссылку указателя мышки.

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

Создайте в папке с нашей первой страницей «index.html», которую мы делали в этом уроке, еще одну html-страницу с названием «page1.html». То есть теперь у нас в папке «www» будет находится 2 страницы: index.html и page1.html, пусть они олицетворяют собой 2 страницы создаваемого с нуля сайта. Допустим, нам нужно сделать ссылку с главной страницы (Index.html) на вторую страницу (Page1.html), например, эта страница будет в будущем содержать информацию о нашем сайте. В таком случае нам просто достаточно указать для атрибута «href» физический адрес страницы, на которую ведет ссылка, для нашего примера это будет выглядеть следующим образом:

<a href="/page1.html" title="Нажмите, чтобы почитать о сайте">О сайте</a>

Далее заполним только что созданную страницу «page1.html» необходимым кодом:

Все легко, не правда ли? Я не стал в примере использовать атрибут «target», нам он пока не нужен.

Итак, мы указали в ссылочной конструкции, что ссылка должна открывать страницу page1.html и прописали для ссылки соответствующую всплывающую подсказку. Затем создали страницу, на которую ссылка ведет и заполнили ее кодом. Попробуйте создать ссылку в нашей тестовой странице Index.html и проверить ее на работоспособность. Можно просто переписать код из изображений выше в свои странички. Следите, чтобы не закралась ошибка!

Но в построении локальных ссылок есть и свои подводные камни, например, если страничка page1. html будет лежит в одной папке со страницей index.html, то все просто и рабочая конструкция изображена выше. Но когда главная страница лежит в главной папке «www», а страница, на которую мы ссылаемся лежит внутри папки «about», расположенной также внутри главной папки «www», то адрес ссылки должен это учесть и, значит, в атрибуте «href» мы будем обязаны это отобразить.

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

Если страница со ссылкой и страница, на которую ссылка ведет, лежат в одной папке, то ссылкой служит название нужной страницы вместе с расширением в атрибуте «href»
Если страница со ссылкой находится в главной папке «www», а страница, на которую ссылаются лежит в папке «about», внутри главной папки «www», то адрес ссылки должен содержать полный путь до целевой страницы:

<a href="/about/page1.html" title="Нажмите, чтобы почитать о сайте">О сайте</a>

Полный код страницы показан на рисунке ниже.

То есть мы указываем путь к папке, затем указываем путь к странице, содержащейся в этой папке.

Чтобы проверить работоспособность данной ссылки создайте папку с названием «about» внутри папки «www» и перенесите страницу «page1.html» в эту папку «about». Затем запустите страницу «index.html» и кликните по ссылке «О сайте», если все сделано правильно, то Вы увидите надпись «На данной странице располагается описание Вашего сайта».

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

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

<a href="/../about/page1.html" title="Нажмите, чтобы почитать о сайте">О сайте</a>

В конструкции первыми идут 2 точки, которые в HTML-ссылках символизируют поднятие на 1 уровень каталога, если кто работал в Total Commander, тот поймет этот символ, там он работает точно также. Затем указываем папку с нужной страницей и саму страницу:

Логически, такая ссылка может интерпретироваться так:

Переходим на один уровень выше по каталогам (выходим из исходной папки), заходим в папку «about» и открываем документ «page1.html». Таким же образом можно сделать ссылку для возврата со страницы «О сайте» на главную страницу сайта.

То есть выходим из исходной папки «about», находим папку «main» в ней находим документ с названием «index.html» и открываем его.

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

Удачи во всех Ваших начинаниях!

Поделиться в соцсетях

Тег ссылки HTML

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Ссылка на внешнюю таблицу стилей:

css»>

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

Определение и использование

Тег определяет
отношения между текущим документом и внешним
ресурс.

Тег чаще всего используется для ссылки на внешние таблицы стилей.
или добавить фавикон на свой сайт.

Элемент является пустым элементом, он содержит только атрибуты.

Поддержка браузера

Элемент
<ссылка>	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
перекрестное происхождение	анонимные учетные данные	Указывает, как элемент обрабатывает запросы между источниками
ссылка	URL-адрес	Указывает расположение связанного документа
hreflang	код_языка	Указывает язык текста в связанном документе
СМИ	медиа_запрос	Указывает, на каком устройстве будет отображаться связанный документ
реферальная политика	без реферера без реферера при переходе на более раннюю версию источник источник-при-перекрестном происхождении небезопасный URL-адрес	Указывает, какой реферер использовать при извлечении ресурса
отн.	альтернативный автор dns-prefetch справка icon лицензия next pingback preconnect prefetch preload prerender prev search stylesheet	Обязательно. Указывает отношение между текущим документом и связанным документом
размеры	Высота x Ширина любая	Задает размер связанного ресурса. Только для rel=»icon»
наименование		Определяет предпочтительную или альтернативную таблицу стилей
тип	тип_медиа	Указывает тип носителя связанного документа

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебник по HTML: стили HTML

Справочник по HTML DOM: объект ссылки дисплей: нет;
}

❮ Предыдущий
Полный справочник HTML
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Как учебное пособие
SQL Tutorial
Python Tutorial
W3.CSS TURAND
BootStrap Tutorial
PHP Учебное пособие
Java Tutorial
C ++ Учебник
JQUERY Tutorial

Top Sportences

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ |
О

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

Ссылки HTML — бесплатный учебник для изучения HTML и CSS

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

Часть HTML «Гипертекст» определяет, какие ссылки мы используем: гипертекст ссылки, также известные как гиперссылки .

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

Атрибут href (гипертекстовая ссылка) используется для определения цели ссылки (куда вы переходите при нажатии).

 <р>
  Чтобы что-то найти, посетите Google.

Чтобы что-то найти, зайдите в Google.

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

Существует 3 типов целей, которые вы можете определить.

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

Анкерные мишени

Якорь цель для навигации внутри той же страницы. Поставив перед вашим href цифру # , вы можете настроить таргетинг на HTML-элемент с определенным атрибутом id .

Например, перейдет к

в том же документе HTML. Этот тип href часто используется для возврата к началу страницы.

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

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

Но относительно чего? Ну, относительно текущая страница .

Давайте рассмотрим простой пример, где папка my-first-website содержит 2 HTML-файла:

мой первый сайт
- home.html
- контакт.html

В home.html вы хотите определить ссылку на contact.html .

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

 <р>
  Перейдите на страницу контактов.

Перейти на страницу контактов.

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

Допустим, у вас есть веб-сайт с именем https://ireallylovecats.com , на котором у вас есть 2 веб-страницы: index.html и Gallery.html :

www.reallylovecats.com
- index.html
- галерея.html

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

 <р>
  Посетите галерею!

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

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

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

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

Этот URL можно разделить на 3 части:

протокол https://
домен ireallylovecats.com
путь к файлу галерея.html

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

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

В файле https://ireallylovecats.com/gallery.html вы можете написать:

 <р>
  Найдите больше изображений моих кошек в моем аккаунте Twitter!

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

Допустим, вы хотите сделать ссылку с первого на второй. Самый прямой подход — использовать абсолютный URL. Таким образом, вы добавляете Перейдите на вторую страницу в файле index.html .

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

This entry was posted in Популярное

Posted:

Comments: