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

22. Meira um myndir og lista

Eyddu endanlega þessum pirrandi kössum utanum myndastiklur,

eða bættu við breiðum ramma, plús:

Markmið

• Búa til stiklulegg með mynd án þess að hafa á henni ramma.
• Rita HTML uppsetningu á óröðuðum lista með annars konar punkta.
• Rita raðaðan lista með númerun í stórum stöfum, litlum stöfum og stórum eða litlum rómverskum tölum.
• Breyta röðuðum lista þannig að hann byrji að telja frá hvaða plústölu sem er.

Lexía

Enginn stiklurammi utanum stiklumyndir

virkar nákvæmlega eins og hver annar stiklutexti.

En ramminn er stundum pirrandi, sérstaklega ef við erum með mynd sem er ekki með ferkantaðar útlínur. Notandinn getur venjulega séð hvort mynd er stikluleggur eða ekki með því að fylgjast með bendlinum þegar hann fer yfir myndina (bendillinn breytist í „hönd“ þegar hann fer yfir virkan stiklulegg).

Það er hægt að „slökkva á“ þessum ramma með því að bæta eigindi við <img...> skipunina:

  <a href="stórmynd.gif"><img src="smámynd.gif" border=0></a>

Það eru tveir staðir í Eldfjallavefnum þar sem myndir eru stikluleggir -- manstu hvar?

Sá fyrri er í skjalinu usa.html þar sem lítil mynd af jarðskjálftamæli tengist samskonar stærri mynd. Hinn staðurinn er örvahnappurinn í skjalinu msh.html sem bendir til baka í námsefnið.

1. Opnaðu bæði skjölin usa.html og msh.html í textaritlinum þínum.
2. Finndu staðinn þar sem lítil mynd tengist einhverju öðru.
3. Breyttu báðum <img src=....> skipunum sem eru stikluleggir þannig að þar komi border=0 eigindið. Til dæmis í skjalinu msh.html ætti þetta að líta svona út:

   
     <a href="usa.html">
     <img src="../myndir/left.gif" alt="** " border=0>
     Til baka í <i>Eldfjallavefinn</i></a>
   

4. Vistaðu skjölin usa.html og msh.html og kallaðu þau upp í vefskoðarann þinn.
5. Ef ramminn utanum smámyndirnar er horfinn en þær virka ennþá sem stikluleggir, þá er þínu verki lokið.

Rammar settir utanum myndir

Og nú sýnum við þér hvernig á að gera þvert á það sem áður var sagt: setja STÓRA ÞYKKA ramma utanum myndir! Þú getur notað sömu border=X uppsetninguna til að bæta við ramma í kringum mynd. Talan sem þú notar í staðinn fyrir X ákvarðar þykkt rammans í pixelum:

8 pixela rammi á mynd

<IMG SRC="myndir/disk.gif" WIDTH=48 HEIGHT=40 border=8>

Þú getur líka notað þetta á mynd sem er stikla:

8 pixela rammi á mynd sem er líka stikla á aðra síðu

<A HREF="page.html">
  <IMG SRC="myndir/disk.gif" WIDTH=48 HEIGHT=40 border=8></a>

Doppur fyrir óraðaða lista

 <ul type=xxxx>

• type=circle
• type=square
• type=disc [sjálfgefin doppa fyrir efsta þrepið]

HTML	Svona sést það
<ul type=square> <li>þetta er atriði 1 <li>þetta er atriði 2 <li>þetta er atriði 3 <li type=circle> Sko! hvað finnst þér um punktana? <li>þetta er enn eitt atriðið <li>og fleiri <li type=disc> Sko! hvað finnst þér um punktana? </ul>	þetta er atriði 1 þetta er atriði 2 þetta er atriði 3 Sko! hvað finnst þér um doppurnar? þetta er enn eitt atriðið og fleiri Sko! hvað finnst þér um doppurnar?

Athugaðu að sú týpa sem valin er með <li type=xxxx> skipuninni er notuð áfram af öllum <li> skipunum sem fylgja nema önnur dopputýpa sé valin.

Við ætlum nú að breyta punktatýpunni í listanum í síðunni Rannsóknarverkefni (skjal ranns.html).

1. Opnaðu skjalið ranns.html í textaritlinum þínum.
2. Fyrsti listinn í þessu skjali er raðaður listi <ol>...</ol> en við ætlum að breyta honum í óraðaðan lista með hringi fyrir punkta. Laga HTML textann í fyrsta listanum þannig að hann sé svona:

   
     <ul type=circle>
     <li>Gerð eldfjalls
     <li>Staðsetning
     <li>Nafn, fjarlægð og íbúafjöldi næstu borgar
     <li>Dagsetningar síðustu og öflugustu gosa
     <li>Aðrir atburðir sem rekja má til eldgosa
         (jarðskjálftar, flóð, aurskriður, o.s.frv.)
     </ul>
   

3. Vistaðu skjalið og kallaðu það upp í vefskoðarann þinn. Berðu þitt skjal saman við þetta dæmi um hvernig listinn þinn ætti að líta út núna.

Gerðir og tölur fyrir raðaða lista

Arabískir	Hástafir	Lágstafir	Stórir rómverskir	Litlir rómverskir
<ol type=1>	<ol type=A>	<ol type=a>	<ol type=I>	<ol type=i>
Ég er fyrsti! Ég er annar! Ég er þriðji! Ég er fjórði! Ég er fimmti!	Ég er fyrsti! Ég er annar! Ég er þriðji! Ég er fjórði! Ég er fimmti!	Ég er fyrsti! Ég er annar! Ég er þriðji! Ég er fjórði! Ég er fimmti!	Ég er fyrsti! Ég er annar! Ég er þriðji! Ég er fjórði! Ég er fimmti!	Ég er fyrsti! Ég er annar! Ég er þriðji! Ég er fjórði! Ég er fimmti!

Við gáfum dæmi um notkun lista innan lista við að gera ritgerðarútlínur eða beinagrind -- með type eigindinu er hægt að hafa fyrirsagnirnar með stöðluðu formi:

1. Ostur á forsögulegum tímum
   1. Afríka
      1. Afar Þríhyrningurinn
      2. Austurströndin
   2. Asía
   3. Evrópa
      1. Frakkland
         1. Hellamálverk sem lýsa ostagerð
         2. Greftrunarsiðir ályktaðir út frá þurrkuðum ostaleifum
      2. Bretlandseyjar
   4. Norður Ameríka
2. Ostur á miðöldum
   1. Langhyrna Arthurs konungs
   2. Bragðsterkur ostur í krossferðum
3. Ostur á geimöld

Og að lokum er hægt að breyta númeraröðinni innan lista mð því að bæta value=z eigindi við <li> skipunina. Skoðaðu þetta dæmi:

HTML	Svona lýtur það út
<ol type=A start=5><i> Mikilsverð lög um osta</i> <li>Ostagerðarlögin frá 1905 <li>Reglugerð um innihald mjólkur, 1923 <p> <li value=12>Innflutningsgjöld á ost, 1942 <li>Ostageymslusamningurinn frá 1942 <p> <li value=1>Ostagildilögin 1789	Mikilsverð lög um osta Ostagerðarlögin frá 1905 Reglugerð um innihald mjólkur, 1923 Innflutningsgjöld á ost, 1942 Ostageymslusamningurinn frá 1942 Ostagildilögin 1789

Það er ef til vill ekki ljóst (sérstaklega af þessu hálfvitalega dæmi) hvenær það gæti komið sér vel að nota þessar skipanir -- hafðu þær bara bak við eyrað og þær gætu komið sér vel þegar þú skrifar vefsíður. Við ætlum að sýna á síðunni Rannsóknarverkefni (skjalið ranns.html) hvernig þetta nýtist. Þú manst ef til vill að í lexíunni um töflur þá skiptum við óröðuðum lista heimilda í tvennt í tveim dálkum. Nú skulum við breyta þessum listum og nota type eigindið til að númera þá með lágstöfum. Við erum með tvo sjálfstæða lista. Reyndu að finna út hvers vegna við eigum að nota start eigindið líka.

1. Opnaðu skjalið ranns.html í textaritlinum þínum.
2. Skoðaðu töfluna sem við bjuggum til undir fyrirsögninni Heimildir. Breyttu báðum <ul> og </ul> skipununum í <ol type=a> og </ol>
3. Nú, við höfum 6 atriði í fyrri listanum svo við viljum að seinni listinn byrji á 7. Lagaðu <ol> skipunina svo hún líti svona út:

     <ol type=a start=7>

4. Vistaðu skjalið og kallaðu það inn í vefskoðarann. Berðu þína síðu saman við þetta dæmi um hvernig listinn ætti að líta út núna. Fremri dálkurinn ætti að hafa atriði merkt frá „a“ til „f“ og í hinum ættu að vera atriðin „g“ til „l“.

Gættu að hvað þú gerir

Upprifjun

1. Hvernig losnar maður við tengirammann af myndum sem eru stikluleggir?
2. Hvernig setur maðu 20 pixela þykkan ramma utanum mynd á vefsíðu? Hvaða litur verður á honum?
3. Hvernig er hægt að breyta punktum fyrir framan atriði í óröðuðum listum?
4. Þarf maður að nota sama punktinn fyrir framan öll atriði í sama listanum? Ef ekki, hvernig er hægt að skipta í miðjum lista?
5. Hvernig er búinn til listi með atriðin tölusett með rómverskum tölum?

Æfingar

<ol>...</ol>

Næst á dagskrá....

FARA Á.... | Efnisyfirlit | síðasta: „Töflur“ | næsta: „Smellimyndir“ |

Námsefnisgerð í HTML: Lexía 22: Meira um myndir og lista
©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/tut22.html
Þýtt með leyfi höfundar