Как указать путь к файлу в html

Как прописать путь к файлу в HTML?

Наверняка вы уже сталкивались с необходимостью вставки на своём сайте изображений, видео или какого-то файла для скачивания. При решении этой задачи много проблем возникает именно из-за неправильно прописанного пути к файлу. Давайте разбираться как же правильно прописать путь к файлу.

Навигация по статье:

Путь к файлу это своего рода его адрес содержащий в себе цепочку (последовательность) папок, внутри которых он находится. Путь может быть абсолютным и относительным.

Что такое абсолютный путь к файлу?

Если говорить простым языком, то это полный путь к файлу, который содержит в себе название сайта, протокол http или https, название папок, внутри которых он находится, а так же его имя и расширение.

Например, для картинки image.png, которая лежит в папке images на вашем хостинге абсолютный путь будет выглядеть так:

Когда вы создаёте HTML страницу на компьютере у вас абсолютный путь будет начинаться не с HTTPS, а с названия диска, на котором этот файл находится. Затем будет идти последовательность папок внутри которых он лежит, а уже потом имя файл и его расширение.

Посмотреть этот путь можно в адресной строке:

Как определить абсолютный путь к файлу у себя на хостинге?

Часто при подключению к сайту по FTP или файловый менеджер на хостинге у вас открывается корневая папка, в которой находится куча других папок и не всегда понятно где находится сама папка с доменом, куда загружать файл и какие папки указывать в абсолютном пути.

В этом случае нам нужно:

1. Найти папку, в которой лежат файлы сайта.
Например, в случае с CMS WordPress в ней должны находиться папки «wp-admin», «wp-content» и так далее.

Потом приписываем к нему скопированный адрес папки с загруженным файлом и в конце пишем название его название и расширение.

Особенности абсолютного пути:

• указанный адрес будет работать при его использовании на других сайтах или страницах
• при смене домена основного сайта или при переходе на https адреса в этом пути тоже нужно будет менять.

Что такое относительный путь к файлу?

С эти немного сложнее. Относительный путь к файлу указывается относительно расположения того файла в коде которого он указывается. Давайте разберём на конкретных примерах.

Пример 1.
Допустим, мы вставляем картинку в index.html, который лежит в папке с доменом. Там же в папке с доменом находится папка images с нашей картинкой.

Относительный путь будет выглядеть так:

Пример 2.
Нам нужно указать относительный путь к картинке в файле style.css, который лежит в папке CSS. При этом сама картинка находится не папке images.

В этом случае если мы просто напишем /images/image.png, как в предыдущем примере, то это не сработает!

Браузер будет воспринимать эту запись так: «Зайди в папку images, которая лежит рядом с файлом style.css и возьми там файл image.png». Проблема в том, что в рядом с style.css нет никакой папки images! Она находится на уровень выше.

В таком случае мы должны как бы сказать браузеру: «Сначала выйди из папки CSS, в которой лежит style.css в котором мы указываем наш абсолютный путь, а потом зайди в папку images и возьми там файл image.png»

На языке кода команда «выйди из папки» будет выглядеть так: ../

В итоге получим:

Пример 3.

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

Особенности относительного пути:

• для того чтобы его указать нужно представлять структуру файлов сайта
• указанные адреса будут работать только в пределах вашего сайта
• при переходе на https или смене домена все адреса будут по прежнем работать и их не нужно менять.

Определение пути к файлу в WordPress и других CMS

При работе с движками для отображения определённых файлов на сайте вам нужно указывать пути к ним или в админке или коде темы или шаблона.

Если вы вносите правки в коде, то указывать относительный путь вы должны относительно файла index.php который лежит в папке с доменом.

Получается, что вы вносите правки в файле шаблона, но путь должны указывать как будто бы вы работаете с index.php в корне сайта. Такова особенность работы движков.

Если вы указываете адрес внутри скрипта или CSS файла, то путь указывается относительно этого файла.

Так же в WordPerss есть специальные функции, которые избавят вас от необходимости бродить по папкам и гадать какой адрес нужно указывать. Эти функции возвращают абсолютный путь к папке с темой. Их несколько, но я обычно использую вот эту:

HTML File Paths

A file path describes the location of a file in a web site’s folder structure.

File Path Examples

Path	Description
<img src="picture.jpg">	The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg">	The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg">	The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg">	The "picture.jpg" file is located in the folder one level up from the current folder

HTML File Paths

A file path describes the location of a file in a web site’s folder structure.

File paths are used when linking to external files, like:

• Web pages
• Images
• Style sheets
• JavaScripts

Absolute File Paths

An absolute file path is the full URL to a file:

Example

The <img> tag is explained in the chapter: HTML Images.

Relative File Paths

A relative file path points to a file relative to the current page.

In the following example, the file path points to a file in the images folder located at the root of the current web:

Example

In the following example, the file path points to a file in the images folder located in the current folder:

Example

In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

Example

Best Practice

It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

Работа с файлами

Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге загрузите их на сервер. В статье Работа с файлами обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.

Где ваш веб-сайт должен располагаться на вашем компьютере?

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

1. Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
2. Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).

Небольшое отступление о регистре и пробелах

Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:

1. Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
2. Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на «%20» (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .

Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.

Какую структуру должен иметь ваш веб-сайт?

Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:

1. index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
2. Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
3. Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
4. Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .

Примечание: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция Скрывать расширения для известных типов файлов, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант Свойства папки. и снять флажок Скрывать расширения для зарегистрированных типов файлов, затем щёлкнуть OK. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.

Файловые пути

Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу — обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и научим его отображать изображение, которое вы выбрали в статье «Каким должен быть ваш веб-сайт?»

1. Скопируйте изображение, которое вы выбрали ранее, в папку images .
2. Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит — позже в этом руководстве мы рассмотрим структуры более подробно.

Некоторые общие правила о путях к файлам:

• Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, my-image.jpg .
• Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: subdirectory/my-image.jpg .
• Для ссылки на целевой файл в директории выше вызывающего HTML файла, напишите две точки. Например, если index.html находится внутри подпапки test-site , а my-image.png — внутри test-site , вы можете обратиться к my-image.png из index.html , используя ../my-image.png .
• Вы можете комбинировать их так, как вам нравится, например ../subdirectory/another-subdirectory/my-image.png .

На данный момент это все, что вам нужно знать

Примечание: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например C:\windows . Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.

Что должно быть сделано?

К настоящему моменту структура вашей папки должна выглядеть примерно так:

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

Многим новичкам трудно разобраться, как правильно строить относительный путь к файлу. Сегодня, я постараюсь разобрать все нюансы связанные с этим.

Если вы уже знакомы с данной темой, то можете закрыть вкладку и не читать

Начнем. Для начала, посмотрим как выглядит абсолютный путь к файлу на сайте:

1. https:// — протокол подключения к сайту — домен
2. source, img — папки
3. main.png — нужный нам файл

Выглядит вроде просто. Но на практике, никто не указывает абсолютный путь к файлу при верстке страниц. Для этого всегда используют относительный.

Для правильного построения относительного пути, нужно разобраться с его синтаксисом:

• Знак точка “ . ” — указывает на текущую (корень) папку, где находится файл
• Две точки “ .. ” — указывает на родителя текущей папки, где находится файл
• Слэш “ / ” — показывает какую следующую папку/файл будет выбирать

Пока просто запомните эту информацию. Если во время прочтения, забудете, вернитесь к этому списку и вспомните.

Представим что у вас есть вот такая структура проекта. (папки — прямоугольники, файлы — названия с полоской)

Теперь напишем простой относительный путь до картинки first.png . Для этого, в файле index.html нужно прописать вот такую строчку:

Все работает. И можно было бы закончить, но нет ��.

Такой адрес показывает, что поиск файла будет происходить относительно папки, где расположен index.html .

Если бы, вы в начале пути указали / или C:// , это являлось бы абсолютным путем. Слэш в начале “ / ” (для Linux систем) или “ C:// ” (для windows) в начале показывает, что поиск файла будет происходит начиная от корня вашего диска (файловой системы).

Как реально выглядит расположение нашего проекта?

Корень проекта, тоже является папкой, поэтому не забывайте об этом.

Алгоритм работы поиска файла

Прописывая вот такой путь до файла:

Браузер начинает его искать вот таких образом:

1. Подключение картинки написано в файле index.html. Смотрит где находится файл index.html. Находит эту папку. Это корень проекта
2. В корне проекта ищет папку source. Если нашел, все ок, идем дальше
3. В папке source ищет папку img
4. В папке img находит файл first.png

Вот так происходит поиск файла по относительному пути. Если на какую то папку он не сможет найти, то картинка не будет показана и браузер выдаст ошибку в консоли.

Точка

Давайте теперь рассмотрим вариант посложнее.

В начале прописали ./ . Что же это значит? Я уже писал об этом ранее:

• Точка указывает на текущую папку, где находиться файл index.html. Т.е. на корень проекта
• Слэш после точки указывает, что внутри корня проекта будет искать папку, которая находиться после него. Т.е. source

В итоге получилась равнозначная запись предыдущей. Алгоритм поиска будет ровно такой же, просто предыдущая запись является сокращенной и более приятной глазу. Почти всегда используют первую запись пути.

Две точки

Но это еще не все. Давайте немного поменяем проект и добавим еще одну папку и страницу:

У нас появились новая папка about, в корне проекта, а в ней страница home.html

И если мы захотим использовать ту же запись для подключения картинки на странице home.html, то она не сработает. Потому, что поиск будет теперь происходить относительно папки about, а не корня проекта, как ранее.

Что же делать? На помощь нам приходят две точки “ .. ”.

Две точки позволяют, так сказать, провалиться на уровень выше. Т.е. поиск будет происходить не от текущей папки home, а от корня проекта.

1. Подключение картинки написано в файле home.html. Смотрит где находится файл home.html. Находит эту папку. Это папка about
2. Дальше смотрит кто является родителем папки about. Им является корень проекта
3. В корне проекта ищет папку source. Если нашел, все ок, идем дальше
4. В папке source ищет папку img
5. В папке img находит файл first.png

Если, например, внутри папки home была еще одна папка, и в ней была бы еще одна страница, то путь до файла first.png, внутри этой страницы, выглядел бы вот так:

Теперь все

Надеюсь теперь стало понятно, в чем разница между абсолютным путем и относительным, в чем разница между одной и двумя точками и зачем они нужны.

Если у вас еще остались вопросы, можете задать их в моем telegram чате. Так же я занимаюсь обучением программированию в своей telegram группе.