Навигация по сайту

Популярные статьи

Увлекательный поход по Крыму

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

Отдых в Карпатах

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

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

  1. абсолютні адреси
  2. відносні адреси

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

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

абсолютні адреси

Абсолютні адреси складаються з таких даних, як: протокол, ім'я сервера і шлях. Розглянемо на прикладі адреси https://webshake.ru/html-training-course .

Протоколом в даному випадку виступає https: //.
Доменним ім'ям є webshake.ru.
Шлях - / html-training-course.

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

Абсолютні адреси можуть записатися і лаконічніше. Наприклад: / html-training-course.

У даній ситуації браузер буде використовувати протокол і сервер сторінки, на якій користувач знаходиться в даний момент. Наприклад, для сайту https://webshake.ru посилання / html-training-course буде змінена браузером на посилання https://webshake.ru/html-training-course .

відносні адреси

У відносних адресах відсутня велика частина інформації, яка є в абсолютних. Тобто, мова йде про відсутність протоколів і серверів. Що ж стосується шляху, то він починається не з слеша. Наведемо приклади таких адрес, щоб було зрозуміліше.

post / 1 ./frontend ../post/1

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

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

https://webshake.ru/post/696 - 697 - https://webshake.ru/post/697
https://webshake.ru/post/696 - ../../contacts - http://webshake.ru/contacts

Давайте розглянемо на прикладі:
Створимо в папці з нашої сторінкою ще один файл з ім'ям book1.html і наповнимо її інформацією про деяку книзі:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Досконалий код - Книги для програмістів </ title> <meta name = "keywords" content = "досконалий код, Стів Макконел, патерни, книги, програмування, література, навчання, розробка "> <meta name =" description "content =" книга \ "досконалий код \" Стіва Макконела - найкраща книга для програмістів за результатами опитування користувачів StackOverflow "> </ head> <body > <a href="index.html"> Повернутися до списку книг </a> <h1> Досконалий код </ h1> <h2> Опис </ h2> <h3> Від видавця </ h3> <p style = " width: 700px "> Більше 10 років перше видання цієї книги вважалося одним з кращих практичних посібників з програм ювання. Зараз ця книга повністю оновлена ​​з урахуванням сучасних тенденцій і технологій і доповнена сотнями нових прикладів, що ілюструють мистецтво і науку програмування. Спираючись на академічні дослідження, з одного боку, і практичний досвід комерційних розробок ПО - з іншого, автор синтезував з найефективніших методик і найбільш ефективних принципів ясне прагматичне керівництво. Який би не був ваш професійний рівень, з якими б засобами розробками ви не працювали, як і вона була складність вашого проекту, в цій книзі ви знайдете потрібну інформацію, вона змусить вас міркувати і допоможе створити досконалий код. Книга складається з 35 глав, предметного покажчика та списку використаних джерел. </ P> </ body> </ html>

Подивимося на результат в браузері:
Подивимося на результат в браузері:

Тепер, коли ми натиснемо на отриману посилання, відкриється сторінка зі списком книг.
Давайте доповнимо її, а саме - додамо посилання на нашу нову сторінку про книгу.

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Книги для програмістів </ title> <meta name = "keywords" content = "книги, програмування, література, навчання, розробка "> <meta name =" description "content =" На цій сторінці Ви зможете познайомитися з кращими книгами з програмування. "> </ head> <body> <h1> Книги для програмістів </ h1> <h2> Досконалий код </ h2> <p> Більше 10 років перше видання цієї книги вважалося одним з кращих практичних посібників з програмування. <br> Зараз ця книга повністю оновлена ​​з урахуванням сучасних тенденцій і технологій <br> і доповнена <strong> сотнями нових прикладів </ strong> , мул юстрірующіх мистецтво і науку програмування. <br> Книга підійде для: <ul> <li> Початківців </ li> <li> середнячки </ li> <li> Досвідчених </ li> </ ul> <a href="book1.html"> [докладніше ] </a> </ p> <hr> <h2> Колобок </ h2> <p> Невелика казка про борошняний виріб з великими амбіціями <br> Переваги цієї книги: <ol> <li> вона читається швидше першої </ li> <li> вона дешевше першої </ li> </ ol> </ p> </ body> </ html>

Результат в браузері:
Результат в браузері:

Ура! У нас вийшов найпростіший сайт, що складається з двох сторінок, які посилаються один на одного. А якщо не вийшов - пишіть в коментарях, разом розберемося.

Відпочили?