HTML-keele lühijuhend
Andres Jaeger

SISUKORD:

ÜLDANDMED

WWW (World Wide Web) poolt teenindatavad tekstid on üldiselt spetsiaalses HTML (HyperText Markup Language)-keeles kirjutatud dokumendid, st tavalised tekstid, mis sisaldavad HTML-keele koode. Põhimõtteliselt võib HTML-dokumente kirjutada mistahes tekstiredaktori abil.

HTML-keele peaülesandeks on peegeldada teksti struktuuri WWW- klientprogrammile (lugemisprogrammile) arusaadaval viisil. Selle kõrval sisaldab HTML-keel ka teksti välimust (näiteks poolpaksult ja kursiivis) mõjutavaid koode.

Lisaks sellele võimaldab HTML-keel tekstile ka piltide ja heli lisamist, samuti antud tekstist teistele HTML-tekstidele ning teiste võrkude ressurssidele viidata (linkida).

HTML-keele elementideks on tagid ehk koodid (tag), mille alusel toimub teksti töötlemine. Kõik koodid kirjutatakse erimärkide ( < ja > ) vahele. Osa koode on nn paariskoodid, millest esimene määrab mõjupiirkonna alguse, teine aga selle lõpu: näiteks kirjutises <H1>Pealkiri</H1> määrab kood <H1> pealkirja alguse, kood </H1> aga selle lõpu.

Eri WWW-klientprogrammid näitavad HTML-tekste erinevalt, mistõttu laiemaks kasutamiseks ette nähtud tekstid tuleks testida mitme erineva süsteemi (Netscape, Mosaic, Lynx) abil.

TEKSTI PÕHIOSAD

HTML-teksti põhiosadeks on päis (<HEAD>...</HEAD>-osa) ja tekst (<BODY>...</BODY>-osa). Allpool vaatlemegi HTML-dokumendi struktuuri määravaid koode.

<HTML>-kood teatab, et tegemist on HTML-tekstiga. HTML-tekstide kirjutamise hea tooni juurde kuulub nende alustamine koodiga <HTML> ning lõpetamine koodiga </HTML>.

<HTML>-koodile järgneb <HEAD>...</HEAD>-osa, mille abil teatatakse üldandmed teksti kohta ning järgmise koodi abil ka üldpealkiri:

<TITLE>Kogu teksti pealkiri</TITLE>
- see pealkiri on nähtav kogu teksti vaatlemise aja (Lynx'i kasutamisel näiteks ekraani parempoolses ülanurgas).

<HEAD>-osale järgneb <BODY>...</BODY> -osa, mis sisaldab juba teksti enda.

Lühinäide terviklikust HTML-dokumendist võiks olla järgmine:

<HTML>
<HEAD>
<TITLE>PEALKIRI</TITLE>
</HEAD>
<BODY>
Tekst ise ...
</BODY>
</HTML>

PEALKIRJAD

HTML-keel võimaldab kuni kuue erineva või eri tasemel pealkirja kasutamist. Illustreerime neid järgmiste näidetega (esmalt HTML-kuju, seejärel nii nagu see paistab pärast klientprogrammiga töötlemist):

<H1>Esimese taseme pealkiri</H1>

Esimese taseme pealkiri

<H2>Teise taseme pealkiri</H2>

Teise taseme pealkiri

<H3>Kolmanda taseme pealkiri</H3>

Kolmanda taseme pealkiri

<H4>Neljanda taseme pealkiri</H4>

Neljanda taseme pealkiri

<H5>Viienda taseme pealkiri</H5>
Viienda taseme pealkiri
<H6>Kuuenda taseme pealkiri</H6>
Kuuenda taseme pealkiri

TEKST

Rea ja lõigu (peatüki) vahetamine

HTML ei aktsepteeri tekstiredaktorite abil tehtud rea- ja lõiguvahetusi - nende näitamiseks on HTML-keelel oma koodid. Seejuures reavahetuskoodi (<BR>) alusel ei jäeta järgnevat rida tühjaks, lõiguvahetuskoodi (<P>) korral aga jäetakse nagu järgnevast näitest ilmneb:

Rida katkestatakse<BR> ja jätkatakse...

näeb välja sellisena:

Rida katkestatakse
ja jätkatakse...

Kuid

Rida katkestatakse<P> ja jätkatakse...

näeb aga välja sellisena:

Rida katkestatakse

ja jätkatakse...

Pealkirja järel lõiguvahetust näidata pole tarvis, sest sinna jäetakst tühi rida niikuinii.

Tekstiosi võib üksteisest eraldada ka horisontaaljoone (<HR>) näitamise teel:
rida enne joont


rida pärast joont

Esiletoomised (rõhutamised)

Põhiliste esiletoomisvahenditena võib HTML-keeles kasutada teksti esitamist poolpaksuna (<B>) või kursiivis (<I>), näiteks:

<B>Poolpaksult</B> - <I>kursiivis</I>

paistab sellisena:

Poolpaksult - kursiivis

Valmistöödeldud tekst

Varemkujundatud teksti saab soovi korral jätta HTMLi poolt töötlemata, kasutades koodi <PRE>. Näiteks tekst

<PRE>
1. lahtri 1. rida      2. lahtri 1. rida
1. lahtri 2. rida      2. lahtri 2. rida
</PRE>

paistab WWW kaudu vaadelduna nii nagu ta esitati:

1. lahtri 1. rida      2. lahtri 1. rida
1. lahtri 2. rida      2. lahtri 2. rida 

Erimärgid

Märkidel < ja > on HTMLis eritähendus, mistõttu neid sellistena tekstis kasutada ei saa. Tarbe korral tuleb nad tekstis näidata järgmisel viisil (Escape-sekventsidena):

<  = &lt;
>  = &gt;

Toome siinkohal ära veel mõnede enamkasutatavate märkide esitamise viisi (kaks viimast pole LYNXis nähtavad):

&  = &amp;
"  = &quot;
§  = &#167;
®  = &reg;
©  = &copy;


Kui HTML-teksti kirjutamisel pole kasutusel 8-bitine märgistik, siis tuleb täpitähed asendada järgistega (Escape-sekventsidega):

ä = &auml;
Ä = &Auml;
ö = &ouml;
Ö = &Ouml;
å = &aring;
Å = &Aring;
ü = &uuml;
Ü = &Uuml;
õ = &otilde;
Õ = &Otilde;

LOENDID

HTML-keel pakub mitmesuguseid võimalusi loendite esitamiseks. Allpool ongi toodud HTML-keeles kasutusel olevate eritüübiliste loendite näidised.

Nummerdamata loendid

<UL>
<LI>loendi 1. objekt
<LI>loendi 2. objekt
</UL>

paistab sellisena

Nummerdatud loetelu

<OL>
<LI>rida: tekst 1
<LI>rida: tekst 2
</OL>

paistab sellisena:

  1. rida: tekst 1
  2. rida: tekst 2

Määratlus- ehk definitsiooniloend

<DL>
<DT>loendi 1. objekt
<DD>1. objekti seletus
<DT>loendi 2. objekt
<DD>2. objekti seletus
</DL>

paistab sellisena:

loendi 1. objekt
1. objekti seletus
loendi 2. objekt
2. objekti seletus

Loendite sees võib tarbe korral kasutada teksti viimistlusmääratlusi (näit. poolpaksult, kursiivis jms).

Hierarhilised loendid

Loendeid võib lasta korrastada ka hierarhiliselt:

<UL>
<LI>esimene tase
<UL>
<LI>teine tase
<UL>
<LI>kolmas tase
</UL>
</UL>
<LI>esimese taseme teine objekt
</UL>

paistab sellisena:

VIITED (LINGID)

Tekstisisesed viited (lingid)

Kõige harilikum hüpertekstilink on samas tekstis teise kohta viitamine. Sellisel juhul esitatakse hüperteksti ankur kujul
<A HREF=#nimi>...</A>. Kohale, kuhu viidatakse, tuleb anda nimi koodiga <A NAME=nimi> ... </A>

Näiteks kui mingi tekstiosa algusele on antud nimi

<A NAME=ALGUS>...</A>, siis saab sinna viidata ankruga

<A HREF=#ALGUS> ... </A>

Viited teistele HTML-tekstidele

Teistele hüpertekstidele viitamiseks tuleb kasutada ankrut, mille üldkuju on niisugune:

<A HREF=URL>...</A>

Siin URL (Uniform Resource Locator) abil teatatakse, kus soovitud tekst asub. Näiteks URL http://www.ut.ee/~user1/dir1/text1.html teatab, et tekst text1.html tuleb hankida kasutaja user1 kataloogi public_html alamkataloogist dir1.

Nimelt asuvad vaatlusprogrammile (brauserile) kättesaadavad failid vastava kasutaja kindlaksmääratud nimega kataloogis (sageli on sellise kataloogi nimeks public_html) või selle mingis alamkataloogis. Kataloogis public_html asuvatele tekstidele saab viidata näiteks järgmisel viisil:

http://www.ut.ee/~kasutajanimi/. Seega tuleks käesolevale juhendile viitamiseks näidata:

<A HREF=http://www.ut.ee/~ajaeger/html-juhend.html>  

Kui tekstis esineb koodiga <A NAME=nimi>...</A> märgitud kohti, siis võib nendele teistest dokumentidest viidata järgmise näite eeskujul:

<A HREF=http://www.ut.ee/~ajaeger/html-juhend.html#LINGID
> ... </A>

viitab käesoleva juhendi alajaotusele VIITED (LINGID), sest vastavale kohale HTML-tekstis on koodiga <A NAME=LINGID>VIITED (LINGID)</A>) määratud nimi LINGID.

Viited teistele võrguressurssidele

Eespool vaadeldi piltide ja teiste HTML-tekstide linkimist. Linkida võib aga ka teiste võrkude ressursse. Üksikasjalikumat (ingliskeelset) informatsiooni teistele võrguressurssidele viitamise kohta vt
A Beginner's Guide to URLs.

AADRESSID

HTML-dokumentides on otstarbekohane näidata ka tegija elektronpostiaadress. Selleks saab kasutada koodi <ADDRESS>...</ADDRESS>, näiteks:

<ADDRESS>ajaeger@madli.ut.ee</ADDRESS>

toimel ilmub aadress ekraanile sellisena:
ajaeger@madli.ut.ee
Veelgi parem on aadressi estitamiseks kasutada näiteks järgmist koodi:
<A HREF=MAILTO:ajaeger@madli.ut.ee>e-mail</a>
MAILTO abil saab nimelt luua lingi, mille vahendusel lugejad võivad saata elektronposti teel teate teksti kirjutajale (see ei toimi aga kõikide klientprogrammide korral), näiteks eespoolesitatud aadress paistab nüüd ekraanil niisugusena:
e-mail
Ekraanil sellise valiku tegemisel saab nüüd saata e-maili aadressil ajaeger@madli.ut.ee.

PILTIDE PAIGUTAMINE TEKSTI

Pilte saab tekstile lisada <IMG SRC=URL>-koodi abil. Siin URL (Uniform Resource Locator) teatab klientprogrammile pildi (gif- või xbm-tüüpi faili) asukoha. <IMG>-koodi võib esitada näiteks järgmisel viisil:

<IMG SRC=http://www.ut.ee/images/ylikool/Peahoone.gif>

Selle abil lisatakse tekstile Tartu Ülikooli peahoone pilt:

Piltide asukoha teksti suhtes võib määrata ALIGN-täpsustajaga. Näiteks

<IMG SRC=http://www.ut.ee/images/ylikool/Ylikoollogo.gif

align=middle>

toimel paigutatakse Tartu Ülikooli logo tekstirea keskele.

ALIGN-täpsustaja teine alternatiiv on ALIGN=TOP, mis paigutab pildi ülemise serva tekstireaga samale tasemele (vaikimisi on pildi alumine serv tekstireaga samal tasemel).

Eelistatav formaat piltidele on GIF, X-keskkonnas aga X-bitikaart. Pildifailide nimelaiendid peavad vastavalt olema kas .gif või .xbm, et klientprogramm teaks, kuidas neid töödelda.

Kuna kõik klientprogrammid ei ole võimelised pilte näitama (näiteks Lynx), siis võib pildi asemel samal kohal esitada ka <IMG>-koodis ALT-suvandiga määratud teksti. Näiteks

<IMG SRC=pilt.gif ALT=JOONIS>

korral paistab Lynx'i vahendusel pildi asemel tekst "JOONIS".

NETSCAPE-LAIENDUSED

HTML on keel, mida pidevalt täiendatakse. Esimesed konkreetsed laiendusettepanekud on teinud Netscape Communications Corporation. Need nn Netscape-laiendused pakuvad mitmeid lisavõimalusi HTML-tekstide kirjutamisel ja toimetamisel. Laiendusi tuleb aga kasutada ettevaatlikult, sest mitte kõik klientprogrammid pole võimelised neid korrektselt tõlgendama. Seni suudab seda vaid Netscape'i oma programm, mis tõsi küll, on laialt levinud.

<HR>-koodile on laiendustes lisatud järgmised võimalused:

Äsjavaadeldud laiendite mõju illustreerivad järgmised näited:

<HR NOSHADE SIZE=7 WIDTH=60% ALIGN=LEFT>

paistab sellisena:


<HR SIZE=15 WIDTH=360 ALIGN=center>

aga sellisena:




<IMG>-koodile on samuti tehtud laiendusi. Selles leiduvad nüüd järgmised võimalused:

<IMG>-koodi laiendite kasutamist illustreerib kõrvalolev näide, mis on saadud järgmise koodiga :

<img align=right width=300 height=200 border=2 vspace=5 hspace=40 src=http://www.ut.ee/ ~ajaeger/varemed.gif>

Netscape-laiendustes leidub ka mitu päris uut koodi, milledest siinkohal vaatleme järgmisi:

<FONT SIZE=x>...</FONT>
- määrab märgi suuruse vahemikus 1 kuni 7 (baasfondiks ehk -suuruseks on vaikimisi x=3), näiteks:

Siin on FONT SIZE=1
Siin on FONT SIZE=2
Siin on FONT SIZE=3
Siin on FONT SIZE=4
Siin on FONT SIZE=5
Siin on FONT SIZE=6
Siin on FONT SIZE=7

Absoluutse suuruse määramise kõrval saab märke kehtiva baassuuruse suhtes ka suurendada või vähendada, pannes arvu ette vastavalt kas pluss- või miinusmärgi, näiteks:

Siin on FONT SIZE=+3
Siin on FONT SIZE=-2
Siin on jälle standardsuurus (x=3)

<BASEFONT SIZE=x>...</BASEFONT> - määrab baassuuruse vahemikus 1 kuni 7 (vaikimisi x=3), näiteks:

Siin on baassuuruseks BASEFONT SIZE=5
Siin on jälle standardne baassuurus (x=3)

<CENTER>...</CENTER>
- tsentreerib koodidevahelise teksti ja ka võimalikud pildid.

<!--See on kommentaar, mis ei ilmu ekraanile-->
- võimaldab HTML-dokumendile selliste seletavate tekstide lisamist, mida klientprogramm ei töötle.

NÕUANDEID HTML-TEKSTIDE KIRJUTAJATELE

Kuna erinavad teenindus- ehk klientprogrammid töötlevad HTML-koode erinevalt, siis tuleks HTML-tekste testida mitme süsteemi (Netscape, Mosaic, Lynx) abil.

Teksti lugemine ekraanilt on tunduvalt raskem kui paberilt. Seetõttu tuleks HTML-tekstid kujundada visuaalselt avaratena, säilitades samal ajal nende sisulise kompaktsuse.

HTML-teksteide kirjutamisel on otstarbekohane võtta eeskuju võrgus leiduvatest hästiteostatud dokumentidest. HTML-lähtekoodide uurimist võimaldavad mitmed HTML-tekstide lugemiseks ette nähtud klientprogrammid. Näiteks paljudes graafilistes lugemisprogrammides leidub lähtetekstide vaatlemise võimalus (View Source) kusagil View- või Edit-menüüs.

Linkide kasutamisel tuleks viidata suurematele teksti(osa)dele, kusjuures kontekstiliselt tuleks täpselt määratleda, kuhu lingi valimisel jõutakse. Vältida tuleks viitamist näiteks suuremas tekstis käsitletava mõiste mõnerealisele definitsioonile. Viimane tuleks sellisel juhul lihtsalt vastavasse teksti lülitada ja seal esile tõsta.

Kui võrgus avaldatavat materjali sageli muudetakase, siis tuleks lehekülje lõppu lisada teade selle kohta, kunas teksti on viimati muudetud ja kellega võib ühendust võtta muudatusi puudutavates küsimustes.

Kui HTML-tekstide kogumil on olemas enam-vähem kindel järjestus, siis tuleks iga teksti lõppu lisada viit järgmisele ja eelmisele tekstile ning ka sisukorrale (kui see on).

Kuna praegu on paljude kasutajate käsutuses veel aeglasi liine, siis ei tohiks HTML-dokumentides piltide ja muu illustreeriva materjaliga liialdada. Suuremate piltide korral oleks mõistlikum viidata illustratsioone sisaldavale HTML-tekstile, andes sellega lugeja otsustada, kas neid vaadata või mitte.

Ka graafiliste kaartide liialdatud kasutamist tasuks vältida. Kui kaarte siiski kasutatakse, siis tuleks kõrvale organiseerida ka tekstimenüü, millest saab samu asju valida sageli hõlpsamini kui kaardilt.

Suurtesse dokumentidesse (eriti nendesse, mis sisaldavad heli ja/või pilti) viitavates linkides on heaks kombeks näidata ka otsitava dokumendi maht baitides.

TÄIENDAVAID MATERJALE

Stiilijuhiseid HTML-dokumentide toimetajatele

Valik WWWga seotud ingliskeelseid materjale

Making hypertext readable and navigable

HTML-redaktoreid ja -konvertoreid


Andres Jaeger
Tartu Ülikool
Arvutuskeskus

© Tartu Ülikool, 1995 - 1998