HTML & CSS для начинающих

HTML и CSS для начинающих (часть 12): Определение гиперссылок (2)

Все видео урока HTML и CSS для начинающих

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

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

HTML & CSS для новичков (часть 12): Определение гиперссылок (2)

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

<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>



Как видите, во-первых, это классическая гиперссылка.

HTML & CSS для новичков (Часть 12): Определение гиперссылок (2)

Здесь важно то, что присваивается атрибуту href в качестве значения. Целевая ссылка всегда начинается со слова mailto, за которым следует двоеточие. Затем указывается желаемый адрес электронной почты.

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

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

Во-первых, вы можете сразу указать адресата для копии.

<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>



За основной адресом получателя следует знак вопроса. Затем идет cc и знак равенства, за которым следует адрес, на который должна быть отправлена видимая копия эл. почты. В качестве альтернативы к cc можно также использовать bcc. В этом случае указанный адрес будет взят в поле Bcc, а электронное письмо будет отправлено как скрытая копия на этот адрес.

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

<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



Желаемую тему указывайте после subject. Чтобы это действительно работало, вы не должны использовать пробелы в теме и должны специально маскировать их строкой %20.

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

<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



HTML и CSS для начинающих (Часть 12): Определение гиперссылок (2)



Здесь применяются те же правила, которые были описаны в связи с subject.

Предложение файлов для загрузки

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

<a href="buch.zip">Загрузить книгу</a>



В данном случае в качестве цели ссылки указан файл Zip. При нажатии на гиперссылку браузер обычно предложит диалоговое окно для загрузки или непосредственно загрузит файл.

HTML & CSS для начинающих (часть 12): Определение гиперссылок (2)



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

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

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

<a href="ebook.pdf" download>Скачать</a>



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

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

<a href="ebook.pdf" download="dk.pdf">Скачать</a>



Если браузер поддерживает эту функцию, он использует имя, указанное в атрибуте download, при скачивании.

HTML & CSS для начинающих (часть 12): Определение гиперссылок (2)

Указать логические отношения

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

<a href="zwei.htm" rel="next">дальше</a>



Для атрибута rel доступны следующие значения:

alternate – Ссылка на альтернативную версию документа.

author – Ссылка на автора документа.

bookmark – Постоянная ссылка на документ, которую можно использовать как закладку.

help – Ссылка на файл справки.

license – Ссылка на информацию о копирайте.

next – Ссылка на следующий документ.

nofollow – Позволяет указать, что поисковые системы не должны следовать по ссылке.

noreferrer – Браузер не отправляет заголовок HTTP-Referrer.

prefetch – Документ должен быть загружен в кеш.

prev – Ссылка на предыдущий документ.

search – Ссылка на инструмент поиска для документа.

tag – Ключевое слово, описывающее документ.

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