Href a title: Атрибут title | htmlbook.ru

Содержание

Урок 4. Ссылки в html

Что такое ссылка html?

Ссылка html — это одно из основных понятий в создании html-документов. Каждый пользователь интернета хотя бы раз ими пользовался. Каждый раз нажимая в интернете на зайти, просмотреть, прочитать, подробнее, переходя по новостям и прочее Вы пользуетесь ссылками! Страницы, по которым Вы переходите, могут находиться на абсолютно разных сайтах.
Ссылка, как правило, выделяется нижним подчёркиванием и синим цветом. Однако в качестве ссылки могут выступать ссылки других цветов, изображения и области сайта.

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

Рассмотри пример конструкции ссылки:

<html>

   <head>

   <title>Ссылка в html</title>

   </head>

<body>   <a href="http://www.yandex.ru">Перейти на Яндекс</a>
</body>

</html>

В результате получаем

Перейти на Яндекс
Как Вы видите ссылка состоит из Слов (Перейти на Яндекс), которые вставлены между открывающим и закрывающим тегами a и Адреса ( http://www.yandex.ru ), который прописывается в атрибуте href в кавычках.

Тег a обозначает ссылку. У него обязательно должна быть закрывающая часть. У тега a есть несколько атрибутов.

Атрибут href и адреса ссылок

href — самый важный атрибут! В нём прописывается адрес ссылки, по которой перейдёт пользователь.

Адрес ссылки бывает абсолютный и относительный.

В абсолютном прописывается полный URL адрес, например http://tradebenefit.ru/index.html

(используется при ссылке на другой сайт или файл другого сайта).

В относительном указывается адрес относительно внутреннего файла. То есть допустим у Вас есть файл index.html, а другой — info.html, также находится на этом компьтере, хостинге и тп. Так вот ссылка Внутри сайта (на том же хостинге, компьютере и тп) на другую страницу будет называться относительной и выглядеть будет короче — info.html (ссылка на файл info.html, который находится в этой же папке)

Для понимания вышесказанного рассмотрим пример кода

<html>

   <head>

   <title>Атрибут href в ссылках html</title>

   </head>
 
<body><a href="http://tradebenefit.ru/index.php">Абсолютная ссылка</a>

<a href="rules.php">Относительная ссылка</a>
</body>

</html>

С первой ссылкой я думаю всё понятно, дан адрес целиком.
Во втором случае прописывается укороченный адрес, так как файлы находятся на одной машине (сервере). Если файл будет находиться на папку глубже, допустим у нас есть файл index.html и папка data, в которой есть файл info.html, то ссылка будет выглядеть так

<a href="data/info.html">Относительная ссылка</a>

Если файл, на который ссылаемся, находится наоборот, на папку выше, то делаем так

 <a href="../info.html">Относительная ссылка</a>

Атрибут target

При использовании атрибута target чаще всего используются три значения: _self, _new, _blank.

_self страница по ссылке открывается в этом же окне (также происходит по умолчанию, если атрибут не использован).
_new страница по ссылке откроется в новом окне. Данное значение не всегда отрабатывается как надо, поэтому в некоторых браузерах может открыть новое окно
_blank страница по ссылке открывается в новой вкладке. Чаще всего атрибут target используют именно с этим значением.

Теперь рассмотрим пример кода

<html>

   <head>

   <title>Атрибут target в ссылках html</title>

   </head>

<body><a href="http://www.yandex.ru">Яндекс откроется в этой же вкладке</a>

<a href="http://www.yandex.ru" target="_self">Яндекс принудительно откроется в этой же вкладке</a>

<a href="http://www.yandex.ru" target="_new">Яндекс откроется в новом окне</a>

<a href="http://www.yandex.ru" target="_blank">Яндекс откроется в новой вкладке</a>
</body>

</html>

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

Перейти на Яндекс

Атрибут title

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

<html>

   <head>

   <title>Атрибут title в ссылках html</title>

   </head>

<body><a href="http://www.yandex.ru" title="Ссылка на Яндекс">Яндекс</a>
</body>

</html>

При наведении на ссылку высветится сообщение ‘Ссылка на Яндекс’.

Атрибут charset

Атрибут charset

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

<html>

   <head>

   <title>Атрибут charset в ссылках html</title>

   </head>

<body><a href="http://www.unicode.org/" charset="utf-8">Сайт в кодировке utf-8</a>
</body>

</html>

Спасибо за внимание! Урок очень важный! Использование ссылок — основа основ! Удачи!

Тег | 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>

Атрибуты ссылок | htmlbook.ru

Основной атрибут href тега <a> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.

target

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

<a target="имя окна">...</a>

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

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно (это значение задается по умолчанию).
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

В примере 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.

Пример 8.4. Открытие ссылки в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Ссылка в новом окне</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть
      в новом окне</a></p>
 </body>
</html>

Атрибут target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

title

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

<a title="текст">...</a>

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

Пример 8.5. Создание всплывающей подсказки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Подсказка к ссылке</title>
 </head>
 <body>
  <p><a href="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>
 </body>
</html>

Результат данного примера показан на рис. 8.8.

Рис. 8.8. Вид всплывающей подсказки в браузере

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

Атрибут href | 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

Описание

Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.

Синтаксис

<a href="URL">...</a>

Обязательный атрибут

Обязателен для ссылок.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут href</title>
 </head>
 <body>
  <p><a href="../../example/knob.html">Относительная ссылка</a></p>
  <p><a href="http://htmlbook.ru/example/knob.html">Абсолютная ссылка</a></p>
 </body>
</html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

— Веб-технологии для разработчиков

`a`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка Да Полная поддержка Да Замечания Starting with Firefox 41, <a> without `href` attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да Полная поддержка Да Замечания Starting with Firefox 41, <a> without `href` attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`charset`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка Да	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`coords`	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Нет поддержки ? — 58 Нет поддержки ? — 58 Замечания You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region — `coords` and `shape` attribute support removed.	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Нет поддержки ? — 58 Нет поддержки ? — 58 Замечания You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region — `coords` and `shape` attribute support removed.	Opera Android Нет поддержки Нет	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет
`download`	Chrome Полная поддержка 14 Полная поддержка 14 Замечания Starting in Chrome 65, cross-origin downloads are not supported on the `<a>` element.	Edge Полная поддержка 18 Полная поддержка 18 Частичная поддержка 13 Замечания Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092). Замечания Edge 17 or older didn’t follow the attributes’ value to determine filename (bug 7260192).	Firefox Полная поддержка 20	IE Нет поддержки Нет	Opera Полная поддержка 15	Safari Полная поддержка 10.1	WebView Android Полная поддержка Да Полная поддержка Да Замечания Starting in WebView 65, cross-origin downloads are not supported on the `<a>` element.	Chrome Android Полная поддержка 18 Полная поддержка 18 Замечания Starting in Chrome 65, cross-origin downloads are not supported on the `<a>` element.	Firefox Android Полная поддержка 20	Opera Android ?	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 1.0 Полная поддержка 1.0 Замечания Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the `<a>` element.
`href`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка Да	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`hreflang`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка Да	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`target="_blank"` implies `rel="noopener"` behavior	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Полная поддержка 79	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Полная поддержка 12.1	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Полная поддержка 79	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Нет поддержки Нет
`name`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка Да	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`ping` Экспериментальная	Chrome Полная поддержка Да	Edge Полная поддержка 79	Firefox Полная поддержка Да Полная поддержка Да Отключено This feature is behind the `browser.send_pings` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Нет поддержки Нет	Opera Полная поддержка Да	Safari Нет поддержки Нет	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да Полная поддержка Да Отключено This feature is behind the `browser.send_pings` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android ?	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка Да
`referrerpolicy`	Chrome Полная поддержка 51	Edge Полная поддержка 79	Firefox Полная поддержка 50	IE Нет поддержки Нет	Opera Полная поддержка 38	Safari Полная поддержка 11.1	WebView Android Полная поддержка 51	Chrome Android Полная поддержка 51	Firefox Android Полная поддержка 50	Opera Android Полная поддержка 41	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 7.2
`rel`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка Да	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`rev`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка Да	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка Да	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`shape`	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Нет поддержки ? — 58 Нет поддержки ? — 58 Замечания You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region — `coords` and `shape` attribute support removed.	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Нет поддержки ? — 58 Нет поддержки ? — 58 Замечания You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region — `coords` and `shape` attribute support removed.	Opera Android Нет поддержки Нет

Учебник HTML 5. Статья «Ссылки»

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

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

Если вы активно пользуетесь интернет, то, думаю, вы замечали, что ссылки могут ссылаться на страницу / файл, который находится совершенно на другом сервере, давайте рассмотрим от чего это зависит.

В HTML гиперссылки (или просто «ссылки») определяются тегом <a> (HTML Anchor Element).

Например:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример размещения ссылки в HTML документе<title>
	</head>
	<body>
		<a href = "http://www.yandex.ru">Найдется всё</a>
	</body>
</html>

В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.

Мы уже с Вами неоднократно говорили, что некоторые теги используются только совместно с атрибутами (бесполезны сами по себе) и это снова тот случай. Атрибут href (аббревиатура от hyper reference) — это основной атрибут тега <a>, указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.

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

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

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

<a href = "https://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол https) -->
<a href = "http://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол http) -->
<a href = "//www.yandex.ru">Содержимое элемента</a> <!-- допускается указывать полный путь без протокола -->

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

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

Путь относительно текущего документа

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

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

Пример подключения файлов:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов к HTML документу из той же папки<title>
	</head>
	<body>
		<img src = "image.png" alt = "someimage info"> <!-- размещаем изображение -->
		<a href = "page.html">Содержимое элемента</a> <!-- ссылаемся на страницу -->
	</body>
</html>

Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из дочернего каталога<title>
	</head>
	<body>
		<img src = "etc/image.png" alt = "someimage info"> <!-- размещаем изображение из дочернего каталога -->
		<a href = "etc/page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, из дочернего каталога -->
	</body>
</html>

Обратите внимание, как мы указываем путь к нашим файлам — мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из родительского каталога<title>
	</head>
	<body>
		<img src = "../../image.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня выше -->
		<a href = "../page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 1 уровень выше -->
	</body>
</html>

Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы ../ это позволит подняться на один уровень вверх. Вы можете, используя символы ../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.

Путь относительно корня сайта

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

Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой. Мы не будем использовать эти программные среды для практических занятий (можете установить после обучения HTML / CSS).

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов относительно корня сайта<title>
	</head>
	<body>
		<img src = "/html/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/html/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
		<img src = "/css/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/css/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
	</body>
</html>

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

Достаточно указать в адресе один прямой слэш, чтобы с любой страницы сайта перейти на главную страницу сайта (<a href = «/»).

Атрибут target

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

<a href="http://yandex.ru" target="_blank">Поиск </a>

Ниже представлены все значения этого атрибута:

Атрибут	Значение
_blank	Загружает страницу в новое окно браузера.
_self	Загружает страницу в текущее окно. Это значение по умолчанию.
_parent	Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top	Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
framename	Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

Атрибут mailto

Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:

<a href = "mailto:[email protected]">Написать автору</a>

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

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

<a href = "mailto:[email protected]?subject=Тема%20моего%20письма&[email protected]&body=
Здравствуй%20уважаемый%20автор">Написать автору</a>

Где:

subject—тема письма.
cc—копия письма.
bcc—скрытая копия письма.
body—тело письма.

Допустимо указывать несколько адресов (либо не указывать вовсе):

<a href=" mailto:[email protected], mailto:[email protected] ">Написать автору </a>

Изображение как ссылка

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование изображения в качестве ссылки<title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src="10.jpg" alt="Поиск в Яндекс"> <!-- размещаем изображение в качестве содержимого гиперссылки -->
		</a>
	</body>
</html>

При этом при клике на картинку будет осуществлён переход по указанной ссылке:

Размещение файлов на сайте для скачивания

С выходом HTML 5 тег <a> обзавелся таким новым атрибутом как download, он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов относительно корня сайта<title>
	</head>
	<body>
		<a href = "/path/to/file.mp3" download>Содержимое элемента</a> <!-- указываем файл, который предназначается для скачивания -->
	</body>
</html>

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

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

Используя полученные знания и не изменяя структуры архива составьте следующую HTML страницу (index.html в архиве), которая содержит четыре ссылки:

Практическое задание № 4.

Первая ссылка «Информация о примере» должна вести на родительскую страницу (на уровень выше), т.е. при клике вы должны перейти на эту страницу:

Обратите внимание, что на странице необходимо сделать две ссылки: первая — относительная ссылка, которая должна вести обратно на главную страницу (при клике вы должны перейти на нее), а вторая — абсолютная, при клике на нее осуществляется переход на сайт basicweb.ru.

Вторая и третяя ссылка представляют из себя ссылки-изображения, при клике на них происходит переход на страницы, расположенные в дочерних каталогах (html и css). Сделайте так, чтобы при клике на изображение CSS страница открывалась в новом окне. Изображения находятся в каталоге images.

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

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

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

Тег | HTML справочник

HTML теги

Значение и применение

Гиперссылки (или просто «ссылки») определяются тегом <a> (HTML Anchor Element).

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

Атрибуты

Атрибут	Значение	Описание
charset	char_encoding	Не поддерживается в HTML5. Определяет кодировку, связанного документа.
coords	coordinates	Не поддерживается в HTML5. Определяет координаты ссылки.
download	filename	Если атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки.
href	URL	Задает URL страницы, или документа на которую ведёт ссылка.
hreflang	language_code	Определяет язык связанного документа на который ведёт ссылка.
media	media_query	Указывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств.
name	section_name	Не поддерживается в HTML5. Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id.
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
rev	text	Не поддерживается в HTML5. Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
shape	default rect circle poly	Не поддерживается в HTML5. Определяет форму ссылки (использовался с атрибутом coords). Используйте вместо данного тега элемент <area>.
target	_blank _parent _self _top framename	Указывает, где открыть документ.
type	media_type	Указывает MIME-тип документа на который осуществляется переход.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример размещения ссылки в HTML документе<title>
	</head>
	<body>
		<a href = "http://www.yandex.ru">Найдется всё</a>
	</body>
</html>

В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.

Атрибут href (аббревиатура от hyper reference) — это основной атрибут тега <a>, указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.

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

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

<a href = "https://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол https) -->
<a href = "http://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол http) -->
<a href = "//www.yandex.ru">Содержимое элемента</a> <!-- допускается указывать полный путь без протокола -->

Путь относительно текущего документа

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

Пример подключения файлов:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов к HTML документу из той же папки<title>
	</head>
	<body>
		<img src = "image.png" alt = "someimage info"> <!-- размещаем изображение -->
		<a href = "page.html">Содержимое элемента</a> <!-- ссылаемся на страницу -->
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из дочернего каталога<title>
	</head>
	<body>
		<img src = "etc/image.png" alt = "someimage info"> <!-- размещаем изображение из дочернего каталога -->
		<a href = "etc/page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, из дочернего каталога -->
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из родительского каталога<title>
	</head>
	<body>
		<img src = "../../image.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня выше -->
		<a href = "../page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 1 уровень выше -->
	</body>
</html>

Путь относительно корня сайта

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов относительно корня сайта<title>
	</head>
	<body>
		<img src = "/html/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/html/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
		<img src = "/css/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/css/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
	</body>
</html>

Атрибут target

<a href="http://yandex.ru" target="_blank">Поиск </a>

Ниже представлены все значения этого атрибута:

Атрибут	Значение
_blank	Загружает страницу в новое окно браузера.
_self	Загружает страницу в текущее окно. Это значение по умолчанию.
_parent	Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top	Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
framename	Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

Атрибут mailto

Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:

<a href = "mailto:[email protected]">Написать автору</a>

<a href = "mailto:[email protected]?subject=Тема%20моего%20письма&[email protected]&body=
Здравствуй%20уважаемый%20автор">Написать автору</a>

Где:

subject—тема письма.
cc—копия письма.
bcc—скрытая копия письма.
body—тело письма.

Допустимо указывать несколько адресов (либо не указывать вовсе):

<a href=" mailto:[email protected], mailto:[email protected] ">Написать автору </a>

Изображение как ссылка

<!DOCTYPE html>
<html>
	<head>
		<title>Использование изображения в качестве ссылки<title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src="10.jpg" alt="Поиск в Яндекс"> <!-- размещаем изображение в качестве содержимого гиперссылки -->
		</a>
	</body>
</html>

При этом при клике на картинку будет осуществлён переход по указанной ссылке:

Размещение файлов на сайте для скачивания

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута download<title>
	</head>
	<body>
		<a href = "/path/to/file.mp3" download>Любимая песня</a> <!-- указываем файл, который предназначается для скачивания -->
	</body>
</html>

Урок 4. Ссылки в html

Что такое ссылка html?

Ссылка html — это одно из основных понятий в создании html-документов. Каждый пользователь интернета хотя бы раз ими пользовался. Каждый раз нажимая в интернете на зайти, просмотреть, прочитать, подробнее, переходя по новостям и прочее Вы пользуетесь ссылками! Страницы, по которому Вы переходите, находиться на абсолютно разных сайтах.
Ссылка, как правило, выделяется нижним подчёркиванием и синим цветом.Однако в качестве ссылки могут выступать ссылки других цветов, изображения и области сайта.

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

Рассмотри пример конструкции ссылки:

Ссылка в html

Перейти на Яндекс

В результате получаем

Перейти на Яндекс
Как вы видите ссылку, состоящую из Слов (Перейти на Яндекс), которые вставлены между открывающими и закрывающими тегами и Адреса (http://www.yandex.ru), который прописывается в атрибуте href в кавычках.

Тег обозначает ссылку. У него обязательно должна быть закрывающая часть.У тега a есть несколько атрибутов.

Атрибут href и адреса ссылок

href — самый важный атрибут! В нём прописывается адрес ссылки, по которой перейдёт пользователь.

Адрес ссылки бывает абсолютный и относительный .

В абсолютном прописывается полный URL-адрес , например http://tradebenefit.ru/index.html (используется при ссылке на другой сайт или файл другого сайта).

В относительном указывается адрес относительно внутреннего файла . То есть допустимый у Вас есть файл index.html, а другой — info.html, также находится на этом компьтере, хостинге и тп. Так вот ссылка Внутри сайта (на том же хостинге, компьютере и тп) на другую страницу будет называться относительной и выглядеть будет короче — info.html (ссылка на файл info.html, который находится в этом же каталоге)

Для понимания вышесказанного рассмотрим пример кода

Атрибут href в ссылках html

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

С первой ссылки я думаю всё понятно, дан адрес целиком.
Во втором случае прописывается укороченный адрес, так как файлы находятся на одной машине (сервере). Если файл будет находиться в папке глубже, допустим, у нас есть файл index.html и папка данных, в которой есть информация о файле.html, то ссылка будет так выглядеть

  Относительная ссылка

Если файл, на который ссылаемся, находится наоборот, в папке выше, то делаем так

  Относительная ссылка

Атрибут target

При использовании атрибута target чаще всего используются три значения: _self , _new , _blank .

_self страница по ссылке открывается в этом же окне (также происходит по умолчанию, если атрибут не использован).
_new страница по ссылке откроется в новом окне.
_blank страница по ссылке открывается в новой вкладке, поэтому в некоторых браузерах можно открыть новое окно. Чаще всего атрибут target использовать именно с этим уровнем.

Теперь рассмотрим пример кода

Атрибут целевой в ссылках html

Яндекс откроется в этой же вкладке
Яндекс принудительно откроется в этой же вкладке
Яндекс откроется в новом окне
Яндекс откроется в новой вкладке

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

Перейти на Яндекс

Название атрибута

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

Атрибут title в ссылках html

Яндекс

При наведении на ссылку высветится сообщение ‘Ссылка на Яндекс’.

Набор символов атрибутов

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

Набор символов атрибута в ссылках html

Сайт в кодировке utf-8

Спасибо за внимание! Урок очень важный! Использование ссылок — основа основ! Удачи! .

Тег | htmlbook.ru

Internet Explorer	Хром	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

Описание

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

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

Синтаксис

   ... 
 ...

Атрибуты

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

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

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

Обязателен.

Пример

HTML5IECrOpSaFx

  

 
   
   Тег А 
 
 
    Посмотрите на мою фотографию!  
    Как сделать такое же фото?

Атрибут href | htmlbook.ru

Взаимодействие с другими людьми

Internet Explorer	Хром	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

Описание

Задает адрес документа, на который следует перейти. В качестве адреса ссылки может читать документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно Google, однако это свойство можно с помощью атрибута target.

Синтаксис

...

Обязательный атрибут

Обязателен для ссылок.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

  

 
  
   Тег А, атрибут href 
 
 
   Относительная ссылка  
    Абсолютная ссылка

Не выкладывайте свой код напрямую в комментарии, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Атрибуты ссылок | htmlbook.ru

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

цель

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

...

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

_blank — загружает страницу в новое окно.
_self — загружает в текущее окно (это значение задается по умолчанию).
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне. если фреймов нет, то это значение работает как _self.

В примере 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.

Пример 8.4. Открытие ссылки в новом окне

  

 
  
   Ссылка в новом окне 
 
 
    Открыть
      в новом окне

Атрибут target корректно использовать только при переходном , при строгом будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

название

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

...

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

Пример 8.5. Создание всплывающей подсказки

  

 
  
   Подсказка к ссылке 
 
 
    Рисунки

Результат примера показан на рис. 8.8.

Рис. 8.8. Вид всплывающей подсказки в браузере

Цвета и оформление всплывающей подсказки зависит от настроек операционной системы и меняться, и меняться разработчиком не

Разное

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

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

Разное