======Абсолютные и относительные ссылки====== =====Абсолютные ссылки (absolute)===== Абсолютная ссылка — это адрес веб-ресурса целиком. Как правило такие ссылки ставят на сторонние ресурсы. * https://book51.ru * https://book51.ru/doku.php?id=start href="https://book51.ru" — ссылка на главную страницу сайта href="https://book51.ru/doku.php?id=start" — cсылка на страницу с материалом внутри сайта =====Относительные ссылки (relative)===== При использовании относительных ссылок за точку отсчета каждый раз берется отправная страница. href="t-shirts/t-shirt-life-is-good/" — ссылка с главной страницы на страницу товара href="../../" — ссылка со страницы товара на главную страницу Здесь можно сделать первый вывод. Хотя относительные адреса выглядят короче абсолютных, однако абсолютные адреса предпочтительнее, так как одну и ту же ссылку можно применять в неизменном виде на любой странице сайта, на какой бы глубине она не находилась. ====Промежуточные варианты==== Выше мы рассмотрели два крайних случая: чисто абсолютные и чисто относительные ссылки. Однако имеются и другие варианты ссылок. Прежде нужно сказать, что в этом мире всё относительно. Это касается и ссылок. Говоря о том, что ссылка абсолютная, нужно всегда указывать: относительно чего. Для краткости договоримся все промежуточные варианты ссылок, которые мы рассмотрим ниже, называть с помощью следующей конструкции «адрес относительно ...», хотя по сути все они будут абсолютными. Первые два варианта ссылок (1 и 2) будем по-прежнему называть просто «абсолютными» и «относительными». ====Адрес относительно протокола (protocol-relative)==== href="//sites.ru/shop/" — главная страница магазина href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/" — страница товара Google рекомендует переходить именно на адреса без указания протокола. Однако, неизвестно, как долго будет длиться переходный период, так как сейчас считается, что http:// и https:// — это разные сайты ====Адрес относительно корневой папки домена (root-relative)==== href="/shop/" — главная страница магазина href="/shop/t-shirts/t-shirt-life-is-good/" — страница товара Это хороший выбор, если все страницы сайта находятся в пределах одного домена. При переносе сайта на другой домен, вам не придется делать массовую замену домена в ссылках. ===1.Файлы располагаются в одной папке=== {{:software:development:web:docs:web:html:fig_1_08_04.png?|Рис. 8.4}} Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий. Ссылка Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре. ===2.Файлы размещаются в разных папках=== {{:software:development:web:docs:web:html:fig_1_08_05.png?|Рис. 8.5}} Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже. Ссылка Две точки в данном случае означают выйти из текущей папки на уровень выше. ===3.Файлы размещаются в разных папках=== {{:software:development:web:docs:web:html:fig_1_08_06.png?|Рис. 8.6}} Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза. Ссылка Аналогично обстоит дело с любым числом вложенных папок. ===4.Файлы размещаются в разных папках=== {{:software:development:web:docs:web:html:fig_1_08_07.png?|Рис. 8.7}} Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку - в папке. В этом случае путь к файлу будет следующий. Ссылка Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так. Ссылка ===5.Ссылки относительно корня сайта=== Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем (/) вначале. Так, запись Курсы означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл. ====Адрес относительно главной страницы сайта (base-relative)==== В HTML есть тег . Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе . В качестве базового адреса мы укажем URL главной страницы: href="" — главная страница магазина href="t-shirts/t-shirt-life-is-good/" — страница товара Ко всем преимуществам предыдущего варианта адресов, здесь добавляется еще одно — теперь сайты можно безболезненно переносить не только на любой домен, но и в любую подпапку, так как название подпапки исчезло из href. Это удобно для разработки — вы собираете сайт в любой подпапке веб-сервера своего рабочего компьютера, и, когда, сайт готов, просто переносите файлы сайта на хостинг. Остается только привыкнуть к тому что, хотя адреса и записаны, как относительные, ведут они себя как абсолютные. Особенно нужно помнить о якорях, так как привычная конструкция href="#comments" теперь производит переход не в пределах текущей страницы, а переводит на главную страницу, так как впереди будет автоматически приписан URL главной страницы. Теперь впереди хеша нужно явно прописывать адрес текущей страницы: href=«t-shirts/t-shirt-life-is-good/#comments». Что касается «настоящих» абсолютных ссылок (1, 3, 4), то они работают как обычно — тег base не оказывает на них никакого действия. Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов. =====Заключение===== Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы. Я для внутренних ссылок использую адреса относительно главной страницы сайта (5.base-relative). Для внешний ссылок и рассылок с сайта лучше использовать абсолютные ссылки (1.absolute).