HTML. Как указать путь к файлу

Путь может быть абсолютный и относительный.

Абсолютный путь

Абсолютный путь — это путь от корневой папки к файлу.

Путь состоит из всех папок, которые нам надо просмотреть, разделенных через слеш. Посмотрим на примере (пример когда-то лежал в бикбакете, но увы, уже сдох):

/absolute_path_lvl_1/level_2.1/level_3.1/Kevin.png 

Абсолютный путь к файлу

См также:

Что такое cmd + основные команды для новичка — там тоже есть про абсолютный и относительный путь на примере винды

Относительный путь

Относительный путь — это ссылка, указывающая на другие страницы вашего сайта относительно веб-страницы, на которой эта ссылка уже находится.

Если опускаем вниз по папкам, разделяем также через «/». Если надо подняться на уровень выше, пишем «..»

1. Самый простой пример относительного пути - это просто имя файла. если файл лежит рядом, просто указываем его имя

Hello.png

Относительный путь, файл рядом

2. Поднимаемся на папку выше

../Kevin_lvl_2.png

Относительный путь 2

3. Пример посложнее, из Diff_paths.html к картинке с Кевином

../level_2.1/level_3.1/Kevin.png

Относительный путь 3

Чем отличаются абсолютный и относительный пути

Это очень просто. Если путь указывается от корня системы, то это путь абсолютный. Это как почтовый адрес в реальной жизни - откуда бы ты не шел, но по точному адресу ты всегда точно найдешь нужное место.

Если в начале пути корень не указать, то этот путь будет относительным, и он достраивается от текущего положения. В реальной жизни это напоминает дорогу к винному магазину - "два квартала налево и там все время прямо". Дойти по такому пути можно только из конкретной точки. Из другой ты попадешь уже в совсем другое место.

Отличия сперты отсюда.

В файле absolute_path_lvl_1 / level_2.2 / Diff_paths.html можно посмотреть пример HTML страницы с разными путями к файлам.

Вот пример абсолютного и относительного пути для одного и того же файла с Кевином.

<!-- Абсолютный путь -->
<img src="D:/hgprojects/html-and-css-learn/absolute_path_lvl_1/level_2.1/level_3.1/Kevin.png">

D:/hgprojects → сюда у меня выкачан проект «html-and-css-learn». У вас может быть другой путь

<!-- Относительный путь к тому же файлу -->
<img src="../level_2.1/level_3.1/Kevin.png">


PS — подробнее в книге «Изучаем HTML, XHTML и CSS» Эрика и Элизабет Фримен:

• относительный путь — стр 98
• абсолютных путях — стр 164

PS — добавила статью в полный список моих конспектов лекций по HTML & CSS