Povezave in slike sta dva najpogostejša vira, ki ju boste dodali na svoje spletne strani, zato je ključnega pomena vedeti, kako jih pravilno nasloviti.
Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.
Vsako spletno mesto se mora sklicevati na določene vire, pa naj gre za slike, datoteke ali druge spletne strani. Odločitev o povezovanju z drugimi datotekami je izjemno pomembna, da zagotovite, da jih brskalniki pravilno najdejo.
Na vire se lahko povežete z relativnim ali absolutnim URL-jem. To velja za lokalne datoteke v računalniku in URL-je, ki temeljijo na protokolu, do katerih dostopate prek spleta.
Kako uporabljati absolutno URL pot
Absolutni URL vsebuje celotno pot do določene lokacije datoteke. Primeri teh vključujejo celotno pot do datotek v vašem računalniku:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Drug primer vključuje celoten URL protokola, ki ga lahko uporabite za identifikacijo vira za pošiljanje po internetu. Najpogosteje se začnejo s "https" ali "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Absolutni URL vsebuje vse informacije, potrebne za iskanje datoteke ali vira, do katerega poskušate dostopati. To je potrebno, če se povezujete na zunanje spletno mesto.
- Zgradite preprosto spletno stran v HTML tako, da ustvarite novo mapo in dodate dve novi datoteki, imenovani index.html in styles.css.
- notri index.html, dodajte nekaj kode HTML, da ustvarite osnovno spletno mesto:
<!DOCTYPE html>
<html lang="en">
<glavo>
<naslov> Moja spletna stran </title>
<meta charset="UTF-8">
<meta ime="vidno polje" vsebina="širina=širina naprave, začetna lestvica=1">
<povezava rel="slogovna tabela" href="styles.css" />
</head>
<telo>
<razred div="posoda">
<h1> Moja spletna stran </h1>
<str> Dobrodošli na moji spletni strani. </str>
</div>
</body>
</html> - notri styles.css, dodajte nekaj sloga spletni strani.
telo {
družina pisav: Arial, Helvetica, sans-serif;
}.posoda {
zaslon: flex;
flex-direction: stolpec;
align-items: center;
}.mb28 {
rob-spodaj: 28px;
} - notri index.html, dodajte znotraj vsebnika div in dodajte absolutni URL na Googlovo glavno spletno mesto ( https://www.google.com).
<a href="https://www.google.com" razred="mb28">Google.com</a> - Do slik lahko dostopate tudi na spletu z uporabo celotne absolutne poti do shranjene datoteke. Izvedete lahko tudi dodatne korake, da zagotovite, da ste dodali odzivne slike v vaš HTML Spletna stran.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&š=3870&q=80" alt="Lepa fotografija ptic" razred="mb28" širina="900" višina="600"> - Kliknite na index.html datoteko, da jo odprete v brskalniku in si ogledate sliko, pridobljeno z zunanje lokacije.
- V korenski mapi vašega spletnega mesta ustvarite novo mapo za shranjevanje slik, imenovano Slike. Znotraj mape dodajte novo sliko in jo poimenujte, npr CuteBird.jpg.
- Določite absolutno pot do slikovne datoteke, ki ste jo pravkar dodali. To lahko storite tako, da ga poiščete v navigacijski poti aplikacije za upravljanje datotek vašega operacijskega sistema. Prav tako boste morali dodati ime datoteke na konec poti. Na primer "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- notri index.html, zamenjajte slikovno oznako z novo sliko, ki uporablja absolutno pot, ki kaže na CuteBird.jpg datoteko, shranjeno v vašem računalniku. Ne pozabite dodati predpone file://, da označite lokalni vir datotečnega sistema. V sistemu Unix in macOS lahko nato dodate absolutno pot, ki ste jo določili v prejšnjem koraku. V sistemu Windows boste morali zamenjati poševnice nazaj s poševnicami naprej in dodati dodatno poševnico naprej pred črko pogona, na primer:
- Kliknite na index.html datoteko, da jo odprete v brskalniku in si ogledate sliko, shranjeno v vašem računalniku.
Kako uporabljati pot relativnega URL-ja
Relativni URL shrani le del URL-ja ali poti in je običajno relativen glede na lokacijo trenutne datoteke ali razdelka spletnega mesta.
V zgornjem primeru za dostop Logo.ico od index.html z relativnim URL-jem bi uporabili pot "Images/Icons/Logo.ico". Drugi primeri vključujejo:
- Strani/Ptica1.html
- Slike/CuteBird.jpg
- styles.css
Ko uporabljate isto strukturo map v drugem računalniku, bo spletno mesto še vedno lahko pridobilo datoteko. Pri usmerjanju po spletu namesto uporabe celotne povezave, kot je " https://example.com/about", namesto tega lahko uporabite relativno usmerjanje:
- /about
- /contact
- /projects/local-clients
Relativni URL lahko uporabite za ustvarjanje povezav ali referenčnih slik znotraj vaše spletne strani HTML.
- Znotraj korena imenika vašega spletnega mesta ustvarite novo mapo z imenom Strani.
- Znotraj nove mape strani ustvarite novo datoteko z imenom Bird1.html.
- Napolni Bird1.html s kodo HTML za ustvarjanje strani.
<!DOCTYPE html>
<html lang="en">
<glavo>
<naslov> Ptica 1 </title>
<meta charset="UTF-8">
<meta ime="vidno polje" vsebina="širina=širina naprave, začetna lestvica=1">
<povezava rel="slogovna tabela" href="../styles.css" />
</head>
<telo>
<razred div="posoda">
<h1> Kava </h1>
<str> Kava je sladka ptica, ki se rada igra! </str>
</div>
</body>
</html> - Znotraj vsebnika div dodajte slikovno oznako in uporabite relativni URL za povezavo do CuteBird.jpg slika.
<img src="../Images/CuteBird.jpg" alt="Lepa fotografija ptic" razred="mb28" širina="900" višina="700"> - V index.html odstranite obstoječo vsebino znotraj vsebnika div. Zamenjajte ga z enim a ki uporablja relativno povezavo za odpiranje Bird1.html mapa.
<razred div="posoda">
<h1> Moja spletna stran </h1>
<str> Dobrodošli na moji spletni strani. </str>
<a href="Strani/Ptica1.html" razred="mb28">Ptica 1: Kava</a>
</div> - Kliknite na index.html datoteko, da jo odprete v brskalniku, in kliknite novo povezavo, do katere se pomaknete Bird1.html.
Zdaj lahko določite razliko med absolutnimi in relativnimi URL-ji. Zdaj lahko še posebej poskrbite, da zagotovite, da so vaši viri vedno priklicani.
Prav tako morate vedno zagotoviti, da so vse povezave, do katerih lahko dostopajo vaši uporabniki, varne in zaščitene.