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

🌳 Пути в вебе: как не заблудиться в файловой системе

Представьте, что ваш проект — это город, а файлы — здания. Чтобы добраться из точки А в точку Б, нужно знать маршрут. В HTML/JS/CSS маршруты называются путями (paths), и сегодня мы научимся их прокладывать как настоящие навигаторы!

📍 Абсолютные пути — точный адрес

Абсолютный путь — это полный URL от корня системы или домена. Как домашний адрес с индексом, городом и страной.

<!-- Примеры абсолютных путей -->
<img src="https://example.com/images/logo.png" alt="Логотип">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

🔥 Когда использовать: - Внешние ресурсы (CDN, чужие сайты) - Ссылки на другие домены - Когда файл очень далеко в структуре проекта

🧭 Относительные пути — маршрут от текущего местоположения

Работают от папки, где находится текущий файл. Как сказать "поверни налево у дуба, затем прямо до реки".

Базовые символы:

. — текущая папка
.. — родительская папка
/ — разделитель (для всех ОС в вебе!)

Структура примера:

project/
├── index.html
├── images/
│   └── photo.jpg
└── css/
    └── styles.css

<!-- Из index.html -->
<img src="images/photo.jpg" alt="Фото">  <!-- Вход в папку -->
<link href="css/styles.css" rel="stylesheet"> <!-- Вход в другую папку -->

<!-- Из styles.css */
background: url('../images/photo.jpg');  <!-- Выход на уровень выше -->

🗺️ Практикум: 5 реальных кейсов

Кейс 1. Доступ к родительскому каталогу

<!-- Файл: project/blog/post.html -->
<a href="../../index.html">На главную</a> <!-- Два уровня вверх -->

Кейс 2. Работа с медиа в подпапках

<!-- Файл: project/index.html -->
<video src="assets/videos/tutorial.mp4"></video>

Кейс 3. Ссылки между страницами

<!-- Файл: project/services/design.html -->
<a href="../dev/frontend.html">Наши разработчики</a>

Кейс 4. Подключение скриптов

<!-- Файл: project/admin/dashboard.html -->
<script src="../js/admin.js"></script>

Кейс 5. CSS-спрайты

/* Файл: project/css/ui.css */
.icon-home {
  background: url('../images/sprite.png') 0 0;
}

💡 Экспертные лайфхаки

Автодополнение — в VS Code начните вводить путь и нажмите Ctrl+Space для подсказок
Корневой доступ — в некоторых фреймворках можно использовать / в начале пути: html <img src="/assets/logo.png"> 
Безопасность — всегда проверяйте относительные пути после переименования папок
Отладка — если картинка не загружается, откройте DevTools (F12) → вкладка Network → ищите 404 ошибки

⚡ Проверь себя: мини-квиз

1. Как обратиться к data.json из project/js/app.js, если файл лежит в project/data/?
Ответ: ../data/data.json

2. Почему /images/photo.jpg может не работать локально?
Ответ: Начальный / указывает на корень сайта, а не проекта.

3. Как создать относительную ссылку на родительский каталог?
Ответ: Использовать ../