Oglejte si katero koli spletno stran na spletu danes in opazili boste, da delijo nekatere skupne stvari. Ena od teh skupnih lastnosti je slike. Prava podoba toliko dodaja na predstavitev spletne strani. Nekatere od teh slik, kot je logotip podjetja, pomagajo označiti spletno stran in jo povezati z vašim fizičnim podjetjem.
Če želite na svojo spletno stran dodati sliko, ikono ali grafiko, jo morate uporabiti v HTML-kodi strani. Točko IMG postavite v HTML, točno tam, kjer želite prikazati grafiko. Spletni brskalnik, ki predstavlja kodo strani, bo zamenjal to oznako z ustrezno grafiko, ko bo stran ogledala. Če se vrnemo k primeru našega logotipa podjetja, lahko to sliko dodate na svojo spletno stran:
Atributi atributov
Če pogledamo zgornjo HTML kodo, boste videli, da element vsebuje dva atributa. Vsaka od njih je potrebna za sliko.
Prvi atribut je "src". To je dobesedno slikovna datoteka, ki jo želite prikazati na strani. V našem primeru uporabljamo datoteko z imenom "logo.png". To je grafika, ki bi jo spletni brskalnik prikazal, ko bo prikazal spletno mesto.
Prav tako boste opazili, da smo pred tem imenom dodali še dodatne informacije, "/ images /". To je pot do datoteke. Začetna poševnica naprej pove strežniku, da pogleda koren imenika. Nato bo poiskala mapo, imenovano »slike« in nazadnje datoteko »logo.png«. Uporaba mape, imenovane »slike«, da shranite vso grafiko spletnega mesta, je zelo pogosta praksa, vendar bi se vaša pot do datoteke spremenila v vse, kar je pomembno za vaše spletno mesto.
Drugi zahtevani atribut je "alt" besedilo. To je "nadomestno besedilo", ki se prikaže, če se slika zaradi nekega razloga ne naloži. To besedilo, ki v našem primeru bere "Logo podjetja", se bo prikazalo, če se slika ne bo naložila. Zakaj bi se to zgodilo? Različni razlogi:
- Nepravilna pot do datoteke
- Nepravilno ime datoteke ali napačno črkovanje
- Napaka prenosa
- Datoteka je bila izbrisana s strežnika
To je le nekaj možnosti, zakaj manjka naša podoba. V teh primerih bi namesto tega prikazal alt alt besedilo.
Alt besedilo uporablja tudi programska oprema bralnika zaslona, da "prebere" sliko obiskovalcu, ki je viden. Ker ne morejo videti slike, kot smo mi, to besedilo omogoča, da vedo, kakšna je slika. Zato je potrebno alt besedilo in zakaj mora jasno navesti, kakšna je slika!
Skupno napačno razumevanje alt besedila je, da je namenjen iskalnemu stroju. To ni res. Medtem ko Google in drugi iskalniki preberejo to besedilo, da bi ugotovili, kakšna je slika (ne pozabite, ne morejo "videti" tudi vašo sliko), ne smete pisati alt besedila, da bi se pritožili samo na iskalnike. Avtor jasno besedilo alt, ki je namenjen ljudem. Če v oznako, ki se obrača na iskalnike, lahko dodate tudi nekaj ključnih besed, toda dobro, vendar vedno poskrbite, da bo alt besedilo služilo svojemu primarnemu namenu, tako da navedete, kakšna je slika za vsakogar, ki ne more videti grafične datoteke.
Drugi atributi
Oznaka IMG ima tudi dva druga atribute, ki jih lahko vidite, ko uporabite grafiko na svoji spletni strani - širino in višino. Če na primer uporabljate urejevalnik WYSIWYG, na primer Dreamweaver, samodejno doda te podatke za vas. Tukaj je primer:
Atributi WIDTH in HEIGHT povejo brskalniku velikost slike. Brskalnik nato natančno ve, koliko prostora v razporedu lahko dodelite, in se lahko premakne na naslednji element na strani med prenosom slike. Težava pri uporabi teh podatkov v HTML-ju je, da morda ne želite, da se vaša slika prikaže na tej natančni velikosti. Na primer, če imate odzivno spletno mesto, katerega velikost se spreminja glede na zaslon obiskovalcev in velikost naprave, boste tudi želeli, da bodo vaše slike prilagodljive. Če navedete v vašem HTML-u, kaj je določena velikost, boste zelo težko prevladali z odzivnimi medijskimi poizvedbami CSS . Zaradi tega in za ohranitev ločevanja sloga (CSS) in strukture (HTML) priporočamo, da v HTML ne dodate atributov širine in višine.
Ena opomba: če pustite te ukaze za velikost in ne določite velikosti v CSS, bo brskalnik prikazal sliko po svoji privzeti nastavitvi, običajno velikost.
Uredil Jeremy Girard