Урок №24. HTML. Шляхи до файлів

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як встановити шляхи до файлів на веб-сторінці?

Шлях Опис
<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

Шлях до файлу описує розташування файлу в структурі папок веб-сайту.

Шляхи до файлів використовуються при посиланні на зовнішні файли, такі як:


Абсолютні шляхи до файлів

Абсолютний шлях до файлу - це повна URL-адреса до файлу на просторах Інтернету:

Приклад:

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
Спробуйте самі! »

Примітка: Тег <img> і атрибути src та alt пояснюються в розділі HTML зображення.

Відносні шляхи до файлів

Відносний шлях до файлу вказує на файл відносно поточної сторінки.

У цьому прикладі шлях до файлу вказує на файл у папці images, розташовану в корені поточного веб-сайту:

Приклад:

<img src="/images/picture.jpg" alt="Mountain">
Спробуйте самі! »

У цьому прикладі шлях до файлу вказується на файл у папці images, що знаходиться в поточній папці:

Приклад:

<img src="images/picture.jpg" alt="Mountain">
Спробуйте самі! »

У цьому прикладі шлях до файлу вказується на файл у папці images, розташовану в папці на один рівень вище над поточною папкою:

Приклад:

<img src="../images/picture.jpg" alt="Mountain">
Спробуйте самі! »

Найкраща практика

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


Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.