четверг, 7 июля 2016 г.

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

В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки — «absolute_path_lvl_1» и все вложенные.

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

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


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

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

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

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


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

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

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

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 

4 комментария:

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

    ОтветитьУдалить
  2. "Если в начале пути корень не указать, то этот путь будет относительным, и он достаивается от текущего положения.". Ошибка в "достаивается"

    ОтветитьУдалить