Посилання
Посилання зазвичай виглядає як підкреслений фрагмент тексту, клацаючи на який здійснюється перехід на іншу сторінку, відкривається зображення або завантажується файл. Якщо уявити, що інтернет це величезна мережа з безлічі вузлів, то посилання будуть нитками, що з'єднують всі вузли цієї мережі.
Посилання створюються за допомогою дуже простого і короткого тега <a>. Наприклад, ось так:
Тег <a> без адреси непотрібний, оскільки він описує посилання, яка нікуди не веде. Тому в попередньому завданні текст ніяк не змінювався, навіть після більшу кількість позначок.
Адреса посилання задається за допомогою атрибута href:
<a href="https://osnovy-web.blogspot.com/"> Блог гуртка Web-дизайну</a>
Значенням атрибута є URL, який зазвичай називають простою адресою. Адреси бувають різні: абсолютні, відносні, що вказують на сторінку, на файл, зображення, що містять якір і так далі. А значить і посилання може вказувати на будь-який об'єкт в інтернеті.
При переході по посиланню документ за замовчуванням відкривається в поточній вкладці браузера. При необхідності ця умова може бути змінено атрибутом target. Синтаксис наступний:
<a href="https://osnovy-web.blogspot.com/" target="_blank"> Блог гуртка Web-дизайну </a>
Таке посилання відкривається в новій вкладці або вікні браузера. Де саме відкриється посилання, залежить від налаштувань браузера і не може бути задано через HTML. Як правило, посилання відкриваються в новій вкладці.
Будь-яке посилання на веб-сторінці може знаходитися в одному з наступних станів:
- звичайне посилання - такий стан характеризується для посилань, які ще не відкривали. За замовчуванням звичайні текстові посилання зображуються синім кольором і з підкресленням.
- відвідане посилання - як тільки користувач відкриває документ, на який веде посилання, воно позначається як відвідане і змінює свій колір на фіолетовий, встановлений за замовчуванням.
- активне посилання - посилання позначається як активне при натисканні на нього. Оскільки клацання відбувається досить швидко, подібний стан посилання короткочасний. Колір такого посилання за замовчуванням червоний.
Абсолютні адреси містять в собі протокол, ім'я сервера і шлях. Наприклад, в адресі https://vmpdu.blogspot.com/p/kontakty.html:
Абсолютна адреса однозначно вказує розташування документа. Браузер просто запрошує за вказаним протоколом з зазначеного сервера документ із зазначеним шляхом.
Посилання може вказувати на будь-яку веб-сторінку, на будь-який файл. Якщо клацнути по посиланню, що веде на файл, то браузер запропонує його завантажити.
Однак, якщо браузер вміє цим типом файлів, то вміст файлу відкриється прямо в браузері. Найчастіше так відбувається з зображеннями. Останнім часом браузери навчилися відкривати .pdf файли і багато інших.
Посилання щодо поточного документа
При створенні відносних посилань треба розуміти, яке значення для атрибута href слід вказувати, оскільки воно залежить від вихідного розташування файлів.
Типові варіанти:
1. Файли розміщуються в одній папці (рис. 1)
<a href="target.html">Посилання на файл target.html</a>
2. Файли розміщуються в різніх папках (рис. 2).
<a href="../target.html"> Посилання на файл target.html </a>
Дві крапки означають вийти з поточної папки на рівень вище.
3. Файли розміщуються в різних папках (рис. 3).
Рис. 3
Якщо вихідний файл знаходиться в двох вкладених папках, то щоб послатися на документ в корені сайту, потрібно повторити написання попереднього прикладу два рази.
4. Файли розміщуються в різних папках (рис. 4).
Рис. 4
Вихідний файл розташовується в корені сайту, а файл, на який необхідно зробити посилання - в папці. В цьому випадку шлях до файлу буде наступний.
<a href="folder/target.html"> Посилання на файл target.html </a>
5. Файли розміщуются в різних папках (рис. 5)
Кожен файл розташовується в своїй папці і щоб перейти з однієї папки в іншу посилання буде наступним:
Посилання з якорем
Посилання з якорем зазвичай використовуються для створення навігації усередині сторінки. Наприклад, змісту на початку сторінки з великою статтею.
<a href="#glava1">Глава 1</a>
Посилання з якорем містить символ #, після якого йде ідентифікатор. Ідентифікатор створюється за допомогою атрибута id, який може бути заданий у будь-якого тега.
Можна задати адресу, що складається з одного якоря, наприклад:
При натисканні на таке посилання браузер знайде на сторінці елемент з атрибутом id з значенням glava1 і прокрутить вікно сторінки до нього. Тобто перезавантаження сторінки не відбудеться.
Якір можна використовувати і в абсолютних адресах, тоді після переходу на потрібну сторінку відбудеться прокрутка до заданої частини цієї сторінки.
Приклад:
See the Pen link anchor html by kravets (@raisa69) on CodePen.
Завантаження файлу
Браузер самостійно визначає тип документа і відкриває його, якщо може прочитати. Наприклад, при переході по посиланню до текстового документу він відкриється в браузері, а ось zip-архів браузер відкрити не може, тому запропонує користувачеві завантажити його на свій комп'ютер. Для HTML, PDF, текстових документів, зображень, відеофайлів і т. Д. Така поведінка браузера можна змінити і змусити його не відкривати файл за посиланням, а завантажувати його. Для цього до посиланням досить додати атрибут download.
Посилання на адресу електронної пошти
Створення посилання на адресу електронної пошти робиться майже також, як і посилання на веб-сторінку. Тільки замість протоколу http вказується mailto, після якого через двокрапку йде сам адреса пошти (приклад 5).
Завдання №1
Зміст
Історія
Структура URL
Кодування URL
Історія
URL був винайдений Тімом Бернерс-Лі в 1990 році в стінах Європейської ради з ядерних досліджень в Женеві, Швейцарія. URL став фундаментальною інновацією в Інтернеті.
Спочатку URL призначався для позначення місць розташування ресурсів (найчастіше файлів) у Всесвітній павутині. Зараз URL застосовується для позначення адрес майже всіх ресурсів Інтернету. Стандарт URL закріплений в документі RFC +1738, колишня версія була визначена в RFC 1630.
Зараз URL позиціонується як частина більш загальної системи ідентифікації ресурсів URI, сам термін URL поступово поступається місцем більш широкому терміну URI. Стандарт URL регулюється організацією IETF і її підрозділами.
До змісту
Структура URL
Спочатку локатор URL був розроблений як система для максимально природного вказівки на місцезнаходження ресурсів в мережі. Локатор повинен був бути легко розширюваним і використовувати лише обмежений набір ASCII-символів (наприклад, пробіл ніколи не застосовується в URL). У зв'язку з цим, виникла наступна традиційна форма запису URL:
<схема>://<логін>:<пароль>@<хост>:<порт>/<URL-шлях>?<параметри>#<якір>
До змісту
Кодування URL
Поява адрес URL стало істотним нововведенням в Інтернеті. Однак з моменту його винаходу і донині стандарт URL володіє серйозним недоліком - в ньому можна використовувати тільки обмежений набір символів, навіть менший, ніж в ASCII: латинські букви, цифри і лише деякі знаки пунктуації. Якщо ми захочемо використовувати в URL символи кирилиці, або ієрогліфи, або, скажімо, специфічні символи французької мови, то потрібні нам символи повинні бути перекодовані особливим чином.
До зміст
Завдання №2
Завдання №3
See the Pen link-html-task1 by kravets (@raisa69) on CodePen.
Завдання №4
У тезі <а> поміщений текст "Уроки HTML". Змініть код так, щоб вказаний текст став абсолютним посиланням на сайт https://osnovy-web.blogspot.com/
See the Pen link-html-task2 by kravets (@raisa69) on CodePen.
hh