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

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

На HTML странице часто приходится загружать различные файлы. Это ссылки на другие страницы, изображения, файлы стилей и другие. Чтобы файлы могли загрузиться, в коде страницы нужно указывать не только имя файла, но и его адрес. Существуют абсолютный и относительный путь к файлу. Рассмотрим их подробно.

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

Абсолютный путь к файлу — это URL-адрес, например https://yandex.ru. Абсолютный адрес обычно используется для перехода на другой сайт. Внутри одного сайта тоже можно использовать абсолютный путь к файлу, но так редко делают, потому что это неудобно. Абсолютный адрес можно указать не только для главной страницы сайта, но и для любой доступной страницы. Узнать адрес любой страницы очень просто, он отображается в адресной строке браузера. Если Вам нужно указать адрес страницы, то нужно открыть страницу в браузере и скопировать её адрес из адресной строки.

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

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

Самый простой вариант — это когда текущий и ссылаемый файлы находятся в одной папке. В этом случае нужно указывать только имя файла. Например ссылка на страницу page.html выглядит так:

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

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

Например, текущая страница находится в какой-то папке. Внутри этой папки есть папка myimages, а в ней картинка image.jpg. Добавим её страницу.

Может быть несколько уровней вложенности. В этом случае папки перечисляются через слеш от самой внешней до самой внутренней, а затем ставится имя файла. Например, в папке myimages находится папка newimages, а в ней уже находится картинка. Тогда картинка добавляется так:

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

Например, есть две папки, внешняя и внутренняя. Во внутренней находится наша страница, а во внешней находится страница page.html, на которую нужно сделать ссылку.

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

Например, если файл page.html находится в корне сайта, то независимо от расположения текущей страницы, ссылка на него выглядит так:

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

Коприрование материалов сайта возможно только с согласия администрации

HTML: Абсолютные и относительные ссылки

Все HTML ссылки делятся на внешние и внутренние. Внешние ссылки — это ссылки, ведущие с одного сайта на другой сайт или файл, расположенный на другом сайте. Внутренние ссылки — это ссылки, ссылающиеся с одной страницы сайта на другую страницу этого же сайта или на разделы этой же страницы.

Все ссылки можно также условно разделить на относительные и абсолютные. Относительные ссылки — это HTML ссылки, содержащие относительные пути, относительные ссылки могут быть только внутренними. Абсолютные ссылки — это ссылки, содержащие абсолютные пути, абсолютные ссылки могут быть как внешними так и внутренними.

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

Относительный путь означает, что указание пути на нужный файл или страницу вашего сайта начинается относительно каталога, в котором расположена страница со ссылкой, либо относительно корневого каталога сайта. Рассмотрим части, из которых может состоять относительный путь:

Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена.

Примечание: символы .. можно использовать сколько угодно раз подряд, используя их, вы поднимаетесь каждый раз на одну папку вверх. Однако, подниматься вверх можно до тех пор, пока не придете в корневую папку своего сайта. Выше этой папки подняться нельзя.

Примечание: когда символ » / » указывается первым, это означает начало пути от корневого каталога.

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

Абсолютный путь обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру — так выглядит абсолютный путь к конкретному веб-сайту. http:// — это протокол передачи данных, а www.пример.ру — имя сайта (домен).

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

Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URL расшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL — это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.

Пара примеров URL адресов:

"httр://www.puzzleweb.ru/" "httр://www.puzzleweb.ru/html/all_tags.php"

С этой темой смотрят:

Как сделать ссылку в html
Открытие html ссылки в новой вкладке
Как сделать картинку ссылкой
Ссылка на раздел страницы в html
HTML тег

Читать:

Как отменить подписку на макбуке

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Как прописывать пути к подключаемым файлам?

Представим есть папка «project». В ней ещё три папки такие как «HTML», «CSS» и «javaScript». В папке «HTML» есть файл index.html , а в папке «javaScript» есть файл code.js. Что надо написать в(index.html) атрибуте «src» тега «script» чтобы подключить файл code.js? Или так нельзя делать и нужно чтобы было так: папка с файлом index.html в которой папка с файлом code.js

Отслеживать

5,005 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков

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

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

Итак, начнем с определения самого термина «путь»:

Путь (англ. path) — набор символов, показывающий расположение файла в файловой системе, адрес каталога.

Википедия

Если говорить о сайтах, то путь — это то же, что и ссылка. Ссылки могут быть абсолютными и относительными. Рассмотрим оба варианта более подробно.

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

Абсолютный адрес ссылки на файл включает в себя протокол (например, http:// ), имя сайта в Сети, подкаталог (или несколько подкаталогов), название файла. Пример того, как выглядит абсолютный URL:

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

background-image: url(http://www.example.com/img/bg.png);

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

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

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

background-image: url(/img/bg.png);

Как легко определить корневой относительный адрес? Просто возьмите абсолютную ссылку и уберите из нее протокол и название домена, оставив слэш и все символы, которые идут дальше.

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

Пример I

Если наша таблица стилей style.css и файл с фоновым рисунком bg.png находятся в одной папке (не обязательно корневой), то относительный путь от таблицы до рисунка будет выглядеть так:

background-image: url(bg.png); /* вы просто пишете имя файла */

Пример II

Если таблица стилей находится в корне, а рисунок — в папке img , относительная ссылка будет таковой:

background-image: url(img/bg.png); /* слэш в начале не нужен */

Пример III

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

background-image: url(../bg.png); /* две точки — подняться на один уровень */

Пример IV

Если таблица стилей находится в двух папках, а рисунок соседствует с первой папкой, то относительный путь будет следующий:

background-image: url(../../bg.png); /* поднимаемся на два уровня */

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

background-image: url(../../../../bg.png);

В том случае, когда рисунок спрятан в папку img , а таблица стилей — в папку css , вам понадобится выйти из папки css и зайти в папку img . Вот так:

background-image: url(../img/bg.png);

Если папок несколько, необходимо также прописать их. Изменим предыдущий пример: представим, что в папке img есть еще одна папка backgrounds , в которой лежит наш рисунок. Относительный путь будет таким:

background-image: url(../img/backgrounds/bg.png);

Какой путь лучше использовать

Абсолютный адрес ссылки понадобится использовать, если файл, на который вы ссылаетесь, находится на другом сайте. В пределах одного сайта абсолютный путь практически не используется (хоть он и будет работать). Это связано с несколькими моментами: во-первых, такие ссылки могут быть весьма громоздкими, а во-вторых, если имя домена изменится, то возникнет проблема — все ссылки будут вести на старый домен, что может повлечь за собой множество ошибок и битых ссылок.

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

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

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

Далее в учебнике: свойство background-repeat — управление повтором фонового изображения.