Kako vstaviti sliko s HTML

Popestrite svoja spletna mesta tako, da jim dodate slike. Slike lahko vstavite v datoteke HTML z oznako, s katero določite lokacijo slike na internetu, višino in širino slike ter nadomestno besedilo, ki se prikaže, če se slika ne naloži ali če nekdo za ogled strani uporabi bralnik zaslona. Tri običajne vrste slikovnih datotek, ki se uporabljajo v spletu, so GIF, PNG in JPEG.

1. korak

Odprite datoteko HTML za spletno stran, ki ji želite dodati sliko, v urejevalniku besedila, kot je Beležnica ali programska oprema za spletni razvoj.

2. korak

Dodajte oznako v datoteko. Postavite oznako za element, pod katerim želite, da se prikaže slika, ko se datoteka HTML odpre v brskalniku. Oznaka nima ločene zaključne oznake. Znotraj oznake morate določiti vir slike, ki jo želite prikazati, tako da vnesete lokacijo slike v internetu z src atribut. Če je slika shranjena v isti mapi kot datoteka HTML, vnesite ime in pripono slike. Če je slika shranjena drugje, vnesite celoten URL slike.

3. korak

Dodajte alt atribut vaši oznaki. V HTML5 je zahtevan atribut alt. S tem atributom opišite sliko, če se ne more naložiti. Če slike ni mogoče naložiti, brskalnik prikaže besedilo, ki ga vnesete za atributom alt. Poleg tega je atribut alt pomemben za programsko opremo za branje zaslona, ​​ki jo uporabljajo ljudje z motnjami vida. Programska oprema prebere besedilo v atributu alt, tako da lahko oseba z motnjami vida, ki gleda vaše spletno mesto, sliši, kaj je na sliki, čeprav je ne vidi.

4. korak

Določite dimenzije slike v slikovnih pikah z višino in širina lastnosti. Če ne določite dimenzij, brskalnik med nalaganjem strani ne ve, koliko prostora naj pusti za sliko. Posledica tega je, da se stran nalaga nemirno, saj se najprej naloži besedilo, pri čemer ostane majhen prostor za sliko, nato pa skoči narazen, ko se slika naloži, in povzroči, da se prostor razširi. Z navedenimi dimenzijami pusti brskalnik točno toliko prostora med drugimi elementi na strani, da ga slika zapolni, ko se konča z nalaganjem.

5. korak

Preizkusite kodo in se prepričajte, da je slika prikazana na pravem mestu, tako da odprete datoteko HTML v brskalniku.

Nasvet

Uporabite CSS, da premaknete sliko na levo ali desno stran zaslona ali da besedilo zavije okoli nje. Uporabite lahko na primer style="float:left;" ali style="float:right;" znotraj oznake.

Če ne poznate tako višine kot širine slike, je v redu, če uporabite samo atribut višine ali širine. Za določitev višine in širine lahko uporabite tudi CSS; na primer za sliko 100 krat 100 slikovnih pik uporabite atribut style:style="height:100px;width:100px."

Spremenite sliko v povezavo, ki jo je mogoče klikniti, tako da oznako postavite v par oznak »a href«. Na primer, če želite sliko povezati s Facebookom, vnesite naslednje.

Opozorilo

Ne uporabljajte atributa alt, da bi poskušali povečati SEO vaše strani. Iskalniki se že dolgo zavedajo, da nekateri spletni oblikovalci poskušajo napolniti atribut alt z dodatnimi ključnimi besedami, zato prezrejo besedilo v atributu alt.