Veze i slike dva su najčešća resursa koja ćete dodati na svoje web stranice, pa je ključno znati kako im se ispravno obratiti.
Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.
Svaka web stranica treba referencirati određene resurse, bilo da se radi o slikama, datotekama ili drugim web stranicama. Odluka o povezivanju s drugim datotekama izuzetno je važna kako bi se osiguralo da ih preglednici ispravno lociraju.
Možete se povezati s resursima koristeći relativni ili apsolutni URL. Ovo se odnosi i na lokalne datoteke na računalu i na URL-ove temeljene na protokolu kojima se pristupa putem weba.
Kako koristiti apsolutni URL put
Apsolutni URL sadrži cijeli put do određene lokacije datoteke. Primjeri toga uključuju puni put do datoteka na vašem računalu:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Drugi primjer uključuje puni URL protokola, koji možete koristiti za identifikaciju izvora za slanje putem interneta. Najčešće počinju s "https" ili "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Apsolutni URL sadrži sve informacije potrebne za lociranje datoteke ili resursa kojem pokušavate pristupiti. Ovo je potrebno ako se povezujete na vanjsko mjesto.
- Izradite jednostavnu web stranicu u HTML-u stvaranjem nove mape i dodavanjem dvije nove datoteke tzv index.html i stilovi.css.
- U index.html, dodajte neki HTML kod za izradu osnovne web stranice:
<!DOCTYPE html>
<html lang="hr">
<glava>
<titula> Moja web stranica </title>
<meta charset="UTF-8">
<meta naziv="prozor za prikaz" sadržaj="širina=širina-uređaja, početna skala=1">
<veza rel="stilski list" href="stilovi.css" />
</head>
<tijelo>
<div klasa="spremnik">
<h1> Moja web stranica </h1>
<str> Dobrodošli na moju web stranicu. </str>
</div>
</body>
</html> - U stilovi.css, dodajte malo stila web stranici.
tijelo {
obitelj fontova: Arial, Helvetica, sans-serif;
}.kontejner {
zaslon: savitljiv;
smjer savijanja: stupac;
align-items: center;
}.mb28 {
margina-dno: 28px;
} - U index.html, dodajte oznaku unutar div spremnika i dodajte apsolutni URL na Googleovu glavnu web stranicu ( https://www.google.com).
<a href="https://www.google.com" klasa="mb28">Google.com</a> - Također možete pristupiti slikama putem interneta koristeći puni apsolutni put do pohranjene datoteke. Također možete poduzeti dodatne korake kako biste bili sigurni da ste dodali slike koje odgovaraju vašem HTML-u web stranica.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=usjev&w=3870&q=80" alt="Slatka fotografija ptice" klasa="mb28" širina="900" visina="600"> - Klikni na index.html da biste je otvorili u pregledniku i pogledali sliku dohvaćenu s vanjske lokacije.
- Iz korijenske mape vaše web stranice stvorite novu mapu za pohranu slika, pod nazivom Slike. Unutar mape dodajte novu sliku i dodijelite joj naziv, npr Slatka ptica.jpg.
- Identificirajte apsolutni put do slikovne datoteke koju ste upravo dodali. To možete učiniti tako da ga pronađete u navigacijskom putu aplikacije za upravljanje datotekama vašeg operativnog sustava. Također ćete morati dodati naziv datoteke na kraj staze. Na primjer, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- U index.html, zamijenite svoju oznaku slike novom slikom koja koristi apsolutni put koji pokazuje na Slatka ptica.jpg datoteku pohranjenu na vašem računalu. Ne zaboravite dodati prefiks file:// da označite izvor lokalnog datotečnog sustava. Na Unixu i macOS-u tada možete dodati apsolutni put koji ste identificirali u prethodnom koraku. U sustavu Windows morat ćete zamijeniti obrnute kose crte s kosim crtama i dodati dodatnu kosu crtu ispred slova pogona, na primjer:
- Klikni na index.html da biste je otvorili u pregledniku i pogledali sliku pohranjenu na vašem računalu.
Kako koristiti relativni URL put
Relativni URL pohranjuje samo dio URL-a ili staze i obično je relativan u odnosu na lokaciju trenutne datoteke ili odjeljka web stranice.
U gornjem primjeru, za pristup Logo.ico iz index.html koristeći relativni URL, upotrijebili biste stazu "Images/Icons/Logo.ico". Ostali primjeri uključuju:
- Stranice/Ptica1.html
- Slike/CuteBird.jpg
- stilovi.css
Kada koristite istu strukturu mapa na drugom računalu, web mjesto će i dalje moći dohvatiti datoteku. Prilikom usmjeravanja preko weba, umjesto korištenja pune veze kao što je " https://example.com/about", umjesto toga možete koristiti relativno usmjeravanje:
- /about
- /contact
- /projects/local-clients
Možete koristiti relativni URL za stvaranje poveznica ili referentnih slika unutar vaše HTML web stranice.
- U korijenu direktorija vaše web stranice stvorite novu mapu pod nazivom Stranice.
- Unutar nove mape stranica stvorite novu datoteku pod nazivom Ptica1.html.
- Naseliti Ptica1.html s HTML kodom za izradu stranice.
<!DOCTYPE html>
<html lang="hr">
<glava>
<titula> ptica 1 </title>
<meta charset="UTF-8">
<meta naziv="prozor za prikaz" sadržaj="širina=širina-uređaja, početna skala=1">
<veza rel="stilski list" href="../styles.css" />
</head>
<tijelo>
<div klasa="spremnik">
<h1> Kava </h1>
<str> Kava je slatka ptica koja voli igru! </str>
</div>
</body>
</html> - Unutar div spremnika dodajte oznaku slike i upotrijebite relativni URL za vezu na Slatka ptica.jpg slika.
<img src="../Images/CuteBird.jpg" alt="Slatka fotografija ptice" klasa="mb28" širina="900" visina="700"> - u index.html datoteku, uklonite postojeći sadržaj unutar spremnika div. Zamijenite ga jednim a oznaku koja koristi relativnu vezu za otvaranje Ptica1.html datoteka.
<div klasa="spremnik">
<h1> Moja web stranica </h1>
<str> Dobrodošli na moju web stranicu. </str>
<a href="Stranice/Ptica1.html" klasa="mb28">Ptica 1: Kava</a>
</div> - Klikni na index.html datoteku da biste je otvorili u pregledniku i kliknite na novu vezu za navigaciju Ptica1.html.
Sada možete odrediti razliku između apsolutnih i relativnih URL-ova. Sada možete dodatno paziti da osigurate da su vaši resursi uvijek dostupni.
Također biste uvijek trebali osigurati da su sve veze kojima vaši korisnici mogu pristupiti sigurne.
