Връзките и изображенията са два от най-често срещаните ресурси, които ще добавите към уеб страниците си, така че да знаете как да ги адресирате правилно е от ключово значение.
Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.
Всеки уебсайт трябва да препраща към определени ресурси, независимо дали са изображения, файлове или други уеб страници. Решаването как да се свърже с други файлове е изключително важно, за да се гарантира, че браузърите ги намират правилно.
Можете да се свържете към ресурси, като използвате относителен или абсолютен URL адрес. Това се отнася както за локални файлове на компютър, така и за базирани на протоколи URL адреси, достъпвани в мрежата.
Как да използвате абсолютен URL път
Абсолютният URL адрес съдържа целия път до определено местоположение на файл. Примерите за тях включват пълния път до файловете на вашия компютър:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///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 и styles.css.
- в index.html, добавете малко HTML код, за да създадете основен уебсайт:
<!DOCTYPE html>
<html lang="en">
<глава>
<заглавие> Моят уебсайт </title>
<мета charset="UTF-8">
<мета име="прозорец за изглед" съдържание="ширина=ширина на устройството, начален мащаб=1">
<връзка rel="таблица със стилове" href="styles.css" />
</head>
<тяло>
<div клас="контейнер">
<h1> Моят уебсайт </h1>
<стр> Добре дошли в моя уебсайт. </стр>
</div>
</body>
</html> - в styles.css, добавете малко стил към уеб страницата.
тяло {
семейство шрифтове: Arial, Helvetica, sans-serif;
}.контейнер {
дисплей: гъвкав;
flex-direction: колона;
подравняване на елементи: център;
}.mb28 {
margin-bottom: 28px;
} - в index.html, добавете маркер вътре в div на контейнера и добавете абсолютния URL адрес към основния сайт на Google ( https://www.google.com).
<a href="https://www.google.com" клас="mb28">Google.com</a> - Можете също да получите достъп до изображения онлайн, като използвате пълния абсолютен път до съхранения файл. Можете също така да предприемете допълнителни стъпки, за да сте сигурни, че сте добавили адаптивни изображения към вашия HTML уеб страница.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&авто=формат&годни=изрязване&w=3870&q=80" alt="Сладка снимка на птица" клас="mb28" ширина="900" височина="600"> - Кликнете върху index.html файл, за да го отворите в браузър и да видите изображението, извлечено от външното му местоположение.
- От главната папка на вашия уебсайт създайте нова папка за съхраняване на изображения, наречена Изображения. Вътре в папката добавете ново изображение и му дайте име, като напр CuteBird.jpg.
- Идентифицирайте абсолютния път до файла с изображение, който току-що сте добавили. Можете да направите това, като го намерите в навигационния път на приложението за управление на файлове на вашата операционна система. Ще трябва също да добавите името на файла в края на пътя. Например "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- в index.html, заменете маркера си за изображение с ново изображение, което използва абсолютния път, сочещ към CuteBird.jpg файл, съхранен на вашия компютър. Не забравяйте да добавите префикса file://, за да посочите ресурс на локална файлова система. В Unix и macOS след това можете да добавите абсолютния път, който сте идентифицирали в предишната стъпка. В Windows ще трябва да замените обратните наклонени черти с наклонени черти и да добавите допълнителна наклонена черта преди буквата на устройството, например:
- Кликнете върху index.html файл, за да го отворите в браузър и да видите изображението, съхранено на вашия компютър.
Как да използвате относителен URL път
Относителният URL адрес съхранява само част от URL адреса или пътя и обикновено е относителен към местоположението на текущия файл или раздел от уебсайт.
В горния пример за достъп Лого.ico от index.html като използвате относителен URL адрес, бихте използвали пътя „Images/Icons/Logo.ico“. Други примери включват:
- Pages/Bird1.html
- Изображения/CuteBird.jpg
- styles.css
Когато използвате същата структура на папки на друг компютър, уебсайтът пак ще може да извлече файла. Когато маршрутизирате през мрежата, вместо да използвате пълната връзка като " https://example.com/about", вместо това можете да използвате относително маршрутизиране:
- /about
- /contact
- /projects/local-clients
Можете да използвате относителен URL адрес, за да създадете връзки или референтни изображения във вашата HTML уеб страница.
- В корена на директорията на вашия уебсайт създайте нова папка, наречена Страници.
- В новата папка Страници създайте нов файл, наречен Bird1.html.
- Попълване Bird1.html с HTML код за създаване на страницата.
<!DOCTYPE html>
<html lang="en">
<глава>
<заглавие> птица 1 </title>
<мета charset="UTF-8">
<мета име="прозорец за изглед" съдържание="ширина=ширина на устройството, начален мащаб=1">
<връзка rel="таблица със стилове" href="../styles.css" />
</head>
<тяло>
<div клас="контейнер">
<h1> кафе </h1>
<стр> Кафето е сладка птица, която обича да играе! </стр>
</div>
</body>
</html> - Вътре в контейнера div добавете етикет за изображение и използвайте относителен URL адрес за връзка към CuteBird.jpg изображение.
<img src="../Images/CuteBird.jpg" alt="Сладка снимка на птица" клас="mb28" ширина="900" височина="700"> - В index.html файл, премахнете съществуващото съдържание вътре в контейнера div. Заменете го с единичен а етикет, който използва относителна връзка за отваряне на Bird1.html файл.
<div клас="контейнер">
<h1> Моят уебсайт </h1>
<стр> Добре дошли в моя уебсайт. </стр>
<a href="Pages/Bird1.html" клас="mb28">Птица 1: Кафе</a>
</div> - Кликнете върху index.html файл, за да го отворите в браузър, и щракнете върху новата връзка, за да отидете Bird1.html.
Сега можете да определите разликата между абсолютни и относителни URL адреси. Вече можете да полагате допълнителни грижи, за да гарантирате, че вашите ресурси винаги ще бъдат извличани.
Винаги трябва да гарантирате, че всички връзки, до които вашите потребители имат достъп, са безопасни и сигурни.
