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

Обновлено: 21.11.2024

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

Любые ошибки при связывании одного с другим вызовут ошибку на вашем веб-сайте. Итак, в этой статье вы узнаете о пути к файлу HTML и о том, как связать один файл с другим без ошибок.

Путь к файлу HTML определяет расположение конкретного файла в структуре папок веб-сайта. Путь к файлу HTML используется для определения файла изображения, аудио, видео, CSS, JavaScript или отображения документа другого веб-сайта.

В основном атрибут «src» и атрибут «href» содержат пути к файлам HTML.

Многие компьютеры, в основном веб-серверы, чувствительны к регистру, а также не могут правильно обрабатывать пространство. Это может привести к ошибке на вашем сайте. Поэтому всегда не забывайте давать имена файлов строчными буквами и разделять слова символом «тире» (-) или символом подчеркивания (_). Компьютеры и языки программирования используют эти символы в качестве разделителя слов.

Как написать путь к файлу HTML

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

Атрибуты src и href содержат путь к HTML-файлу. Здесь мы объясняем типы путей к файлам и как писать пути к файлам.

Типы путей к файлам

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

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

Абсолютный путь к файлу содержит полный URL-адрес файла. Абсолютный путь к файлу работает только на сервере.

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

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

Здесь вы можете увидеть четыре типа примеров относительных путей к файлам.

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

Вот пример относительных путей к файлам.

Находится в той же папке

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

Находится в папке на один уровень ниже

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

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

Находится в папке на один уровень выше

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

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

Работа с нуля

Когда файл находится на двух или более уровнях выше текущей страницы. Тогда вот короткий процесс, работающий из корневого каталога. Этот путь к файлу HTML отправляет браузер в корневой каталог веб-страницы. И тогда браузер найдет конкретный файл.

В веб-разработке папка веб-сайта состоит из множества файлов, которые также содержат важные данные. Чтобы получить доступ к различным файлам в файле HTML, мы должны указать определенный путь относительно файла HTML, который обозначает расположение определенного файла в папке веб-сайта, и этот путь известен как путь к файлу HTML.

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

Типы пути к файлу HTML

В целом существует два типа путей к файлам HTML.

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

Упомянутые выше пути к файлам подробно объясняются ниже.

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

Этот путь к файлу в HTML представляет собой полный URL-адрес файла.

Синтаксис

Синтаксис абсолютного пути к файлу следующий.

Пример

img src = "https://linuxhint.com/wp-content/uploads/2019/11/Logo-final.jpg" alt = "Логотип" style = "width:300px" >

Вывод

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

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

Условие 1: внешний файл и текущий файл веб-страницы находятся в одной папке.

Когда файл находится в той же папке, что и файл текущей страницы.

html >
body >
img src = "nature.jpg" alt = "Nature" style = "width:300px" >
p >Изображение выше находится в той же папке, что и текущий файл веб-страницы. /p >
/ body >
/ html >

Вывод

Изображение успешно добавлено.

Условие 2. Когда файл находится в папке, расположенной над папкой файла веб-страницы.

Когда файл находится в папке, расположенной над папкой файла веб-страницы.

html >
body >
img src = "../image/nature.jpg" alt = "Nature" style = "width:300px" >
p >Вышеупомянутое изображение присутствует в папке, расположенной выше папки с текущим файлом веб-страницы. /p >
/ body >
/ html >

Вывод

Условие 3. Когда файл находится в папке, расположенной в корне веб-файла.

Когда папка, содержащая файл, находится в корне веб-файла.

html >
body >
img src = "/image/nature.jpg" alt = "Nature" style = "width:300px" >
p >The изображение выше находится в корне текущего веб-файла. /p >
/ body >
/ html >

Вывод

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

Заключение

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

Об авторе

Найма Афтаб

Я профессионал в области разработки программного обеспечения и очень люблю писать. Я посвятил себя техническому письму и делюсь своими знаниями через слова.

Путь к файлу — это концепция, используемая в HTML для определения пути к файлу в структуре папок соответствующего веб-сайта. Это специально используется для поиска точного местоположения файла в нужной папке, что означает, что он точно работает как ориентир или адрес определенного файла, который будет вызывать веб-браузер. Эта концепция в HTML в основном используется для обнаружения путей к файлам изображений, веб-страниц и файлов, файлов CSS, файлов сценариев, мультимедийных файлов, таких как видео, и т. д. Путь к файлу можно найти с помощью двух атрибутов, называемых src или href. Эти атрибуты помогают нам прикрепить внешний файл или источник к нашему HTML-документу.

Синтаксис

Веб-разработка, языки программирования, тестирование программного обеспечения и другое

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

Итак, вот синтаксис для включения этих файлов на веб-страницы следующим образом:

Синтаксис:

Это используется для вставки изображения на нашу веб-страницу.

Вот список некоторого пути с его описанием выглядит следующим образом:

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

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

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

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

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

Как работает путь к файлу в HTML?

Существует два типа путей к файлам: абсолютный путь к файлу и относительный путь к файлу.

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

Синтаксис: src="url";

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

alt="Мое изображение" style="width:400px">

Узнайте о различных способах определения пути к файлу для ссылки на какой-либо ресурс в документах HTML/CSS/JavaScript.

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

Указание на документ сценария
Отображение изображения
Загрузка файла CSS
Ссылка на другую страницу
Установка свойства background-image внутри правила стиля CSS на фактическое изображение
Загрузка другой страницы в iframe

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

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

Работа с путями к файлам

В корневом каталоге нашего веб-сайта находятся три папки: изображения, сценарии и стили. Он также содержит два файла с именами index.html и icon.jpg. Каждая из наших трех папок также содержит некоторые файлы. Вы можете полностью увидеть все это на диаграмме выше.

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

Ссылка на файл в том же каталоге

Допустим, вы находитесь в index.html и хотите сослаться на icon.jpg:

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

См. это довольно просто!

Ссылка на файл в родительском каталоге

Теперь все станет немного интереснее. В этом случае вы находитесь в index.html и хотите сослаться на theme.css:

HTML для этого будет выглядеть следующим образом:

Обратите внимание, что путь содержит имя папки, за которым следует косая черта, а затем имя файла. Чтобы обобщить это, ссылки на файлы вверх по иерархии в основном состоят из серии имен папок, разделенных косой чертой, пока вы не достигнете интересующего вас файла: папка1/папка2/папка3/file_i_want.jpg

Ссылка на файл в дочернем каталоге

Точно так же, как вы можете ссылаться вверх, вы также можете ссылаться вниз через дочерние элементы. Например, в этом случае вы находитесь в default.css и указываете icon.jpg в качестве фонового изображения внутри правила стиля:

Путь внутри этого правила стиля будет выглядеть следующим образом:

Чтобы спуститься по иерархии на одну папку, укажите символы ../. Чем больше из них вы связываете вместе, тем дальше вы уходите: ../../../someFile.jpg .

Ссылка на файл в другом каталоге

К этому моменту вы узнали, как использовать некоторые основные подходы для доступа к файлам с использованием синтаксиса имя_папки/ и ../.Давайте проверим это и посмотрим, что потребуется, чтобы файл default.css имел свойство стиля, которое ссылается на dance_banana.jpg в папке с изображениями:

Хотя это и выглядит сложно, это не более чем спуск по дереву и обратно:

Кнопка ../ возвращает вас из папки стилей в корень. В этот момент вы просто возвращаетесь туда, куда вам нужно. Этот подход представляет собой просто комбинацию обоих подходов, которые вы видели до сих пор.

Работа с нуля

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

Альтернативный способ доступа к файлам — указать путь к файлу, который всегда начинается с корня вашего сайта. Этот способ не заботится о том, где будет жить путь к файлу. Путь всегда начинается с корня. Звучит безумно, но это довольно легко реализовать. Давайте вернемся к default.css и получим доступ к изображению dance_banana.jpg, используя корневой подход, о котором вы только что говорили. Есть два способа получить доступ к файлам из корня, и мы рассмотрим оба.

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

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

При таком подходе не имеет значения, где находится файл default.css или куда он перемещается. Путь к dance_banana.jpg останется без изменений. Существует имя пути, который всегда начинается с корня, и это абсолютный путь. Независимо от того, где в структуре вашего проекта находятся ваши файлы HTML или CSS, ваша ссылка на ресурсы внутри них всегда будет начинаться с корня и никогда не изменится.

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

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

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

Заключение

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

Мой общий совет:

У вас также есть некоторые другие, более странные и редко используемые варианты, такие как ./, с которыми вы можете столкнуться, но мы собираемся притвориться, что этих вариантов не существует, и сосредоточимся на более популярных, которые вы видели здесь.< /p>

Есть вопрос или просто хотите поболтать? Оставляйте комментарии ниже или заходите на наши форумы (на самом деле это одно и то же!), где самые дружелюбные люди, с которыми вы когда-либо сталкивались, будут рады вам помочь!

Когда Кирупа не пишет о себе от третьего лица, он практикует социальное дистанцирование… даже в своих профилях в Twitter, Facebook и LinkedIn.

Нажмите "Подписаться", чтобы получать полезные советы, рекомендации, селфи и многое другое лично на вашу почту.

Читайте также: