Всім привіт! Отже, у нас є загальне уявлення про посилання. Зараз я попрошу Вас включити мозок і не включати режим овоча. Краще перед цим уроком трохи відпочити, так як тема для більшості людей є складною. Якщо щось буде незрозуміло - питайте в коментарях.
Відпочили? Ну що ж, тепер давайте більш докладно зупинимося на питанні адрес. Вони бувають двох типів: відносні і абсолютні.
абсолютні адреси
Абсолютні адреси складаються з таких даних, як: протокол, ім'я сервера і шлях. Розглянемо на прикладі адреси 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>
Результат в браузері: 
Ура! У нас вийшов найпростіший сайт, що складається з двох сторінок, які посилаються один на одного. А якщо не вийшов - пишіть в коментарях, разом розберемося.
Відпочили?