Правильный путь до файлов очень важен, так как от этого зависит отображение контента и стилей на вашем сайте.
Существует два варианта ссылок: относительные и абсолютные.
1. Относительные пути
Путь не посредственно из HTML-файла. Применяется для решения таких задач как:
- путь до изображения (значение атрибута src в теге img)
<img src=»путь до изображения»> - подключение стилей CSS в файл HTML
- подключение аудио, видео форматов, а так же шрифтов
Классический вид ваших папок с проектами будет выглядеть так. Основной файл index.html, .editorconfig (скрытый файл с настройками) и папки со стилями (css), шрифтами (fonts) и изображениями (img).
Эта группа будет первым уровнем, а все что лежит внутри папок — вторым и так далее до конечного файла. Например.
В папке img лежит изображение с названием «raspisanie_urokov.img». Для того что бы правильно прописать путь в теге img мы берем папку первого уровня и название изображения.
<img src=»img/raspisanie_urokov.img»>
Если бы внутри папки img была бы еще одна папка, назовем ее school, то нам бы прошлось указывать весь путь от папки первого уровня до конечного файла, в нашем случае это изображение «raspisanie_urokov.img»
<img src=»img/school/raspisanie_urokov.img»>
Тут важно запомнить синтаксис:
/ — разделитель между папками
и расширение файла в конце .img (.pdf .png и тд)
Бывает обратная ситуация, когда нужно идти не от первого уровня папок, а от самого файла. Это часто используется при написании пути в файле стилей style.css.
background-image: url(«путь к файлу»)
папка «css» — первого уровня. Файл «style.css» лежит внутри этой папки и получается занимает второй уровень.
папка «img» — первого уровня. Изображение «raspisanie_urokov.img» лежит внутри папки и так же занимает второй уровень.
Получается, что мы не можем внутри файле style.css написать таким образом:
background-image: url(«img/raspisanie_urokov.img«)
нам как бы нужно вернуться на первый уровень папок (в корневую папку) и «зайти» в нужную нам папку и оттуда забрать изображение.
background-image: url(«../img/raspisanie_urokov.img«)
Корневая папка на примере «Проектная работа» обозначается двумя точками.
Редактор кода всегда дает подсказки в написании путей до файлов, но вам нужно понимать, как это работает, а не бездумно пользоваться автоматизацией.
2. Абсолютные пути
Это пути, когда в написании используется / в самом начале пути:
<img src=»/img/raspisanie_urokov.img»>
При таком написании пути нужный вам файл будет искаться по всей системе, а не в корневой папке. При таком написании ваш сайт будет работать не корректно.
В каком же случае используются абсолютные ссылки?
Когда вы пишите значение атрибута href в теге a (ссылка)
<a href=»https://yandex.ru»>Яндекс</a>