Относительные адреса в HTML представляют собой метод указания путей к ресурсам на веб-странице относительно текущего расположения файла.
Понимание использования относительных адресов важно для правильной организации файлов и ссылок в вашем веб-проекте. Давайте рассмотрим, как они работают.
В текущем каталоге. Если ресурсы (например, изображения) находятся в том же каталоге, что и HTML-файл, вы можете использовать простой файловый указатель:
<img src="image.jpg" alt="Изображение">В подкаталоге. Если ресурсы расположены в подкаталоге, укажите имя подкаталога, а затем имя файла:
<img src="images/logo.png" alt="Логотип">Ссылка на другую HTML-страницу в том же каталоге
<a href="page2.html">Перейти на страницу 2</a>В этом примере href="page2.html" указывает, что страница page2.html находится в том же каталоге, что и текущая страница. При клике на эту ссылку произойдет переход на страницу page2.html.
Ссылка на страницу в подкаталоге
<a href="blog/post.html">Читать статью</a>В данном случае href="blog/post.html" указывает на страницу post.html, которая находится в подкаталоге blog. При клике на ссылку пользователь будет перенаправлен на страницу post.html внутри подкаталога blog.
Используйте ../ для перехода на уровень выше в структуре каталогов:
<a href="../index.html">Вернуться на главную</a>Использование ../ в адресе ссылки говорит о том, что страница index.html находится на уровень выше по структуре каталогов. При клике на эту ссылку осуществится переход на главную страницу, которая расположена в родительском каталоге.
Комбинируйте различные уровни каталогов в одном относительном адресе:
<img src="../../images/photo.jpg" alt="Фотография">Атрибут base внутри <head> устанавливает базовый URL для всех относительных ссылок на странице:
<head>
<base href="https://www.example.com/">
</head>
<body>
<a href="page.html">Перейти на страницу</a>
</body>Атрибут base внутри блока <head> устанавливает базовый URL для всех относительных ссылок на странице. В данном примере, даже если ссылка page.html указана относительно текущей директории, она будет обращаться к полному URL https://www.example.com/page.html.
Относительные адреса облегчают организацию файлов и ссылок в вашем веб-проекте. Понимание их принципов помогает создать читаемый и удобный для обслуживания код. Экспериментируйте, создавая различные структуры каталогов и проверяйте, как относительные адреса взаимодействуют с вашим проектом.
Будьте первым