HTML Пути к файлу
Путь к файлу описывает расположение файла в структуре папок веб-сайта.
Примеры пути к файлу
| Путь | Описание |
|---|---|
| <img src="picture.jpg"> | Файл "picture.jpg" находится в той же папке, что и текущая страница |
| <img src="images/picture.jpg"> | Файл "picture.jpg" находится в папке изображений в текущей папке |
| <img src="/images/picture.jpg"> | Файл "picture.jpg" находится в папке изображений в корне текущего веб-сайта |
| <img src="../picture.jpg"> | Файл "picture.jpg" находится в папке на один уровень выше текущей папки |
HTML Пути к файлу
Путь к файлу описывает расположение файла в структуре папок веб-сайта..
Пути к файлам используются при ссылках на внешние файлы, например:
- Веб-страницы
- Изображения
- Таблицы стилей
- JavaScripts
Абсолютный путь к файлу
Абсолютный путь к файлу — это полный URL-адрес файла:
Пример
Относительный путь к файлу
Относительный путь к файлу указывает на файл относительно текущей страницы.
В следующем примере путь к файлу указывает на файл в папке изображений, расположенный в корне текущего веб-сайта:
Пример
В следующем примере путь к файлу указывает на файл в папке изображений, находящейся в текущей папке:
Пример
В следующем примере путь к файлу указывает на файл в папке изображений, расположенный в папке на один уровень выше текущей папки:
Пример
Лучшая практика
Лучше всего использовать относительные пути к файлам (если возможно).
При использовании относительных путей к файлам ваши веб-страницы не будут привязаны к вашему текущему базовому URL. Все ссылки будут работать на вашем собственном компьютере (localhost), а также в вашем текущем общедоступном домене и ваших будущих общедоступных доменах.
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Файлы и пути к ним
Путь к файлу – это набор символов, который показывает расположение того или иного файла в операционной системе. Запись, которая включает в себя разделительный знак в виде «\» (обратного слеша). Также существуют пути каталогов. Все они используются в файловых системах компьютеров и иных устройств.
Работать с соответствующим элементом предстоит всем, кто пользуется оборудованием: программистам, системным администраторам, обычным пользователям. В данной статье речь зайдет о видах путей к каталогам и документам. Предложенная информация поможет классифицировать соответствующие «символьные наборы», а также научит пользоваться ими.
Особенности
Определение пути к каталогу или файлу можно дать как «маршрут». Это – «дорога», по которой нужно пройти, чтобы отыскать конкретные директории или документы на устройстве. Последовательность, записываемая по определенным принципам. Форма представления зависит от вида путей каталогам.
За основу возьмем работу в операционной системе Windows (Виндовс). Здесь рекомендуется запомнить такие нюансы:
- Есть «маршрут» начинается с обратного слеша (символ обратной косой черты), то система будет воспринимать его, как идущий от корневого каталога.
- Каждое имя каталога или файла, указанное в пути, должно соответствовать входу в папку.
- Символ «…» (многоточие) – это переход в родительский каталог.
- Слеш «/» — указывает, куда делать следующий «шаг».
Это – база, без которой дальнейшая работа с Windows и «маршрутами» в ней невозможна.
Путь к файлу не получится указать, если не знать, как правильно пишется его имя. То же самое касается и папок. Для поиска директории или документов максимально эффективно и быстро, необходимо узнать полное имя того или иного объекта.
Имя файла в системах DOS и Windows включает в себя три элемента:
- непосредственное название – имя;
- разделитель (точка);
- расширение (тип информации, с которой предстоит работать).
По умолчанию в Виндовс расширения (виды) документов скрыты. Эта информация среднестатистическому пользователю не нужна. Способов узнать расширение документа несколько. Пример – через параметр «Свойства». Методов включения отображения расширения тоже несколько – все зависит от конкретной операционной системы.
MS DOS определяет для имени всего 8 символов. Такое ограничение было в старых версиях операционных систем. Теперь оно упразднено, но это не значит, что нужно давать документам слишком длинные названия. Это усложнит поиск пути к файлу.
Разновидности
Для получения доступа к той или иной директории, а также любому документу на устройстве, нужно знать, где он размещается. Здесь на помощь придет путь к файлу. Он может быть нескольких видов:
- относительный;
- абсолютный.
Зная особенности каждого варианта, можно выучить, как правильно записать каждую форму представления, а также использовать соответствующую последовательность на практике.
Относительный вид
Относительный путь к файлу – это «маршрут» к документу относительно текущего каталога. Текущий каталог – это тот, в котором запускается программа, скрипт или открывается страница в браузере.
Он ссылается на местоположение относительно текущей директории. Используют два специальных символа:
- Точку «.». Используя этот символ, можно перейти в текущий каталог.
- Двойную точку «..». Позволяет посмотреть (перейти) в родительский каталог. Используется для перехода на один уровень вверх.
Выше – наглядный пример расположения файлов в системе. Эта графическая последовательность используется для быстрого поиска конкретного документа на компьютере. Она поможет понять, как правильно указать путь к файлу относительного вида.
Для перехода в Posters нужно записать такую последовательность: D:\Data\Maps\Posters. Соответствующая запись указывает на то, что нужно перейти на диск D, затем в директорию Posters, которая расположена в Maps. Последняя вложена в Data, размещенной на разделе диска с именем D.
Текущая директория – это корневая папка. После перехода в каталог Posters именно он будет выступать корневым.
Нюансы работы
Понятие путей к файлам, а также к каталогам понятно. Также стало понятно, что обозначает относительный «маршрут». Чтобы лучше работать с ним, рекомендуется рассмотреть наглядный практический пример. За основу возьмем документы, которые находятся на устройстве по образцу выше.
Предположим, что хочется перейти к папке Landuse из текущей директории, которая называется Soils. Чтобы переключиться туда, нужно:
- Открыть адресную строчку Windows.
- Узнать путь к файлу или директории. В нашем случае – к конкретной папке.
- Написать в адресной строчке запись формы: ..\Landuse.
В данном случае Windows произведет поиск каталога, после чего перейдет в D:\Data\Shapefiles\Landuse.
Абсолютный путь
Абсолютный путь к файлу означает полный «маршрут» до документа или архива. Он включает в себя все диски, а также имена папок и файлов, которые нужно открыть для перехода к заданному изначально объекту.
Файловая система Windows работает преимущественно с таким вариантом. Он наиболее прост для понимания среднестатистических пользователей. В Виндовс все начинается с диска или его раздела. Традиционно он записывается как одна буква:
- D;
- C;
- E.
Абсолютно сформированный путь к до файла формируется по определенному принципу. Его легко запомнить. Он выглядит так:
- Начинается всегда с диска, на котором находится тот или иной объект. Это – корневой диск.
- Все вложенные папки. Все то, куда будет заходить пользователь или файловая система, чтобы искать объект.
- Имя файла. Оно должно быть записано корректно. Желательно вместе с расширением (типом).
Сейчас покажу, как выглядит путь до файла статья.txt:
Стоит обратить внимание на принципы правильного формирования пути к файлу: начинается с диска, на котором расположен, а разделяющими символами служат обратные слеши. Предложенная ранее запись показывает, что файл статья.txt находится на диске C, в папке Media, которая расположена в директории Thecode. Последний элемент – это корень.
Разница с UNIX
В MacOS, как и в любой UNIX-системе все диски – это тоже папки. Это значит, что по умолчанию все новые диски будут подключаться как папки внутри папки /Volumes.
Понятие полного пути к файлу в Windows раскрыто. Это «маршрут», в начале которого указывается диск, на котором расположен объект. В случае с MacOS и Linux не только отсутствуют диски, но и используются измененные разделительные знаки. А именно – знаком «/».
Больше разницы между Windows и UNIX-системами нет. Абсолютный путь к директории означает написание всего «маршрута», по которому должен пройти клиент для обнаружения «архива». Относительный – его «уменьшенная» вариация.
Что лучше использовать
Абсолютный и относительный путь к каталогу (или иному объекту системы) – означает почти одно и то же. Первый вариант отвечает за определение полного «маршрута» до документа, второй – ее «урезанную» интерпретацию.
Перед тем как программировать или работать в операционной системе, встает вопрос о том, какую форму представления использовать.
При программировании и разработке используется относительный вариант. Связано это с тем, что находить документы и директории тут не сложно – они расположены в корневой папке проекта.
Для системного администрирования и получения доступа к тем или иным объектам ОС, рекомендуется использовать полный путь. Он более информативный. Это значит, что компьютеру или пользователю предстоит сделать все «шаги», предусматриваемые «маршрутом», для получения доступа к объекту.
Принцип использования того или иного «адреса» прост:
- работа в интернете с чужими документами – абсолютный вариант;
- оперирование собственными объектами проекта – относительный.
Теперь выясним, как по имени файла провести определение пути к файлу, а также скопировать соответствующий «адрес».
Как определить и скопировать маршрут
Существуют различные методы реализации. Для того, чтобы просмотреть полный путь файла, а затем перенести его в буфер обмена устройства, можно использовать системные возможности и «горячие клавиши». Все варианты достаточно просты в освоении.
Через Shift
Первый прием показывает, как копировать в буфер обмена «адрес» документа или директории без его непосредственной демонстрации:
- Выбрать файл, который хочется использовать.
- Нажать на Shift на клавиатуре и кликнуть ПКМ по документу.
- Выбрать «Скопировать как путь».
Теперь можно пользоваться соответствующей информацией по собственному усмотрению.
Свойства
Понятие полного пути к файлам раскрыто. Посмотреть его в Windows можно через «Свойства» объекта. Там найдете не только местоположение файла/директории, но и иную важную информацию вроде объема и расширения.
Чтобы воспользоваться этим приемом, нужно:
- Найти документ на устройстве.
- Нажать ПКМ по нему.
- Выбрать параметр «Свойства».
- Открыть вкладку «Общие».
Теперь в разделе «Расположение» можно увидеть путь к соответствующему файлу вместе с именем файла. Остается выделить значение строчки «Адрес» и скопировать его. Пример – при помощи ctrl + c.
Командная строка
Командная строка Windows позволяет отследить путь из корневого каталога до желаемого объекта с самого начала. Выводит информацию в консоли:
- Открыть командную строку.
- Перетащить иконку документа в основное окно приложения «Командная строка».
- Посмотреть на результат.
В консоли появится путь к желаемому файлу вместе с именем файла, а также всеми папками, которые нужно открыть для поиска соответствующего элемента.
В MacOS
Для MacOS уточнение расположения документов/директорий проводится точно так же, как и в Windows – при помощи Shift. Здесь предстоит найти тот или иной файл в Finder, а затем, удерживая клавишу Option, зажать ПКМ. Теперь остается выбрать команду «Скопировать путь до…».
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
Относительный путь к файлу
Многим новичкам трудно разобраться, как правильно строить относительный путь к файлу. Сегодня, я постараюсь разобрать все нюансы связанные с этим.
Если вы уже знакомы с данной темой, то можете закрыть вкладку и не читать
Начнем. Для начала, посмотрим как выглядит абсолютный путь к файлу на сайте:
- https:// — протокол подключения к сайту — домен
- source, img — папки
- main.png — нужный нам файл
Выглядит вроде просто. Но на практике, никто не указывает абсолютный путь к файлу при верстке страниц. Для этого всегда используют относительный.
Для правильного построения относительного пути, нужно разобраться с его синтаксисом:
- Знак точка “ . ” — указывает на текущую (корень) папку, где находится файл
- Две точки “ .. ” — указывает на родителя текущей папки, где находится файл
- Слэш “ / ” — показывает какую следующую папку/файл будет выбирать
Пока просто запомните эту информацию. Если во время прочтения, забудете, вернитесь к этому списку и вспомните.
Представим что у вас есть вот такая структура проекта. (папки — прямоугольники, файлы — названия с полоской)
Теперь напишем простой относительный путь до картинки first.png . Для этого, в файле index.html нужно прописать вот такую строчку:
Все работает. И можно было бы закончить, но нет ��.
Такой адрес показывает, что поиск файла будет происходить относительно папки, где расположен index.html .
Если бы, вы в начале пути указали / или C:// , это являлось бы абсолютным путем. Слэш в начале “ / ” (для Linux систем) или “ C:// ” (для windows) в начале показывает, что поиск файла будет происходит начиная от корня вашего диска (файловой системы).
Как реально выглядит расположение нашего проекта?
Корень проекта, тоже является папкой, поэтому не забывайте об этом.
Алгоритм работы поиска файла
Прописывая вот такой путь до файла:
Браузер начинает его искать вот таких образом:
- Подключение картинки написано в файле index.html. Смотрит где находится файл index.html. Находит эту папку. Это корень проекта
- В корне проекта ищет папку source. Если нашел, все ок, идем дальше
- В папке source ищет папку img
- В папке img находит файл first.png
Вот так происходит поиск файла по относительному пути. Если на какую то папку он не сможет найти, то картинка не будет показана и браузер выдаст ошибку в консоли.
Точка
Давайте теперь рассмотрим вариант посложнее.
В начале прописали ./ . Что же это значит? Я уже писал об этом ранее:
- Точка указывает на текущую папку, где находиться файл index.html. Т.е. на корень проекта
- Слэш после точки указывает, что внутри корня проекта будет искать папку, которая находиться после него. Т.е. source
В итоге получилась равнозначная запись предыдущей. Алгоритм поиска будет ровно такой же, просто предыдущая запись является сокращенной и более приятной глазу. Почти всегда используют первую запись пути.
Две точки
Но это еще не все. Давайте немного поменяем проект и добавим еще одну папку и страницу:
У нас появились новая папка about, в корне проекта, а в ней страница home.html
И если мы захотим использовать ту же запись для подключения картинки на странице home.html, то она не сработает. Потому, что поиск будет теперь происходить относительно папки about, а не корня проекта, как ранее.
Что же делать? На помощь нам приходят две точки “ .. ”.
Две точки позволяют, так сказать, провалиться на уровень выше. Т.е. поиск будет происходить не от текущей папки home, а от корня проекта.
- Подключение картинки написано в файле home.html. Смотрит где находится файл home.html. Находит эту папку. Это папка about
- Дальше смотрит кто является родителем папки about. Им является корень проекта
- В корне проекта ищет папку source. Если нашел, все ок, идем дальше
- В папке source ищет папку img
- В папке img находит файл first.png
Если, например, внутри папки home была еще одна папка, и в ней была бы еще одна страница, то путь до файла first.png, внутри этой страницы, выглядел бы вот так:
Теперь все
Надеюсь теперь стало понятно, в чем разница между абсолютным путем и относительным, в чем разница между одной и двумя точками и зачем они нужны.
Если у вас еще остались вопросы, можете задать их в моем telegram чате. Так же я занимаюсь обучением программированию в своей telegram группе.
Как задать путь к файлу
Абсолютные и относительные ссылки. Как указать путь к файлу правильно Абсолютные ссылки всегда начинаются с имени протокола. Например http:// и содержат имя файла.
Относительные — ведут отсчет от корня сайта или текущего документа.
При обращении к каталогу без явного указания названия файла (то, что пишется в конце, после /fail.html) обычно открывается индексный файл — index.html. Это стоит помнить, чтобы всегда вы могли защитить свой сайт от мошенников. Об этом я рассказываю в настройках WP.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Если вы забыли как правильно написать ссылку в коде , то следует вернуться к этому посту.
Рассмотрим создание относительных ссылок более подробно.
Вариант 1 Фалы располагаются в одной папке?
Здесь все просто. Нужно сделать ссылку из исходного на ссылаемый. То есть вот так:
<a htrf separator» style=»clear: both; text-align: center;»> 
<a htrf separator» style=»clear: both; text-align: center;»> 
Здесь путь такой
<a htrf kodeht»> <a htrf separator» style=»clear: both; text-align: center;»> 
Здесь нужно выйти — ../ из одной и второй ../ папки и там уже найти файл
Как видите, ничего трудного нет в этом, если знать, как правильно обозначить путь к файлу.
Хочется предупредить, что этот метод указания пути к файлу не работает на локальном компьютере и годится, только для серверов.
Зато на компьютере вообще все проще простого.
Сейчас я вам расскажу пару фишек о том, как легко и точно прописать путь к файлу.
- Выбираете нужный вам файл
- Зажмите кнопку Shift и щелкаете правой кнопкой мыши.
- В открывшемся меню выбираете копировать путь к файлу.
- Вставляете сразу после = без кавычек. Они подставятся автоматически.
Если вы пользуетесь командной строкой на компьютере. Лично у меня она даже закреплена в панели задач. То..
- Открываете командную строку
- Просто перетаскиваете туда нужный файл
- Получаете точный путь к вашему файлу. Копируйте и наслаждайтесь!
На этом все на сегодня. Хочется добавить. что при создании папок и файлов не стоит пользоваться кириллицей и тем более пробелом, или разными регистрами символов.
Пробуйте, экспериментируйте и делитесь своими «фишками» и «кейсами».