Тег html ссылка: Атрибут href | htmlbook.ru

Leave a Comment / Html / By /

Краткий курс HTML 5. Ссылки — Exlab

Веб-страницы отличаются от своих бумажных аналогов в первую очередь наличием гиперссылок, связывающих документы друг с другом. Для обозначения таких ссылок применяется тег <a>. Адрес страницы (URI), которую должен загрузить браузер при нажатии на ссылку, указывается в атрибуте href.

<a href="http://www.exlab.net/">текст ссылки</a>

Если язык страницы, на которую ведет ссылка, отличен от языка ссылающейся страницы, то можно добавить атрибут hreflang, значением которого должен быть код языка (ISO 639). Также через дефис можно добавить код страны (ISO 3166).

<a href="http://www.example.com/" hreflang="en-US">Example</a>

Атрибут target указывает браузеру, в какой вкладке открывать страницу. Возможные значения:

_self — в той же вкладке (по умолчанию)
_blank — в новой вкладке
_parent — в родительском окне (если ссылка расположена во фрейме)
_top — в главном окне (для ссылок во фреймах внутри фрейма и т. д.)
имя_фрейма — в указанном фрейме (см. главу «Фреймы»)

Этот же тег можно применять для ссылок на конкретную часть самого же ссылающегося документа. Для этого перед этой частью необходимо вставить элемент <a>, присвоив ему идентификатор id с уникальным значением. В предыдущих версиях HTML для этого применялся атрибут name, но начиная с HTML 5 он считается устаревшим и заменен на id. Атрибут href при этом не нужен, поскольку это не гиперссылка, а всего лишь метка (якорь), на которую она будет ссылаться.

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

<a><h2>Заголовок</h2></a>
<p>Многостраничный текст (иначе результат не будет заметен)</p>
<p><a href="#top">Вернуться вверх</a></p>

Тег <a> может указывать не только на HTML-страницы, но и на файлы самых разных типов. При необходимости MIME-тип ресурса определяется в атрибуте type.

А в атрибуте rel можно указать, какое отношение ресурс имеет к ссылающейся странице. Значением может быть любой текст, однако некоторые варианты являются общепринятыми и зафиксированы в стандарте HTML. Можно указать несколько значений, разделяя их пробелом. Этот атрибут активно применяется в так называемых микроформатах.

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

В HTML 5 тегу <a> добавлен атрибут media, который можно использовать только вместе с href. Он позволяет указать тип носителя, для которого предназначен ресурс. Вот основные значения, которые принимает media:

аll — для всех устройств (по умолчанию)
screen — для экранов компьютеров
tty — для носителя с фиксированной сеткой для символов (телетайпы и т. п.)
tv — для устройств типа телевизора
projection — для проекторов
handheld — для карманных устройств
print — для страничных документов (предварительный просмотр печати)
braille — для тактильных устройств с алфавитом Бройля
aural — для синтезаторов речи

Кстати, об адресах. В гиперссылках вы можете указывать как абсолютный (полный), так и относительный (сокращенный) путь к ресурсам. Например:

Абсолютные URI:Относительные URI:
http://www.exlab.net/html/
ftp://ftp.example.com/upload/readme.txt
mailto:[email protected]		 relative/file.txt
../parent/
#bottom

Относительные пути по умолчанию расчитываются от полного пути к вашему документу. Это правило можно изменить, с помощью элемента <base /> с атрибутом href. В нем указывается базовый путь, относительно которого и будут рассчитываться все последующие адреса (поэтому обычно <base /> размещают повыше, внутри <head>). На ссылках и прочих элементах с указанными абсолютными адресами это никак не отразится.

<head>
...
<base href="http://www. exlab.net/" />
</head>
<a href="http://www.exlab.net/contact.html">абсолютный URI</a>,
<a href="contact.html">относительный URI</a>

В приведенном примере неважно, находитесь ли вы на http://www.exlab.net/ или http://www.exlab.net/html/links.html, вторая ссылка (с относительным URI) все равно указывает на ту же страницу, что и первая (с абсолютным URI). Если же убрать элемент <base />, то конечный адрес второй ссылки будет зависеть от адреса самой ссылающейся страницы:

Адрес ссылающейся страницы:Адрес ссылки:
http://www.exlab.net/→http://www.exlab.net/contact.html
http://www.exlab.net/html/links.html→http://www.exlab.net/html/contact.html

Еще одним атрибутом тега <base /> является target, с помощью которого можно установить значение по умолчанию аналогичным атрибутам всех ссылок в документе.

Существует еще один тег, отвечающий за связь документа с другими ресурсами. Это непарный тег <link />, размещаемый внутри <head>. Его атрибуты в стандарте HTML 5 идентичны атрибутам тега <a>, за тем лишь исключением, что href и rel являются обязательными, а target отсутствует.

Элемент <link /> не создает гиперссылку, а подключает какой-либо внешний ресурс к документу. Браузеры определяют назначение и тип ресурса по атрибутам rel и type. Например, элемент, подключающий к документу таблицы стилей (CSS), выглядит примерно так:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

А указать иконку документа можно, например, таким образом:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

HTML ссылки

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

Ссылки создаются при помощи тега <a>. Данный тег является парным, строчным и имеет обязательный атрибут href, значением которого служит адрес, по которому мы будем переходить при клике по ссылке:

<a href="http://google.com">Ссылка ведущая на сайт google.com</a>

При помощи атрибута target вы можете открывать ссылку в новой вкладке, или в новом окне, если ваш браузер не поддерживает вкладки:

<a href="http://google.com" target="blank">Ссылка ведущая на сайт google.com</a>

Здесь значение атрибута blank отвечает за то, чтобы ссылка открывалась в новой вкладке. Если записать вместо blank значение newtab, то результат будет таким же.

Якоря

Якорь – это закладка на веб-странице, к которой можно перейти по ссылке.

Якорь должен иметь уникальное имя, которое задается при помощи атрибута id, например: <h2>Заголовок</h2>.

Ссылка, ведущая к якорю, должна содержать в пути его имя, начинающееся с символа решетки: <a href="#top">Наверх</a>.

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

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

<a href="mailto:[email protected]">Написать мне письмо</a>

При клике по такой ссылке откроется почтовый клиент, в поле «Адрес получателя» будет указана почта, на которую ведет данная ссылка, т.е. [email protected].

Вы можете указать в этой ссылке дополнительные параметры, например, тему письма, текст письма и т.

д., при помощи такой конструкции:

<a href="mailto:[email protected]?ключ=значение&ключ2=значение2&ключ3=значение3">Написать мне письмо</a>

Рассмотрим на примере:

<a href="mailto:[email protected]?subject=Заказать%20сайт&body=Здравствуйте!%0AЯ%20бы%20хотел%20заказать%20у%20вас%20сайт.&[email protected]&[email protected]">Заказать сайт</a>
  • subject – тема письма;
  • body – текст письма;
  • cc – адрес почты, на которую будет отправлена копия письма;
  • bcc – скрытый адрес почты, на которую будет отправлена копия письма;
  • %20 – символ для использования пробелов в теме или тексте письма;
  • %0A – символ для переноса текста на новую строку.

Ссылка на логин Skype

<a href="skype:oksanaturova">Позвонить мне по Skype</a>

При клике по такой ссылке вы совершите звонок по Skype абоненту с указанным логином.

Ссылка на номер ICQ

<a href="icq:279679659">Добавить меня в свой список контактов ICQ</a>

При клике по такой ссылке вы добавите пользователя с указанным номером в свой список контактов ICQ.

http, mailto, skype, icq – это имена сетевых протоколов, определяющих какая программа будет обрабатывать ссылку.

Видео к уроку

Поделиться с друзьями:

XHTML >> Теги >> ссылка

Синтаксис:

Тег link используется для установления связи между текущим документом и одним или несколькими другими связанными документами. Например, если у вас есть файл каскадных таблиц стилей .css, который определяет стиль для всего веб-сайта, то каждый файл на сайте будет связан с файлом . css с помощью тега link .

Этот тег можно использовать более одного раза (т. е. одну ссылку на тег). Каждое вхождение этого тега должно быть помещено внутри головка элемент. Помните, что значение атрибута href обязательно.
 
Это самозакрывающийся тег. Пробел перед косой чертой (/) рекомендуется для максимальной совместимости браузера.
 

Примеры

Код:





Пример тега ссылки XHTML




..

Объяснение:

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

Язык(и): XHTML

События

onclick

Синтаксис:

Событие onclick связано с одиночным щелчком мыши по выбранному HTML-тегу (элементу). Всякий раз, когда вы один раз щелкаете элемент, выполняется код скрипта onclick . Этот скрипт также может вызывать функции или подпрограммы, которые содержат код, который вы хотите запустить, когда происходит один щелчок.

ondblclick

Синтаксис: ondblclick=»action»

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

нажатие клавиши

Синтаксис: onkeydown=»действие»

Событие onkeydown связано с нажатием клавиши на клавиатуре, когда мышь находится внутри выбранного HTML-тега (элемента). Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе. Всякий раз, когда вы нажимаете клавишу, выполняется код сценария onkeydown .

нажатие клавиши

Синтаксис:

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

onkeyup

Синтаксис: onkeyup=»action»

Событие onkeyup связано с отпусканием клавиши на клавиатуре, когда мышь находится внутри выбранного HTML-тега (элемента). Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе. Всякий раз, когда вы отпускаете клавишу, выполняется код сценария onkeyup .

onmousedown

Синтаксис: onmousedown=»action»

Событие onmousedown связано с нажатием кнопки мыши, когда мышь находится внутри выбранного HTML-тега (элемента). Другими словами, событие «нажатие мыши» произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы нажимаете кнопку мыши, находясь внутри элемента, выполняется код скрипта onmousedown . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

onmousemove

Синтаксис: onmousemove=»action»

Событие onmousemove связано с перемещением мыши внутри выбранного HTML-тега (элемента). Другими словами, событие перемещения мыши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы перемещаете мышь вокруг элемента, выполняется код скрипта onmousemove . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

onmouseout

Синтаксис:

Событие onmouseout связано с перемещением мыши за пределы выбранного HTML-тега (элемента). Другими словами, событие отсутствия мыши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы перемещаете мышь за пределы элемента, выполняется код скрипта onmouseout . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

при наведении мыши

Синтаксис:

Событие onmouseover связано с перемещением мыши над выбранным HTML-тегом (элементом). Другими словами, событие наведения мыши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы наводите указатель мыши на элемент, выполняется код скрипта onmouseover . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

onmouseup

Синтаксис: onmouseup=»action»

Событие onmouseup связано с отпусканием части щелчка мыши внутри выбранного HTML-тега (элемента). Другими словами, событие «наведение мыши» произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы отпускаете мышь вверх, находясь в элементе, выполняется код скрипта onmouseup . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

See Also:

  • class
  • dir
  • id
  • lang
  • style
  • title
  • onclick
  • ondblclick
  • onkeydown
  • onkeypress
  • onkeyup
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • a
  • кадр
  • набор кадров

Тег в HTML — Темы масштабирования

Тег в HTML

Тег в HTML

Обзор

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

Например, внешние таблицы стилей, файлы CSS и т. д.

Синтаксис

Давайте разберемся с синтаксисом тега ссылки в HTML.

Атрибуты

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

Attribute Description
charset The charset is used to define the encoding of liked document
href The href takes the URL of the specific document that needs to be embedded в документе HTML
медиа Медиафайл используется для указания конкретного мультимедиа, которое будет отображаться в HTML-документе.
rel Этот атрибут используется для определения отношения между текущим документом и связанным документом
цель Цель используется для указания окна связанного документа ссылка > тег В HTML?

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

Тег используется в теге документа HTML, который используется для представления заголовка документа HTML . Давайте разберемся, как использовать тег в HTML-документе на примере.

Пример

Используйте тег

и объявите атрибут rel и атрибут type внутри тега в HTML

В приведенном ниже примере html-документ связан с внешним файлом css, т. е. style.css, с использованием тега в теге html.

 
 
<голова>
    


<тело>
     
Это Академия скалеров 
 
     
Тема Scaler является частью академии Scaler

Вывод

Включение таблицы стилей

Давайте разберемся, как включить таблицу стилей в тег HTML на примере.

В приведенном ниже примере HTML-документ связан с внешней таблицей стилей CSS, т. е. style.css, с помощью тега в теге html.

 
 
<голова>
    

<тело>
     
Это Академия скалеров

Вывод:

Предоставление альтернативных таблиц стилей

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

Давайте разберемся с этим на примере.

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

Для выполнения этой задачи мы будем использовать rel=» альтернативный лист» для выполнения этой задачи.

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

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