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, але, в цілому, підтримуються більшістю браузерів.

Спочатку ви можете вказати Cc-одержувача прямо.

<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-Referer.

prefetch – Документ має бути завантажений в кеш.

prev – Посилання на попередній документ.

search – Посилання на інструмент пошуку документа.

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

Отже, таким чином можна більш детально описати відношення між посиланням та цільовим ресурсом.