Poglejte katero koli Spletna stran danes v spletu in opazili boste, da si nekatere skupne stvari delijo. Ena od teh skupnih lastnosti so slike. Prave slike toliko pripomorejo k predstavitvi spletnega mesta. Nekatere od teh slik, kot je logotip podjetja, pomagajo pri blagovni znamki spletnega mesta in povezati digitalno entiteto s fizičnim podjetjem.
Kako dodati sliko na spletno stran s pomočjo HTML
Če želite na svojo spletno stran dodati sliko, ikono ali grafiko, morate uporabiti oznako v kodi HTML strani. Ti postaviš.
IMGoznako v vašem. HTML točno tam, kjer želite, da se prikaže grafika. Spletni brskalnik, ki upodablja kodo strani, bo po ogledu strani to oznako nadomestil z ustrezno grafiko. Če se vrnemo na primer logotipa našega podjetja, lahko to sliko dodate na svoje spletno mesto:
Atribut SRC
Če pogledate zgornjo kodo HTML, boste videli, da element vključuje dva atributa. Vsak od njih je potreben 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 brskalnik prikazal, ko je spletno mesto upodobil.
Opazili boste tudi, da smo pred tem imenom datoteke dodali nekaj dodatnih informacij, "/ images /". To je pot do datoteke. Začetna poševnica naprej strežniku pove, naj pogleda v koren imenika. Nato bo poiskal mapo z imenom "images" in na koncu datoteko z imenom "logo.png". Uporaba mape z imenom "images" za shranjevanje vseh grafik spletnega mesta je precej pogosta praksa, vendar bi bila pot do datoteke spremenjena v tisto, kar je pomembno za vaše spletno mesto.
Alt atribut
Drugi obvezni atribut je besedilo "alt". To je "nadomestno besedilo", ki se prikaže, če se slika iz nekega razloga ne naloži. To besedilo, ki se v našem primeru glasi "Logotip podjetja", bi bilo prikazano, če se slika ne naloži. Zakaj bi se to zgodilo? Razlogi:
- Napačna pot do datoteke
- Napačno ime datoteke ali napačno črkovanje
- Napaka pri prenosu
- Datoteka je bila izbrisana s strežnika
To je le nekaj možnosti, zakaj naša določena slika morda manjka. V teh primerih bi se namesto tega prikazalo naše nadomestno besedilo.
Za kaj se uporablja nadomestno besedilo?
Nadomestno besedilo uporablja tudi programska oprema za branje zaslona, da "prebere" sliko obiskovalcu, ki je slaboviden. Ker slike ne vidijo tako kot mi, jim to besedilo sporoča, kakšna je slika sama. Zato je potrebno nadomestno besedilo in zakaj mora biti jasno navedeno, kakšna je slika!
Pogosto napačno razumevanje nadomestnega besedila je, da je namenjeno iskalnikom. To ni res. Medtem ko Google in drugi iskalniki berejo to besedilo, da ugotovijo, kakšna je slika (ne pozabite, ne morejo "videti" tudi vaše slike), ne bi smeli pisati nadomestnega besedila, da bi se pritožili zgolj na iskanje motorji. Avtor jasno besedilo alt, ki je namenjeno ljudem. Če lahko v oznako dodate tudi nekaj ključnih besed, ki so privlačne za iskalnike, je to v redu, vendar vedno poskrbite alt besedilo služi svojemu primarnemu namenu z navedbo, kakšna je slika za vsakogar, ki ne vidi grafike mapa.
Drugi atributi slike
The.
IMG.
Oznaka ima tudi dva druga atributa, ki ju lahko vidite pri uporabi, ko na svojo spletno stran postavite grafiko - širino in višino. Če na primer uporabljate urejevalnik WYSIWYG, kot je Dreamweaver, samodejno doda te informacije namesto vas. Tu je primer:
The.
PREMER.
in.
VIŠINA.
atributi brskalniku sporočajo velikost slike. Nato brskalnik natančno ve, koliko prostora v postavitvi mora dodeliti, in se lahko med prenosom slike premakne na naslednji element na strani. Težava pri uporabi teh informacij v HTML-ju je, da morda ne boste vedno želeli, da se slika prikaže v točni velikosti. Na primer, če imate.
odzivno spletno mesto
katerih velikost se spreminja glede na zaslon obiskovalcev in velikost naprave, boste želeli tudi, da bodo vaše slike prilagodljive. Če v HTML navedete, kakšna je fiksna velikost, boste zelo težko preglasili odziven.
Medijska poizvedbe CSS
. Zaradi tega in za ohranitev ločevanja sloga (CSS) in strukture (HTML) priporočamo, da v kodo HTML NE dodajate atributov širine in višine.
Ena opomba: če ta navodila za določanje velikosti izključite in ne določite velikosti v CSS, bo brskalnik tako ali tako prikazal sliko v privzeti velikosti.
Uredil Jeremy Girard