Námsefnisgerð í HTML | Um | SOS | Nemendur | Hól | Tilvísanir | Skipanir | Lexíur | fyrri | næsta |

7. Myndir á vefnum

Það er bara gamaldags rafpóstur að senda texta út á Internetið. Fólk er búið að gera það í áratugi! En þegar við getum sett myndir með, þá verða skilaboðin fræðandi! Er ekki gangverðið ennþá 1000 orð á mynd?

Markmið

Eftir þessa lexíu átt þú að kunna að:

Þekkja þau myndaform sem nothæf eru á Veraldarvefnum.
Ræða mikilvæg atriði sem hafa þarf í huga þegar myndir eru settar í vefskjöl.
Sækja mynd af netinu inn á tölvuna þína.
Nota rétta HTML uppsetningu við að nota myndir á vefsíðunni þinni.

Lexía

Nú skaltu bara halla þér afturábak og slappa af! Þessi lexía er að mestu inngangur að notkun mynda á Veraldarvefnum. En þú færð að fikta smá í lokin.

Myndaform vefsins

Tölvutækar myndir eru til á ýmsu formi... PICT, GIF, TIFF, PNG, svo ekki sé talað um EPS, BMP, PCX, JPEG...

Þetta hljómar eins og atómljóð á dulmáli. Lélegt atómljóð!

Vefskoðarar sýna myndir á HTML formi með því að vísa í upplýsingar sem eru þannig settar upp að tölvur af mismunandi gerð geti allar skilið og sýnt þær. Til dæmis, ef myndupplýsingarnar koma inn á Macintosh tölvu, þá veit vefskoðarinn að hann á sýna þær sem mynd á Macintosh formi. Ef vefskoðarinn er á Windows vél, þá sýnir hann myndina á Windows formi.

Á tæknimáli er sagt að þetta myndform sé óháð tölvugerð (e. platform independent). HTML er sjálft óháð tölvugerð þar sem venjuleg tákn sjást jafnt á öllum tölvum.

Staðalformið sem notað er til að sýna myndir innan vefsíðna er GIF eða Graphics Interchange Format. GIF þjappar myndupplýsingarnar (minnkar skjalstærðina) og þýðir þær yfir á tvíundarkóða sem hægt er að senda yfir Internetið. GIF þjöppun er skilvirkasta þjöppunin fyrir myndir með samliggjandi einlit svæði með heilum litum og þjöppunin er jafnvel meiri ef liturinn er samfelldur lárétt. GIF myndir hafa líka þann eiginleika að geta skilgreint lit sem „ósýnilegan“ eða „glæran“, þannig að myndir virðast þá ekki hafa neinar ferkantaðar brúnir. Þær má líka vista á svokölluðu „samtvinnuðu“ formi (e. interlaced), sem virkar þannig að þegar síða byrtist, þá rennur myndin inn smátt og smátt þar til fullri skerpu er náð.

Hitt myndformið sem notað er á vefnum er JPEG (nefnt eftir Joint Photographic Expert Group, hópnum sem hannaði þetta form). Áður fyrr sáust JPEG myndir ekki á síðunni sjálfri, heldur í sérstökum glugga með aðstoð „hjálparforrits“. Í dag sýna flestir vefskoðarar JPEG formið á síðunni líka.

JPEG þjöppun er mjög hentug fyrir ljósmyndir þar sem hver litur þekur tiltölulega lítið svæði („kornóttar“ myndir). JPEG gefur stundum áhrifamikla minnkun á skjalstærð, stundum allt að tífalda, (t.d. 1500 kb skjal minnkað niður í 150 kb), en þó stundum á kostnað myndskerpu. Ekki er möguleiki að hafa glæra liti í JPEG myndum.

Þú getur fengið frekari upplýsingar um þessi myndform á SITO síðunni hjá Graphics File Compression. Ef þig langar til að skoða frábæra bók, þá skaltu prófa Designing Web Graphics eftir Lyndu Weinman.

Sífelt fleiri myndvinnsluforrit gefa kost á að vista myndir á GIF formi. Nýrri slík forrit, eins og ImageReady frá Adobe og Fireworks frá Macromedia eru sérhönnuð til að búa til vefmyndir. Þú getur fundið önnur deiliforrit/tól til að umbreyta myndum í vefmyndir á download.com.

Nokkur atriði varðandi myndnotkun

Á þessu námskeiði þarft þú ekki að nota myndvinnsluforrit. Við sýnum þér hvernig þú getur vistað eintak af hvaða mynd sem þú sérð á vefsíðu.

En þegar þú, aftur á móti, ferð að hanna þínar eigin vefsíður þá ættir þú að prófa að búa til myndir á annað hvort GIF eða JPEG formi. Ef síðurnar þínar innihalda myndir, þá skaltu hafa eftirfarandi í huga:

Fjöldi stórra mynda lítur án efa flott út á hraðvirkri tölvu, en þær fara bara í taugarnar á þeim sem bíða á meðan þær smá mjatlast inn yfir netið. Ég legg til að allir reyni að hafa myndir undir 100k að stærð (helst undir 50k hverja).
Þar að auki eru ekki allir með 21 tommu skjá við tölvuna! Hafðu myndir helst ekki stærri en 480 pixel á breidd og 300 pixel á hæð svo að notendur þurfi ekki að renna fram og aftur eða stilla skjáupplausn til að sjá þær.
Litblöndun (e. color gradients) er mjög fallegt fyrirbæri en þjappast ekki eins vel í GIF myndum og heilir litir og þeir koma stundum fram „bröndóttir“.
Sum myndvinnsluforrit bjóða uppá möguleika til að minnka litahopp (e. no dithering) þegar þjappað er í GIF form -- þetta getur minnkað „óhreinindi“ í heilum litum.
Margir dökkit litatónar á Macintosh tölvum renna saman í Windows tölvum.
Oft er betra að hafa stiklur að myndum en að hafa þær allar á síðunni. Notandinn getur þá kallað fram myndina þegar og ef hann vill og þarf ekki að bíða eftir henni ef hann vill það ekki (við skoðum þetta nánar seinna í lexíu 8a og lexíu 8d). Ef þú ert með margar myndir sem þú vilt sýna þá skaltu frekar reyna að skipta síðunni upp í margar litlar samtengdar síður.
Ein lítil mynd (t.d. lítil „doppa“) getur komið oft fyrir á sömu síðunni án þess að tefja hana teljandi.
Margir vefskoðarar flýtivista (e. cache) myndir (geyma þær í tölvunni þinni) og ef sama myndin er notuð á mörgum vefsíðum í röð þá sækir vefskoðarinn eintak af henni í flýtiminnið frekar en yfir Internetið.
Það mikilvægasta af öllu er að sjá til þess að myndirnar bæti við það sem verið er að segja á HTML síðunni.

Þú getur vel hannað einstaklega fallega síðu með mörgum góðum myndum, sem kemur hratt og örugglega fram í tölvunni þinni, en mjatlast ósegjanlega hægt yfir hægvirkt módem við fjölfarið net. Internetið er orðið mannmargt og umferðin eykst með hverri sekúndu.

Myndir vistaðar og notaðar á vefsíðu

Í næstu lexíu þá þarftu í fyrsta sinn að hlaða inn eintaki af GIF mynd af gjósandi eldfjalli (passaðu þig á hrauninu!).

Fylgdu bara leiðbeiningunum í Lexíu 7 Myndvistunarmiðstöð og komdu svo aftur hingað til að klára lexíuna.

Gættu að hvað þú gerir

Athugaðu að skráin „lava.gif“ sé vistuð í sömu undirskrá/möppu og HTML textaskráin þín, „Eldfjall.html“. Ef hún er ekki þar athugaðu þá hvort þú hafir óvart vistað hana í annarri undirskrá/möppu. Færðu hana þá á réttan stað.

Upprifjun

Hvaða tvö myndform eru notuð á Veraldarvefnum?
Hvernig getur mynd sést jafnt á mismunandi tölvugerðum?
Hvaða lykilatriði þarf að hafa í huga þegar myndir eru notaðar á vefsíðum?
Hvernig vistaðir þú eldfjallamyndina sem þú ætlar að nota í WWW skjalið þitt?

Æfing

Sprangaðu um vefinn og leitaðu að myndum. Prófaðu að vista til þín í það minnsta eina mynd sem þú gætir hugsanlega notað á vefsíðunni þinni. Hér eru nokkrir staðir sem þú gætir notað:

Næst á dagskrá....

Þú ert með mynd .... Hvernig í HTML á að láta hana sjást í skjalinu?

FARA Á.... | Efnisyfirlit | síðasta: „Listar, listar og listar“ | næsta: „Vefmyndir“ |

Námsefnisgerð í HTML: Lexía 7: Myndir á vefnum
©1994 - 2000 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

Tengiliður MCLI er Alan Levine
Sendu athugasemdir til alan.levine@domail.maricopa.edu
eða gaui@mmedia.is

URL: http://www.vma.is/tut/tut7.html
Þýtt með leyfi höfundar