HTML. Абсолютные и относительные ссылки

    Абсолютные и относительные ссылки в html-документе, актуальные не только для файловой структуры сайта, но и для файлов на жестком диске компьютера.

    Ссылки в html-документе могут содержать абсолютные или относительные адреса (пути к файлам). Если адрес заканчивается папкой, браузер откроет файл index.html (или index.php), расположенный в этой папке.

    Абсолютные ссылки

    Абсолютные ссылки содержат абсолютные адреса, представляющие из себя полный путь к ресурсу (файлу). Абсолютные интернет-адреса могут быть внутренними или внешними, они должны начинаться с указания протокола (https://) и содержать имя сайта.

    Пример абсолютной ссылки на эту статью:

    Соответственно, полный путь:


    Пример полного пути к файлу на жестком диске:

    При открытии файла с жесткого диска в браузере, обратные слеши в адресной строке автоматически заменяются на обычные:

    Относительные ссылки

    Относительные ссылки ведут отсчет от корневой папки сайта или от текущего документа. Если файл находится в корне сайта, для создания относительной ссылки на него, в относительном пути перед ним следует указать слеш:

    Далее, для рассмотрения различных вариантов относительных ссылок, воспользуемся следующей схемой:

    Текущим документом будет файл test.html, а файлом, к которому будет вести относительная ссылка, — style.css. Фактически, мы будем подключать к html-документу внешний файл каскадных таблиц стилей.

    1. Оба файла (test.html и style.css) расположены в любой одной папке. В этом случае, в относительной ссылке указывается только наименование файла стилей:


    2. Файл test.html расположен в «Папка 1», а файл style.css в «Папка 5»:

    Если тестируемые файлы расположены на локальном диске, слеш в адресе html-ссылки все-равно можно ставить обычный.


    3. Файл test.html расположен в «Папка 4», а файл style.css в «Папка 1»:

    Для перехода в родительскую папку (на один уровень вверх) используются две точки: (..).


    4. Файл test.html расположен в «Папка 6», а файл style.css в «Папка 5»:

    Добавить комментарий

    Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора.