Абсолютні та відносні посилання

Уявімо, що до вашого сусіда прийшов кур'єр і запитує, де знайти вашу квартиру. Сусід може розпочати здалеку: "планета Земля, материк Євразія, країна Україна, місто Київ, вулиця Мечникова, будинок 16, квартира 41". А може просто сказати "та ось його квартира, ліворуч від мене". У першому випадку сусід дав кур'єру (браузеру) абсолютне заслання, а в другому - відносне.

Абсолютні посилання використовуються для переходу на інший веб-сайт. Вони відповідають вимогам позначення URL-адреси , тобто. містять протокол передачі даних (наприклад http:// ), доменне ім'я сайту та шлях до конкретної сторінки сайту. Якщо шлях не вказано, за промовчанням відкриється головна сторінка. У прикладі вище вказано абсолютне посилання, яке веде на головну сторінку сайту.

Відносні посилання використовуються для переходу в рамках одного сайту (зі сторінки на сторінку або з одного місця до іншого). Особливо це зручно, якщо ви створюєте свій сайт і ще не опублікували його. Якщо ви створювали свою першу веб-сторінку разом з нами, саме час створити другу і подивитися, як працюють відносні посилання 🙂

Посилання на документ у тій самій папці

Отже, давайте створимо в тій же папці HTML_Start (це наша коренева папка) ще один HTML документ з будь-якою назвою, наприклад about.html

Оскільки вони сусіди, то посилання на сторінку index.html може бути дуже коротким і містити просто назва сторінки : about.html

1.5. HTML-посилання

Гіперпосилання створюються за допомогою елемента. Всередині міститься текст, який відображатиметься на веб-сторінці. Текст посилання відображається у браузері з підкресленням, колір шрифту – синій, при наведенні на посилання курсор миші змінює вигляд.

Посилання складається з двох частин. покажчика і адресної частини. Вказівник посилання це фрагмент тексту або зображення, видимі для користувача. Адресна частина посилання користувачеві не видно, вона є адресою ресурсу, якого необхідно перейти.

Адресна частина посилання складається з URL. URl (Uniform Resource Locator) – уніфікована адреса ресурсу.При створенні адрес для розділення слів рекомендується використовувати дефіс, а не символ підкреслення. У загальному вигляді URl має такий формат:

метод доступу://ім'я сервера:порт/шлях

Метод доступу, або протокол, здійснює обмін даними між робочими станціями у різних мережах. Найбільш поширені протоколи передачі:

file забезпечує читання файлу з локального диска:

file:/gallery/pictures/summer.html

http надає доступ до веб-сторінки за протоколом HTTP:

https - спеціальна реалізація протоколу HTTP, яка використовує шифрування (як правило, SSL або TLS):

ftp здійснює запит до FTP-сервера на отримання файлу:

ftp://pgu/directory/library

mailto запускає сеанс поштового зв'язку із зазначеним адресатом та хостом:

Ім'я сервера описує повне ім'я машини у мережі, наприклад, site.ru. Якщо ім'я сервера не зазначено, посилання вважається локальної, тобто. вона відноситься до тієї ж машини, на якій знаходиться HTML-документ, що містить посилання.

Номер порту ТСР, на якому працює веб-сервер. Це число, яке необхідно вказувати, якщо метод вимагає номер порту (окремі сервери можуть мати свій відмінний номер порту). Якщо порт не вказано, за замовчуванням використовується порт 80. Стандартними портами є:

Шлях містить ім'я папки, де знаходиться файл.

2. Абсолютний та відносний шлях

Коли в засланні вказується лише ім'я файлу, браузер передбачає, що файл знаходиться в тій же папці, що й документ, який містить гіперпосилання. На практиці веб-сайти містять сотні документів, які розміщують в окремих папках, щоб ними було легше керувати.Щоб створити посилання на файл, який знаходиться поза папкою, що містить поточний документ, необхідно вказати розташування файлу або шлях. HTML підтримує два види шляху: абсолютний та відносний.

Мал. 1. Приклад структури папок

2.1. Абсолютний шлях

Абсолютний шлях вказує точне розташування файлу в межах всієї структури папок на комп'ютері (сервері). Абсолютний шлях до файлу дає доступ до файлу зі сторонніх ресурсів і містить такі компоненти:

• протокол, наприклад, http (опціонально);
• домен (доменне ім'я або IP-адреса комп'ютера);
• папка (ім'я папки, яка вказує шлях до файлу);
• файл (ім'я файлу).

Існує два види запису абсолютного шляху - із зазначенням протоколу (повний) і без нього:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Коли ви посилаєтеся на сторінку на іншому сайті, ви можете використовувати лише повний абсолютний шлях.

Якщо файл знаходиться в кореневій папці, шлях до файлу буде наступним:

У разі відсутності імені файлу завантажуватиметься веб-сторінка, задана за замовчуванням у налаштуваннях веб-сервера (так званий індексний файл).

Зазвичай як індексний файл виступає документ з ім'ям index.html. Наявність завершального слеша / означає, що звернення йде до папки, якщо його немає безпосередньо до файлу.

2.2. Відносний шлях

Відносний шлях описує шлях до зазначеного документа щодо поточного. Шлях визначається з урахуванням розташування веб-сторінки, на якій знаходиться посилання. Відносні посилання використовуються при створенні посилань на інші документи на тому самому сайті. Коли браузер не знаходить у посиланні протоколу http:// , він виконує пошук зазначеного документа на тому самому сервері.

Відносний шлях містить такі компоненти:

Шлях для відносних посилань має три спеціальні позначення:

• / вказує на кореневу директорію та говорить про те, що потрібно почати шлях від кореневого каталогу документів та йти вниз до наступної папки
• ./ вказує на поточну папку
• ../ піднятися на одну папку (директорію) вище

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

3. Якоря

Якоря, або внутрішні посилання, створюють переходи до різних розділів поточної веб-сторінки, дозволяючи швидко переміщатися між розділами. Це дуже зручно, якщо на сторінці занадто багато тексту. Внутрішні посилання також створюються за допомогою елемента з різницею в тому, що атрибут href містить ім'я покажчика так званий якір, а не URL-адреса. Перед іменем покажчика завжди ставиться знак #.

Наступна розмітка створить зміст зі швидкими переходами на відповідні розділи:

Пори року
Зміст
 Літо Осінь Зима Весна  
.
.
.
.

Якщо потрібно зробити посилання з однієї сторінки сайту на певний розділ іншої сторінки, то необхідно задати id для цього розділу сторінки, а потім додати його до абсолютної адреси посилання:

4. Як зробити зображення-посилання

5. Як зробити посилання на телефонний номер, скайп чи адресу електронної пошти

У посилань з'явилися нові можливості - на кліку можна не тільки переходити на інші сторінки і завантажувати файли, але й здійснювати дзвінки на телефони, відправляти повідомлення або дзвонити по скайпу.

посилання на телефонний номер +7 (495) 123-45-67 посилання на адресу електронної пошти [email protected]">[email protected] посилання на скайп (зателефонувати) Skype посилання на скайп (відкрити чат) Skype посилання на скайп (додати до список контактів) Skype посилання на скайп (надіслати файл) Skype