Lingid ja pildid on kaks kõige levinumat ressurssi, mida oma veebilehtedele lisate, seega on oluline teada, kuidas neid õigesti käsitleda.
Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.
Iga veebisait peab viitama teatud ressurssidele, olgu need siis pildid, failid või muud veebilehed. Teiste failidega linkimise otsustamine on äärmiselt oluline, et tagada brauserite õige asukoht.
Ressursidele saate linkida kas suhtelise või absoluutse URL-i abil. See kehtib nii arvutis olevate kohalike failide kui ka veebi kaudu ligipääsetavate protokollipõhiste URL-ide kohta.
Kuidas kasutada absoluutset URL-i teed
Absoluutne URL sisaldab kogu teed teatud faili asukohta. Nende näidete hulka kuuluvad teie arvutis olevate failide täielik tee:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Teine näide sisaldab täielikku protokolli URL-i, mida saate kasutada Interneti kaudu saatmiseks vajaliku ressursi tuvastamiseks. Enamasti algavad need tähega "https" või "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Absoluutne URL sisaldab kogu teavet, mis on vajalik faili või ressursi leidmiseks, millele proovite juurde pääseda. See on vajalik, kui lingite välisele saidile.
- Looge HTML-is lihtne veebisait luues uue kausta ja lisades kaks uut faili nimega index.html ja stiilid.css.
- sisse index.html, lisage lihtsa veebisaidi loomiseks HTML-kood:
<!DOCTYPE html>
<html lang="et">
<pea>
<pealkiri> Minu veebisait </title>
<metamärgistik="UTF-8">
<meta nimi="vaateava" sisu="laius = seadme laius, esialgne skaala = 1">
<link rel="stiilileht" href="stiilid.css" />
</head>
<keha>
<div klass="konteiner">
<h1> Minu veebisait </h1>
<lk> Tere tulemast minu veebisaidile. </lk>
</div>
</body>
</html> - sisse stiilid.css, lisage veebilehele stiili.
keha {
fondiperekond: Arial, Helvetica, sans-serif;
}.konteiner {
ekraan: flex;
paindesuund: veerg;
joonda-elemendid: keskel;
}.mb28 {
veeris-alumine: 28px;
} - sisse index.html, lisage an märgendis konteineri div ja lisage absoluutne URL Google'i põhisaidile ( https://www.google.com).
<a href="https://www.google.com" klass="mb28">Google.com</a> - Saate piltidele juurde pääseda ka võrgus, kasutades salvestatud faili täielikku absoluutset teed. Saate lisada ka lisatoiminguid, et veenduda, et olete lisanud reageerivad pildid teie HTML-ile veebileht.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formaat&sobima = kärpima&w = 3870&q = 80" alt="Armas linnufoto" klass="mb28" laius="900" kõrgus ="600"> - Klõpsake nuppu index.html faili, et avada see brauseris ja vaadata selle välisest asukohast hangitud pilti.
- Looge oma veebisaidi juurkaustas piltide salvestamiseks uus kaust, nn Pildid. Lisage kausta sees uus pilt ja andke sellele nimi, näiteks CuteBird.jpg.
- Tuvastage äsja lisatud pildifaili absoluutne tee. Seda saate teha, leides selle oma operatsioonisüsteemi failihalduri rakenduse navigeerimisteelt. Samuti peate tee lõppu lisama failinime. Näiteks "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- sisse index.html, asendage oma pildimärgend uue pildiga, mis kasutab absoluutset teed, mis osutab CuteBird.jpg teie arvutisse salvestatud fail. Ärge unustage lisada eesliidet file://, et näidata kohalikku failisüsteemi ressurssi. Unixis ja macOS-is saate seejärel lisada eelmises etapis tuvastatud absoluutse tee. Windowsis peate asendama kaldkriipsud kaldkriipsudega ja lisama draivitähe ette täiendava kaldkriipsu, näiteks:
- Klõpsake nuppu index.html faili, et avada see brauseris ja vaadata arvutisse salvestatud pilti.
Kuidas kasutada suhtelist URL-i teed
Suhteline URL salvestab ainult osa URL-ist või teest ja on tavaliselt seotud praeguse faili või veebisaidi jaotise asukohaga.
Ülaltoodud näites juurdepääsuks Logo.ico alates index.html suhtelist URL-i kasutades kasutaksite teed "Images/Icons/Logo.ico". Muud näited hõlmavad järgmist:
- Pages/Bird1.html
- Pildid/CuteBird.jpg
- stiilid.css
Kui kasutate sama kaustastruktuuri teises arvutis, saab veebisait faili siiski alla laadida. Veebi kaudu marsruutimisel kasutage täielikku linki, näiteks " https://example.com/about", selle asemel võite kasutada suhtelist marsruutimist:
- /about
- /contact
- /projects/local-clients
Saate kasutada suhtelist URL-i, et luua oma HTML-i veebilehel linke või viitepilte.
- Looge oma veebisaidi kataloogi juurkataloogis uus kaust nimega Leheküljed.
- Looge uues kaustas Pages uus fail nimega Lind1.html.
- Asustada Lind1.html HTML-koodiga lehe loomiseks.
<!DOCTYPE html>
<html lang="et">
<pea>
<pealkiri> Lind 1 </title>
<metamärgistik="UTF-8">
<meta nimi="vaateava" sisu="laius = seadme laius, esialgne skaala = 1">
<link rel="stiilileht" href="../styles.css" />
</head>
<keha>
<div klass="konteiner">
<h1> Kohv </h1>
<lk> Kohv on magus lind, kellele meeldib mängida! </lk>
</div>
</body>
</html> - Lisage konteineri divisse pildimärgend ja kasutage linkimiseks suhtelist URL-i CuteBird.jpg pilt.
<img src="../Images/CuteBird.jpg" alt="Armas linnufoto" klass="mb28" laius="900" kõrgus ="700"> - Aastal index.html faili, eemaldage olemasolev sisu konteineris div. Asendage see ühega a silt, mis kasutab suhtelist linki avamiseks Lind1.html faili.
<div klass="konteiner">
<h1> Minu veebisait </h1>
<lk> Tere tulemast minu veebisaidile. </lk>
<a href="Pages/Bird1.html" klass="mb28">1. lind: kohv</a>
</div> - Klõpsake nuppu index.html fail, et see brauseris avada, ja klõpsake navigeerimiseks uut linki Lind1.html.
Nüüd saate määrata erinevuse absoluutsete ja suhteliste URL-ide vahel. Nüüd saate olla eriti ettevaatlik, et oma ressursse alati kätte saada.
Samuti peaksite alati tagama, et kõik lingid, millele teie kasutajad pääsevad, on turvalised.
