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

8e. Stiklumyndir

teningurTexti hefur ekkert einkaleyfi á að vera „stikla“... þú getur aukið fjölbreytnina í vefsíðum þínum með því að nota myndir sem stikluleggi (Prófaðu bara að smella á teninginn!).

Markmið

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

Lexía

Athugaðu: Ef þú átt ekki vinnuskjalið úr síðusti lexíu, þá getur þú sótt eintak núna.

Stikluhnappur

Eftir síðustu lexíu ertu (vonandi) fær um að búa til stikluleggi, texta innan skjalsins þíns sem tengja það við viðeigandi upplýsingar. Það má líka nota vefmyndir (sjá Lexíu 7a) sem virka sem stikluleggir. Þú manst að í fyrri lexíu tengdum við síðu í Eldfjallavefnum, index.html, við aðra síðu, msh.html, sem lýsir eldfjallinu Mount St. Helens. Í þessa seinni síðu ætlum við nú að setja hnapp sem sendir mann til baka í aðalnámsefnið ef maður smellir á hann.

Það sem gert er til að fá þetta er að setja HTML skipunina fyrir vefmynd innan í stiklulegginn í akkerinu: 


   <a href="skjalX.html"> <img src="mynd.gif">
   Fara í skjal X</a>
Í skjalinu þínu myndi þessi HTML texti sýna vefmynd og textann Fara í skjal X. Hvort tveggja virkar sem stikluleggir; það skiptir ekki máli hvort smellt er á textann eða myndina, í báðum tilfellum fer vefskoðarinn í HTML skjalið skjalX.html. Það væri hægt að hafa myndina eina sem stiklulegg. Þannig „stiklumynd“ er venjulega með ramma í Veraldarvefnum með sama lit og stiklutexti á síðunni og þannig vitum við að myndin er „virk“.
ATHUGAÐU: í mörgum vefskoðurum er nú hægt að breyta lit stikluleggja og á sumum síðum er ramminn tekinn af stiklumyndum. Oftast er hægt að þekkja stikluleggi með því að horfa á hvernig músarbendillinn breytist þegar hann fer yfir „virkt“ svæði. Hann breytist venjulega úr ör í hönd ef stikluleggur er virkur.

Við mælum með að ef þú notar myndir sem stikluleggi, þá setjir þú alltaf texta með, eða notir ALT= eigindið í <IMG...> skipuninni ef notandinn hefur tekið myndsækni af.

Nú ætlum við að búa til „stikluhnapp“ með mynd. Fyrst þarftu að sækja eintak af mynd af ör í Lexía 8e Myndvistunarmiðstöð.

Þú ættir nú að hafa eintak af myndinni einhversstaðar í tölvnni þinni (Þú ættir að færa hana í undirskrána/möppuna myndir á vinnusvæðinu þínu).

Næst skaltu bæta við HTML skipunum til að fá hnappinn til að virka:

  1. Opnaðu HTML skjalið msh.html í textaritlinum.
  2. Breyttu línunni neðst þannig að hún sé svona: 
    
<hr>
<a href="index.html"> <img src="../myndir/left.gif">
Til baka í <i>Eldfjallavefinn</i></a>
    Athugaðu: Vefmyndarskipunin (<img...>) er öll fyrir innan > merkið sem lokar URL-inu og </a> skipunarinnar sem markar enda stikluleggsins. Athugaðu líka hvernig <i> skipunin er sett innan í stiklulegginn til að leggja áherslu á nafn námskeiðsins. Og að lokum notuðum við <hr> skipun til að setja strik fyrir ofan hnappinn (skoðaðu lexíu 4 til að sjá meira um þessa skipun).
  3. Vistaðu HTML skjalið.
  4. farðu aftur í vefskoðarann og veldu Open Local / Open Page af File valmyndinni til að lesa inn „msh.html“ skjalið.
  5. Veldu Refresh af File valmyndinni til að fá inn breytingarnar.
  6. Prófaðu stiklulegginn að að myndinni af Mount St. Helens og nýja hnappinn á Eldfjallavefinn.

Smámyndir og „frímerki“

Við höfum áður ráðið þér frá því að nota stórar vefmyndir á vefsíðum af því að gestirnir gætu þurft að bíða mjög lengi eftir því að tölvur þeirra sæki myndirnar. Ein aðferð til að komast í kringum þetta er að nota minni útgáfur af sömu myndum eða „frímerki“ (stundum kölluð þumalneglur e. thumbnail) sem eru sett inn sem vefmyndir. Síðan getur þú notað sömu skrefin og hér að ofan og gert „frímerkið“ að stiklulegg að stóru myndinni. Þannig er stóra myndin bara sótt ef gesturinn vill það.

Fyrst þarft þú að sækja eintak af myndunum tveim í Lexía 8e Myndvistunarmiðstöð. (Þú þarft að vista þessar myndir í undirskránni/möppunni myndir á vinnusvæðinu þínu).

Næst býrðu til tenginguna með frímerkinu í aðal textaskrána þína:

  1. Opnaðu skjalið index.html í textaritlinum.
  2. Settu eftirfarandi texta undir fyrirsögnina Long Valley: 
    
  Þessi skjálftamælir mælir jarðskjálfta undir yfirborðinu
  sem fylgja eldvirkni og gæti notast við að segja fyrir um
  náttúruhamfarir.  Hann er staðsettur á hásléttu sem kallast
  "hraunlagastafli", sem varð til við gríðarleg eldgos fyrir
  600.000 árum.
  <p>
  <a href="../myndir/seismo.jpg">
    <img src="../myndir/stamp.gif" ALT="tengi í stóra mynd"
    WIDTH="62" HEIGHT="85">
  -- [Skoða myndina í fullri stærð, 55k] -- </a>
  <p>
  Þessi skjálftamælir finnur jarðskjálfta
  sem fylgja jarðhreyfingum undir yfirborðinu.
    Vefmyndin stamp.gif er stikluleggur að stærri mynd, seismo.jpg. Þegar gestur smellir annað hvort á „frímerkið“ eða textann „-- [Skoða myndina í fullri stærð, 55k] --“ þá sýnir vefskoðarinn stóru myndina í nýjum glugga.

    Athugaðu hvernig mál myndarinnar er sett með fyrir stamp.gif í <img...> skipuninni ásamt með ALT=... eigindinu.

    Í stiklutextanum gefum við þær upplýsingar að myndin sé 55k að stærð. Þá fær gesturinn val um það hvort hann vill sækja svo stóra mynd... Ef stikla vísar á eitthvað sem er 1,6 Mb að stærð, þá myndir þú, sem gestur vilja vita það áður en þú reynir að sækja svo stóra skrá.
  3. Vistaðu skjalið og notaðu Refresh í vefskoðaranum.

Gættu að hvað þú gerir

Berðu þína vefsíðu saman við dæmi um hvernig þessi síða á að líta út. Ef þín vefsíða er mjög frábrugðin dæminu, þá skaltu fara aftur yfir textann sem þú ritaðir í textaritlinum. Algengustu mistökin eru misræmi í stafsetningu skjalanafna og HTML kóða í akkeristengjum eða að myndirnar eru ekki í réttri undirskrá/möppu. Ef þú sérð táknmynd af brotinni mynd:

dæmi um vefsíðu
bla bla bla bla bla bla bla bla bla bla bla bla

no image

þá þýðir það venjulega að HTML kóðinn í <img> skipuninni er ekki í samræmi við vistun skránna eða að myndirnar eru ekki á GIF eða JPEG formi.

Upprifjun

Upprifjunarefni fyrir þessa lexíu:
  1. Hvernig bjóst þú til myndarhnapp á síðunni þinni?
  2. Hvernig koma „frímerki“ að gagni við að setja myndir á vefsíður?
  3. Hvernig bjóst þú til „frímerkisstikluna“ á síðunni þinni?

Æfing

Prófaðu að setja hnapp sem tengir tvær síður saman á vefinn þinn. Seinna lærum við hvernig við getum fjarlægt kassann sem kemur í kringum myndina.

Næst á dagskrá....

Skipunin um forsnið notuð til að búa til töflu í námsefninu um eldfjöllin.
FARA Á.... | Efnisyfirlit | síðasta: „Nafngreind akkeri“ | næsta: „Forsniðinn texi“ |

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