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

Разное 

Содержание

— HTML | MDN

HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.

<a href="https://developer.mozilla.org">MDN</a>

Этот элемент включает в себя общие атрибуты.

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

Примечание:

  • Атрибут может быть использован вместе с blob: URLs и data: URLs, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью  JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).
  • Если представлен HTTP-заголовок 
    Content-Disposition:,     и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.
  • Если этот атрибут установлен и Content-Disposition: установлен на inline, Firefox отдаёт преимущество Content-Disposition, но в тоже время Chrome отдаёт преимущество атрибуту download.
  • Этот атрибут соблюдается только на ресурсах с тем же  доменом.
href
Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут 
href указывает ссылку: либо URL, либо якорь. Якорь — это название после символа #, который указывает на элемент (ID (en-US)) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, file, ftp и mailto работают в большинстве браузеров.
hreflang
Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в BCP47 для HTML5 и RFC1766 для HTML4. Используйте этот атрибут, только если задан href
.
ping HTML5
Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.
referrerpolicy
Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:
  • "no-referrer" не отправляет заголовок Referer.
  • "no-referrer-when-downgrade" не отправляет заголовок Referer ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
  • "origin" отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
  • "origin-when-cross-origin" отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь. 
  • "unsafe-url" отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
rel
Для ссылок, которые содержат атрибут href, этот атрибут устанавливает отношения между ссылками. Значением является список значений, разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является
void, если не задано иное. Используйте этот тег, только если задан атрибут href.
target
Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:
  • _self загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.
  • _blank загружает документ в новой окне в HTML4 или вкладке в HTML5.
  • _parent загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как _self: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как _self.
Используйте этот атрибут только если указан 
href.

Примечание: Используя target, вы должны добавлять rel="noopener noreferrer", чтобы избежать эксплуатацию API window.opener.

type
Этот атрибут определяет MIME-тип для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как audio/wav.
Используйте этот атрибут только если указан 
href.

Устаревшие 

charset Вышла из употребления с версии HTML5
Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми список кодировок. Значением по умолчанию является ISO-8859-1.

Предупреждение: Этот атрибут является устарелым в HTML5 и не должен использоваться. Чтобы достичь такого же эффекта, используйте HTTP-заголовок Content-Type на ссылающемся ресурсе.

coords HTML 4Вышла из употребления с версии HTML5
Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.
name HTML 4 Вышла из употребления с версии HTML5
Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением id и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и id, и name могут быть использованы с элементом <a>, пока у них идентичные значения.
rev 
HTML 4 Вышла из употребления с версии HTML5
Этот атрибут определяет обратную ссылку, обратные отношения атрибута rel. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.
shape HTML 4 Вышла из употребления с версии HTML5
Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута — circle, default, polygon и rect. Формат координат зависит от выбранной формы. Для circle — x, y, r, где
x и y — пиксельные координаты центра круга и r — радиус в пикселях. Для rect — x, y, w, h, где x и y — координаты верхнего левого угла прямоугольника, а w и h — ширина и высота соответственно. Значениями polygon для координатор формы являются x1, y1, x2, y2… Каждая пара x, y определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение default для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.

Примечание: Желательно использовать атрибут usemap для элемента <img> и связанного элемента <map>, чтобы определить горячие точки вместо атрибутов формы.

Нестандартные

datafld 
Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.

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

ПоддержкаGeckoPrestoWebKitTrident
Не реализованаНе реализованаНе реализованаIE4, IE5, IE6, IE7 (Убрана в IE8)
Нормативный документMicrosoft’s Data Binding: dataFld Property (MSDN)
datasrc 
Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.

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

ПоддержкаGeckoPrestoWebKitTrident
Не реализованаНе реализованаНе реализованаIE4, IE5, IE6, IE7 (Убрана в IE8)
Нормативный документMicrosoft’s Data Binding: dataSrc Property (MSDN)
methods 
Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута title) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут.  Значения methods (MSDN).
urn 
Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).

Ссылка на внешний сайт

Создание кликабельной картинки

<a href="https://developer.mozilla.org/ru/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo">
</a>
Результат:

Создания ссылки для написания письма

Создание ссылки с номером телефона

С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.

<a href="tel:+491570156">+49 157 0156</a>

Для дополнительных деталей о протоколе tel, смотрите RFC 2806 и RFC 2396.

Использование

download для сохранения canvas как PNG

Если вы хотите позволить пользователю скачивать HTML canvas как картинку, вы можете создать ссылку с атрибутом download и данные canvas как data: URL:

var link = document.createElement("a");
link.innerHTML = 'download image';

link.addEventListener("click", function(ev) {
  link.href = canvas.toDataURL();
  link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

Вы можете посмотреть на это в действии: jsfiddle.net/codepo8/V6ufG/2/.

BCD tables only load in the browser

HTML 3.2 включает в себя только name, href, rel, rev и title.

Атрибут target не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, target не допускается в «строгих» вариантах XHTML, но разрешён в формах frameset или «переходных» формах.

Рекомендации по JavaScript

Часто якорь используется с событием onclick. Для избежания обновления страницы, href часто устанавливается на #, либо на javascript:void(0). Оба этих значения могут привести к некоторым неожиданным ошибкам во время копирования ссылки или открытия ссылки в новой вкладке или окне. Помните об этом, чтобы сделать юзабилити удобнее, когда пользователи используют якори и вы не допускаете стандартного поведения.

  • Другие элементы: <abbr>, <em>, <strong>, <small> (en-US), <cite>, <q> (en-US), <dfn>, <time>, <code>, <var> (en-US), <samp> (en-US), <kbd>, <sub> (en-US), <sup> (en-US), <b>, <i> (en-US), <mark>, <ruby>, <rp> (en-US), <rt> (en-US), <bdo>, <span>, <br>, <wbr>.

Ссылка на email. Полный формат ссылки типа mailto.

Обычно при указании ссылки на email используется короткая запись ссылки

<a href=»mailto:[email protected]»>email</a>

<a href=»mailto:[email protected]»>email</a>

 

Но можно использовать и дополнительные опции.Полный формат ссылки такой

mailto:[ mail address ] [?] [subject=subject] [&cc=mail address] [&bcc=mail address] [&body=message body]

Думаю тут всё ясно.
mail address — e-mail адрес
subject — тема сообщения
cc — email, на который отсылать копию письма
bcc — скрытый email адрес, на который отсылается письмо
body — сообщение, текст письма

То есть ссылка может иметь следующий вид:

<a href=»mailto:mail@mail. ru?subject=mail subject&[email protected]&[email protected]&body=message»>ссылка на email</a>

<a href=»mailto:[email protected]?subject=mail subject&[email protected]&[email protected]&body=message»>ссылка на email</a>

 

При клике по данной ссылке откроется ваш почтовый менеджер, где поля «кому», «тема», «сообщение» будут автоматически заполнены.

При подстановке кириллических символов в тело письма и в тему возникли проблемы с кодировками. У меня MS Outlook Express 6.

Для решения проблемы использовал php функцию urlencode. Правда в почтовом клиенте Outlook так и остались вместо пробелов плюсы. Ну что ж, можно использовать str_replace

Получилось как то так

<a href=»mailto:[email protected]?subject=mail subject&cc=copymail2@mail. ru&[email protected]&body=<?=str_replace(‘+’, ‘ ‘, urlencode(‘какое то сообщение’))?>»>ссылка на email</a>

<a href=»mailto:[email protected]?subject=mail subject&[email protected]&[email protected]&body=<?=str_replace(‘+’, ‘ ‘, urlencode(‘какое то сообщение’))?>»>ссылка на email</a>

 

Как создать ссылку Mailto для веб-сайта

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

Почтовые ссылки — это ссылки на веб-страницах, которые указывают на адрес электронной почты. Когда посетитель веб-сайта нажимает на одну из этих ссылок mailto, на компьютере этого человека открывается почтовый клиент по умолчанию, и он может отправить сообщение на этот адрес электронной почты, указанный в ссылке mailto. Для многих пользователей Windows эти ссылки откроют Outlook и будут готовы к отправке по электронной почте в соответствии с критериями, которые вы добавили в ссылку «mailto».

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

Как создать ссылку на почту

Чтобы создать на своем сайте ссылку, которая открывает окно электронной почты, используйте ссылку mailto. Например:

<a href=" mailto:[email protected] "> Отправьте мне электронное письмо </a>

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

Чтобы избежать потенциальных ошибок в вашем HTML, используйте % 20 вместо пробела. Например, строка теста электронной почты должна быть представлена ​​как test% 20mail.

Например, чтобы указать электронное письмо, которое будет отправлено на два адреса и CC’d на один адрес, и в котором будет указана строка темы, используйте следующую ссылку:

<a href="mailto:[email protected],[email protected][email protected]?subject=test%20email"> отправьте нам сообщение </a>

Обратная сторона почтовых ссылок

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

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

Использование форм

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

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

Html ссылка на почту — как сделать ссылку на электронную почту

При использовании адреса электронной почты для обратной связи для удобства пользователя возможно сделать кликабельную ссылку, которая вызовет почтовый клиент. Реализуется это при помощи html. Давайте рассмотрим, как посредством html создается ссылка на почту.

Простой вариант

Используется стандартный html элемент <a>, в атрибуте href пишется mailto:, затем вписывается адрес почты.

<a href=»mailto:[email protected]»>Текст ссылки</a>

«‎‎Текст ссылки» — можно указать свой емайл адрес или любую фразу, вроде «Напишите нам», «Наша почта»…

От щелчка по такой html ссылке запустится почтовая программа по умолчанию. Если вы впервые нажимаете подобную ссылку, операционная системы выдаст список программ для открытия email адресов. Это может быть The Bat или Outlook. Если посетитель использует почтовый клиент на базе браузера, то имеет резон использовать открытие новой вкладки посредством target=»_blank»:

<a href=»mailto:[email protected]» target=»_blank» rel=»noopener noreferrer»>Напишите нам</a>

Добавив параметр subject=»тема сообщения» мы автоматически получим заполненное поле «тема» при создании нового сообщения. Это может быть удобно администратору для вычленения конкретных писем из общей массы.

Можно отправить электронную почту на несколько адресов, в случае необходимости добавить копии (СС), скрытые копии (BCC). Делается это путем добавления дополнительных параметров в запросе и разделением адресов почты запятыми:

mailto:[email protected][email protected],[email protected]&[email protected]

Вариант с картинкой

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

<a href=»mailto:admin@hipolink. net»><img src=»tel_button.jpg»></a>

tel_button.jpg — указывает месторасположение вашей картинки с изображением адреса электронной почты, пиктограммой или произвольным текстом.

Что еще можно сделать при помощи html

— Кликабельный номер телефона:

<a href=»tel:+79150000000″>Позвоните нам!</a>

— Ссылку на Скайп:

<a href=»skype:nick»>Skype</a>

— Ссылку на мессенджеры. Пример для WhatsApp:

<a href=»https://wa.me/номер»>Чат с пользователем WhatsApp</a>

Html для мультиссылки

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

Ссылка на почту в Хиполинк

Сервис мультиссылок Хиполинк позволяет справиться с задачей без знания html — запустите конструктор, кликните «Добавить новый блок», выберите пункт «Ссылки». В открывшемся блоке нажмите «Почта», оформите вид кнопки, заполнив поля.

Для оформления почты с помощью кодов html указанных выше, используйте HTML блок, вставьте код, кликните «Принять».

Возможности сервиса Хиполинк

Затруднение при оформлении страницы? Не знаете, какие элементы и блоки использовать? Хиполинк предложит вам массу решений — готовые шаблоны и макеты, возможность создания фото-галереи и каталога услуг и товаров. Доступно подключение платежных систем — теперь вам не придется отсылать клиентам платежные реквизиты, при помощи модуля Capusta.Space вы сможете принимать платежи прямо со своей страницы Hipolink. Система работает с Apple Pay и картами Виза, Мастеркард, Маэстро, Мир. Помимо использования мессенджеров, телефонов, почты для связи, используйте виджет обратного звонка.

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

HTML теги

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

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

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

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

Атрибуты

АтрибутЗначениеОписание
charsetchar_encodingНе поддерживается в HTML5.
Определяет кодировку, связанного документа.
coordscoordinatesНе поддерживается в HTML5.
Определяет координаты ссылки.
downloadfilenameЕсли атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки.
hrefURLЗадает URL страницы, или документа на которую ведёт ссылка.
hreflanglanguage_codeОпределяет язык связанного документа на который ведёт ссылка.
mediamedia_queryУказывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств.
namesection_nameНе поддерживается в HTML5.
Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id.
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag		Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
revtextНе поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
shapedefault
rect
circle
poly		Не поддерживается в HTML5.
Определяет форму ссылки (использовался с атрибутом coords). Используйте вместо данного тега элемент <area>.
target_blank
_parent
_self
_top
framename		Указывает, где открыть документ.
typemedia_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 документа.

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

Предлагаю для начала разобраться с путями относительно текущего 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, если он вам не подойдет, можете попробовать выбрать другой.

Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок 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>

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

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

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

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

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент мог быть как гиперссылкой, так и якорем, а в HTML5 элемент всегда гиперссылка (в случае отсутствия атрибута href является контейнером для гиперссылки). В HTML5 добавлено два новых атрибута и пять удалено.

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

a:link, a:visited {
color: (internal value); <!-- в зависимости от браузера пользователя --> 
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);  <!-- в зависимости от браузера пользователя --> 
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML теги

HTML-ссылок mailto: пошаговое руководство

HTML-ссылка mailto открывает для посетителя почтовый клиент по умолчанию, если она установлена. Этот тип ссылки позволяет пользователю быстро связаться с вами по электронной почте. Вы можете указать тему по умолчанию, CC, BCC и тело со ссылкой mailto.

Найди свой матч на тренировочном лагере