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

7a. Vefmyndir

WWW stærðfræði:

          Texti + Myndir = Margmiðlun
          Margmiðlun + WWW = Alþjóðleg tengimiðlun

Fattarðu?

Markmið

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

Setja vefmynd inn í HTML skjalið þitt.
Velja hvernig myndin raðast með textanum í kring.
Breita vefmyndarskipuninni þannig að það gagnist gestum sem ekki hafa myndræna vefskoðara.
Skilgreina stærð vefmyndar.

Lexía

Við skulum skoða hvernig við getum í HTML sett myndir eins og þessa „Vestfirði“ á vefsíðu...

HTML skipanir fyrir vefmyndir

Vefmynd (e. inline image) er mynd sem kemur fram með textanum á WWW síðu, eins og

þessi mynd af „Vestfjörðum“.

HTML formið á skipun fyrir vefmynd er:


     <img src="skránafn.gif">

þar sem skránafn.gif er nafnið á GIF skránni sem geymd er í sömu undirskrá/möppu og HTML skráin. „Inline“ á ensku lýsir því að myndin kemur í línuna sem textinn er í, eða á milli textalína.

Athugaðu hvernig textinn fylgir beint á eftir „Vestfjörðum“ hér fyrir ofan. En ef við vildum að „Vestfirðir“ væru í sinni eigin línu? Til að neyða mynd á eigin línu,

er einfaldlega sett efnisgreinaskipun á undan myndskipuninni:


     <p> <img src="skránafn.gif">

Uppröðun á texta og vefmyndum

Með sérsökum eigindum við <img...> skipunina er hægt að stjórna því hvernig texti við hliðina á vefmynd raðast að henni. align eigindið, sem sett er fyrir innan <img> skipunina gefur eftirfarandi eiginleika:

`align=top <img align=top src="skranafn.gif">`

Hér eru Vestfirðir vænir að sjá, með vegi og jarðgöng sem eiga hvergi sína líka á landinu. Göngin undir Breiðadals- og Botnsheiðar eru þau lengstu á landinu ... ennþá.

`align=middle <img align=middle src="skranafn.gif">`

Hér eru Vestfirðir vænir að sjá, með vegi og jarðgöng sem eiga hvergi sína líka á landinu. Göngin undir Breiðadals- og Botnsheiðar eru þau lengstu á landinu ... ennþá.

`align=bottom (sjálfgefið) <img align=bottom src="skranafn.gif">`

Hér eru Vestfirðir vænir að sjá, með vegi og jarðgöng sem eiga hvergi sína líka á landinu. Göngin undir Breiðadals- og Botnsheiðar eru þau lengstu á landinu ... ennþá.

Athugaðu að þessar eigindir eiga bara við eina línu... (minnkaðu eða stækkaðu vefskoðaragluggann til að sjá hvað gerist.) Í HTML 2.0 er ekki hægt að hafa textablokk við hliðina á mynd. Í annarri lexíu skoðum við hvernig hægt er að fá fram þannig uppsetningu.

Vefmynd sett í HTML skjal

Athugaðu: Ef þú ert ekki með skjal unnið úr síðustu lexíu, þá getur þú sótt eintak núna. Þú þarft líka að sækja GIF mynd sem hægt er að fá í Lexíu 7 Myndvistunamiðstöð.

Í þessari lexíu bætir þú mynd af eldfjalli við kennslugögnin þín.

Opnaðu vinnusvæðið þitt (ef það er ekki nú þegar opið).
Opnaðu eldfjall.html skjalið í textaritlinum.
Ritaðu eftirfarandi fyrir ofan fyrirsögnina <h1>Edlfjallavefurinn</h1>:
```
  <img src="lava.gif">
```
Þessi HTML skipun setur mynd efst á síðuna hjá þér, hraunmyndina sem þú sóttir í síðustu lexíu.
Vistaðu skjalið og kallaðu það aftur upp í vefskoðaranum.

Þegar þú settir myndina inn, þá hefur þú ef til vill velt fyrir þér af hverju við settum ekki <p> skipun á eftir henni. Það er vegna þess að næsti texti er fyrirsögn. Vefskoðarar setja alltaf sjálfir greinaskil á undan og eftir <h1,h2,h3...> skipunum.

`alt="..."` eigindið

Ef gestir á vefinn þinn eru líklegir til að hafa textavefskoðara, (eins og lynx), þá geta þeir ekki séð vefmyndirnar. Stundum velja notendur líka að fá ekki myndir með textanum til að spara tíma við að sækja síður á hægvirkum netum. Eitt eigindi <img ...> skipunarinnar gefur okkur möguleika á að setja lýsandi texta í stað myndarinnar.

Þegar þannig stendur á, þá sér notandi með textavefskoðara plássmerki, þannig að efsti hluti lexíu þinnar lítur svona út:

[IMAGE]
                   Eldfjallavefurinn

Þetta námskeið sýnir þér hvernig þú getur notað Internetið til
að afla upplýsinga um eldfjöll og síðan rita skýrslu um
niðurstöður þínar.
 -----------------------------------------------------------------
Þetta námskeið...

Þá veit notandinn að það er mynd þarna efst á síðunni. Þú getur lagað <img> skipunina þannig að í stað plássmerkisins kemur textastrengur. Við gætum til dæmis sett „Þetta er:“ með <img> skipuninni, svona:

     <img alt="Þetta er:" src="lava.gif">

alt="..." eigindið setur þá texta í staðinn fyrir plássmerkið í textarápurum (eða þegar slökkt er á myndunum), þannig að nú mundi síðan sjást svona:

Þetta er:
                   Eldfjallavefurinn

Þetta námskeið sýnir þér hvernig þú getur notað Internetið til
að afla upplýsinga um eldfjöll og síðan rita skýrslu um
niðurstöður þínar.
 -----------------------------------------------------------------
Þetta námskeið...

Nú skalt þú breyta <img> skipuninni í HTML skjalinu þínu á þenna hátt.

Hæðar og breiddar eigindi

Önnur eigindi sem þú vilt líklega setja með <img...> skipuninni eru tvö sem gefa mál myndarinnar í pixelum (e. pixels). Til hvers? Venjulega þarf vefskoðarinn þinn að lesa þessi mál þegar hann sækir myndina; síðan kemur hraðar inn ef maður gefur þessar tölur í HTML kóðanum.

Formið á þessum eigindum er svona:

  <img src="skránafn.gif" width=X height=Y >

þar sem X er breidd myndarinnar og Y er hæð myndarinnar í pixelum.

Maður getur venjulega notað einhvers konar myndvinnsluforrit til að finna þessar tölur. Önnur aðferð til að finna þessar stærðir er að hlaða hana inn í vefskoðarann -- þú getur hugsanlega dregið íkon myndarinnar inn í vefskoðaragluggann -- og þá sjást hæð og breidd í titillínunni.

Í okkar dæmi er myndin lava.gif 300 pixel á breidd og 259 pixel á hæð. Þá getur þú lagað eldfjall.html þannig að í því komi fram:

  <img alt="Þetta er:" src="lava.gif" width=300 height=259>

ATHUGAÐU: Röð eiginda innan <img> skipunarinnar skiptir ekki máli.

Oft erum við spurð hvort hægt sé að breyta stærð myndar með því að breyta stærðunum sem gefnar eru. Svarið er já en það er ekki víst að það sem kemur fram sé það sem sóst er eftir. Ef sett er inn hærri tala (til að fá stærri mynd), þá verður hún „gróf“. Stundum geta það verið heppileg áhrif á myndir með stórum einlitum svæðum. Skoðaðu dæmi í Lítið stækkað. Ef maður notar lægri tölur (til að fá smærri mynd) getur afleiðingin orðið aflöguð mynd. Eftir sem áður þarf að sækja fullstóru myndina yfir netið, svo að það sparast ekkert í sóknartíma. Allar stærðarbreytingar kalla á meiri „vinnu“ fyrir vefskoðarann á meðan hann reiknar út uppsetningu síðunnar.

Þú mátt prófa þig áfram og reyna sjálfur. Við gætum haft rangt fyrir okkur!

Þú getur líka skilgreint stærðir vefmynda með prósentuhlutfalli af vefskoðaraglugganum, þannig að myndin stækkar og minnkar sjálfkrafa ef glugginn er stækkaður eða minnkaður. Skoðaðu dæmi um prósentustærðir. Caveat Emptor! Þetta virkar ef til vill ekki á öllum vefskoðurum!

Gættu að hvað þú gerir

Þú vilt ef til vill bera þína síðu saman við þetta dæmi um hvernig skjalið ætti að koma fram. Ef þín síða er frábrugðin þessari þá skaltu athuga hvernig þú settir myndskipunina inn í textaritilinn. Athugaðu hvort þú settir hana ekki eins og lýst er í kaflanum Vefmynd sett í HTML skjal í þessari lexíu.

Ef þú sérð myndartákn sem er eins og brotin mynd eða myndartákn með spurningarmerki:

bla bla bla bla bla bla bla bla bla bla bla bla

þá skaltu fyrst athuga hvort HTML skjalið og GIF myndin séu í sömu undirskrá/möppu, Síðan máttu athuga hvort skráarnafnið sem þú settir í <img... > skipunina sé eins og nafnið á GIF skránni.

ATHUGAÐU: Sum tölvukerfi (UNIX) gera greinarmun á stórum og litlum stöfum, sem þýðir að skráin „lava.GIF“ er ekki sú sama og „lava.gif“. Aðrar tölvur (Macintosh) telja þetta sama skjalið. Þó að tölvan þín geri ekki þennan greinarmun þá leggjum við til að þú haldir alltaf sömu aðferð þegar þú gefur skjölum nöfn og gefur tilvísanir í þau í HTML skjölum. (Fjölmargir WWW þjónar nota UNIX).

Upprifjun

Hvernig er HTML formið til að setja inn vefmynd?
Hvaða skipun verður þú að gefa á undan myndarskipun til að fá hana í sér línu?
Hvernig settir þú hraunmyndina í skjalið þitt?
Hvað gerir alt="...." eigindið? Hvað gerir height="...." eigindið?

Æfing

Settu vefmynd í vefskjalið þitt. Notaðu GIF mynd sem geymd er í tölvunni þinni eða sem þú hefur sótt af Internetinu.

Næst á dagskrá....

Gerðir tenglar í önnur skjöl sem þú hefur búið til og önnur skjöl á Internetinu.

FARA Á.... | Efnisyfirlit | síðasta: „Myndir á vefnum“ | næsta: „Stiklað á akkerum“ |

Námsefnisgerð í HTML: Lexía 7a: Vefmyndir
©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/tut7a.html
Þýtt með leyfi höfundar