Pogledajte bilo koji web stranica danas na mreži i primijetit ćete da dijele određene zajedničke stvari. Jedna od tih zajedničkih osobina su slike. Prave slike toliko dodaju prezentaciju web mjesta. Neke od tih slika, poput logotipa tvrtke, pomažu u brendiranju web mjesta i povezivanju tog digitalnog entiteta s vašom fizičkom tvrtkom.
Kako dodati sliku na web stranicu pomoću HTML-a
Da biste svojoj web stranici dodali sliku, ikonu ili grafiku, morate upotrijebiti oznaku u HTML kodu stranice. Vi postavljate.
IMGoznaka u vašem. HTML točno tamo gdje želite da se prikazuje grafika. Web preglednik koji prikazuje kôd stranice zamijenit će ovu oznaku odgovarajućom grafikom nakon što se stranica pogleda. Vraćajući se na primjer logotipa naše tvrtke, evo kako biste mogli dodati tu sliku na svoje web mjesto:
Atribut SRC
Gledajući gornji HTML kôd, vidjet ćete da element sadrži dva atributa. Svaki od njih potreban je za sliku.
Prvi atribut je "src". Ovo je doslovno slikovna datoteka koju želite prikazati na stranici. U našem primjeru koristimo datoteku koja se naziva "logo.png". Ovo je grafika koju bi web preglednik prikazao kada je prikazao web mjesto.
Također ćete primijetiti da smo prije ovog naziva datoteke dodali neke dodatne informacije, "/ images /". Ovo je put do datoteke. Početna kosa crta naprijed govori poslužitelju da pogleda u korijen direktorija. Zatim će potražiti mapu zvanu "slike" i na kraju datoteku nazvanu "logo.png". Korištenje mape zvane "slike" za spremanje svih grafika web mjesta prilično je uobičajena praksa, ali put do datoteke promijenit će se u ono što je relevantno za vaše web mjesto.
Alt atribut
Drugi obavezni atribut je "alt" tekst. Ovo je "zamjenski tekst" koji se prikazuje ako se slika iz nekog razloga ne uspije učitati. Ovaj tekst, koji u našem primjeru glasi "Logo tvrtke", prikazat će se ako se slika ne uspije učitati. Zašto bi se to dogodilo? Iz raznih razloga:
- Pogrešan put do datoteke
- Pogrešno ime datoteke ili pravopis
- Pogreška prijenosa
- Datoteka je izbrisana s poslužitelja
Ovo je samo nekoliko mogućnosti zašto naša navedena slika možda nedostaje. U tim bi se slučajevima prikazao naš alt tekst.
Čemu služi zamjenski tekst?
Alt tekst koristi i čitač zaslona za "čitanje" slike posjetitelju oštećenog vida. Budući da ne mogu vidjeti sliku kao mi, ovaj tekst daje im do znanja koja je slika sama. Zbog toga je potreban alt tekst i zašto bi trebao jasno navesti što je slika!
Uobičajeno nerazumijevanje alt teksta je da je on namijenjen tražilicama. Ovo nije istina. Iako Google i druge tražilice čitaju ovaj tekst kako bi utvrdili koja je slika (sjetite se, oni također ne mogu "vidjeti" vašu sliku), ne biste trebali pisati zamjenski tekst samo da biste apelirali na pretraživanje motori. Autor jasan alt tekst koji je namijenjen ljudima. Ako u oznaku možete dodati i neke ključne riječi koje privlače tražilice, to je u redu, ali uvijek budite sigurni alt tekst služi svojoj primarnoj namjeni navodeći koja je slika za svakoga tko ne može vidjeti grafiku datoteka.
Ostali atributi slike
The.
IMG.
Oznaka također ima još dva atributa koja ćete možda vidjeti u upotrebi kada na svoju web stranicu stavite grafiku - širinu i visinu. Na primjer, ako koristite WYSIWYG uređivač poput Dreamweavera, on automatski dodaje ove podatke umjesto vas. Evo primjera:
The.
ŠIRINA.
i.
VISINA.
atributi govore pregledniku veličinu slike. Preglednik tada točno zna koliko prostora u rasporedu treba dodijeliti i može se premjestiti na sljedeći element na stranici dok se slika preuzima. Problem korištenja ovih podataka u vašem HTML-u je taj što možda nećete uvijek željeti da se slika prikaže u točnoj veličini. Na primjer, ako imate.
responzivna web stranica
čija se veličina mijenja na temelju zaslona posjetitelja i veličine uređaja, također ćete htjeti da vaše slike budu fleksibilne. Ako u svom HTML-u navedete koja je fiksna veličina, vrlo će vam teško biti poništiti responzivan.
CSS medijski upiti
. Iz tog razloga i da bi se zadržalo razdvajanje stila (CSS) i strukture (HTML), preporučuje se da NE dodajete atribute širine i visine u svoj HTML kôd.
Jedna napomena: Ako ove upute za određivanje veličine isključite i ne odredite veličinu u CSS-u, preglednik će ionako prikazati sliku u zadanoj veličini.
Uredio Jeremy Girard