Pogledajte bilo koju web stranicu danas i vidjet ćete da dijele zajedničke stvari. Jedna od tih zajedničkih osobina je slika. Prave slike dodaju toliko na prezentaciju web stranice. Neke od tih slika, poput logotipa tvrtke, pomažu u označavanju web-lokacije i povezivanju tog digitalnog entiteta s vašom fizičkom tvrtkom.
Da biste dodali sliku, ikonu ili grafiku na svoju web stranicu, trebate upotrijebiti oznaku u HTML kôdu stranice. IMG oznaku postavite u HTML točno ondje gdje želite da se grafički prikaz prikazuje. Web preglednik koji prikazuje kôd stranice zamijenit će ovu oznaku odgovarajućim grafičkim prikazom nakon pregledavanja stranice. Vraćajući se na primjer našeg logotipa tvrtke, evo kako možete dodati tu sliku na svoju web-lokaciju:
Atributi slike
Gledajući gore navedeni HTML kôd, vidjet ćete da element sadrži dva atributa. Svaka od njih je potrebna za sliku.
Prvi atribut je "src". To je sasvim doslovno slikovna datoteka koju želite prikazati na stranici. U našem primjeru koristimo datoteku pod nazivom "logo.png". Ovo je grafički prikaz koji će web preglednik prikazati kada je prikazao web mjesto.
Također ćete primijetiti da smo prije tog naziva datoteke dodali neke dodatne informacije "/ images /". Ovo je putanje datoteka. Početni udarac naziva poslužitelju da pogleda u korijen direktorija. Potom će potražiti mapu pod nazivom "slike" i konačno datoteku pod nazivom "logo.png". Korištenje mape pod nazivom "slike" za pohranu svih grafičkih prikaza web lokacije prilično je uobičajena praksa, ali vaša staza datoteke mijenja se na sve što je relevantno za vašu web-lokaciju.
Drugi zahtijevani atribut je tekst "alt". Ovo je "alternativni tekst" koji se prikazuje ako se slika ne učita iz nekog razloga. Ovaj tekst, koji u našem primjeru glasi "Logo tvrtke", bit će prikazan ako se slika ne učita. Zašto bi se to dogodilo? Zbog raznih razloga:
- Neispravan put datoteke
- Neispravan naziv datoteke ili pogrešno napisano
- Pogreška pri prijenosu
- Datoteka je izbrisana s poslužitelja
Ovo su samo neke mogućnosti zašto moľda nedostaje određena slika. U tim ćemo slučajevima umjesto toga prikazati naš alt tekst.
Alt tekst također koristi softver čitača zaslona da "čita" sliku posjetitelju koji je oštećen vida. Budući da ne mogu vidjeti sliku kao mi, ovaj tekst im omogućuje da znaju što je sama slika. Zato je potreban alt tekst i zašto treba jasno navesti što je slika!
Uobičajeni nesporazum alt teksta je da je namijenjen svrsi tražilice. Ovo nije istina. Dok Google i druge tražilice čitaju ovaj tekst kako bi utvrdili što je slika (zapamtite, ne mogu "vidjeti" vašu sliku), ne biste trebali napisati alt tekst kako biste se žalili isključivo na tražilice. Autor jasan alt tekst koji je namijenjen ljudima. Ako također možete dodati neke ključne riječi u oznaku koja je privlačna tražilicama, to je u redu, ali uvijek provjerite je li alt tekst služi svojoj primarnoj svrsi navodeći što je slika za svakoga tko ne može vidjeti grafičku datoteku.
Ostali atributi
IMG oznaka također ima još dva atributa koje možete vidjeti prilikom stavljanja grafike na svoju web stranicu - širinu i visinu. Na primjer, ako koristite WYSIWYG editor kao što je Dreamweaver, on automatski dodaje te informacije za vas. Evo primjera:
Atributi WIDTH i HEIGHT govore pregledniku veličinu slike. Preglednik tada točno zna koliko prostora u izgledu treba dodijeliti, a može se premjestiti na sljedeći element na stranici dok se slika preuzimanja. Problem s korištenjem ovih informacija u vašem HTML-u je da možda nećete uvijek htjeti da se vaša slika prikazuje u toj točnoj veličini. Na primjer, ako imate responzivnu web stranicu čija se veličina mijenja na temelju zaslona posjetitelja i veličine uređaja, također želite da vaše slike budu fleksibilne. Ako navedete u HTML-u što je fiksna veličina, vrlo je teško nadjačati odgovarajući CSS medijski upiti . Zbog toga i za održavanje odvojenosti stila (CSS) i strukture (HTML), preporučujemo da NE dodate atribute širine i visine u HTML kôd.
Jedna napomena: ako ostavite ove upute za dimenziju i ne odredite veličinu u CSS-u, preglednik će ipak prikazati sliku prema zadanoj, prirodnoj veličini.
Uredio je Jeremy Girard