HTML з нуля: Як прописати шлях до файлу, картинки або сторінки. Урок №13

Коли ви створюєте сайт, майже завжди доводиться вставляти картинки, підключати файли або робити посилання на інші сторінки. І тут часто з’являється питання: “А як правильно прописати шлях?”

Не хвилюйтеся — усе простіше, ніж здається. Головне — зрозуміти логіку.

Що таке шлях до файлу

Шлях — це просто “адреса”, де лежить ваш файл. Браузер має знати, де шукати картинку, сторінку чи документ.
Наприклад, ви хочете показати картинку logo.png. Якщо вона лежить у тій самій папці, де й ваш HTML-файл, то шлях буде короткий:

<img src="logo.png" alt="Логотип">

Ось і все.

Якщо файл у іншій папці

Припустимо, у вас є папка images, і всередині неї — logo.png. Тоді шлях буде такий:

<img src="images/logo.png" alt="Логотип">

Браузер заходить у папку images і бере звідти картинку.

Якщо потрібно вийти з папки

А ось тут часто починаються плутанини.
Уявіть, ви знаходитеся в папці css, а картинка лежить рівнем вище — у корені сайту.
Щоб “вийти” з поточної папки, потрібно поставити дві крапки і слеш:

<img src="../logo.png" alt="Логотип">

../ — це означає “вийти на один рівень вище”.

Якщо ж картинка лежить у папці images, яка на рівень вище, тоді шлях буде:

<img src="../images/logo.png" alt="Логотип">

Тут ви спочатку “вийшли” з папки css, потім зайшли в images і взяли logo.png.

Посилання на іншу сторінку

Те саме працює і з посиланнями.
Наприклад, якщо ви хочете перейти з index.html на сторінку about.html, яка лежить у тій самій папці:

<a href="about.html">Про нас</a>

Якщо вона лежить вище —

<a href="../about.html">Про нас</a>

Якщо в іншій папці, наприклад pages/about.html —

<a href="pages/about.html">Про нас</a>

Повний шлях

Іноді використовують повну адресу, якщо файл лежить на іншому сайті:

<img src="https://www.overcod.net/images/logo.png" alt="Логотип">

Такий варіант підходить, коли ви берете картинку або файл із чужого домену.