Относительные и абсолютные пути [Модуль 3: Ссылки и навигация]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Чтобы собрать веб-страницу или целый сайт, браузер должен понимать, как связаны между собой различные файлы: HTML-документы, таблицы стилей (CSS), изображения и скрипты. Для этого используются пути — адреса, которые указывают на местоположение файла. Пути бывают двух основных типов: абсолютные и относительные. Абсолютные пути — это полные адреса, начинающиеся с протокола (http/https) или с корневой директории сайта. Они уникальны и работают из любого места. Относительные пути, наоборот, указывают на файл относительно текущего документа. Они короче и удобнее при переносе сайта, но требуют понимания файловой структуры. В этих заданиях вы отработаете навыки использования обоих типов путей для подключения изображений и стилей, двигаясь от самых простых случаев к более сложным

Список тем

Абсолютный путь к изображению

id: 37802_paths-absolute-1

Самый простой способ отобразить изображение из интернета — использовать абсолютный путь. Ваша задача — вставить в тег <img> полный URL-адрес картинки, чтобы она появилась на странице. Это базовый навык для вставки контента с других сайтов или CDN.

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f0f2f5;
}
img {
  max-width: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

                     <!-- Отобразим картинку с удаленного сервера -->
<img input1="https://naytikurs.ru/img/1.png" alt="Пример изображения">

HTML

<!-- Отобразим картинку с удаленного сервера -->
<img input1="https://naytikurs.ru/img/1.png" alt="Пример изображения">

Абсолютный путь — это полный веб-адрес ресурса, который начинается с протокола `https://` или `http://`. Просто скопируйте предоставленный URL и вставьте его в качестве значения атрибута `src`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37802_paths-relative-same-folder-2

Представьте, что файл `index.html` и изображение `2.png` лежат в одной и той же папке. Чтобы связать их, не нужен полный URL. Достаточно указать имя файла. Укажите правильный относительный путь в атрибуте `src`.

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #eef;
  padding: 15px;
  box-sizing: border-box;
}
.card {
  text-align: center;
  background: white;
  padding: 10px;
  border-radius: 10px;
}
img {
  max-width: 100%;
  border-radius: 5px;
}

                     <div class="card">
  <p>Кот в той же папке:</p>
  <img src="input1" alt="Кот">
</div>

HTML

<div class="card">
  <p>Кот в той же папке:</p>
  <img src="input1" alt="Кот">
</div>

Если HTML-файл и изображение находятся в одной директории, для связи достаточно указать имя файла с расширением. Также можно использовать конструкцию `./`, которая явно указывает на текущую папку. Например, `./2.png`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Относительный путь: файл в дочерней папке

id: 37802_paths-relative-child-folder-3

Теперь усложним структуру. Ваш HTML-файл находится в корне проекта, а все изображения сложены в папку `img`. Чтобы сослаться на картинку `4.png` из папки `img`, нужно правильно построить путь. Допишите его.

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f5f5f5;
  font-family: sans-serif;
}
figure {
  margin: 0;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
}
figcaption {
  text-align: center;
  margin-top: 5px;
  color: #555;
}
img {
  max-width: 250px;
}

                     <figure>
  <img src="input1/4.png" alt="Пейзаж">
  <figcaption>Изображение из папки 'img'</figcaption>
</figure>

HTML

<figure>
  <img src="input1/4.png" alt="Пейзаж">
  <figcaption>Изображение из папки 'img'</figcaption>
</figure>

Чтобы сослаться на файл, который находится в подпапке (дочерней директории), нужно сначала указать имя папки, поставить слэш `/`, а затем — имя файла. Например: `имя_папки/имя_файла`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37802_paths-relative-parent-folder-4

Представим обратную ситуацию: ваш HTML-файл лежит в папке `pages`, а нужная картинка `5.png` — в главной папке проекта (на уровень выше). Чтобы 'подняться' на один уровень вверх, используется специальная конструкция. Укажите путь к изображению.

CSS

body {
  font-family: sans-serif;
  padding: 20px;
  text-align: center;
}
img {
  border: 3px solid steelblue;
  padding: 5px;
  max-width: 80%;
  margin-top: 10px;
}

                     <h1>Статья из папки 'pages'</h1>
<p>Изображение для статьи:</p>
<img src="input1/5.png" alt="Горы">

HTML

<h1>Статья из папки 'pages'</h1>
<p>Изображение для статьи:</p>
<img src="input1/5.png" alt="Горы">

Чтобы сослаться на файл в родительской директории (подняться на уровень вверх), используется конструкция `../`. Таким образом, путь будет выглядеть как `../имя_файла`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Корневой путь для CSS

id: 37802_paths-root-relative-5

Корневые пути начинаются с `/` и отсчитываются от корня (главной папки) сайта. Это удобно, потому что такой путь будет работать одинаково, на какой бы вложенной странице он ни находился. Подключите файл стилей `style.css`, который лежит в папке `styles` в корне сайта.

CSS

/* Этот CSS уже как бы подключен, но задание имитирует подключение другого файла */
body { 
  background-color: lightgreen;
  font-family: monospace;
  padding: 15px;
}
.message { 
  border: 2px dashed black;
  padding: 20px;
  text-align: center;
  background-color: white;
}
.message p {
  margin: 0;
  font-size: 16px;
}

                     <!-- Этот код находится в <head>, но для тренажера отображается в body -->
<link rel="stylesheet" href="input1/styles/main.css">

<div class="message">
  <p>Если фон стал зеленым, значит, стили подключены!</p>
</div>

HTML

<!-- Этот код находится в <head>, но для тренажера отображается в body -->
<link rel="stylesheet" href="input1/styles/main.css">

<div class="message">
  <p>Если фон стал зеленым, значит, стили подключены!</p>
</div>

Путь от корня сайта всегда начинается с символа `/`. Далее вы строите путь от главной папки сайта. В данном случае, нужно указать путь к папке `styles`, а затем к файлу `style.css`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Сложный относительный путь

id: 37802_paths-relative-complex-6

Теперь самая сложная структура. Ваш HTML-файл находится по пути `articles/tech/post.html`. Вам нужно сослаться на изображение `8.png`, которое лежит по пути `assets/images/`. Для этого нужно подняться на два уровня вверх, а затем спуститься в нужные папки.

CSS

body {
  padding: 15px;
  font-family: Arial, sans-serif;
  text-align: center;
  background: #fafad2;
}
img {
  max-width: 90%;
  border: 1px solid #ccc;
}

                     <h2>Глубоко вложенная страница</h2>
<p>Изображение находится по пути `assets/images/8.png`</p>
<img src="input1/assets/input2/8.png" alt="Сложный путь">

HTML

<h2>Глубоко вложенная страница</h2>
<p>Изображение находится по пути `assets/images/8.png`</p>
<img src="input1/assets/input2/8.png" alt="Сложный путь">

Каждая конструкция `../` поднимает вас на один уровень вверх. Чтобы подняться на два уровня (из `tech` в `articles`, а затем из `articles` в корень), нужно использовать `../../`. После этого вы окажетесь в корне и сможете спуститься в `assets/images/`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Ссылка на якорь в текущем документе

id: 37802_paths-anchor-link-7

Пути используются не только для файлов, но и для навигации внутри одной страницы. Это называется 'якорными ссылками'. Создайте ссылку, которая будет вести к блоку с `id="section-2"` в этом же документе. Для этого используется специальный символ.

CSS

body { 
  font-family: sans-serif; 
}
.nav { 
  background-color: #333;
  padding: 10px;
  text-align: center;
}
a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}
.section {
  height: 250px;
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 15px;
}
#section-2 {
  background-color: #f0fff0;
}

                     <div class="nav">
  <!-- Эта ссылка должна вести ко второму разделу -->
  <a href="input1">Перейти к разделу 2</a>
</div>

<div class="section" id="section-1">
  <p>Раздел 1</p>
</div>

<div class="section" id="section-2">
  <p>Раздел 2. Ссылка должна вести сюда.</p>
</div>

HTML

<div class="nav">
  <!-- Эта ссылка должна вести ко второму разделу -->
  <a href="input1">Перейти к разделу 2</a>
</div>

<div class="section" id="section-1">
  <p>Раздел 1</p>
</div>

<div class="section" id="section-2">
  <p>Раздел 2. Ссылка должна вести сюда.</p>
</div>

Чтобы сослаться на элемент с определенным `id` внутри текущего документа, в атрибуте `href` нужно указать символ `#`, а затем — значение `id` нужного элемента. Например, `#contacts`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку