HTML dokumendi vormindamine.

Ülesanne 1.

1. Käivitage programm Notepad (Start-Programs-Accessories-Notepad)
2. Avage programmi Notepad abil kaustast "HTML40" dokument "fyysilinevormindamine.htm" (Files of type: All Files (*.*))
3. Avage dokument "fyysilinevormindamine.htm" ka lehitseja abil.

Jaotamine lõikudeks.

Suvalistel tekstidel, koolikirjanditel, artiklitel ajalehes või tehniliste vahendite kirjeldustel on kindel struktuur. Selle struktuuri elementideks on: pealkirjad, alapealkirjad, tabelid, lõigud jne.

Esimeseks reegliks suvalise dokumendi koostamisel on selle teksti jaotamine lõikudeks, mis väljendavad terviklikke mõttelisi osi. Dokumentide loomisel tekstitöötlusvahendite abil (Word 97) jaotatakse tekst lõikudeks reavahetussümboli sisestamise abil, suurem osa tekstitöötlusvahenditest realiseerib selle sõrmise "ENTER" vajutusega. HTML dokumentides aga ei kaasne reavahetussümbolite sisestamisega uue lõigu moodustamist.

HTML keel eeldab, et dokumendi autor ei tea midagi oma lugeja arvutist. Lugeja võib seada oma lehitseja aknale suvalise suuruse ja kasutada suvalist šrifti oma arvutis olevatest šriftidest. See tähendab, et reavahetus reas määratakse ainult lugejapoolse lehitseja ja selle seadete poolt. Kuna originaaldokumendi reavahetussümboleid ignoreeritakse võib tekst, mis autori arvutis nägi välja suurepäraselt, muutuda täiesti loetamatuks tekstiks lugeja lehitseja aknas.

Teek <P>.

Vältida seda ebameeldivust võimaldab lõikudeks jaotamise teek <P>. Teksti iga lõigu algusesse tuleb paigutada teek <P>. Sulgev teek </P> ei ole kohustuslik. Lehitsejad reeglina eraldavad lõike üksteisest tühja reaga.

Märkus: Lehitsejad reeglina interpreteerivad mitut järjestikku asuvat lõigu moodustamise teeki <P> kui ühte ainsat. Samuti käib see ka reavahetuse teegi <BR> kohta. Sellepärast ei õnnestu luua mitut tühja järjestikust rida nende teekide abil.

Teegile <P> võib lisada lõigu joondamise parameetri ALIGN. Vaikimisi on parameetri väärtuseks LEFT.

Ülesanne 2. Lisame dokumenti "fyysilinevormindamine.htm" lõigu moodustamise teegid <P>.

1. Avage või aktiveerige Notepad aken dokumendiga "fyysilinevormindamine.htm".
2. Suurendage akent üle-ekraani suuruseks (nupp Maximize).
3. Lisame dokumendi HTML koodi lõigu moodustamise teegid:
   
   
1. Rea See on<B> poolrasvases kirjas vorminadatud </B>tekst. ette sisestame teegi <P> nii:
   
   <P> See on<B> poolrasvases kirjas vorminadatud </B>tekst.
   
   Salvestage muudatus Notepadis (File-Save) ja värskendage lehitseja kuva (nupp lehitseja tööriistaribal Refresh). Vean kihla, et lehitseja aknas ei muutunud midagi! See on ka õige, sest see ongi esimene ja praegu ainus lõik dokumendis.
   
   
2. Rea See on<STRIKE> läbijoonitud </STRIKE>tekst., ette sisestame teegi <P> nii:
   
   <P> See on<STRIKE> läbijoonitud </STRIKE>tekst.
   
   Salvestage muudatus ja värskendage lehitseja kuva. Moodustati uus lõik, mille alguseks ongi viimati muudetud rida.
   
   
3. Sisestame nüüd järjest teegid <P> ka järgmiste ridade ette:
   
   See on <B> poolrasvane kiri</B>.
   <FONT FACE="Arial">See on ARIAL šriftiga vormindatud tekst</FONT>
   <FONT SIZE=1>See on srift suurusega 1</FONT>
   <FONT COLOR=green>See on roheline kiri.</FONT>
   
   Salvestage muudatus ja värskendage lehitseja kuva. Moodustati uued lõigud (peaks olema kuus lõiku), mille alguseks on viimati muudetud read.
   
   
4. Sisestame iga teegi <P> ette HTML koodis tühja rea, et muuta see lihtsalt endale loetavamaks ja salvestame muudatuse.

Reavahetus.

Tekstidokumentide kuvamisel lehitsejas määratakse reavahetus lõigu piires automaatselt sõltuvalt lõppkasutaja lehitseja akna suurusest ja kasutatava šrifti suurusest. Reavahetust saab teostada ainult sõnade eraldussümbolite (näiteks: tühikute) kohal. Mõnikord tekib dokumendis siiski vajadus sundkorras teostada reavahetust, mis realiseerub sõltumata lõppkasutaja lehitseja parameetritest.

Teek <BR>.

Selleks kasutatakse käsitsi reavahetuse teeki <BR>, millel ei ole vastavat sulgevat teeki. Teegi <BR> lisamine HTML koodi kindlustab järgneva teksti paigutamise järgneva rea algusesse. Näiteks võib sellist lähenemisviisi kasutada nimekirjade moodustamiseks ilma eriotstarbeliste nimekirjade paigutuse teekide kasutamiseta, või näiteks ei saa ilma selle teegita hakkama kui on vaja kirjutada luuletusi, salmide kaupa jms.

Ülesanne 3. Sisestame sundreavahetusteegid <BR>.

1. Avage või aktiveerige Notepad aken.
2. Sisestage iga rea järele teek <BR>.
3. Salvestage muudatus ja värskendage lehitseja kuva.

Erinevalt teegist <P> ei moodustata teegi <BR> kasutamisel tühja rida.

Teegi <BR> kasutamine nõuab teatud ettevaatlikust - on võimalik olukord, kus lehitseja juba sooritas reavahetuse üks kaks sõna enne seda kui leidis tekstis sundreavahetusteegi <BR>. See võib juhtuda siis kui lehitseja aken on kitsam kui teie aken, milles te oma dokumenti kujundasite - testisite. Seejuures võib juhtuda, et keset lõiku võib reas olla üksainus sõna, mis rikuks seega dokumendi kujunduse ilu.

Teegid <NOBR> ja <WBR>.

Tuleb ette olukordi kus on mõnikord vajalik teostada sundreavahetusele vastupidist operatsiooni - keelata reavahetus. Selleks on olemas teek-konteiner <NOBR>. Tekst, mis asub selles teegis kuvatakse garanteeritult ühes reas, sõltumata selle pikkusest. Kui seejuures rea pikkus ületab lehitseja akna laiuse, siis lisatakse lehitseja aknale ka horisontaalne kerimisriba.

Ülesanne 4. Sisestame reavahetust keelava teegi <NOBR>.

1. Avage või aktiveerige Notepad aken.
2. Eemaldage igalt 5-s lõigus oleva rea järelt teek <BR>.
3. Salvestage muudatus ja värskendage lehitseja kuva.
   
   5 lõigu read asetatakse jälle jadamisi üksteise järele, lehitseja akna laiusest sõltuvalt teostatakse automaatne reavahetus.
   
   
4. Sisestage 5-sse lõiku teegi <P> järele teek <NOBR> ja lõigu lõppu teek </NOBR>.
5. Salvestage muudatus ja värskendage lehitseja kuva.
   
   5 lõigu read asuvad üksteise järel. Automaatset reavahetust ei toimu. Lehitseja lisab kuvale horisontaalse kerimisriba.

Vormindades lõigu teegiga <NOBR> võib saavutada lehitseja kuval ülipikkasid ridasid. Selleks, et seda siiski vältida võib lõppkasutaja lehitsejale siiski ette öelda ka võimalikke reavahetuste kohad, mis realiseeritakse ainult vajaduse korral (nn "pehme" reavahetus). Seda võib saavutada sisestades teksti vajalikku kohta teegi <WBR> (WordBReak), mis nagu ka teek <BR> ei vaja sulgevat teeki.

Ülesanne 5. Sisestame "pehme" reavahetusteegi <WBR>.

1. Avage või aktiveerige Notepad aken.
2. Sisestage 5-a lõigu eelviimase rea järele teek <WBR>.
3. Salvestage muudatus ja värskendage lehitseja kuva.
   
   5 lõigu read asuvad üksteise järel. Automaatset reavahetust ei toimu. Kuid "tänu" pehmele reavahetusele tuuakse uuele reale 5-a lõigu viimane lause "See on srift suurusega 6". Lehitseja horisontaalse kerimisriba peaks jääma alles (muidugi juhul kui ekraaniresolutsioon on nagu minul 800*600 ;=)).

Märkus: lehitseja Netscape ei interpreteeri teeki <WBR> üldse! Lehitseja Internet Explorer interpreteerib teegi <WBR> ainult juhul kui seda kasutatakse teek-konteineri <NOBR> sees, st teekide <NOBR> ja </NOBR> vahel!

Pealkirjad HTML dokumendi sees.

Samaaegselt kogu dokumendi pealkirjaga võib HTML dokumendis kasutada ka pealkirju dokumendi üksikute osade jaoks. Nendel pealkirjadel võib olla 6 erinevat taset (suurust) ja kujutavad endast tekstifragmente, mida kuvatakse lehitseja aknas pealkirjadena ja alapealkirjadena.

Teegid <H1>, <H2>, <H3>, <H4>, <H5> ja <H6>.

Kõik pealkirjade teegid vajavad kindlasti ka sulgevat teeki, st need on konteiner-teegid, vastavalt on need konteinerid siis: <H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5> ja <H6></H6>. Pealkiri numbriga üks on kõige suurem ja pealkiri numbriga 6 kõige väiksem. Pealkirjade teegid on ploki taseme teegid, st et nende abil ei tohi vormindada teksti üksikuid sõnu selleks, et suurendada nende kuva. Pealkirja teegi kasutamisel sisestatakse tühi rida pealkirja ette ja ka selle järele, seepärast ei ole siin tarvis lõigu teeki <P> ega ka reavahetus teeki <BR>.

Pealkirjade teegile võib lisada joondamisparameetri ALIGN, mille väärtused on toodud ülalpool olevas vastavas tabelis.

Ülesanne 6. Kasutame pealkirju.

1. Avage programmis Notepad kaustast "HTML40" dokument "uus.htm".
2. Valige punktist File korraldus Save As… ja salvestage dokument uue nimega: "pealkirjadekasutamine.htm"
3. Avage uus dokument "pealkirjadekasutamine.htm" ka lehitseja abil.
4. Sisestage teekide <BODY> ja </BODY> vahele järgmised read:
   
   <H1 ALIGN=LEFT>See on esimese taseme pealkiri.</H1>
   <H2> See on teise taseme pealkiri.</H2>
   <H3 ALIGN=RIGHT > See on kolmanda taseme pealkiri.</H3>
   <H4> See on neljanda taseme pealkiri.</H4>
   <H5 ALIGN=CENTER > See on viienda taseme pealkiri.</H5>
   <H6 ALIGN=JUSTIFY > See on kuuenda taseme pealkiri.</H6>
   
   
5. Salvestage muudatus ja värskendage lehitseja kuva.

Horisontaalsed eraldusjooned.

Teiseks dokumendi osadeks jaotamise meetodiks on horisontaalsete eraldusjoonte kasutamine. Eraldusjooned rõhutavad visuaalselt dokumendi mingi osa terviklikust. Tänapäeval kasutatakse küllaltki tihti reljeefset "dokumendi pinna sisse surutud" eraldusjoont selleks, et rõhutada dokumendi mahukust.

Teek <HR>.

Teek <HR> võimaldab lisada reljeefse horisontaalse eraldusjoone suurema osa lehitsejate aknas. See teek ei ole konteiner ja ei vaja seepärast vastavat sulgevat teeki. Eraldusjoone ette ja järele sisestatakse automaatselt tühi rida. Teegile <HR> võib lisada ka parameetreid, millede väärtused on toodud alljärgnevas tabelis.

Ülesanne 7.

1. Avage või aktiveerige dokument "pealkirjadekasutamine.htm".
2. Sisestage HTML koodi iga pealkirja rea järele järgmised kuus rida:
   
   <HR ALIGN=CENTER WIDTH=50% SIZE=10 COLOR="green">
   <HR ALIGN=CENTER WIDTH=10% SIZE=20 COLOR="#444444">
   <HR ALIGN=CENTER WIDTH=200 SIZE=30 COLOR="#FF0000">
   <HR ALIGN=CENTER WIDTH=300 SIZE=40 COLOR="#003322">
   <HR ALIGN=CENTER WIDTH=1000 SIZE=50 COLOR="black">
   <HR>
   
   
3. Salvestage muudatus ja värskendage lehitseja kuva.
   
   Päris jube! Eriti see eelviimane eraldusjoon! No iga kasutaja peabki leidma ISE endale meelepärase eraldusjoone kujunduse. Ja viimane ilma parameetriteta eraldusjoon kasutab vaikimisi etteantud parameetrite väärtusi.

Märkus: lehitseja Netscape ei luba kasutada parameetrit COLOR teegis <HR>!

Eelvormindatud teksti kasutamine.

Nagu on ilmnenud eelpool esitatud teekide kirjeldustest tuleb dokumendi jaotamiseks lõikudeks kasutada spetsiaalseid selleks ette nähtud teeke. Ent on olemas juhuseid kus HTML dokumenti on vajalik lisada tekstifragment, millel juba on olemas vormindamine, mis on teostatud traditsioonilisi meetodeid kasutades: reavahetussümbolid, tühikud, tabulatsioonimärgid jne.

Teek <PRE>.

Selliste ülesannete lahendamiseks on teek konteiner <PRE>, mis määratleb eelnevalt vormindatud (eelvormindatud) teksti.

Tekst, mis on vormindatud teegiga <PRE> näeb lehitseja aknas välja täpselt samamoodi kui ta näeb välja teksttöötlusprogrammi aknas. Ent samas kasutatakse kuvamiseks monolaiusega šrifti. Seejuures avaneb teil suurem võimalus juhtida-kontrollida lõppkasutaja lehitseja poolt väljastatava dokumendi väljanägemist, kuid samas kaotate mingil määral paindlikkuses.

Üheks selle teegi <PRE> kasutusalaks on tabelid, mis on ehitatud ilma spetsiaalseid tabeliteeke kasutamata. Teiseks tähtsaks teegi <PRE> kasutusalaks on suurte programmikoodide plokkide (Java, C++ jms.) väljastamine ekraanile, lõppkasutaja lehitsejale ei võimaldata seega programmkoodide vormindamist.

Tekst konteineri <PRE> sees võib sisaldada teksti taseme vormindamise elemente, välja arvatud järgmised: <IMG>, <OBJECT>, <APPLET>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT> ja <BASEFONT>.

On lubamatu vormindatud teksti sees anda ette ploki taseme vormindamise elemente, näiteks pealkirjade teegid. Samuti ei tohi olla eelvormindatud teksti sees lõigu teeke <P>, kuid siiski kui see leidub seal, siis teostatakse üleminek järgmisele reale sisestamata samas tühja rida.

Teek <DIV>.

Konteiner teek <DIV> on ploki taseme teek ja on ette nähtud dokumendi fragmentide esiletõstmiseks. Selle esiletõstmise eesmärgiks on antud fragmendi parameetrite (teostatakse reeglina laadide omistamise abil) juhtimise võimalus.

Näiteks:

<DIV STYLE="color: green">(HTML dokumendi fragment)</DIV>

Selles näites suletakse HTML dokumendi fragment teekidega <DIV> ja </DIV> selleks, et ette anda mõned omadused. Antud juhul kuvatakse kõik antud HTML dokumendi tekstielemendid rohelise (green) värviga. Teegi <DIV> analoogiks on teek <SPAN>.

Märkus: üksiku fragmendi jaoks laadielementide määratlemine nii nagu see on toodud antud näites on kasutamiseks ebasoovitatav kuna on vastuolus dokumendi struktuuri ja tema esitusviiside lahutamise kontseptsiooniga.

Kommentaaride lisamine dokumendile.

HTML dokumenti võib lisada kommentaare, mida ei kuvata lõppkasutaja lehitseja aknas. Nad võivad sisaldada suvalise arvu ridu ja peavad asuma teekide <!-- ja --> vahel. Kõike, mis asub nende teekide vahel ei kuvata dokumendi vaatamisel lõppkasutaja lehitseja aknas.

Kommentaare kasutatakse reeglina dokumendi autorite poolt märkmete tegemiseks. Kuigi kommentaare ei kuvata lõppkasutaja lehitseja aknas on lõppkasutajal siiski võimalus seda näha (Internet Explorer: View-Source). Seepärast ei ole soovitatav lisada kommentaaridesse informatsiooni, mida ei pea nägema "võõrad" silmad!

Ülesanne 8. Lisame dokumendile kommentaare

1. Avage või aktiveerige Notepad aken.
2. Sisestage HTML koodi suvalisse ossa teegid <!-- ja -->.
3. Sisestage kommentaaride teekide vahele suvaline sümbolite jada.
4. Salvestage muudatus ja värskendage lehitseja kuva.
   
   Võiks kihla vedada, et dokumendi kuvas ei muutunud midagi!

Teek <BLOCKQUOTE>.

On juhuseid kui HTML dokumendi teksti on vaja lisada mingisugune pikk tsitaat. Teek <BLOCKQUOTE> on konteiner (peab kindlasti olema ka sulgev teek) ja võib sisaldada endas suvalisi vormindamise teeke. Erinevalt teegist <Q>, mis on mõeldud lühikeste tsitaatide esiletõstmiseks, on teek <BLOCKQUOTE> ploki taseme teek. Tekst, mis on vormindatud antud teegiga eraldatakse lehitseja aknas põhitekstist tühjade ridadega ja väikese taandega paremale poole.

Ülesanne 9. Vormindame dokumendi tsitaadi.

1. Avage või aktiveerige Notepad aknas dokument "fyysilinevormindamine.htm".
2. Sulgege HTML koodis teekide <BLOCKQUOTE> ja </BLOCKQUOTE> vahele teine ja neljas lõik.
3. Salvestage muudatus ja värskendage lehitseja kuva.
   
   Võiks kihla vedada, et dokumendi kuvas muutub midagi!

Teek <ADDRESS>.

Teeki <ADDRESS> kasutatakse dokumendi autori identifitseerimiseks ja autori aadressi kuvamiseks. Siia paigutatakse reeglina ka informatsioon autoriõiguste kohta. See element asub kas dokumendi alguses või selle lõpus. Tihti sisestatakse sellesse elementi ka dokumendi loomise kuupäev ja ka viimase uuendamise kuupäev. See võimaldab lõppkasutajal määrata, kas nad on juba tutvunud käesoleva dokumendi eelmiste versioonidega. Tekst, mis on piiratud teekidega kuvatakse lõppkasutaja lehitseja aknas kaldkirjas.

Ülesanne 10. Lisame nüüd andmed ka dokumendi autori kohta.

1. Avage või aktiveerige Notepad aknas dokument "fyysilinevormindamine.htm".
2. Sisestage HTML koodi teegi ette </BODY> vahetult eelnevale reale teekide <ADDRESS> ja </ADDRESS> vahele oma eesnimi ja perekonnanimi, telefon ja E-mail.
3. Salvestage muudatus ja värskendage lehitseja kuva.
   
   Lehitseja kuva alumisse serva ilmus kaldkirjas andmed teie kui autori kohta. Kirja suurus on vaikimisi etteantud lehitseja poolt. Laadiks aga kaldkiri.

Spetsiaalsed sümbolid.

Mõned spetsiaalsed sümbolid ei kuulu ASCII kooditabeli baasossa. Nende alla kuuluvad mõnede euroopa keelte alfabeeti kuuluvad tähed, matemaatilised ja veel mõned sümbolid. Mõned sümbolid, mis dokumendi autor sisestab vahetule HTML dokumenti kuvatakse lehitseja aknas hoopis teisiti. Nende juurde kuuluvad ka sümbolid < ja >, mida kasutatakse HTML keele teekide jaoks.

Sellistel juhtudel tuleb teile vajalike sümbolite sisestamiseks HTML dokumenti kasutada spetsiaalseid koode. Need koodid koosnevad sümbolist & ja sellele järgnevast sümboli nimest või siis sümboli numbriga kümnendkoodist või sümboli numbriga kuueteistkümnendkoodist. Spetsiaalse sümboli kirjapildi lõpetab semikoolon (;).

HTML spetsifikatsiooni on olemas küllaltki mahukad tabelid selliste spetsiaalsete sümbolite koodide jaoks. Tänapäeval interpreteerivad lehitsejad vaid väikese osa nendest spetsiaalsetest sümbolitest, seepärast pole nende tabelite siin andmine otstarbekas. Märgime vaid mõned sümbolid, mida kasutatakse tänapäeval ja mida toetavad ka kõik lehitsejad.

Kõik sümbolid võib ette anda ka oma koodidega. Näiteks siduva tühiku sümboli kood on 160. Teda võib kirja panna ka kümnendkujul: &#160;.

Ülesanne 11. Lisame nüüd dokumendi autori andmetele spetsiaalse sümboli.

1. Avage või aktiveerige Notepad aknas dokument "fyysilinevormindamine.htm".
2. Sisestage teegi <ADDRESS> järele kood: &copy.
3. Salvestage muudatus ja värskendage lehitseja kuva.
   
   Lehitseja kuvale ilmub spetsiaalne märk Copyright.