Относительные и абсолютные пути - введение в HTML

Относительные и абсолютные пути #

С HTML у нас будет очень много различных файлов и папок, и изображений, и стилей. Поэтому нам надо понять как именно можно указывать месторасположение наших ресурсов.

Я подготовил несколько вариантов, ссылки на файл или ресурс.

1. "styles.css"

2. "./styles.css"

3. "./../styles.css"

4. "/my_styles/styles.css"

5. "http://www.povar.eu/style.css"

6. <a href="#">Empty link</a><br>

7. <a href="/">home</a>
  • Первый и второй вариант пытаются указать на один и тот же файл, который лежит в этой же папке.
  • Третий вариант ищет файл на один уровень выше.
  • Четвёртый в подпапке my_styles
  • Пятый вариант указывает абсолютный путь в интернете.
  • Шестой вариант - пример пустой ссылки на сайте. Заглушка во время создания.
  • Пример ссылки на корень сайта.

Пример в HTML #

Интернет построен на ссылках из одних документов на другие документы. Давайте рассмотрим пример.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пример ссылки в HTML</title>
</head>
<body>
<p>Здесь я хочу поставить ссылку на <a href="https://andron13.de/">свой собственный сайт</a>.
    Что бы на примере показать как в HTML делают ссылки</p>.
<p>А вот вторая ссылка на другой сайт в интернете - <a href="https://povar.eu/">сайт повара</a></p>.
</body>
</html>

Нюансы #

Данный синтаксис ссылок и написание путей(path) используется не только в ссылках на внутренние или внешние ресурсы, но и на другие файлы используемые в проекте: css, js, java, php и прочие.

Дополнительные ссылки #

  1. Спецификации ссылки по стандартам HTML