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

1. Fyrsta HTML skjalið búið til

Þú ert um það bil að leggja af stað í ferð sem breytir þér úr einföldum Internet sprangara á veraldarvefnum í hönnuð margmiðlunarskjala á Internetinu !

Markmið

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

Lexía

Nú veistu hvað HTML er og við skulum fara að nota það.

(Skyndipróf -- fyrir hvað standa þessir stafir? Þú ættir að vita það ef þú last síðustu lexíu!).

Hvað eru HTML skipanir?

Þegar vefskoðari sýnir síðu eins og þessa sem þú ert að lesa, þá les hann úr venjulegu textaskjali og leitar að sérstökum kóðum eða skipunum sem eru merkt með < og > merkjum. Venjulegt form HTML skipana er: 

     <skipun>textastrengur</skipun>
Sem dæmi þá er fyrirsögnin fyrir þessa efnisgrein sett upp með haus skipun: 
     <h3>Hvað eru HTML skipanir?</h3>

Þessi skipun segir vefskoðaranum að sýna textann Hvað eru HTML skipanir? sem fyrirsögn af stærðinni 3 (við lærum meira um þessar skipanir seinna). HTML skipanir geta sagt vefskoðaranum að feitletra textann, setja hann í skáletur, gera hann að fyrirsögn, eða gera hann að stiklulegg á aðra síðu. Það er mikilvægt að endaskipunin,

    </skipun>
innihaldi „/“ skástrik.

Þetta „/“ skástrik segir vefskoðaranum að hætta með viðkomandi skipun. Margar HTML skipanir eru paraðar á þennan hátt. Ef maður gleymir skástrikinu þá heldur vefskoðarinn skipuninni inni það sem eftir er af textanum í skjalinu, nokkuð sem við viljum ef til vill ekki (þetta er nokkuð sem þú vilt vafalaust gera tilraun með seinna).

ATHUGAÐU: Vefrápurum er alveg sama hvort við notum hástafi eða lágstafi. Til dæmis er enginn munur á <h3>...</h3> og <H3>...</H3>

Þvert á aðrar tegundir forritunar þá orsakar misritun skipana ekki hrun á kerfinu eða „krass“; síðan lítur bara, ja ... vitlaust út. Þá er fljótlegt og einfalt að fara aftur inn í HTML og lagfæra það sem misritaðist.

Vefskoðarinn þinn hefur takmarkaðan, en opinn orðaforða! Það er athyglisvert atriði í HTML forritun að ef vefskoðarinn veit ekki hvað hann á að gera við skipun, þá bara skiptir hann sér ekkert af henni! Til dæmis lítur fyrirsögnin hér fyrir ofan svona út: 

    <wiggle><h3>Hvað eru HTML skipanir?</h3></wiggle>
en vegna þess að vefskoðarinn þinn þekkir ekki <wiggle> skipunina (ég bjó hana til, ef til vill verður hún til í framtíðinni og lætur texta sveiflast upp og niður á skjánum), og heldur bara áfram með það sem hann þekkir. Ef ég væri að skrifa nýjan vefskoðara, þá gæti ég skrifað aðgerð fyrir <wiggle> skipunina í hugbúnaðinn minn.

Vinnusvæðið opnað

Til að halda áfram í þessari lexíu ættir þú að opna annan vefskoðaraglugga (þá getur þú haft leiðbeiningarnar opnar í öðrum og haft hinn sem „vinnusvæði“), og textaritil (e: text editor) í þriðja glugganum.
ATHUGAÐU: Hér er viðeigandi að minna þig á að við gefum alhæfandi leiðbeiningar og að valmyndanöfn og skjalanöfn eru mismunandi eftir því hvaða vefskoðara þú ert að nota. Ef leiðbeiningar okkar segja „Veldu Open Location... af File valmyndinni“ og vefskoðarinn er ekki með nákvæmlega þannig valmöguleika, reyndu þá að finna það á þínum vefskoðara sem kemur næst þesu.

En þú þarft að vera nokkuð fær í því að hoppa á milli forrita og glugga á tölvunni þinni. Annað sem hægt er að gera er að prenta lexíurnar á pappír (en við ætlum ekki að hvetja til eyðingar skóglendis).

Svona setur þú upp „vinnusvæðið“ þitt:

  1. Í File valmyndinni í vefskoðaranum velur þú New Window eða New Web Browser (nafn þessa valmyndamöguleika gæti verið annað, eftir því hvaða vefskoðara þú ert að nota). Þá ætti nýr vefskoðaragluggi að opnast. Ímyndaðu þér að fyrri glugginn sé „kennslubókin“, en sá síðari er „vinnubókin“ þar sem þú skoðar það sem þú ert að gera.

    ATHUGAÐU: Eina ástæðan fyrir tveim gluggum er til að þú getir lesið jafnóðum og skoðað líka skjalið sem þú býrð til. Þú gætir sett bókamerki á þessa síðu og þannig hoppað á hana með Go eða History valmyndunum.

  2. Það næsta sem þú gerir er að hoppa út úr vefskoðaranum og opna textaritil.
    ATHUGAÐU: Þú verður að hoppa fram og til baka í þessum gluggum til að ljúka lexíunum. Þetta getur stundum verið erfitt, sérstaklega ef þú ert með lítinn skjá. Þú getur valið að raða gluggunum saman þannig að þeir passi á skjáinn, eða leggja þá hvern ofaná annan og síðan bara smellt á þann sem þú vilt fá fremst og vinna í.

    Ef þú notar ritvinnsluforrit til að búa til HTML skjölin þín þá verður þú að muna að vista þau sem textaskjöl (ASCII).

Ef þetta er í fyrsta sinn sem þú gerir svona þá mælum við STERKLEGA með því að þú notir einfaldasta textaritil sem völ er á -- SimpleText eða TeachText í Macintosh eða NotePad í Windows. Hvers vegna ekki nota þessa flottu HTML ritla og hjálpara? Það er kennslufræðilega betra að læra undirstöðuatriðin fyrst og SÍÐAN leita leiða til að stytta sér leið og auðvelda það sem maður ætlar að gera.

Það hjálpar líka að búa fyrst til undirskrá/möppu sem þú notar undir vinnuna þína. Þú getur kallað hana vefurinn eða vinnusvaedi eða hvað sem þú vilt; passaðu bara að öll skjöl sem þú býrð til vistist þar. Það einfaldar allt þitt líf ... ja, alla vega á meðan þú ert á þessu námskeiði!

HTML skjalið þitt búið til

HTML skjal hefur tvo sérstaka hluta, haus (e: head) og meginmál (e: body). Hausinn, head, inniheldur upplýsingar um síðuna sem ekki sjást á skjánum. Meginmálið, body, inniheldur þá allt annað sem á að sjást sem hluti af vefsíðunni.

Grunnuppbygging allra HTML skjala er svona: 


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  <html>
  <head>
  <!-- haus með aukaupplýsingum um skjalið, sem ekki eiga að sjást á síðunni -->
  </head>

  <body>

  <!-- allt HTML sem á að sjást -->
          :      :
          :      :
          :      :
  </body>
  </html>

Fyrsta línan: 

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

er raunar ekki nauðsynleg, en hún er kóði sem segir vefskoðaranum fyrir hvaða HTML staðal síðan er skrifuð. Þú getur fengið meiri upplýsingar um þetta á W3C Reference Specification.

Allt HTML kemur á milli <html>...</html> skipananna. Þar fyrir innan er fyrst settur haus, <head>...</head> og síðan meginmálið, <body>...</body>.

Taktu líka eftir athugasemdunum, sem eru merkt með <!-- bla bla bla -->. Textinn á milli þessara merkja sést ekki á síðunni, en er þarna til skýringa fyrir þig eða einhvern annan sem vill skoða kóðann á bak við vefsíðuna. Þegar vefsíða verður flókin (eins og þú sérð þegar þú býrð til töflur, ramma og annað skemmtilegt eftir svona 20 lexíur!), þá gera athugasemdir ómælt gagn þegar maður ætlar að uppfæra síðu sem maður hefur gert fyrir löngu.

Hér koma leiðbeiningar um hvernig þú átt að búa til fyrsta HTML skjalið þitt. Ertu tilbúinn?

  1. Ef textaritillinn er ekki opinn núþegar, opnaðu hann.
  2. Hopaðu í gluggann með textaritlinum.
  3. Ritaðu eftirfarandi texta (Þú þarft ekki að ýta á Enter hnappinn í lok hverrar línu; vefskoðarinn sér um að skipta texta á milli lína): 
    
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
     <html>
     <head>
     <title>Eldfjallavefurinn</title>
     </head>
     <!-- skrifaður á námskeiðinu Námsefnisgerð í HTML
     Gosi Hraundal, 31. febrúar, 1999       -->
     <body>
     Þ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.
     </body>
     </html>
    ATHUGAÐU: Sjáðu hvar <title>...</title> skipunin er staðsett. Hún er í <head>...</head> hlutanum og sést því ekki á skjánum. Hvað gerir hún þá? Mismunandi <title> skipun er sett á hverja síðu og gefur henni nafn, en setur það líka í titillínu vefskoðaragluggans.

    Í 3. lexíu lærir þú að setja inn fyrirsögn sem kemur fram á síðunni þinni.

    Athugaðu að við settum líka athugasemd (e: comment) inn í skjalið þar sem fram koma nafn höfundar og dagsetningin þegar skjalið var búið til. Þú getur ritað hvað sem er á milli athugasemdaskipananna, en það sést aðeins þegar maður skoðar kóðann fyrir síðuna (e: Page Source).

  4. Vistaðu skjalið undir nafninu „eldfjall.html“ og geymdu það á „vinnusvæðinu“, undirskrá/möppu, sem þú bjóst til fyrir þetta námskeið. Mundu að ef þú notar ritvinnsluforrit þá verður þú að vista skjalið sem textaskjal á ASCII formi.
    ATHUGAÐU: Windows 3.1 notendur verða að vista öll HTML skjöl með nöfnum sem enda á .HTM, þannig að þá héti þetta skjal ELDFJALL.HTM. Hafðu samt ekki áhyggjur! Vefskoðarinn er nógu skynsamur til að skilja að skjal sem endar á .HTM er HTML skjal.

    Þú getur notað nöfn eins og ELDFJALL.HTML ef þú notar Windows95 eða nýrra Windows kerfi.
    Endanöfnin segja vefskoðara að þarna séu skjöl sem hann á að geta lesið og sýnt.

Skjalið skoðað í vefskoðara

  1. Hoppaðu yfir í vefskoðaragluggann sem þú ætlar að nota sem vinnusvæði. (Ef þú ert ekki með annan glugga opinn veldu þá New Window eða New Browser úr File glugganum.)
  2. Veldu Open File... úr File valmyndinni.
  3. Notaðu talgluggann til að finna og opna skjalið sem þú bjóst til, „Eldfjall.html“
  4. Nú ættir þú að sjá á titillínunni á glugganum orðin „Eldfjallavefurinn“ og á síðunni fyrir neðan setninguna sem þú slóst inn í meginmálinu, <body>, „Þetta námskeið sýnir ...“

Gættu að hvað þú gerir

Þú getur borið það sem þú gerðir við dæmi um það hvernig það ætti að líta út. Eftir að þú ert búinn að skoða dæmið, notarðu bakk hnappinn á vefskoðaranum til að komast aftur í þessa síðu.

Ef þitt skjal er á einhvern hátt frábrugðið þessu skoðaðu þá textann sem þú slóst inn í textaritilinn.

Algengasti vandinn er „Ég sé ekki titilinn!“ Þú átt ekki að sjá hann! Texti sem er innan <title>...</title> skipananna er EKKI sýndur á vefsíðum; þú ættir að sjá hann á titillínunni efst í glugganum á vefskoðaranum.

Algengustu mistökin sem byrjendur gera hér er að reyna að nota ritvinnsluforrit til að rita HTML og geta síðan ekki opnað skjalið í vefskoðara, eða ef það opnast, þá er það fullt af alls konar stafarugli. Svona í byrjun, þá hvetjum við þig til að nota einfaldasta textaritil sem þú getur fundið, eins og Windows NotePad eða Simpletext fyrir Macintosh. Leitaðu að styttingum seinna!

Upprifjun

  1. Hvað eru HTML skipanir?
  2. Hvar sést textinn sem settur er milli titilskipananna?
  3. Hvað þarf að gera til að búa til einfalt HTML skjal?
  4. Hvernig býr maður til athugasemd?
  5. Hvernig skoðar maður HTML skjalið sitt í vefskoðara?

Æfing

Hugsaðu þér efni til að setja á vefsíðu. Búðu nú til þitt eigið HTML textaskjal sem inniheldur <title> skipanir og nokkrar upphafssetningar. Vistaðu HTML skjalið og sæktu það með vefskoðaranum. Þú vilt e.t.v. búa til aðra undirskrá/möppu fyrir þetta skjal, svo það ruglist ekki saman við eldfjallasíðurnar sem þú býrð til á námskeiðinu.

Hafðu þetta nýja skjal handbært, því þú getur sett meira inn í það seinna.

Næst á dagskrá....

Þú ert búinn að búa til fyrstu vefsíðuna þína!

En, í alvöru, þá er hún stutt og ekkert sérlega spennandi! Í næstu lexíu breytir þú HTML skjalinu og uppfærir það.

FARA Á.... | Efnisyfirlit | síðasta: „Staðlar í HTML“ | næsta: „HTML skjali breytt“ |

Námsefnisgerð í HTML: Lexía 1: Fyrsta HTML skjalið búið til
©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/tut1.html
Þýtt með leyfi höfundar