Horfðu á hvaða vefsíðu sem er á netinu í dag og þú munt taka eftir því að þeir deila ákveðnum hlutum sameiginlega. Eitt af þeim samnýttu einkenni er myndir. Réttu myndirnar bæta svo mikið við kynningu á vefsíðu. Sumar af þessum myndum, eins og merki fyrirtækisins, hjálpa vörumerkinu á síðuna og tengja þessi stafræna aðila við líkamlegt fyrirtæki þitt.
Til að bæta mynd, táknmynd eða grafík við vefsíðuna þína þarftu að nota merkið í HTML kóða síðunnar. Þú setur IMG merkið í HTML þínum nákvæmlega þar sem þú vilt að myndin sé birt. Vefskoðarinn sem gefur kóða síðunnar mun skipta um þetta merki með viðeigandi myndriti þegar blaðið er skoðað. Fara aftur í dæmi um fyrirtækið þitt, hér er hvernig þú getur bætt þessari mynd við síðuna þína:
Eiginleikar mynda
Þegar þú skoðar HTML kóða hér fyrir ofan muntu sjá að þátturinn inniheldur tvö eiginleika. Hver þeirra er krafist fyrir myndina.
Fyrsta eiginleiki er "src". Þetta er alveg bókstaflega myndskráin sem þú vilt birtast á síðunni. Í dæmi okkar eru við að nota skrá sem heitir "logo.png". Þetta er grafíkin sem vefskoðarinn myndi birta þegar það gerði síðuna.
Þú verður einnig að taka eftir því áður en þetta skráarheiti bætti við við viðbótarupplýsingum, "/ images /". Þetta er skráarslóðin. Upphafsspegillinn segir að þjónninn sé að skoða rót skráarinnar. Það mun þá leita að möppu sem heitir "myndir" og að lokum skrána sem kallast "logo.png". Notkun möppu sem kallast "myndir" til að geyma grafík alls staðar á síðuna er nokkuð algengt, en skráarslóð þín verður breytt í það sem skiptir máli fyrir vefsvæðið þitt.
Annað nauðsynlegt eigindi er "alt" textinn. Þetta er "varamaður texti" sem er sýnt ef myndin tekst ekki að hlaða af einhverjum ástæðum. Þessi texti, sem í okkar dæmi segir "Fyrirtæki Logo" myndi birtast ef myndin tekst ekki að hlaða. Af hverju myndi þetta gerast? A fjölbreytni af ástæðum:
- Rangt skráarslóð
- Rangt skráarnafn eða stafsetningarvillur
- Sendingarvillur
- Skrá var eytt úr þjóninum
Þetta eru bara nokkrar möguleikar fyrir af hverju tiltekin mynd okkar kann að vera vantar. Í þessum tilvikum birtist alt textinn okkar í staðinn.
Alt texta er einnig notað af skjálesaraforritinu til að "lesa" myndina á gesti sem er sjónskerðing. Þar sem þeir geta ekki séð myndina eins og við gerum leyfir þessi texti þá að vita hvað myndin er. Þess vegna er alt texti krafist og hvers vegna ætti það að koma skýrt fram hvað myndin er!
Algeng misskilningur á alt texta er að það er ætlað til leitarvélar. Þetta er ekki satt. Þó að Google og aðrar leitarvélar lesi þennan texta til að ákvarða hvað myndin er (muna, þeir geta ekki "séð" myndina þína heldur), ættirðu ekki að skrifa alt texta til að höfða eingöngu til leitarvélar. Höfundur hreinsar allt texta sem er ætlað fyrir menn. Ef þú getur líka bætt nokkrum leitarorðum inn í merkið sem höfða til leitarvéla, þá er það fínt, en vertu viss um að alt textinn sé að þjóna aðalmarkmiði sínu með því að lýsa því hvað myndin er fyrir þá sem ekki sjá grafíkskrána.
Aðrir eiginleikar
IMG merkið hefur einnig tvær aðrar eiginleikar sem þú gætir séð í notkun þegar þú setur grafík á vefsíðuna þína - breidd og hæð. Til dæmis, ef þú notar WYSIWYG ritstjóri eins og Dreamweaver, bætir það sjálfkrafa þessum upplýsingum fyrir þig. Hér er dæmi:
WIDTH og HEIGHT eiginleikar segja vafranum stærð myndarinnar. Vafrinn veit þá nákvæmlega hversu mikið pláss er í skipulaginu til að úthluta og það getur farið á næsta atriði á síðunni meðan myndin er niðurhal. Vandamálið með því að nota þessar upplýsingar í HTML þínum er að þú viljir ekki alltaf að myndin þín sé sýnd með þeim nákvæmu stærð. Til dæmis, ef þú ert með móttækilegan vef þar sem límvatn breytist með hliðsjón af gestaskjá og tækjastærð, munt þú einnig vilja að myndirnar þínar séu sveigjanlegar. Ef þú tilgreinir í HTML þínum hvað fastur stærð er, þá finnur þú það mjög erfitt að hunsa með viðkvæmum CSS fjölmiðlum . Af þessum sökum, og til að viðhalda aðgreiningu á stíl (CSS) og uppbyggingu (HTML), er mælt með því að þú bætir ekki við breidd og hæð eiginleika HTML kóða.
Ein athugasemd: Ef þú skilur eftir þessum límvatnaleiðbeiningum og tilgreinir ekki stærð í CSS, þá birtist vafrinn í myndinni sjálfgefið, í upphafi.
Breytt af Jeremy Girard