Поиск по сайту:

В чем разница между относительным и абсолютным URL-адресом?

Ссылки и изображения — два наиболее распространенных ресурса, которые вы добавляете на свои веб-страницы, поэтому важно знать, как правильно обращаться к ним.

Каждый веб-сайт должен ссылаться на определенные ресурсы, будь то изображения, файлы или другие веб-страницы. Решение о том, как ссылаться на другие файлы, чрезвычайно важно для обеспечения их правильного поиска браузерами.

Вы можете ссылаться на ресурсы, используя относительный или абсолютный URL-адрес. Это относится как к локальным файлам на компьютере, так и к URL-адресам на основе протокола, доступ к которым осуществляется через Интернет.

Как использовать абсолютный URL-путь

Абсолютный URL-адрес содержит полный путь к определенному местоположению файла. Примеры: полный путь к файлам на вашем компьютере:

  • файл:///C:/Users/Sharl/Desktop/test.html
  • файл:///C:/Users/John/Documents/Work/Q4Summary.docx
  • файл:///C:/Users/Mark/Documents/Music/Recording.mp3

Другой пример включает полный URL-адрес протокола, который можно использовать для идентификации ресурса для отправки через Интернет. Чаще всего они начинаются с «https» или «http»:

  • https://www.google.com
  • https://calendar.google.com/calendar
  • https://www.airbnb.com.au/rooms

Абсолютный URL-адрес содержит всю информацию, необходимую для поиска файла или ресурса, к которому вы пытаетесь получить доступ. Это необходимо, если вы ссылаетесь на внешний сайт.

  1. Создайте простой веб-сайт в HTML, создав новую папку и добавив два новых файла с именами index.html и styles.css.

  2. В index.html добавьте HTML-код для создания простого веб-сайта:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title> My Website </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> My Website </h1>
            <p> Welcome to my website. </p>
        </div>
    </body>
</html>

  3. В style.css добавьте стили веб-страницы.

    body {
    font-family: Arial, Helvetica, sans-serif;
}
 
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.mb28 {
    margin-bottom: 28px;
}

  4. В index.html добавьте тег внутри контейнера div и добавьте абсолютный URL-адрес основного сайта Google (https://www.google.com).

    <a href="https://www.google.com" class="mb28">Google.com</a>

  5. Вы также можете получить доступ к изображениям в Интернете, используя полный абсолютный путь к сохраненному файлу. Вы также можете предпринять дополнительные шаги, чтобы убедиться, что вы добавили адаптивные изображения на свою веб-страницу HTML.

    <img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600">

  6. Щелкните файл index.html , чтобы открыть его в браузере и просмотреть изображение, полученное из его внешнего расположения.

  7. В корневой папке вашего веб-сайта создайте новую папку для хранения изображений под названием Изображения. Внутри папки добавьте новое изображение и дайте ему имя, например CuteBird.jpg.

  8. Определите абсолютный путь к файлу изображения, который вы только что добавили. Вы можете сделать это, найдя его в пути навигации приложения файлового менеджера вашей операционной системы. Вам также необходимо будет добавить имя файла в конец пути. Например, «C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg»

  9. В index.html замените тег изображения новым изображением, которое использует абсолютный путь, указывающий на файл CuteBird.jpg, хранящийся на вашем компьютере. Не забудьте добавить префикс file://, чтобы указать ресурс локальной файловой системы. В Unix и macOS вы можете затем добавить абсолютный путь, который вы определили на предыдущем шаге. В Windows вам потребуется заменить обратную косую черту прямой косой чертой и добавить дополнительную косую черту перед буквой диска, например:

    <img src="file:///C:/Users/Sharl/Desktop/Website/Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">

  10. Щелкните файл index.html , чтобы открыть его в браузере и просмотреть изображение, хранящееся на вашем компьютере.

Как использовать относительный URL-путь

Относительный URL-адрес хранит только часть URL-адреса или пути и обычно относится к местоположению текущего файла или раздела веб-сайта.

В приведенном выше примере для доступа к Logo.ico из index.html с использованием относительного URL-адреса вы должны использовать путь «Images/Icons/Logo.ico». Другие примеры включают в себя:

  • Страницы/Bird1.html
  • Изображения/CuteBird.jpg
  • стили.css

Если вы используете ту же структуру папок на другом компьютере, веб-сайт все равно сможет получить файл. При маршрутизации через Интернет вместо использования полной ссылки, например «https://example.com/about», вы можете использовать относительную маршрутизацию:

  • /о
  • /контакт
  • /проекты/локальные клиенты

Вы можете использовать относительный URL-адрес для создания ссылок или справочных изображений внутри вашей веб-страницы HTML.

  1. В корне каталога вашего веб-сайта создайте новую папку под названием Pages.
  2. Внутри новой папки Pages создайте новый файл с именем Bird1.html.

  3. Заполните Bird1.html HTML-кодом, чтобы создать страницу.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bird 1 </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="../styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> Coffee </h1>
            <p> Coffee is a sweet bird who loves to game! </p>
        </div>
    </body>
</html>

  4. Внутри контейнера div добавьте тег изображения и используйте относительный URL-адрес для ссылки на изображение CuteBird.jpg.

    <img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">

  5. В файле index.html удалите существующее содержимое внутри контейнера div. Замените его одним тегом a, который использует относительную ссылку для открытия файла Bird1.html.

    <div class="container">
    <h1> My Website </h1>
    <p> Welcome to my website. </p>
    <a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a>
</div>

  6. Щелкните файл index.html , чтобы открыть его в браузере, и щелкните новую ссылку, чтобы перейти к Bird1.html.

Доступ к файлам с использованием абсолютных или относительных URL-ссылок

Теперь вы можете определить разницу между абсолютными и относительными URL-адресами. Теперь вы можете проявлять особую осторожность, чтобы гарантировать, что ваши ресурсы всегда будут извлечены.

Вы также должны всегда обеспечивать безопасность всех ссылок, к которым могут получить доступ ваши пользователи.

Статьи по данной тематике: