Која је разлика између релативне и апсолутне УРЛ адресе?

Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.

Свака веб локација мора да упућује на одређене ресурсе, било да су слике, датотеке или друге веб странице. Одлучивање о начину повезивања са другим датотекама је изузетно важно како би се осигурало да их прегледачи правилно лоцирају.

Можете да повежете ресурсе користећи релативну или апсолутну УРЛ адресу. Ово се односи и на локалне датотеке на рачунару и на УРЛ-ове засноване на протоколу којима се приступа преко веба.

Како користити апсолутну УРЛ путању

Апсолутни УРЛ садржи целу путању до одређене локације датотеке. Примери ових укључују пуну путању до датотека на вашем рачунару:

• филе:///Ц:/Усерс/Схарл/Десктоп/тест.хтмл
• филе:///Ц:/Усерс/Јохн/Доцументс/Ворк/К4Суммари.доцк
• филе:///Ц:/Усерс/Марк/Доцументс/Мусиц/Рецординг.мп3

Други пример укључује УРЛ пуног протокола, који можете користити да идентификујете ресурс за слање преко интернета. Најчешће, они почињу са "хттпс" или "хттп":

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

Апсолутни УРЛ садржи све информације потребне за лоцирање датотеке или ресурса којем покушавате да приступите. Ово је потребно ако се повезујете са спољним сајтом.

1. Направите једноставну веб локацију у ХТМЛ-у креирањем нове фасцикле и додавањем две нове датотеке тзв индек.хтмл и стилес.цсс.
2. У индек.хтмл, додајте неки ХТМЛ код да бисте направили основну веб локацију:

   <!ДОЦТИПЕ хтмл>
   <хтмл ланг="ен">
   <глава>
   <наслов> Мој веб-сајт </title>
   <мета цхарсет="УТФ-8">
   <мета наме="виевпорт" цонтент="видтх=девице-видтх, инитиал-сцале=1">
   <линк рел="стилесхеет" хреф="стилес.цсс" />
   </head>
   <тело>
   <див цласс="контејнер">
   <х1> Мој веб-сајт </h1>
   <стр> Добродошли на моју веб страницу. </п>
   </div>
   </body>
   </html>

3. У стилес.цсс, додајте мало стила веб страници.

   тело {
    породица фонтова: Ариал, Хелветица, санс-сериф;
   }
   .контејнер {
    дисплеј: флек;
    флек-дирецтион: колона;
    алигн-итемс: центар;
   }
   .мб28 {
    маргин-боттом: 28пк;
   }

4. У индек.хтмл, додајте ан означите унутар див контејнера и додајте апсолутни УРЛ на Гоогле-ов главни сајт ( https://www.google.com).

   <а хреф="https://www.google.com" цласс="мб28">Гоогле.цом</а>

5. Такође можете приступити сликама на мрежи користећи пуну апсолутну путању до сачуване датотеке. Такође можете предузети додатне кораке да бисте били сигурни да сте додали слике које реагују на ваш ХТМЛ веб страна.

   <имг срц="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&икид=МнвкМјА3фДБ8МХкваГ90би1вИВдлфХк8фГВуфДБ8фХк8&ауто=формат&фит = усев&в=3870&к=80" алт="Слика слатке птице" цласс="мб28" видтх="900" висина="600">

6. Кликните на индек.хтмл датотеку да бисте је отворили у прегледачу и видели слику преузету са њене спољне локације.
7. Из основног директоријума ваше веб локације направите нову фасциклу за чување слика, тзв Слике. Унутар фасцикле додајте нову слику и дајте јој име, нпр ЦутеБирд.јпг.
8. Идентификујте апсолутну путању до датотеке слике коју сте управо додали. То можете учинити тако што ћете га пронаћи на навигационој путањи апликације за управљање датотекама вашег оперативног система. Такође ћете морати да додате назив датотеке на крај путање. На пример, „Ц:\Усерс\Схарл\Десктоп\Вебсите\Имагес\ЦутеБирд.јпг“
9. У индек.хтмл, замените своју ознаку слике новом сликом која користи апсолутну путању која указује на ЦутеБирд.јпг датотека сачувана на вашем рачунару. Не заборавите да додате префикс филе:// да бисте означили локални ресурс система датотека. На Уник-у и мацОС-у можете да додате апсолутну путању коју сте идентификовали у претходном кораку. У оперативном систему Виндовс, мораћете да замените обрнуте косе црте са косим цртама унапред и додате додатну косу црту испред слова диск јединице, на пример:

10. Кликните на индек.хтмл датотеку да бисте је отворили у прегледачу и видели слику сачувану на вашем рачунару.

Како користити релативну УРЛ путању

Релативна УРЛ адреса чува само део УРЛ-а или путање и обично је релативна у односу на локацију тренутне датотеке или одељка веб локације.

У горњем примеру, за приступ Лого.ицо из индек.хтмл користећи релативну УРЛ адресу, користили бисте путању „Имагес/Ицонс/Лого.ицо“. Други примери укључују:

• Пагес/Бирд1.хтмл
• Имагес/ЦутеБирд.јпг
• стилес.цсс

Када користите исту структуру фасцикли на другом рачунару, веб локација ће и даље моћи да преузме датотеку. Приликом рутирања преко веба, уместо да користите пуну везу као што је „ https://example.com/about", уместо тога можете користити релативно рутирање:

• /about
• /contact
• /projects/local-clients

Можете да користите релативни УРЛ за креирање веза или референтних слика унутар ваше ХТМЛ веб странице.

1. Унутар корена директоријума ваше веб локације, направите нову фасциклу под називом Пагес.
2. Унутар нове фасцикле Пагес, креирајте нову датотеку под називом Бирд1.хтмл.
3. Попуне Бирд1.хтмл са ХТМЛ кодом за креирање странице.

   <!ДОЦТИПЕ хтмл>
   <хтмл ланг="ен">
   <глава>
   <наслов> птица 1 </title>
   <мета цхарсет="УТФ-8">
   <мета наме="виевпорт" цонтент="видтх=девице-видтх, инитиал-сцале=1">
   <линк рел="стилесхеет" хреф="../стилес.цсс" />
   </head>
   <тело>
   <див цласс="контејнер">
   <х1> кафу </h1>
   <стр> Кафа је слатка птица која воли игру! </п>
   </div>
   </body>
   </html>

4. Унутар див контејнера, додајте ознаку слике и користите релативну УРЛ адресу за везу до ЦутеБирд.јпг слика.

   <имг срц="../Имагес/ЦутеБирд.јпг" алт="Слика слатке птице" цласс="мб28" видтх="900" висина="700">

5. У индек.хтмл датотеку, уклоните постојећи садржај унутар контејнера див. Замените га једним а ознаку која користи релативну везу за отварање Бирд1.хтмл фајл.

   <див цласс="контејнер">
   <х1> Мој веб-сајт </h1>
   <стр> Добродошли на моју веб страницу. </п>
   <а хреф="Пагес/Бирд1.хтмл" цласс="мб28">Птица 1: Кафа</а>
   </div>

6. Кликните на индек.хтмл датотеку да бисте је отворили у прегледачу и кликните на нову везу до које желите да идете Бирд1.хтмл.

Сада можете одредити разлику између апсолутних и релативних УРЛ-ова. Сада можете додатно водити рачуна да осигурате да се ваши ресурси увек враћају.

Такође увек треба да обезбедите да су све везе којима ваши корисници могу да приступе безбедне и безбедне.