Kaj so HTML slikovne oznake?
Naslednji članek bo opisal oznake HTML Image. Poznam njen kliše, vendar naj začnem z besedo, da je slika vredna tisoč besed. V primeru spletnih strani še posebej velja. Slika lahko obiskovalca proda z vašo idejo, nekoga navduši, da kupi vaš izdelek, kar lahko pomaga, da spletna stran izgleda toliko bolje. V tem priročniku si bomo ogledali, kako lahko dodamo IMG na spletne strani in jih pravilno poravnamo, skupaj z dodajanjem povezav do njih.
Dodajanje slik na spletne strani
IMG lahko dodate na stran HTML s pomočjo v dokumentu HTML, tukaj je skladnja:
Tukaj IMG brskalniku pove, da oznaka pomeni dodajanje datoteke IMG v dokument in "src =" določa, od kod naj prenesete sliko.
Primer strani s sliko
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Tukaj je izhod kode:
Pri teh HTML straneh je zanimivo dejstvo, da ko uporabite oznako IMG, se slika ne vstavi na omenjeno spletno stran, temveč ustvari prostor za shranjevanje, kjer se slika postavi po prenosu.
Podpora brskalnika in združljivost z atributi
Kot lahko pričakujete, vsi sodobni brskalniki podpirajo slike in uporabo oznak IMG. Včasih brskalniki za mobilne naprave spremenijo velikost slike, da jo namesti na zaslon, če slika ni nastavljena kot odzivna.
Ko gre za združljivost atributov s HTML 4.01 in novejšim HTML5, bo večina oznak delovala, razen poravnave, robov, hspace in vspace, ki v slednjem preprosto niso podprti.
Slike kot povezava:
Prišli bodo časi, ko boste želeli, da slika deluje kot povezava do druge strani. To lahko storite tako, da v oznako dodate oznako IMG.
Nastavitev slike kot ozadja spletne strani
Sliko lahko dodelite kot ozadje slike spletne strani s pomočjo lastnosti CSS v ozadju slike v elementu Body na strani.
Slika ozadja
Nastavitev slike, da plava v brskalniku
Lahko uporabimo lastnost CSS "float" za nastavitev slike, da lebdi znotraj kjer koli v oknu brskalnika. Oglejmo si primer, ki vam bo pomagal pri razumevanju.
Tu bo slika avtomobila plavala na desni strani besedila.
Tu bo slika avtomobila lebdela na levi strani besedila.
Atributi slikovne oznake
Sledijo atributi slikovne oznake.
1) Poravnajte
Možne vrednosti: zgoraj, spodaj, na sredini, levo ali desno.
Atribut alight se uporablja za določanje poravnave slike na spletni strani.
2) Alt
Vrsta vrednosti: Besedilo
Alt se uporablja za določanje nadomestnega besedila slike spletne strani. V primerih, ko prikaz IMG ni mogoč, brskalnik to besedilo prikaže uporabniku. Iskalniki, kot sta Google in Bing, uporabljajo to alt besedilo za prikaz rezultatov v slikovnem iskanju.
3) Meja
Vrednost vrste: Piksli
Uporablja se za ustvarjanje obroba uporabniško določene debeline okoli slike. V HTML5 ne deluje.
4) navzkrižno poreklo
Vrsta vrednosti: anonimna uporaba-poverilnice
Ta atribut uporabljamo, kadar želimo določiti, kako naj se ukvarjajo s fotografijami navzkrižnega izvora. Večinoma se uporablja v primerih, ko so uporabljeni elementi platna spletnih aplikacij JavaScript.
5) Višina
Vrsta vrednosti: odstotki ali slikovne pike
Očitno se ta uporablja za označevanje višine slike na spletni strani HTML.
6) hspace
Vrednost vrste: Piksli
Nepodprti v HTML5 se atribut hspace v piklih določi, koliko belega presledka je treba dodati na levi in desni strani vstavljene slike.
7) ismap
Vrsta vrednosti: URL strani
ismap, ki smo ga uporabili za opredelitev navedene slike kot zemljevid slike na strani strežnika. Ko uporabnik klikne (ali se dotakne) znotraj slike, brskalniki pošljejo koordinate klika (ali tapka) spletnemu strežniku kot URL.
8) Longdesc
Vrsta vrednosti: URL
Longdesc se uporablja za podroben opis slike z uporabo URL-ja. Kot opis slike se uporablja URL, uporabljen v atributu.
9) src
Vrsta vrednosti: URL
src pomeni izvor, uporablja pa se za določitev naslova, s katerega bo brskalnik prejel sliko, ta URL pa se lahko uporabi za sliko znotraj imenika na istem strežniku in lahko shrani tudi sliko na strežniku drugih proizvajalcev z drugo ime domene.
10) uporabni zemljevid
Vrsta vrednosti: #mapname
Atribut usemap se uporablja za določanje slike za slikovni zemljevid na strani odjemalca. Vedno se uporablja uporabniški zemljevid z oznakami HTML na zemljevidu in območju.
11) vspace
Vrednost vrste: Piksli
Nepodprti v HTML5 se atribut Vspace uporablja za nastavitev števila slikovnih pik, ki naj se uporabijo kot beli prostor na vrhu in na dnu slike na spletni strani.
12) Širina
Vrednost vrste: Piksli
Tako kot že ime pove, se atribut širine uporablja za določitev širine slike znotraj HTML strani.
Zaključek - HTML slike
Zdaj, ko smo si ogledali, kako se slike dodajajo na straneh HTML in kako nastaviti njihove atribute, lahko v spletnem projektu ustvarimo privlačne videz spletnih strani.
Poleg tega, da spletni strani dodate vizualni pridih, so slike dragocene tudi zato, ker pomagajo pri optimizaciji iskalnikov. Če slikam dodate ustrezne nadomestne oznake in opise, iskalniki pomagajo boljše razumeti vsebino spletne strani in v mnogih primerih izboljšajo uvrstitev spletne strani.
Priporočeni članki
To je vodnik za HTML slike. Tukaj razpravljamo o atributih slikovne oznake, skupaj s podporo brskalnika in združljivosti s atributi. Za več informacij si lahko ogledate tudi naslednje članke -
- Preprost vodnik za ukaze HTML
- Uvod v to, kaj je XHTML?
- Vadnice o atributih HTML
- Prijave in najboljše uporabe HTML-ja
- Različni slogi seznama v HTML
- Okvirji HTML
- Bloki HTML