Nuorodos ir vaizdai yra du dažniausiai naudojami ištekliai, kuriuos pridedate prie savo tinklalapių, todėl labai svarbu žinoti, kaip tinkamai juos išspręsti.
Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.
Kiekviena svetainė turi nurodyti tam tikrus išteklius, nesvarbu, ar tai vaizdai, failai ar kiti tinklalapiai. Labai svarbu nuspręsti, kaip susieti kitus failus, kad naršyklės tinkamai juos rastų.
Galite susieti su ištekliais naudodami santykinį arba absoliutų URL. Tai taikoma tiek vietiniams failams kompiuteryje, tiek protokolais pagrįstiems URL, pasiekiamiems žiniatinklyje.
Kaip naudoti absoliutų URL kelią
Absoliutus URL yra visas kelias į tam tikrą failo vietą. Jų pavyzdžiai apima visą kelią į jūsų kompiuteryje esančius failus:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Kitas pavyzdys apima visą protokolo URL, kurį galite naudoti norėdami nustatyti šaltinį, kurį norite siųsti internetu. Dažniausiai jie prasideda „https“ arba „http“:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Absoliučiame URL yra visa informacija, reikalinga norint rasti failą arba šaltinį, kurį bandote pasiekti. Tai būtina, jei pateikiate nuorodą į išorinę svetainę.
- Sukurkite paprastą svetainę HTML sukurdami naują aplanką ir pridėdami du naujus failus, vadinamus index.html ir stiliai.css.
- Į index.html, pridėkite HTML kodą, kad sukurtumėte pagrindinę svetainę:
<!DOCTYPE html>
<html lang="lt">
<galva>
<titulą> Mano svetainė </title>
<meta simbolių rinkinys ="UTF-8">
<meta vardas ="peržiūros sritis" turinys="plotis = įrenginio plotis, pradinė skalė = 1">
<nuoroda rel="stiliaus lapas" href="stiliai.css" />
</head>
<kūnas>
<div klasė ="konteineris">
<h1> Mano svetainė </h1>
<p> Sveiki atvykę į mano svetainę. </p>
</div>
</body>
</html> - Į stiliai.css, pridėkite tinklalapio stiliaus.
kūnas {
šriftų šeima: Arial, Helvetica, sans-serif;
}.konteineris {
ekranas: lankstus;
lankstumo kryptis: stulpelis;
lygiuoti elementus: centre;
}.mb28 {
paraštė-apačia: 28px;
} - Į index.html, pridėkite an žymą konteinerio div viduje ir pridėkite absoliutų URL prie pagrindinės „Google“ svetainės ( https://www.google.com).
<a href="https://www.google.com" klasė ="mb28">Google.com</a> - Taip pat galite pasiekti vaizdus internete naudodami visą absoliutų kelią į saugomą failą. Taip pat galite imtis papildomų veiksmų, kad įsitikintumėte, jog pridėjote reaguojančius vaizdus į jūsų HTML tinklo puslapis.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&tinka = apkarpyti&w = 3870&q = 80" alt="Miela paukščio nuotrauka" klasė ="mb28" plotis ="900" aukštis ="600"> - Spustelėkite ant index.html failą, kad atidarytumėte jį naršyklėje ir peržiūrėtumėte vaizdą, gautą iš išorinės vietos.
- Iš savo svetainės šakninio aplanko sukurkite naują aplanką vaizdams saugoti, vadinamą Vaizdai. Aplanko viduje pridėkite naują vaizdą ir suteikite jam pavadinimą, pvz CuteBird.jpg.
- Nurodykite absoliutų kelią į ką tik pridėtą vaizdo failą. Tai galite padaryti radę jį operacinės sistemos failų tvarkyklės programos naršymo kelyje. Taip pat kelio pabaigoje turėsite pridėti failo pavadinimą. Pavyzdžiui, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- Į index.html, pakeiskite vaizdo žymą nauju vaizdu, kuriame naudojamas absoliutus kelias, nukreipiantis į CuteBird.jpg failą, saugomą jūsų kompiuteryje. Nepamirškite pridėti file:// priešdėlio, kad būtų nurodytas vietinis failų sistemos šaltinis. Tada „Unix“ ir „MacOS“ galite pridėti absoliutų kelią, kurį nurodėte atlikdami ankstesnį veiksmą. Sistemoje Windows turėsite pakeisti pasviruosius brūkšnius į priekį ir pridėti papildomą pasvirąjį brūkšnį prieš disko raidę, pavyzdžiui:
- Spustelėkite ant index.html failą, kad atidarytumėte jį naršyklėje ir peržiūrėtumėte kompiuteryje saugomą vaizdą.
Kaip naudoti santykinį URL kelią
Santykinis URL saugo tik dalį URL arba kelio ir paprastai yra susijęs su dabartinio failo ar svetainės skilties vieta.
Aukščiau pateiktame pavyzdyje, norėdami pasiekti Logotipas.ico iš index.html naudodami santykinį URL, turėtumėte naudoti kelią „Images/Icons/Logo.ico“. Kiti pavyzdžiai:
- Puslapiai/Bird1.html
- Images/CuteBird.jpg
- stiliai.css
Kai naudojate tą pačią aplanko struktūrą kitame kompiuteryje, svetainė vis tiek galės nuskaityti failą. Nurodydami maršrutą žiniatinklyje, užuot naudoję visą nuorodą, pvz., " https://example.com/about", vietoj to galite naudoti santykinį maršrutą:
- /about
- /contact
- /projects/local-clients
Galite naudoti santykinį URL, kad sukurtumėte nuorodas arba nuorodų vaizdus savo HTML tinklalapyje.
- Savo svetainės katalogo šaknyje sukurkite naują aplanką pavadinimu Puslapiai.
- Naujame aplanke Puslapiai sukurkite naują failą pavadinimu Paukštis1.html.
- Gyventi Paukštis1.html su HTML kodu, kad sukurtumėte puslapį.
<!DOCTYPE html>
<html lang="lt">
<galva>
<titulą> Paukštis 1 </title>
<meta simbolių rinkinys ="UTF-8">
<meta vardas ="peržiūros sritis" turinys="plotis = įrenginio plotis, pradinė skalė = 1">
<nuoroda rel="stiliaus lapas" href="../styles.css" />
</head>
<kūnas>
<div klasė ="konteineris">
<h1> Kava </h1>
<p> Kava yra saldus paukštis, kuris mėgsta žaisti! </p>
</div>
</body>
</html> - Sudėtinio rodinio „div“ viduje pridėkite vaizdo žymą ir naudokite santykinį URL, kad susietumėte su CuteBird.jpg vaizdas.
<img src="../Images/CuteBird.jpg" alt="Miela paukščio nuotrauka" klasė ="mb28" plotis ="900" aukštis ="700"> - Viduje index.html failą, pašalinkite esamą turinį sudėtinio rodinio div. Pakeiskite jį vienu a žyma, kuri naudoja santykinę nuorodą, kad atidarytų Paukštis1.html failą.
<div klasė ="konteineris">
<h1> Mano svetainė </h1>
<p> Sveiki atvykę į mano svetainę. </p>
<a href="Puslapiai/Bird1.html" klasė ="mb28">1 paukštis: kava</a>
</div> - Spustelėkite ant index.html failą, kad atidarytumėte jį naršyklėje, ir spustelėkite naują nuorodą, į kurią norite pereiti Paukštis1.html.
Dabar galite nustatyti skirtumą tarp absoliučių ir santykinių URL. Dabar galite pasirūpinti, kad ištekliai visada būtų gauti.
Taip pat visada turėtumėte užtikrinti, kad visos nuorodos, kurias gali pasiekti jūsų vartotojai, būtų saugios.