HTML с нуля: Как прописать путь к файлу, картинке или странице. Урок №13

Когда вы создаёте сайт, почти всегда приходится вставлять картинки, подключать файлы или делать ссылки на другие страницы. И вот тут часто появляется вопрос: “А как правильно прописать путь?”

Не переживайте — всё проще, чем кажется. Главное понять логику.

Что такое путь к файлу

Путь — это просто “адрес”, где лежит ваш файл. Браузер должен знать, где искать картинку, страницу или документ.
Например, вы хотите показать картинку logo.png. Если она лежит в той же папке, где и ваш HTML-файл, то путь будет очень короткий:

<img src="logo.png" alt="Логотип">

Вот и всё.

Если файл в другой папке

Допустим, у вас есть папка images, и внутри неё лежит logo.png. Тогда путь будет такой:

<img src="images/logo.png" alt="Логотип">

Браузер заходит в папку images и достаёт картинку.

Если нужно выйти из папки

А вот тут часто начинаются путаницы.
Представьте, вы находитесь в папке css, а картинка лежит уровнем выше — в корне сайта.
Чтобы “выйти” из текущей папки, нужно поставить две точки и слэш:

<img src="../logo.png" alt="Логотип">

../ — это значит “выйти на один уровень выше”.

Если же картинка лежит в папке images, которая находится на уровень выше, тогда путь будет:

<img src="../images/logo.png" alt="Логотип">

Тут вы сначала “вышли” из папки css, потом зашли в images и взяли logo.png.

Ссылка на другую страницу

Точно так же работает и с ссылками.
Например, если вы хотите перейти из index.html на страницу about.html, которая лежит в той же папке:

<a href="about.html">О нас</a>

Если она лежит выше —

<a href="../about.html">О нас</a>

Если в другой папке, например pages/about.html —

<a href="pages/about.html">О нас</a>

Полный путь

Иногда используют полный адрес, если файл лежит на другом сайте:

<img src="https://www.overcod.net/images/logo.png" alt="Логотип">

Такой вариант подходит, если вы берёте картинку или файл с другого домена.