Ссылки и изображения — это два наиболее распространенных ресурса, которые вы добавляете на свои веб-страницы, поэтому ключевое значение имеет знание того, как правильно к ним обращаться.
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Каждый веб-сайт должен ссылаться на определенные ресурсы, будь то изображения, файлы или другие веб-страницы. Решение о том, как связать другие файлы, чрезвычайно важно для обеспечения их правильного нахождения браузерами.
Вы можете ссылаться на ресурсы, используя относительный или абсолютный URL-адрес. Это относится как к локальным файлам на компьютере, так и к URL-адресам на основе протокола, доступ к которым осуществляется через Интернет.
Как использовать абсолютный путь URL
Абсолютный URL-адрес содержит полный путь к определенному местоположению файла. Примеры из них включают полный путь к файлам на вашем компьютере:
- файл:///C:/Пользователи/Шарл/Рабочий стол/test.html
- файл:///C:/Пользователи/Джон/Документы/Работа/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-адрес содержит всю информацию, необходимую для поиска файла или ресурса, к которому вы пытаетесь получить доступ. Это необходимо, если вы ссылаетесь на внешний сайт.
- Создайте простой веб-сайт в HTML создав новую папку и добавив два новых файла с именем index.html и стили.css.
- В index.html, добавьте HTML-код для создания простого веб-сайта:
<!ДОКТИП HTML>
<html язык ="en">
<голова>
<заголовок> Мой веб-сайт </title>
<мета кодировка ="UTF-8">
<мета имя ="окно просмотра" содержание ="ширина = ширина устройства, начальный масштаб = 1">
<ссылка отн="таблица стилей" ссылка="стили.css" />
</head>
<тело>
<раздел класс ="контейнер">
<h1> Мой веб-сайт </h1>
<п> Добро пожаловать на мой сайт. </п>
</div>
</body>
</html> - В стили.css, добавьте стиль к веб-странице.
тело {
семейство шрифтов: Arial, Helvetica, без засечек;
}.контейнер {
дисплей: гибкий;
flex-направление: столбец;
выравнивание элементов: по центру;
}.mb28 {
нижняя граница: 28px;
} - В index.html, добавьте тег внутри контейнера div и добавьте абсолютный URL-адрес на основной сайт Google ( https://www.google.com).
<ссылка ="https://www.google.com" класс="мб28">Google.com</ а> - Вы также можете получить доступ к изображениям в Интернете, используя полный абсолютный путь к сохраненному файлу. Вы также можете предпринять дополнительные шаги, чтобы убедиться, что вы добавили адаптивные изображения к вашему HTML веб-страница.
<источник изображения ="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&авто=формат&подходит = обрезка&ш=3870&д=80" альт="Милая птичка фото" класс="мб28" ширина ="900" высота="600"> - Нажать на index.html файл, чтобы открыть его в браузере и просмотреть изображение, полученное из его внешнего местоположения.
- В корневой папке вашего веб-сайта создайте новую папку для хранения изображений с именем Изображений. Внутри папки добавьте новое изображение и дайте ему имя, например Милая Птица.jpg.
- Определите абсолютный путь к файлу изображения, который вы только что добавили. Вы можете сделать это, найдя его в пути навигации приложения файлового менеджера вашей операционной системы. Вам также нужно будет добавить имя файла в конец пути. Например, "C:\Users\Sharp\Desktop\Website\Images\CuteBird.jpg"
- В index.html, замените тег изображения новым изображением, которое использует абсолютный путь, указывающий на Милая Птица.jpg файл, хранящийся на вашем компьютере. Не забудьте добавить префикс file:// для обозначения ресурса локальной файловой системы. В Unix и macOS вы можете добавить абсолютный путь, указанный на предыдущем шаге. В Windows вам нужно будет заменить обратную косую черту на прямую косую черту и добавить дополнительную косую черту перед буквой диска, например:
- Нажать на index.html файл, чтобы открыть его в браузере и просмотреть изображение, хранящееся на вашем компьютере.
Как использовать относительный путь URL
Относительный URL-адрес хранит только часть URL-адреса или пути и обычно относится к местоположению текущего файла или раздела веб-сайта.
В приведенном выше примере для доступа Logo.ico от index.html используя относительный URL-адрес, вы должны использовать путь «Images/Icons/Logo.ico». Другие примеры включают:
- Страницы/Bird1.html
- Изображения/CuteBird.jpg
- стили.css
Когда вы используете ту же структуру папок на другом компьютере, веб-сайт все равно сможет получить файл. При маршрутизации через Интернет вместо использования полной ссылки, такой как " https://example.com/about", вместо этого вы можете использовать относительную маршрутизацию:
- /about
- /contact
- /projects/local-clients
Вы можете использовать относительный URL-адрес для создания ссылок или ссылок на изображения на веб-странице HTML.
- В корне каталога вашего веб-сайта создайте новую папку с именем Страницы.
- Внутри новой папки Pages создайте новый файл с именем Bird1.html.
- Заполнить Bird1.html с HTML-кодом для создания страницы.
<!ДОКТИП HTML>
<html язык ="en">
<голова>
<заголовок> Птица 1 </title>
<мета кодировка ="UTF-8">
<мета имя ="окно просмотра" содержание ="ширина = ширина устройства, начальный масштаб = 1">
<ссылка отн="таблица стилей" ссылка="../стили.css" />
</head>
<тело>
<раздел класс ="контейнер">
<h1> Кофе </h1>
<п> Кофе — сладкая птичка, которая любит играть! </п>
</div>
</body>
</html> - Внутри контейнера div добавьте тег изображения и используйте относительный URL-адрес для ссылки на Милая Птица.jpg изображение.
<источник изображения ="../Изображения/CuteBird.jpg" альт="Милая птичка фото" класс="мб28" ширина ="900" высота="700"> - в index.html файл, удалите существующее содержимое внутри контейнера div. Замените его на один а тег, который использует относительную ссылку для открытия Bird1.html файл.
<раздел класс ="контейнер">
<h1> Мой веб-сайт </h1>
<п> Добро пожаловать на мой сайт. </п>
<ссылка ="Страницы/Bird1.html" класс="мб28">Птица 1: Кофе</ а>
</div> - Нажать на index.html файл, чтобы открыть его в браузере, и нажмите на новую ссылку, чтобы перейти к Bird1.html.
Теперь вы можете определить разницу между абсолютными и относительными URL-адресами. Теперь вы можете позаботиться о том, чтобы ваши ресурсы всегда были доступны.
Вы также должны всегда следить за тем, чтобы все ссылки, к которым могут получить доступ ваши пользователи, были безопасными и надежными.
