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

14. Klumpur eða kubbar

Nú ertu búinn að búa til eina heimasíðu! Eins og það sé nú eitthvað merkilegt! (bara að grínast! Þetta er mikið þrekvirki!) En nú, HTML-læsir vinir mínir, er tími til kominn að skipta langri og óþjálli „síðu“ upp í eðlilega samtengdan „vef“ upplýsinga.

Markmið

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

Breyta einni vefsíðu í röð samtengdra síðna.
Búa til sniðsíðu (e. template) til að gera margar vefsíður.
Byggja stýrilínu til að hoppa í réttri röð á milli síða.

Lexía

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

Ertu klumpur eða kubbakall? Hvorugt? Hvort tveggja?

Þegar upplýsingar eru settar saman þá er stundum betra að hrúga þeim saman í einn „klump“; við önnur tækifæri er þægilegra að raða þeim saman í litlum „kubbum“. það er oft þreytandi að skruna upp og niður langar síður. Það tekur lengri tíma fyrir langar, stakar síður að koma inn yfir netið samanborið við röð stuttra síðna.

Í mörgum tilfellum er auðvelt að finna þá staði þar sem best er að skipta síðu upp í vef. En það er engin galdraformúla til fyrir því og skoðanir manna eru skiptar. Maður verður að ná meðalvegi þess að skipta á milli margra síðna sem allar segja það sama og þess að láta gestinn flakka síðu af síðu með alls konar skoðunum og áliti áður en hann finnur það sem hann leitar að. Það er líka nauðsynlegt að setja inn stikluleggi sem hjálpa gestinum að stýra sér í gegnum vefinn og sýnir um leið hvar í honum hann er staddur.

Við erum nú búin að gera eina vefsíðu með stiklu í aðra styttri. Í lexíu 8d bjuggum við til lista með stikluleggjum sem virkar sem efnisyfirlit þar sem stikluleggirnir tengjast nafngreindum akkerum í ýmsum hlutum á Eldfjallavefnum. Þessar sömu skiptingar í hluta gætu verið skynsamar skiptingar í síður.

Við bjuggum til möppu með nafninum eldfjall sem inniheldur þessar tvær HTML síður okkar (index.html, námsefnið, og msh.html, seinni vefsíðuna). Við erum líka með aðra möppu sem nefnist myndir sem inniheldur myndirnar okkar.

kort af nýju námsefni Við ætlum nú að skipta Eldfjallasíðunni upp í röð nokkurra síðna sem allar eru tengdar eins og sést á þessari mynd. Byrjað er á inngangs-/heimasíðunni index.html og í henni eru stikluleggir sem sækja alla hina hluta námsefnisins:

Inngangur
[inngang.html]
Hugtök í eldfjallafræði
[hugt.html]
Eldvirkni í Bandaríkjunum
[usa.html]
Eldvirkni á Mars
[mars.html]
Rannsóknarverkefni
[ranns.html]

Hver hluti námsefnisins verður með stiklulegg til baka í heimasíðuna og líka í næstu síðu á undan og næstu síðu á eftir. Athugaðu að líka verður tenging í báðar áttir á milli usa.html og msh.html

Eða ef þú vilt fá hefðbundnari uppröðun á skjalalista:

núverandi uppröðun skjala	nýja uppröðunin
`vinnusvæði` `myndir` `lava.gif` `left.gif` `msh.gif` `seismo.jpg` `stamp.gif` `eldfjall` `eldfjall.html` `msh.html`	`vinnusvæði` `myndir` `lava.gif` `left.gif` `msh.gif` `seismo.jpg` `stamp.gif` `eldfjall` `index.html` `inngang.html` `mars.html` `msh.html` `ranns.html` `hugt.html` `usa.html`

ATHUGAÐU: Til að ljúka þessari lexíu verðum við að búa til fjölda nýrra skjala og afrita og líma þó nokkuð mikið af texta úr skjölunum sem við erum búin að vera að gera. Þess vegna er nauðsynlegt að þú getir auðveldlega hoppað á milli skjala og forritaglugga í tölvunni þinni.

Athugaðu líka að nafnið á möppunni eldfjall má helst ekki verða lengra til að URL-ið verði ekki of langt. Forðastu samt líka að gera þau það stutt og torráðin að ekki sé hægt að lesa neitt út úr þeim.

Það fyrsta sem við gerum er að búa til nýja skrá undir nafninu index.html, sem við gerum síðan að „heimasíðu“ námsefninsins á Eldfjallavefnum:

Fyrst þarftu að búa til afrit af skjalinu index.html sem þú hefur verið að vinna að undanfarið, og nefna það gamla.html eða eitthvað álíka. Þetta er mjög góð venja þegar maður ætlar að breyta gömlum vefsíðum verulega!
Opnaðu nú upprunalega index.html skjalið í textaritlinum. Þetta er námsefnið sem þú ert búinn að vera að vinna hingað til.
Við ætlum bara að nota myndina, upphafstextann/tilvitnunina og efnisyfirlitið. Þess vegna þurfum við að fjarlægja allt sem seinna kemur í hinar vefsíðurnar.
Eyddu úr skjalinu öllum texta frá Innganginum að Heimildunum, það er öllu frá :
```
  <hr>
  <h2><A NAME="intro">Inngangur</A></h2>
  <b>Eldfjall </b>er staður þar sem hraunkvika, eða heitur, bráðinn
steinn innan úr jörðinni, kemur upp á yfirborðið.
   :
```
til
```
   :
  <dt>Ari Trausti Guðmundsson. (1981)
  <dd><I>Íslandseldar: eldvirkni á Íslandi í 10.000 ár.</I>
  Reykjavík: Vaka-Helgafell.
  </dl>
```
Þú vilt ef til vill bera þitt HTML skjal saman við dæmi um hvernig það ætti að líta út núna.

Skoðaðu núna þann hluta sem byrjar „Þetta námskeið...“ Í fyrri lexíum notuðum stikluleggi til að hoppa á nafngreind akkeri (t.d. <a name="hugt">..</a>) í sama skjali (sjá lexíu 8a). Nú ætlum við að breyta þessum stikluleggjum þannig að hver þeirra tengist annarri síðu (sem við búum til á eftir).

Finndu þann hlutann þar sem stendur:

<B>Þetta námskeið...</B>
  <ul><i>
  <li><A HREF="#inngang">Inngangur</A>
  <li><A HREF="#hugt">Hugtök</A>
  <li><A HREF="#usa">Eldvirkni í Bandaríkjunum</A>
  <li><A HREF="#mars">Eldvirkni á Mars</A>
  <li><A HREF="#ranns">Rannsóknarverkefni</A></i>
  </ul>

og breyttu honum þannig að þar standi þetta:

<B>Þetta námskeið...</B>
  <ul><i>
  <li><A HREF="inngang.html">Inngangur</A>
  <li><A HREF="hugt.html">Hugtök í eldfjallafræði</A>
  <li><A HREF="usa.html">Eldvirkni í Bandaríkjunum</A>
  <li><A HREF="mars.html">Eldvirkni á Mars</A>
  <li><A HREF="ranns.html">Rannsóknarverkefni</A></i>
  </ul>

Þú getur borið HTML skjalið þitt við þetta dæmi um hvernig það ætti að líta út núna.

ATHUGAÐU: Þú þarft að vera alveg viss um muninn á stiklu sem er skrifuð:
  <a href="#spurn">fara í spurningar</a>
og annarri stiklu sem er skrifað:
  <a href="spurn.html">fara í spurningar</a>

Það næsta sem við gerum er að búa til sér skjöl fyrir hvern hluta námsefnisins. Það verður auðveldara ef við búum fyrst til sniðskjal sem við breytum fyrir mismunandi síður.

Búðu til nýtt skjal í textaritlinum og kallaðu það snid.html (ath.: ekki íslenska stafi).

Settu eftirfarandi HTML skipanir í þetta skjal (Ef þú vilt þá getur þú afritað tilbúið sniðskjal):

HTML	Athugasemdir
<html> <head> <title>XXXXXXXX</title> </head> <body>	HAUS: XXXXXXXX í hausnum er nafn viðkomandi námsefnishluta
<H5>Eldfjallavefurinn / <A HREF="index.html">Heimasíða</A> / <A HREF="xxxx.html">til baka</A> / <A HREF="xxxx.html">áfram</A></H5>	STÝRILÍNA: Efst á hverri verður lítill haus (h=5) sem virkar sem stýrilína. `Heimasíða` vísar til baka í fyrstu síðuna. `næsta` og `til baka` eru tengi í næstu síðu og síðuna á undan. Þú verður að setja viðkomandi skjalnöfn í staðinn fyrir `xxxx.html`. Taktu eftir hvernig þetta gefur samræmdan tengiþátt við allar vefsíðurnar.
<h2>XXXXXXXX</h2> : : :	FYRIRSÖGN: Notaðu sömu stærð (header=2) á fyrirsagnir allra síðna.
<hr> <ADDRESS> <b><A HREF="index.html"> Eldfjallavefurinn</A> : XXXXXXXX </b><p> Höfundur Gosi Hraundal, <A HREF="mailto:gosi@vma.is"> gosi@vma.is</A> <br> Jarðfræðideild <A HREF="http://www.vma.is/"> Framhaldsskóla Vestfjarða</A><p> <TT>síðast uppfærð: 1. apríl, 1995</TT> </ADDRESS> <p>	FÓTUR: Athugaðu að fóturinn er nú settur upp þannig að hann gefur nafn heimasíðunnar (og tengingu til baka í hana) ásamt texta sem gefur til kynna nafn viðkomandi hluta `XXXXXXXX`. Ef nafn síðunnar er sett hér gefur það enn eina góða vísbendingu um staðsetningu þessarar síðu í vefnum sem heild.
<tt>URL: http://www.vma.is/vefur/xxxxxxxx.html </tt> <p <body> </html>	URL: Þú verður að muna eftir að breyta þessari línu þannig að rétt nafn skjalsins og URL að því komi hér fram í stað `xxxxxxxx.html`

Nú þarft þú að gera 5 afrit að þessari sniðsíðu og gera viðkomandi breytingar á þeim:

Skjalnafn	Hluti	Athugasemdir
`inngang.html`	Inngangur	Þar sem þetta er fyrsta síðan í röðinni þá skaltu taka úr stýrilínunni þar sem stendur : `<A HREF="xxxx.html">til baka</A>`
`hugt.html`	Hugtök í eldfjallafræði
`usa.html`	Eldvirkni í Bandaríkjunum
`mars.html`	Eldvirkni á Mars
`ranns.html`	Ransóknarverkefni	Þar sem þetta er síðasta síðan í röðinni þá skaltu taka úr stýrilínunni þar sem stendur: `<A HREF="xxxx.html">áfram</A>`

Opnaðu nú gamla index.html skjalið (sem við gáfum nafnið gamla.html) í textaritlinum. Fyrir hvert skjal þarftu að afrita þann texta sem fylgir viðkomandi <h2>...</h2> fyrirsögn og líma hann inn í nýju skjölin sem þú bjóst til í síðasta skrefi. Athugaðu að bæði í Eldvirkni í Bandaríkjunum og Rannsóknarverkefni eru hlutar sem eru með <h3>...</h3> fyrirsögnum.

Að lokum verður þú að breyta tenginu í skjalinu msh.html. Það tengi benti á nafngreint akkeri í aðalskjalinu (hlutanum um Eldvirkni í Bandaríkjunum) en nú á það að vísa í skjalið usa.html. Opnaðu skjalið msh.html í textaritlinum og breyttu línunni svo þar standi:

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

Til að vera samkvæmur sjálfum þér þá skaltu búa til svona fót í leiðinni:

<HR>
<ADDRESS>
<B><A HREF="index.html">
Eldfjallavefurinn</A> : <A HREF="usa.html">
Eldvirkni í Bandaríkjunum</A> :
Mount St. Helens</B> <p>

Höfundur Gosi Hraundal,
<A HREF="mailto:gosi@vma.is">
gosi@vma.is</A> <br>
Jarðfræðideild
<A HREF="http://www.vma.is/">
Framhaldsskóla Vestfjarða</A><p>
<TT>síðast uppfærð: 1. apríl, 1995</TT>
</ADDRESS>
<p>
<tt>URL: http://www.vma.is/vefur/msh.html</tt>

<body>
</html>

Gættu að hvað þú gerir

Berðu þitt skjal saman við þetta dæmi um hvernig þetta skjal ætti að líta út. Ef þitt skjal var frábrugðið dæminu, þá skaltu endurskoða textann sem þú ritaðir í textaritlinum. Í þessari lexíu bjuggum við til nokkur skjöl og það er mjög auðvelt að gera innsláttarvillur.

Upprifjun

Upprifjunarefni fyrir þessa lexíu:

Hvaða kostir fylgja því að hafa margar stuttar síður í vef frekar en hafa eina langa vefsíðu?
Hvað hefði gerst ef við hefðum ekki breytt tengleggnum í skjalinu msh.html?
Hvaða stýritæki settum við í námsefnið okkar?

Frekari upplýsingar

Stílfræðilega séð þá eru vefsíður læsilegri ef stikluleggirnir eru hluti af textanum. Þetta verður því meir áberandi eftir því sem maður býr til fleiri síður sem tengjast saman. Berðu þetta tvennt saman:

„smelltu hér“ stiklur

Vorið 1980 tóku flestir íbúar í nágreni Mount St. Helens mark á aðvörunum jarðfræðinga um yfirvofandi eldgos í fjallinu. (Smelltu hér til að sjá mynd af Mount St. Helens) Þó voru nokkrir einstaklingar sem neituðu að yfirgefa heimili sín og létu því lífið í hamförunum þann 18. maí. Þetta sama ár mældu jarðskjálftamælar aukna jarðskjálftatíðni í Long Valley í Kaliforníu og jarðfræðingar, sem bjuggust við eldgosi, létu rýma sumardvalastaðinn Mammoth. (Smelltu hér til að sjá jarðskjálftamæli) Ekkert gos kom og íbúarnir voru reiðir og sárir fræðimönum fyrir það sem þeim fannst vera falskar viðvaranir sem orsökuðu stórfellt fjárhagslegt tjón.

stikluleggir í texta

Vorið 1980 tóku flestir íbúar í nágreni Mount St. Helens mark á aðvörunum jarðfræðinga um yfirvofandi eldgos í fjallinu. Þó voru nokkrir einstaklingar sem neituðu að yfirgefa heimili sín og létu því lífið í hamförunum þann 18. maí. Þetta sama ár mældu jarðskjálftamælar aukna jarðskjálftatíðni í Long Valley í Kaliforníu og jarðfræðingar, sem bjuggust við eldgosi, létu rýma sumardvalastaðinn Mammoth. Ekkert gos kom og íbúarnir voru reiðir og sárir fræðimönum fyrir það sem þeim fannst vera falskar viðvaranir sem orsökuðu stórfellt fjárhagslegt tjón.

Þessar „Smelltu hér...“ línur trufla ekki bara flæðið í textanum, heldur hefur stiklutextinn „hér“ ekkert með efni greinarinnar að gera. Við mælum með að þú forðist að rita línur eins og „smelltu hér til að komast á heimasíðuna“. Skrifaðu heldur hreinan stiklulegg, t.d. <a href="heim.html">Heimasíða</a> -- smellurnar eru órjúfanlegur hluti vefskoðara.

Æfing

Skoðaðu vefinn sem þú ert að gera. Er hann að verða langur? Eru í honum eðlilegar skiptingar sem gefa færi á að skipta honum upp í nokkrar minni síður? Búðu til heimasíðu fyrir vefinn þinn og búðu til viðeigandi stiklulínur til að hoppa á síðurnar. Búðu síðan til sniðsíðu fyrir „undirsíðurnar“ þínar

Nú skaltu biðja vin eða starfsfélaga að skoða síðurnar þínar. Vilja þeir frekar stuttu „kubbana“ eða langa „klumpinn“? Hvernig gekk þeim að stýra sér í gegnum síðurnar?

Næst á dagskrá....

NÚ förum við að fjalla um fídusana með endurbætt HTML... Festið sætisólarnar!

FARA Á.... | Efnisyfirlit | síðasta: „Inndráttur“ | næsta: „Staðlað og endurbætt HTML“ |

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