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 и други.


Работа от корена

Всички подходи, които сме виждали досега с референтни файлове, това, което е известно като относителен път. Те се наричат ​​по този начин, защото пътят на файла, който посочвате, зависи изцяло от това, къде са поставени вашите HTML или CSS документи. Ако преместите документа си в HTML или CSS, вероятно ще трябва да актуализирате пътя на ../ или folderName/entries, които съдържа вашият файлов път, за да отразите новите координати. Алтернативен начин за достъп до файловете е да посочите пътя на файла, който винаги започва от корена на вашия сайт. По този начин не се интересуваме къде ще се намира пътят на файла. Пътят винаги започва от корена. Звучи шантаво, но е доста лесно да се приложи. Нека да се върнем към default.css и да осъществим достъп до изображението dancing_banana.gif, като използваме коренния подход. Има два начина за достъп до файлове от корена.

Абсолютни пътища за файлове

Един от начините, по който можете да започнете от корена е да префиксирате пътя си със знака наклонена черта(/). Този знак кара вашият браузър да отиде до самото начало на файловият път, използващ този подход, ще изглежда така:

Опитайте сами »

Като прилагаме този подход, няма значение къде ще е съхранен файлът default.css. Пътят към dancing_banana.gif ще остане непроменен. Имаме име за път, което винаги започва от корена и това е абсолютен път. Без значение къде във вашата структура на проекта се помещават вашите HTML или CSS файлове, иззвикването на ресурси от вътре в тях винаги ще започне от корена. Сега можете да зададете абсолютен път по различен начин. Можете да посочите името на домейна като част от ресурса, до който имате достъп:

Крайният резултат е идентичен с този, с който сте използвали само символа /, но този подход ви позволява да препращате файлове, намиращи се извън вашия собствен сайт, ако имате нужда. Абсолютната пътека на файла е пълният URL адрес на интернет файла:

Опитайте сами »

Протоколи за относителни URL адреси

Съдържанието ви обикновено ще се показва или в HTTPS или HTTP. Освен ако не правите нещо наистина сигурно, има вероятност да сте в HTTP:

Всичко това няма значение … освен когато зареждате ресурси и пресичате потоци между местоположение HTTP и HTTPS. Например, ако сте на страница и сте сервирали надеждно чрез HTTPS, която се опитва да зареди нещо от HTTP местоположение, браузърът ви вероятно ще се сконфузи малко: Начинът, по който да избегнете този проблем, е напълно да премахнете протокола и да предоставите това, което е известно като прототипен URL адрес:

Обърнете внимание, че този URL адрес не съдържа HTTP или HTTPS отпред. Той приема всеки протокол, на който се намира страницата, за да гарантира, че всички ресурси се зареждат последователно. Това означава, че ако се опитвате да осъществите достъп до това изображение от местоположение в HTTPS, пътят ще се третира като действително https://www.w3schools.bg/images/picture.jpg.

Относителният път на файла сочи към файл, отнасящ се до текущата страница. В този пример пътят към файла сочи към файл в папката с изображения, намираща се в основата на текущата мрежа:

Опитайте сами »

В този пример, пътят към файла сочи към файл в папката с изображения, намираща се в текущата папка:

Опитайте сами »

В този пример, пътят към файла сочи към файл в папката с изображения, намиращ се в папката с едно ниво над текущата папка:

Опитайте сами »

Най-добри практики

Най-добрата практика е да използвате относителни файлови пътища (ако е възможно). Когато използвате относителни пътища за файлове, вашите уеб страници няма да бъдат обвързани с текущия ви базов URL адрес. Всички връзки ще работят на собствения ви компютър (localhost), както и на текущия ви домейн и вашите бъдещи обществени домейни.

В заключение

В интернет има изписани томове, които обсъждат дали трябва да използвате абсолютния вариант на пътя или вариант на относителна пътека, когато се свързвате с ресурси от вътрешните си HTML и CSS документи. В по-голямата си част това няма значение.
Нашето общо ръководство е:
Ако ресурсът, който искам да спомена, е позициониран на различен домейн, единствената възможност е да използвате напълно квалифициран абсолютен път (т.е .: //www.w3schools.bg/logo.png ). Ако ресурсът, който искам да споменавам, живее в рамките на сървъра или шаблона, прогнозирането къде ще се появи файловият път може да е трудно. В тези моменти използвам нормална абсолютна пътека (т.е .:/images/foo.png ). Ако съм на сигурна страница, която се показва чрез HTTPS, всяко извличане на външни ресурси трябва да използва протокол, който е относим URL адрес (т.е .: //www.w3schools.bg/script.js ). За всички останали случаи просто използвайте относителна пътека. Или не. Докато страницата Ви се зарежда и работи добре, вие сте в добра кондиция.