Pogledajte bilo koju web stranicu na mreži danas i primetićete da dele zajedničke stvari. Jedna od tih zajedničkih osobina su slike. Prava slika toliko doprinosi prezentaciji web stranice. Neke od tih slika, poput logotipa kompanije, pomažu brendiranju sajta i povezivanjem tog digitalnog subjekta sa vašom fizičkom kompanijom.
Da biste na svoju web stranicu dodali sliku, ikonu ili grafiku, potrebno je da koristite oznaku u HTML-kodu stranice. IMG oznaku postavite u HTML svojoj tački gde želite da se grafika prikazuje. Veb pregledač koji prikazuje stranicu stranice zameniće ovu oznaku odgovarajućom grafikom kada se stranica pregleda. Vraćajući se na primer našeg logotipa kompanije, evo kako možete dodati tu sliku na svoju web lokaciju:
Atributi atributa
Gledajući gore navedeni HTML kod, videćete da element sadrži dva atributa. Svaki od njih je potreban za sliku.
Prvi atribut je "src". Ovo je bukvalno datoteka slike koju želite da se prikaže na stranici. U našem primeru koristimo datoteku pod nazivom "logo.png". Ovo je grafika koju bi web pregledač prikazao kada je prikazao stranicu.
Takođe ćete primetiti da smo prije ovog imena datoteke dodali neke dodatne informacije, "/ images /". Ovo je putanja datoteke. Inicijalna naslovna pošiljaka navodi serveru da pogleda u koren direktorija. Tada će potražiti fasciklu pod nazivom "slike" i na kraju fajl pod nazivom "logo.png". Korištenje fascikle pod imenom "slike" za čuvanje grafike sajta je prilično uobičajena praksa, ali se putanja datoteke promijenila na sve što je relevantno za vašu web lokaciju.
Drugi zahtevani atribut je "alt" tekst. Ovo je "alternativni tekst" koji se prikazuje ako slika ne učita iz nekog razloga. Ovaj tekst, koji u našem primeru čita "Logotip kompanije", biće prikazan ako slika ne učita. Zašto bi se to desilo? Razni razlozi:
- Nepravilan put datoteke
- Pogrešno ime datoteke ili pogrešno pisanje
- Greška pri prenosu
- Datoteka je izbrisana sa servera
Ovo su samo nekoliko mogućnosti zašto naša određena slika možda nedostaje. U ovim slučajevima bi se nam prikazao tekst alt alt.
Alt tekst takođe koristi softver čitača ekrana da "pročita" sliku posetiocu koji je oštećen vid. Pošto oni ne mogu videti sliku kao što mi radimo, ovaj tekst dozvoljava im da znaju koja je slika sama. Zbog toga je potreban alt tekst i zašto bi trebalo jasno naznačiti kakva je slika!
Uobičajeni nesporazum alt text-a je da je namenjen za potrebe pretraživača. Ovo nije istina. Dok Google i ostali pretraživači čitaju ovaj tekst kako bi utvrdili kakva je slika (zapamtite, ne mogu "vidjeti" vašu sliku), ne biste trebali pisati alt tekst da biste se žalili samo pretraživačima. Autor je jasan alt tekst koji je namenjen ljudima. Ako možete dodati i neke ključne riječi u oznaku koja apeluje na pretraživače, to je u redu, ali uvijek se uverite da alt tekst služi njegovu primarnu svrhu tako što ćete navesti koja je slika za sve koji ne mogu videti grafičku datoteku.
Ostali atributi
Oznaka IMG takođe sadrži još dva atributa koji možete videti kada koristite grafiku na svojoj web stranici - širinu i visinu. Na primjer, ako koristite WYSIWYG editor kao Dreamweaver, on automatski dodaje ove informacije za vas. Evo primera:
Atribut WIDTH i HEIGHT govori pregledaču veličine slike. Pretraživač tada zna tačno koliko prostora u rasporedu treba dodijeliti, a može se prebaciti na sljedeći element na stranici dok se slika preuzima. Problem sa korišćenjem ove informacije u HTML-u jeste da možda ne želite da se vaša slika prikazuje na tačnoj veličini. Na primjer, ako imate odzivnu web lokaciju čija promjena veličine zasnovana na ekranu posjetitelja i veličini uređaja, također ćete želeti da vaše slike budu fleksibilne. Ako navedete u svom HTML-u šta je fiksna veličina, vrlo je teško nadjačati sa odgovarajućim CSS medijskim upiti . Iz tog razloga, i da biste održali odvajanje stila (CSS) i strukture (HTML), preporučujemo vam da NE dodate atribute širine i visine vašeg HTML koda.
Jedna napomena: Ako ostavite ove instrukcije za veličinu i ne određuju veličinu u CSS-u, pretraživač će u svakom slučaju prikazati sliku podrazumevano.
Uredio Jeremy Girard