Как указать путь к файлу
Путь к файлу описывает расположение файла в структуре папок веб сайта.
Примеры пути к файлам
| Путь | Описание |
|---|---|
| <img src="picture.jpg"> | picture.jpg находится в той же папке, что и текущая страница |
| <img src="images/picture.jpg"> | picture.jpg находится в папке images в текущей папке |
| <img src="/images/picture.jpg"> | picture.jpg находится в папке images в корне текущего веб-сайта |
| <img src="../picture.jpg"> | picture.jpg находится в папке на один уровень выше текущей папки |
Пути к HTML файлам
Путь к файлу описывает расположение файла в структуре папок вебсайта.
Пути к файлам используются при связывании с внешними файлами, например:
- Веб-страницы
- Изображения
- Таблицы стилей
- JavaScripts
Абсолютные пути к файлам
Абсолютный путь к файлу - это полный URL адрес файла:
Пример
Теги <img> и атрибуты src и alt описаны в главе HTML Изображения.
Относительные пути к файлам
Относительный путь к файлу указывает на файл относительно текущей страницы.
В этом примере путь к файлу указывает на файл в папке images, расположенной в корне текущего веб-сайт:
Пример
В этом примере путь к файлу указывает на файл в папке images находятся в текущей папке:
Пример
В этом примере путь к файлу указывает на файл в папке images находятся в папке на один уровень выше текущей папки:
Пример
Практика лучше всего
Рекомендуется использовать относительные пути к файлам (если возможно).
При использовании относительных путей к файлам, веб-страницы не будут привязаны к вашему текущему базовому URL-адрес. Все ссылки будут работать на вашем собственном компьютере (localhost), а также на вашем текущем общественном домене и вашем будущем публичном домене.
Упражнения
Тесты
КАК СДЕЛАТЬ
ПОДЕЛИТЬСЯ
СЕРТИФИКАТЫ
Сообщить об ошибке
Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:
Ваше предложение:
Спасибо, за вашу помощь!
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание. Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, невозможно гарантировать правильность всего содержимого. Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности. Авторское право 1999 - 2021 Все права защищены.
Работает на W3.CSS.
Относительные - ведут отсчет от корня сайта или текущего документа.
При обращении к каталогу без явного указания названия файла (то, что пишется в конце, после /fail.html) обычно открывается индексный файл - index.html. Это стоит помнить, чтобы всегда вы могли защитить свой сайт от мошенников. Об этом я рассказываю в настройках WP.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Если вы забыли как правильно написать ссылку в коде , то следует вернуться к этому посту.
Рассмотрим создание относительных ссылок более подробно.
Вариант 1 Фалы располагаются в одной папке?
Здесь все просто. Нужно сделать ссылку из исходного на ссылаемый. То есть вот так:
Здесь путь такой
Здесь нужно выйти - ../ из одной и второй ../ папки и там уже найти файл
Как видите, ничего трудного нет в этом, если знать, как правильно обозначить путь к файлу.
Хочется предупредить, что этот метод указания пути к файлу не работает на локальном компьютере и годится, только для серверов.
Зато на компьютере вообще все проще простого.
Сейчас я вам расскажу пару фишек о том, как легко и точно прописать путь к файлу.
- Выбираете нужный вам файл
- Зажмите кнопку Shift и щелкаете правой кнопкой мыши.
- В открывшемся меню выбираете копировать путь к файлу.
- Вставляете сразу после = без кавычек. Они подставятся автоматически.
Если вы пользуетесь командной строкой на компьютере. Лично у меня она даже закреплена в панели задач. То..
- Открываете командную строку
- Просто перетаскиваете туда нужный файл
- Получаете точный путь к вашему файлу. Копируйте и наслаждайтесь!
На этом все на сегодня. Хочется добавить. что при создании папок и файлов не стоит пользоваться кириллицей и тем более пробелом, или разными регистрами символов.
Пробуйте, экспериментируйте и делитесь своими "фишками" и "кейсами".
В этой инструкции я покажу, как скопировать полный путь к файлу в Windows 10. Иногда нам для поиска информации или работы других программ, необходимо скопировать путь расположения файла, папки или каталога. Чтобы найти определенный файл в иерархии каталогов, необходимо указать абсолютный путь к нему.
Как посмотреть путь к файлу?
С помощью Shift
Например, путь к рабочему столу Windows 10 на моем компьютере имеет вид ⇒ C:\Users\Alex\Desktop, а к папке Temp ⇒ C:\Program Files (x86)\Temp
Через свойства папки или файла
Следующим способом удобно смотреть расположение папки или документа, но скопировать весь путь не получиться, так как последняя директория в пути не указывается.
Например путь к графическому изображению help.jpg
вместо ⇒E:\Фотоматериалы и изображения\Иконки\help.jpg
будет выглядеть как ⇒
E:\Фотоматериалы и изображения\Иконки
Узнаем путь к файлу в командной строке Windows
- Открываем командную строку. Сделать это можно, нажав комбинацию клавиш Win+R и в открывшейся строке ввести cmd.
- Перетаскиваем иконку файла или папки в основное окно программы cmd.exe.
- Полный путь до файла будет скопирован в окно командной строки. Если это будет файл запуска, например exe, то при нажатии кнопки Ввод (Enter) запуститься программа.
Для примера создадим документ Word с именем Doc3 и поместим его в любую папку и посмотрим его путь в командной строке.
Как скопировать путь к файлу на Mac
Пути к файлам и папкам на Маке можно узнать так же, как и в Виндовс через Shift, только названия кнопок другие ⇒
В буфер обмена скопируется полный путь к файлу например ⇒
Скопировать полный путь до любого файла достаточно просто и с этим справится любой пользователь ПК или ноутбука.
Абсолютный и относительный пути
Путь (от англ. path) — набор символов, показывающий расположение файла или каталога в файловой системе.
Например, в следующей записи G:\EPIM Pro\Необходимые программы\ABBYY FineReader 10.0.102.95 Pro\readme.txt
readme.txt — это имя файла, а G:\EPIM Pro\Необходимые программы\ABBYY FineReader 10.0.102.95 Pro — путь к нему.
Полный (абсолютный) путь к файлу начинается с логического имени диска. Далее идут имена вложенных друг в друга папок (их может быть сколько угодно много). В последней папке содержится требуемый файл.
Стандартный путь состоит из трех компонентов ⇒
Если присутствуют все три компонента, путь является абсолютным. Полный путь всегда начинается с корневого каталога.
Если буква тома или диска не указана и имя каталога начинается с символа разделителя, то такой путь задан относительно корня текущего диска. В противном случае путь задан относительно текущего каталога.
В следующей таблице показаны некоторые возможные пути к каталогам и файлам ⇒
Тем, кто изучал и знает HTML известно, что в качестве значения атрибута href тега a необходимо указать путь к файлу, на который делается ссылка.
Или, например, значением атрибута src тега img является путь к файлу с изображением, которое будет располагаться на странице.
Путь к файлу - это его адрес. Адрес может быть абсолютным и относительным.
Итак, что такое абсолютный и относительный пути к файлу?
Абсолютный путь к файлу
Абсолютный путь к файлу (иногда говорят полный путь к файлу) или абсолютный адрес работает везде, где прописана ссылка - независимо от имени сайта и его расположения.
Любую абсолютную ссылку (то есть ссылку, содержащую адрес сайта) можно разместить на любой странице любого другого сайта или текущего сайта, и она будет рабочей, то есть, кликнув по ней, пользователь обязательно перейдет по указанному в ней адресу.
Абсолютный путь к файлу, как правило, используется для создания ссылок на другие сайты. Конечно, такие ссылки можно использовать и внутри сайта, но подобное происходит редко, так как в основном абсолютные ссылки длинны и неудобны .
Относительный путь к файлу
Для перехода между страницами внутри сайта используют относительные ссылки или относительные адреса. Относительный путь к файлу указывают относительно текущего документа или относительно корневого каталога. И здесь возможны варианты.
Рассмотрим несколько примеров.
Файлы расположены в одной папке
Главная страница этого сайта - файл index.php и страница, содержащая перечень статей - файл articles.php находятся в корневом каталоге (в одной папке). Для создания ссылки с одной из этих страницы на другую, необходимо в качестве значения атрибута href тега a указать имя файла, на который делается ссылка.
<a href= "index.php" >
Относительная ссылка на главную страницу - файл index.php
</a>
Ссылка на файл, расположенный во вложенной папке
Файл articles.php находится в корневом каталоге, а файл с изображением, которое необходимо вставить на страницу располагается во вложенной папке img корневого каталога.
Вложенная папка или каталог – это папка, которая расположена внутри другого каталога. Условно назовем это первым уровнем вложенности.
Итак, для указания относительного пути к файлу с изображением необходимо сначала указать имя папки, в которой расположен нужный файл, а затем через слэш / непосредственно имя файла.
<p> <img src="img/peng_128.jpg">
Относительный путь к файлу с изображением.
</p>
Относительный путь к файлу с изображением.
Ссылка из вложенной папки
Теперь наоборот: допустим, текущий файл находится во вложенной папке, а файл index.php , на который делается ссылка, расположен в корневом каталоге. В этом случае относительная ссылка (из файла, расположенного во вложенной папке) на файл index.php будет иметь следующий вид:
<a href= "../index.php" >
Относительная ссылка на главную страницу из файла, находящегося во вложенной папке
</a>
То есть перед именем файла, на который делается ссылка из вложенного каталога, необходимо поставить две точки и слэш ../ .
Второй уровень вложенности каталога
Еще один пример работы с относительными ссылками.
Файл, на который делается ссылка, имеет второй уровень вложенности, то есть он расположен в папке, которая уже является вложенной.
Тогда, чтобы сделать ссылку на файл, который расположен в корневом каталоге, необходимо добавить еще две точки и слэш ../ .
<a href= "../../index.php" >
Относительная ссылка на главную страницу из файла, имеющего второй уровень вложенности
</a>
Подведем итог
Таким образом, относительные ссылки, относительный путь к файлу или относительный адрес используют для организации ссылочной структуры между файлами, которые являются страницами одного сайта, а также файлами, содержащими изображения, фотографии и другие объекты, которые также непосредственно относятся к текущему сайту.
То есть все файлы, это и страницы сайта, и различные объекты, вставляемые на эти страницы, расположены на разных уровнях вложенности, но в одном корневом каталоге .
Если требуется сослаться на какую-либо страницу другого сайта или вставить какой-либо объект, расположенный на другом сайте, то здесь уже нужно использовать абсолютный путь к файлу.
Читайте также: