Dokumendi struktuur

Dokumendi struktuur.

Esimeseks teegiks, millega tuleb alustada HTML dokumendi kirjeldamist on teek <HTML>. Ta peab alati alustama dokumendi kirjeldust ja lõpetama dokumendi kirjeldust peab teek </HTML>. Need teegid tähistavad seda, et nende vahele jäävad read kujutavad endast ühtset HTML dokumenti. Teekide paari (<HTML> </HTML>) vahel asub dokument ise. Iseenesest on dokumendiks harilik ASCII tekstifail. Ilma nende teekideta on võimalik, et lehitseja võI teine HTML dokumentide lugemiseks mõeldud programm ei ole võimeline identifitseerima dokumendi formaati ja seda korrektselt interpreteerima. Teeki <HTML> kasutatakse tihti ilma parameetriteta.

Ülesanne 1. Loome HTML dokumendi.

Looge uus kaust oma töölauale ja pange selle nimeks "HTML40"

Käivitage programm Notepad (Start-Programs-Accessories- Notepad).

Salvestage uus dokument kausta "HTML40" nimega "struktuur.htm", kusjuures laiend on nimelt ".htm".

Trükime nüüd dokumenti esimesed kaks teeki <HTML> </HTML> ja salvestame valides punktist File korralduse Save.

Dokument peaks umbes olema selline:

Dokumendi päise teek <HEAD> määrab tema pealkirja. Pealkirja ülesandeks on dokumenti interpreteerivale programmile vajaliku informatsiooni esitamine. Teeke, mis asuvad teekide <HEAD> ja </HEAD> vahel (välja arvatud dokumendi tiitel, mida kirjeldab teek <TITLE>) ei kuvata ekraanil.

Ülesanne 2.

Lisame oma html dokumenti päise teegid <HEAD> ja </HEAD>.

Salvestame valides punktist File korralduse Save.

Dokument peaks umbes olema selline:

< TITLE > ja </TITLE>

Konteiner- teek <TITLE> on ainus kohustuslik teek, mis peab dokumendi päises olema. Konteiner- teek on selleks, et anda dokumendile nimetus. See nimetus kuvatakse reeglina lehitseja tiitliribal. Teeki <TITLE> ei tohi segamini ajada dokumendi faili nimega; vastupidi kujutab teek <TITLE> endast tekstirida, mis on sõltumatu faili nimest ja asukohast.

Dokumendi nimetuse kohustus on üldiselt võetuna tungiva soovituse iseloomuga.
Dokument ilma teegita <TITLE> on ka kuvatav lehitsejate poolt.

Ülesanne 3. Avage kaust "HTML40" ja sealt avage dokument "struktuur.htm".

Olenevalt Teie arvutis installeeritud lehitsejast näidatakse HTML dokumendi "struktuur.htm" kuvamisel lehitsejas kas dokumendi "struktuur.htm" täielikku nime (C:\WINDOWS\Desktop\HTML40\struktuur.htm) või ei näidatagi midagi.

Dokumendi nimetus kirjutatakse teekide <TITLE> ja </TITLE> vahele ja kujutab endast tekstirida. Põhimõtteliselt võib selle tekstirea pikkus olla piiramatu pikkusega ja sisaldada endas suvalisi sümboleid (välja arvatud mõned reserveeritud sümbolid). Praktikas tuleb siiski piirduda üherealise nimetusega, arvestades sellega, et nimetus ilmub lehitseja päisesse. Tuleb samuti meeles pidada asjaolu, et lehitseja akna mõõtmete vähenemisel väheneb ka tiitliriba pikkus.

Seega on mõistlik seada nimetuse pikkuse piiriks 60 sümbolit.

Vaikimisi kasutatakse teksti, mis asub dokumendi nimetuses dokumendile lemmikviite (Bookmark/Favorites) loomisel. Seepärast hoiduge ilmetutest nimetustest nagu (Home Page, Index, WWW jne.).

Dokumendi nimetus peab lühidalt iseloomustama selle sisu.

Ülesanne 4. Sisestame päisesse nimetuse.

Sisestage päisesse teekide <HEAD> ja </HEAD> vahele teegid <TITLE> ja </TITLE> nii: <HEAD> <TITLE> </TITLE> </HEAD>.
Trükkige teekide <TITLE> ja </TITLE> vahele oma eesnimi ja perekonnanimi. Näiteks <TITLE>Jaan Kirik</TITLE>.
Salvestage valides punktist File korralduse Save.
Klõpsake nüüd tegumisribal oleval lehitseja ikoonil selle avamiseks või kuvamiseks.
Klõpsake lehitseja kuval hiire parempoolset klahvi ja valige avanevast kontekstmenüüst korraldus Refresh.

Seepeale peab lehitseja tiitliribale (ja lehitseja ikoonile tegumisribal) ilmuma Teie eesnimi ja perekonnanimi (minu näite puhul ilmub sinna Jaan Kirik) ja dokument peaks olema umbes selline:

Seos teiste dokumentidega.

Tihti on HTML dokumendid omavahel seotud, st neis on olemas viited teineteisele. Viited võivad olla nii absoluutsed kui ka suhtelised. Nii esimestel kui ka teistel on oma puudused. Absoluutsed viited võivad olla liiga kogukatena ja lakata töötamast kui hierarhias allpool oleva dokumendi asukohta muuta. Suhtelisi viiteid on kergem sisestada ja uuendada kuid ka need seosed katkevad kui muuta kõrgema taseme dokumendi asukohta. Mõlemad tüüpi viidete töö võib olla häiritud dokumendi ülekandel ühest arvutist teise.

Tihti tuleb ette olukordi kus kasutaja olles laadinud oma lokaalsesse arvutisse mingi mahuka dokumendi leiab, et kõik viited selles dokumendis on mittetöötavad, kuna viidatavad dokumendid millele viitavad viited asuvad teises arvutis. Selleks, et vältida selliseid olukordi ongi HTML loojad lisanud HTML spetsifikatsiooni teegid <BASE> ja <LINK>, mis lisatakse dokumendile selleks, et sidemed dokumentide vahel ei katkeks.

Teek <BASE>.

Teegis <BASE> näidatakse viidatava dokumendi täielik URL (aadress). Selle abil jätkab suhteline viide oma tööd kui dokument teisaldada teise kausta või isegi teise arvutisse. Teek <BASE> töötab analoogselt MS-DOS käsuga path, mis võimaldab lehitsejal määrata otsitava dokumendi viite isegi siis, kui see asub teise arvuti kõrgema taseme kaustas.

Teegis <BASE> on olemas üks kohustuslik parameeter HREF, peale mida näidatakse dokumendi täielik otsimistee URL.

Näide 1. Teegi <BASE> kasutamine.

<HTML>
<HEAD>
<TITLE>Baasaadressile viitamine</TITLE>
<BASE HREF="//my.tele2.ee/tomingkuno"></BASE>
</HEAD>
<BODY>

</BODY>
</HTML>

Klõpsa sellel nupul Näite 1. illustreerimiseks.

Teek <BASE> näitab lehitsejale kust otsida faili. Juhul kui kasutaja töötab faili lokaalse koopiaga ja tema masin ei ole võrgust välja lülitatud, siis ikooni Save kujutis leitakse ja kuvatakse lehitseja aknas.

Teek <LINK>.

Kuigi teek <BASE> võimaldab leida faili, jääb lahtiseks küsimus dokumentide omavaheliste seoste kohta. Nende seoste tähtsus kasvab proportsionaalselt teie dokumentide keerukusastme kasvades. Selleks, et toetada loogilist seost nende vahel on HTML sisse viidud teek <LINK>.

Teek <LINK> osutab seda teeki sisaldava dokumendi ja teise dokumendi või objekti vahelisele seosele. Teek koosneb URL aadressist ja parameetritest, mis täpsustavad dokumentide omavahelised seosed. Dokumendi päises võib olla suvaline arv <LINK> teeke. Tabelis 1 on toodud teegi <LINK> parameetrid ja nende funktsioonid.

Parameeter	Funktsioon
HREF	Osutab teise dokumendi URL aadressile.
REL	Määrab seose jooksva dokumendi ja teise dokumendi vahel.
REV	Määrab seose teiste dokumentide ja jooksva dokumendi vahel (suhe, vastupidine REL)
TYPE	Määrab seotud laadide tabeli tüübi ja parameetrid.

Näide 2. Mõned teegi <LINK> parameetritega näited.

Esimene rida osutab otsesele seosele contents dokumendi sisukorra failiga (toc.html - table of contents). Teine rida kirjeldab seost dokumendi autori URL aadressiga (tagasiulatuva seosega made).

Dokumentide vahel võib olla palju erinevaid seoseid. Parameetri REL teisi väärtusi: bookmark, copyright, glossary, help, home, index, toc, next, previous. Parameetril REV võivad olla väärtused: author, editor, publisher, owner.

Teek <META>.

HTML keele uute spetsifikatsioonide väljatöötamisele kulub küllalti palju aega ja selle aja jooksul on lehitsejaid tootvad kompaniid jõuavad väljastada oma toodangu mitmeid versioone. Seepärast võib päisesse lisada veel üks teek <META>, mis võimaldab dokumendi autoritel määratleda informatsiooni, mis ei kuulu keele HTML koosseisu.

Seda informatsiooni kasutab lehitseja tegevusteks, mis ei ole ette nähtud jooksva HTML spetsifikatsiooni poolt. Teeki <META> ei vaja teie oma esimeste HTML dokumentide loomisel, kuid te vajate seda kindlasti siis, kui teie lehed muutuvad keerulisteks.

Näide 3.

Lehitsejad Netscape Navigator ja Internet Explorer saavad sellest aru kui instruktsioonist oodata 60 sekundit ning seejärel laadida alla uus dokument. Sellist instruktsiooni kasutatakse sageli dokumentide asukoha muutumisel. Väike dokument, milles on selline rida võidakse jätta dokumendi vanasse asukohta selleks, et kasutaja automaatselt siirdada selle dokumendi uude asukohta.

Näide 4. Järgnev rida

instrueerib lehitsejat laadima lehekülge uuesti iga 60 sekundit. See võib olla kasulik kui andmed leheküljel muutuvad tihti, näiteks: jututuba, aktsiate hinnamuutused börsil jne.

on saanud üsna populaarseks kasutada teeki <META> mõningate tüüpülesannete lahendamiseks. Näitena võib tuua otsimissüsteemide poolt kasutatavate võtmesõnade näitamise. See moodus võimaldab lülitada dokumendi indeksisse lisasõnu, mis võivad ilmselt mitte olla selle dokumendi sisus. Selleks on teegis <META> parameetri NAME väärtusena sisestatav mingi omadus. Ja parameetri CONTENT abil näidatakse selle parameetri omadus. Näiteks:

HTML spetsifikatsioon ei määratle konkreetselt omaduste nimesid, mida pannakse kirja teegis <META>. Kuigi on olemas mitu tihemini kasutatavaid omadusi, näiteks: description, keywords, author, robots jne.

Näitena toodud teegid <META> võiksid küllalt suure tõenäosusega olla ka antud kursuse HTML dokumendi päises. Tabelis 2 on toodud teegi <META> võimalikud parameetrid:

Parameeter	Funktsioon
HTTP-EQUIV	Määrab teegile omadused.
NAME	Võimaldab lisada teegile kirjeldusi. Kui see parameeter on välja jäetus, siis loetakse see ekvivalentseks parameetriga HTTP-EQUIV.
URL	Määrab omaduse dokumendi aadressi.
CONTENT	Määrab omaduse väljastatava väärtuse.

Veel üheks tähtsaks teegi <META> määratluseks on - teksti kodeerimise näitamine. Nii on venekeelse teksti näitamiseks Windowsi kodeerimissüsteemis vajalik kirja panna järgmine rida:

Ja eestikeelse teksti näitamiseks järgmine rida:

Päise teised elemendid.

Dokumendi päises võivad olla veel kaks teeki - <STYLE> ja <SCRIPT>. Nende teekide vajadus on seotud laaditabelite ja stsenaariumide (skriptide) kasutamisega.

Teek <BODY>.

Selles HTML dokumendi osas asub selle sisuline osa. Suurem osa teekidest, mida me vaatleme antud kursuse raamides asub just selle teegi sees.

Dokumendi osa BODY peab algama teegiga <BODY> ja lõppema teegiga </BODY>, millede vahe asub kogu antud dokumendi sisu.

Teegil <BODY> on rida mittekohustuslikke parameetreid, mis on toodud tabelis 3.

Parameeter	Funktsioon
ALINK	Määrab aktiivse viite värvi.
BACKGROUND	Määrab foonina kasutatava kujutise URL aadressi.
BOTTOMMARGIN	Dokumendi alumise äärise laius pikselites.
BGCOLOR	Dokumendi tausta värvuse määramine.
BGPROPERTIES	Kui parameetri väärtuseks on "fixed", siis foonikujutist ei kerita.
LEFTMARGIN	Dokumendi vasaku äärise laius pikselites.
LINK	Määrab veel vaatamata viite värvi.
RIGHTMARGIN	Dokumendi parema äärise laius pikselites.
SCROLL	Määrab selle kas kerimisribasid kuvatakse lehitseja aknas või mitte.
TEXT	Määrab teksti värvi.
TOPMARGIN	Dokumendi ülemise äärise laius pikselites.
VLINK	Määrab juba vaadatud viite värvi.

Parameetrit BGPROPERTIES toetab ainult lehitseja Internet Explorer. Samuti tunnustab BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN ja TOPMARGIN parameetreid ainult Internet Explorer alates versioonist 4.0.

Värvid.

Keeles HTML määratakse värvid kuueteistkümnendsüsteemis. Värvisüsteem baseerub kolmel põhivärvil - punasel, rohelisel ja sinisel - ja tähistatakse RGB. Iga värvi jaoks määratletakse väärtus kuueteistkümnendsüsteemis vahemikus 00 - FF, mis on vastav diapasoonile 0 - 255 kümnendsüsteemis. Seejärel liidetakse need väärtused üheks arvuks, mille ette pannakse sümbol #. Näiteks on arv #800080 lilla. Selleks, et mitte vaeva näha värvuste koodide meeldejätmisega võib nende asemel kasutada värvuste inglisekeelseid nimetusi. Nii on värvuse #800080 inglisekeelne nimetus "purple".

Ülesanne 5. Lisame teegi <BODY> </BODY> oma esimesele HTML dokumendile ja salvestame selle uuesti uue nimega.

Sisestage teegi </HEAD> järele teegid <BODY> ja </BODY>.

Dokument "struktuur.htm" peaks olema umbes selline:
Klõpsake nüüd tegumisribal oleval lehitseja ikoonil dokumendi "struktuur.htm" avamiseks või kuvamiseks.
Klõpsake lehitseja kuval hiire parempoolset klahvi ja valige avanevast kontekstmenüüst korraldus Refresh.

Sisuliselt ei muutu kuval midagi, see on sama valge kui enne. ;=)
Trükkige nüüd teekide <HEAD> ja </HEAD> vahele oma järgmised teegid

<META NAME="author" CONTENT="oma eesnimi ja perekonnanimi"></META>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"></META>
Salvestage valides punktist File korralduse Save.

Dokument "struktuur.htm" peaks olema umbes selline:
Klõpsake nüüd tegumisribal oleval lehitseja ikoonil dokumendi "struktuur.htm" avamiseks või kuvamiseks.
Klõpsake lehitseja kuval hiire parempoolset klahvi ja valige avanevast kontekstmenüüst korraldus Refresh.

Sisuliselt ei muutu kuval jälle midagi, see on ikka sama valge kui enne.
Lisame veel teeki <BODY> järgmised parameetrid nii:

<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#008000" ALINK="#ff0000">

(siin määrasime taustavärvuseks valge, teksti väärtuseks must, lingid on sinised,
külastatud lingid tumerohelised ja aktiivsed lingid on punased)
Valime punktist File korralduse Save As… ja salvestame dokumendi kausta "HTML40" uue nimega "uus.htm"

Nüüd on meil olemas HTML dokument, mille struktuur vastab täielikult HTML spetsifikatsioonis nõutavale. Kasutame seda dokumenti edaspidi igakord kui meil on tarvis tühja uut HTML dokumenti, milles oleks juba kõik vajalik informatsioon Teie kui autori kohta ja milles oleksid ka vajalikud parameetrid juba olemas.

Ülesanne 6. Uue HTML dokumendi avamine ja HTML (lähte)koodi vaatlemine.

Sulgege nüüd lehitseja aken, milles on avatud HTML dokument struktuur.htm.
Avage kaustast "HTML40" uus dokument "uus.htm".
Valige lehitseja peamenüü punktist View korraldus Source.

Reeglina avatakse seepeale Notepad ja selles ka HTML dokument. Nüüd te näete oma esimese HTML dokumendi koodi, nii nagu seda näeb iga interneti kasutaja kui tal seda vaja olema peaks.