HTML - HyperText Markup Language
 

teejuht:
 
1. sissejuhatus
2.
 tähesuurus, asetus, värv, eesti tähed
3.
 kodulehe ülespanek, lingid
4. tabel, rowspan, columnspan, laiused
5. pildid, taustapildid
6. vormid, chechkboxid, rippmenüüd
7. raamid
 
 

1. sissejuhatus

Amendment: Järnev on vaid põgus ehk mittepõhjalik, kui on tarvis teada kõiki featuresid siin pöörduge põhjalikemate allikate poole:
nt. www.w3.com

Kõik teavad, et Interneti kodulehekülgede vaatamiseks kasutatakse nt. Netscape. Enamus teavad, et andes Netscape'ile "Location" reale aadressi www.linux.ee tuleb ette Eesti linuxikasutajate kodulehekülg. Oluline on siin aru saada, et see nö. ettetulev info ei pärine mitte teie PC kõvakettalt, vaid veetakse iga kord mööda juhtmeid serverist kohale. Serveri nimi on antud juhul www.linux.ee.

Niisiis kaks poolt:

klient: teie PC, kus töötab Netscape
server: tõenaoliselt kah PC, kus töötab arvatavasti Apache'i webiserver.

Netscape on selline kaval programm, mis ärritab sellisel moel Apache'i web serverit, et viimane saadab talle terve hulga baite. Antud juhul www.linux.ee avalehekülje. Netscape oskab neid baite interpreteerida, et luua ekraanile värviline pilt. Ilmselt toimub kõik reaalajas (st. te peate ootama iga kord, et baidid sealt teie juurde jõuaksid) ning sestap on vaja midagi välja mõtelda, et kena ekraani saaks luua võimalikult vähese arvu baitidega saatmisega serverist browserisse.

See midagi ongi välja mõteldud ja see on HTML keel (õieti vist HTM keel). Sisuliselt koosneb see keel nagu iga teine keelgi mõlemale (server, klient) poolele arusaadavatest tähistustest.

nt. Kui server saabab browserile (st. kliendile) neli ascii sümbolit:

<HR>

, siis joonistab netscape Horisontal Ruler'i - rõhtjoone

kui aga saadab

<TABLE BORDER="1" WIDTH="60%">
<TR>
<TD>nimi</TD>
<TD>vanus</TD>
</TR>

<TR>
<TD>Imre</TD>
<TD>45</TD>
</TR>

<TR>
<TD>Jaan</TD>
<TD>18</TD>
</TR>
</TABLE>

, siis teeb Netscape tabeli 2 x 3 millel on äärejoon ja see katab 60 % ekraani laiust (suuremal monitoril on tabel absoluutselt suurem).

Web'i serverist tulev nn. source ei teki sinna serverisse mitte ise, vaid luuakse tavaliselt kas joe 's või Netscape'i osaks oleva Netscape Editor'iga (File -> New -> Blank Page). Proovige mõlemat. Etteruttavalt peab ütlema, et Editoris on mõnus panna üldpilt paika ning siis näpuga genereeritud source joe's üle vaadata. Selle source kirjutamist nimetataksegi web'i tegemiseks.

Asume näidete varal siis minema.

Muide, te saate näha kodulehekülje "köögipoolt" ehk source't ehk koodi võttes Netscape View -> Page Source või midagi sarnast. Peale selle saate oma kõvakettale salvestada suvalisi interneti kodulehekülgi File -> Save As ning neid pärast uurida (pildid tuleb aga eraldi salvestada ja pärast lingid üle vaatada).
 
 

2. tähesuurus, asetus, värv, eesti tähed

vt. näide

<HR> - taolisi asju nimetatakse tag'ideks. Tagi mõju kehtib algus-ja lõpptagi vahel, nt.

<B>See tekst on paks</B>

Nõndasiis toome seletustega ära näites esinenud tagid:
 
<HTML><BODY ... > .... </BODY></HTML>   See on kohustuslik: .html faili peab algama ja lõppema kindasti nende tagidega
TEXT="#F5FFFF" BGCOLOR="#000066" LINK="#0000EE" 
VLINK="#551A8B" 
ALINK="#FF0000"		 text 
background color 
link 
visited link 
active link		 vaikimisi teksti värv 
tausta värv 
külastamata link 
külastatud link 
külastatav link
<B> ... </B> bold paks kiri
<P> paragraph kahe lõigu vahe
<BR> break reavahetus
<FONT ...> ... </FONT> font täheomaduste määrang
SIZE=-2 size tähesuurus
COLOR="#0000FF" color tähevärv (vt. alt mudelit)
<TT> .. </TT>   teine tähekuju
<DIV ..> .. </DIV> division teksti osa küne alla võtmine
ALIGN=right alignment asetus real - paremal
 
värvid:

COLOR="#0000FF" tähistab ühte värvi. Millist saab teha kindaks nii:

selliselt antud värv on kodeeritud järgimise skeeme kohaselt

"#RRGGBB" ,st.

RR - red'i ehk punase osakaal
GG - green'i ehk rohelise osakaal
BB - blue ehk sinise osakaal

kusjuures kõik osakaalud on antud hexadecimal'is ja võivad olla vahemikus 00 h - FF h st. 0 d -  255 d.
Kokku on seega võimalike värve 256 x 256 x 256 = 16 miljonit. (prakitliselt muidugi loeb mis monitoriga vaadata :)

muide, kui RRGGBB on võrdsed, siis tulvad halli toonid: #111111, #030303, ...

eesti tähed:

tähelepanuväärne on kuidas eesti tähed edasi antakse (seda tuleb arvestada ka nt CGI'de kirjutamisel):

õ, Õ &otilde;, &Otilde;
ä, Ä &auml;, &Auml;
ö, Ö &ouml;, &Ouml;
ü, Ü &uuml; &Uuml;

Veel:

- Kindlasti olete märkanud, et üleval Netscape akna tiitelribas on mingi tekst: Selle määrab mis asub TITLE tagide vahel:
- Ning META tagide vaehele saab panna tehniliselt kasutatavat informatsiooni, sellest hiljem.
<HTML>
<HEAD>
   <TITLE>HTML - HyperText Markup Language</TITLE>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.05 [en] (X11; I; Linux 2.0.30 i586) [Netscape]">
</HEAD>
<BODY>
....
 

Seega html faili struktuur on selline:

<HTML>
<HEAD>
   <TITLE>HTML - HyperText Markup Language</TITLE>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.05 [en] (X11; I; Linux 2.0.30 i586) [Netscape]">
</HEAD>

<BODY>
<B>Siin on teie kodulehe nähtav sisu</B>
...

</BODY>
</HTML>
 
 

3. kodulehe ülespanek, lingid
 
 Kui te olete iseseisvalt lugemisega siiamaani jõudnud, siis pole vaja vist väga suure kaarega hakata rääkima linkidest. Ütleme vaid seda, et link on selline koht leheküljel kus

1. hiir muutub teistsuguseks
2. kui link on tekst, siis on ta alla joonitud (alati ei pruugi olla)
3. tehes seal hiire vasaku nupuga klõpsu tuleb ette uus ekraanitäis teksti

Siiamaani võis rääkida põhimõtteliselt ühest html dokumendist ja üldse mitte sellest kus see fail ise asub. Nüüd aga vaatame seda asja veidi üldisemalt.

Kuidas panna ülesse kodulehekülge?
 
 
1.  Teil peab olema account mingis soovitavalt internetiühendusega masinas. Vastasel juhul saab teie teost imetleda vaid piiratud arv inimesi. Selles masinas peab olema web'i server (üks programm - Apache)
2.  Tekitate oma kasutaja kodukataloogi (/home/imre/ ) kataloogi public_html ja annate talle õigused:  

cd 
mkdir public_html 
chmod a=rx public_html 
chmod u+w public_html 
ls -l 
 
 Nii on loodud kataloog kus user st. teie ise saate kõike teha (rwx) aga teised saavad seal vaid ringi vaaadata. 
Masinas kus teie account on on loodetavasti Apache'i või sellega ekvivalentne web'iserver ning nii häälestatud, et siintoodud read kehtivad :) See on aga kaunis standartne asi ja ülemaailma samamoodi. 
3.  Kui keegi maailmast tuleb teie (st. näite kohaselt minu) kodulehte vaatama, peab ta sisestama on Netscape'i "Location" reale aadressi: 

beryll.physic.ut.ee/~imre 

misjärel püüab webiserver otsida üles faili 

/home/imre/public_html/index.html 

ja seejärel selle sisu kliendile (tollele kellegile maailmas) saata. 
 
NB! 

chmod a=r index.html 
chmod u+w index.html 

on väga oluline teha mitte ainut index.html vaid ka teistele failidele! 

(Olles päris täpne, leiab konkreetselt minu juhul külastaja mitte index.html -i vaid index.cgi aga sellest hiljem; nimelt annab see variant teatavaid eeliseid) 
4.   lõpuks - lingid  

Normaalne pole kodulehte teha ühe index.html failina kus on kõik sees. Normaalne oleks luua public_html alla alamkatalooge (minu on seal nt. linux, fyysika, doswin), et informatsiooni organiseerida. Loomulikult on vaja arvestada failide-kataloogide õigusi! 

Minu koduleheküle avalehel te märkasite kindlasti sellist kohta: 

Keskendutud on 12 klassi füüsika eksami ettevalmistamisele ja arvuti kasutamisele 

1. Linux 
2. DosWin 
3. Füüsika 

Need on kohad kuhu klõpsates tuuakse browserisse uus fail. 

koodis vastavad neile kohad: 

<A HREF="main_linux.html">Linux</A><BR> 
<A HREF=".. /doswin/main_doswin.html">DosWin</A> 

Siit vist on niigi selge, mis on tehniliselt vajalik  (HREF="../doswin/main_doswin.html") ja mis selleks, et link lingina paistaks (DosWin). 

Siin on veel üks väike konks sees. Asja toodud on sellel lehe töötavatele linkidele vastavad read. 

Ja siin on avalehe read: 

<A HREF=linux/main_linux.html>Linux</A><BR> 
<A HREF=doswin/main_doswin.html>DosWin</A> 
 
 Toome selguse huvides ära minu konkreetse kataloogistruktuuri (seda muide, te ei saaks ise välja uurida :) 
 
/home/imre /public_html /linux main_linux.html
    index.cgi html.html
      tabelid.html
      pildid.html
      c.html
      gimp.gif
      gimp.jpg
      ...
    /doswin main_doswin.html
      vindid.html
      ...
    /fyysika main_fyysika.html
      ....
  /salvest.emailid ...  
  /lugemist ...  
  /kontrolltööd ...  
  ...    
 

Siin saab kohe aru ka erinevusest. Kui teil loete praegu neid ridu, siis on teil ilmselt ees fail 

/home/imre/public_html/linux/html.html 

ja te olete kataloogis 

/home/imre/public_html/linux 

ning siin piisab Linuxi pealehele viitest 

<A HREF="main_linux.html">Linux</A> 

kusjuures DosWin pealehele tuleb minna nii: 

<A HREF=".. /doswin/main_doswin.html">DosWin</A> 

Kui te olete aga pealehel, siis on teil ees fail 
(tegelikult pole see päris õige, aga reservatsioonidega võib nii öelda - index.cgi genereerib selle) 

/home/imre/public_html/index.html 

ja te olete kataloogis 

/home/imre/public_html 

ning seal on asjakohased sellised viited 

<A HREF=linux/main_linux.html>Linux</A><BR> 
<A HREF=doswin/main_doswin.html>DosWin</A> 
 
 
Ning saab teha ka linke ühe html faili piires (see eeldab, et fail on pikk mitu ekraani):

esmalt peame koodis kõnealused kohad ära märkima:

<A NAME="lovid"></A>

ja siis tegema lingid:

<A HREF="#lovid">Lõvid - need dzhungli kuningad ja teenrid</A>

vt. näide

Ning oluline on mainida, et linke saab järgida ka Location reale õigesti kirjutades (alati ei ole see paraku ette teada :)

/home/imre/public_html/linux/c.html faili saab vaadata kirjutades Locationisse:

beryll.physic.ut.ee/~imre/linux/c.html

ning konkreetset sektsiooni mis räägib while konstruktsioonist

beryll.physic.ut.ee/~imre/linux/c.html#while

4. tabel, rowspan, columnspan, laiused

esimese näite tegin ma nagu sellegi tegelikult valmis mitte joe'ga vaid Netscape Editoriga. Esimesest ma rookisin käsitsi välja selle mis polnud hädavajalik; siia näitesse ma jätsin kõik sisse nii nagu netscape heaks arvas. Tegin vaid need muutused mis olid vajalikud.
 
 
<HR WIDTH="80%"> horisontal ruler rõhtjoon 80 % ekraanist
näite tabel nr. 1.niisama tabel    
<TABLE 
BORDER 
COLS=2 
WIDTH="60%" > 
<TR> 
<TD></TD> 
<TD></TD> 
</TR> 
... 
</TABLE>		 table 
border 
columns 
width 
table row 
td 
td 
table row 
... 
tabel		 tabeli algus 
äärejoon (vaikimisi 1) 
tulpade arv = 2 
tabeli laius 60 % 
rida algab 
ja koosneb kahsest 
tulbast 
rida lõppeb 
teised read kah .. 
tabel valmis
näite tabel nr. 2. columnspan    
<TABLE> 
<TR> 
<TD>&nbsp;</TD 
<TD COLSPAN=2>jooks</TD> 
<TD COLSPAN=2>hüpe</TD> 
</TR> 
<TR> 
<TD>nimi</TD> 
<TD>100 m</TD> 
<TD>1 500 m</TD> 
<TD>kaugus</TD> 
<TD>kõrgus</TD> 
</TR> 
<TR> 
<TD>&nbsp;</TD> 
<TD>&nbsp;</TD> 
<TD>&nbsp;</TD> 
<TD>&nbsp;</TD> 
<TD>&nbsp;</TD> 
<TR> 
.. 
</TABLE>		  table 
row 
non-breakable space 
columns span 
columns span 
rea lõpp 
uus rida 
tulp 1 
tulp 2 
tulp 3 
tulp 4 
tulp 5 
rea lõpp 
uus rida 
tulp 1 
tulp 2 
tulp 3 
tulp 4 
tulp 5 
.... 
tabel		 tabeli algus 
uue rea algus 
tulp 1: tühik mis trükitakse 
tulp 2: ulatub üle kahe tabeli tulba 
tulp 3: ulatub üle kahe tabeli tulba 
muud read on tavalised viie lahtriga read 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
.
näite tabel nr. 3. taustavärviga    
<TABLE 
BORDER=3 
COLS=4 
WIDTH="100%" 
BGCOLOR="#66FFFF" > 
.. 
</TABLE>		 , 
, 
, 
, 
, 
, 
,		 . 
. 
. 
. 
tabeli tausta värv 
. 
.
näite tabel nr. 4. ilma äärejooneta    
<TABLE 
BORDER=0 
COLS=2 
WIDTH="100%" 
> 

<TR> 
<TD 
ALIGN=RIGHT 
VALIGN=TOP 
WIDTH="30%">1. 
</TD> 
<TD>kevadel on temperatuur tavaliselt madalam kui suvel,. Kevadel on soojem 
kui talvel ja umbes samasoe kui s&uuml;gisel 
</TD> 
</TR> 

<TR> 
<TD 
ALIGN=RIGHT 
VALIGN=TOP 
WIDTH="30%">2. 
</TD>  
... 
</TABLE>

 . 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
.		 . 
äärejoone paksus 0 
. 
. 
. 
. 
. 
asetus paremal 
ja üleval 
. 
. 
. 
vaikimisi asetus: vasakul ja keskel 
. 
. 
. 
. 
. 
. 
asetus paremal 
ja üleval 
. 
. 
. 
.
näite tabel. nr. 5.rowspan    
 <TABLE BORDER=5 
COLS=3 
WIDTH="100%" 
BGCOLOR="#FFCC33"> 
<TR> 
<TD>Maa</TD> 
<TD>&nbsp;</TD> 
<TD>&nbsp;</TD> 
</TR> 

<TR> 
<TD ROWSPAN="2">Eesti</TD> 
<TD>Tallinn</TD> 
<TD></TD> 
</TR> 

<TR> 
<TD>V&otilde;rtsj&auml;rv</TD> 
<TD></TD> 
</TR> 

<TR> 
<TD ROWSPAN="2">Hungari</TD> 
<TD>Budapest</TD> 
<TD></TD> 
</TR> 

<TR> 
<TD>Balkani j&auml;rv</TD> 
<TD></TD> 
</TR> 
</TABLE> 

 , 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
, 
,		 äärejoon 5 
kolm tulpa 
terve ekraani laius. 
taustavärv FFCC33 
. 
. 
. 
. 
. 
. 
. 
lahter ulatub üle kahe rea 
. 
. 
. 
. 
siin reas on üks lahter vähem 
. 
. 
. 
. 
. 
. 
lahter ulatub üle kahe rea 
. 
. 
. 
. 
üks lahter on reas vähem 
. 
. 
. 
.
näide nr. 6. tabel tabelis    
<TABLE> 
<TR> 
<TD> 

<TABLE> 
<TR> 
<TD>sõna1</TD> 
<TD>sõna2</TD> 
</TR> 
<TR> 
<TD>sõna3</TD> 
<TD>sõna4</TD> 
</TR> 
</TABLE> 
</TD> 

<TD>SÕNA1</TD> 
</TR> 
</TABLE>

 . 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
.		 suurem tabel algab 
(1 rida 2 tulpa) 
. 
. 
väiksem tabel algab 
(2 x 2) 
. 
. 
. 
. 
. 
. 
. 
väiksem lõppeb 
. 
. 
. 
. 
suurem lõppeb
 

VALIGN'i võimalikud väärtused on TOP, BOTTOM
ALIGN' võimalikud väärtused on LEFT, CENTER, RIGHT

Siin tuleb siise asi mida peab jällegi arvestama, eriti CGI'ide tegemisel.
Kui server saadab browserisse tavalise tühiku  " " või reavahetuse koodi, siis browser jätab selle tähele panemata. Et ikkagi tühikut saata tuleb saata kuus sümboli &nbsp; ning reavahetuseks <P> või <BR>

5. pildid, taustapildid
 
 Saladus pole, et piltide kasutamine ilmestab kodulehekülge. HTML - keeles kasutatakse kahte pildi formaati:

gif - iseloomulik väike faili suurus ja piiratud värvide arv - 256.
jpg - iseloomulik on samuti väike suurus (ehkki suurem kui gif) kuid oluliselt suurem värvide arv (sadu tuhandeid)
 
Pilte saab kasutada kahte moodi:

- lihtsalt piltidena kusjuures kaval on nad positsioneerida ekraanil tabeli abil,
- tausapildina

vt. näide

pildi seostab html leheküljega rida

<IMG SRC="pilt.gif">

ja taustapildile vastab rida

<BODY BACKGROUND="taust.gif">

 

6. vormid, chechkboxid, rippmenüüd
 
Siiamaani vaatasime selliseid variante kus web'i serveris istub kodulehekülg ja browser (nt. Netscape) läheb ja kutsub ta endale külla. Võimalik on ka saata infot vastupidi: browseris näiteks mingi ankeet ära täita ja selle sisu siis serverisse saata. Nii töötavad näiteks külaliste raamatud (www.president.ee/..) , andmebaasi otsingud (www.neti.ee), tellimislehed (www.amazon.com). Samuti on võimalik panna kodulehele üles pilt (nt. kaart) ja sõltuvalt sellest kus tehti pildid klõps hiirega reageerib server mingi täiendava tegevusega (nt. saadab vastava piirkonnaga seotud andmed).

Nüüd ei saa enam mainimata jätta, et sellise klient -serveri taseme suhtlemist nimetatakse CGI - Common Gateway Interface - programmidega ümberkäimiseks.

Praktiliselt - tehes lingil (või vormi elemendil) klõpsti mitte ei tooda uut ekraani ilmtigimata ette vaid käivitatakse serveris programm, mida kodulehe koostaja on tavaliselt ise kirjutanud.

Seda kuidas CGI programme luua ja neid kasutada siin ei vaata. Samuti ei vaata me seda kuidas nt. form'e luua. Seda tehakse CGI leheküljel.
 

7. Raamid - Frames

Netscape'i aknas ei pruugu avatud lehekülg koosneda ühest osast; selles mõttes, et kogu ekraan on korraga keritav.

Aga hoopis nii:
ülemine 3 cm on alati paigal ja sama kusjuures ülejäänud alumine osa on keritav.

Või tesitmoodi:
vasak 5 cm on paigal ning ülejäänud parem on eraldi.

Neid erinevaid piirkondi nimetatakse frame'deks ehk raamideks. Nende kasutamist õigustab võimalus jätta mingi ekraani osa pidevalt nähtavaks samal ajal kui muud muutub. Või lihtsalt võimalus kuvada infot mitte korraga üle ekraani vaid nii nagu kavatsetud.
Parem vaatame näiteid:

1. vasakul 30% ja paremal 70% - vt. näide
 
Nagu location realt näha on mängus kolm faili

2raami_vert.html:

<HTML>
<HEAD>
<FRAMESET COLS="30%, 70%">
        <FRAME SRC="2raami_vert_vasak.html" NAME="2raami_vert_vasak" BORDER=1>
        <FRAME SRC="2raami_vert_parem.html" NAME="2raami_vert_parem" BORDER=1>
</FRAMESET>
</HEAD>
<BODY>
</BODY>
</HTML>

ja 2raami_vert_vasak.html, 2raami_vert_parem.html mis on failid mille sisu tegelikult raamidesse sattub.

2raami_vert_vasak.html:

<HTML>
<BODY TEXT="#000000" BGCOLOR="#2E6945" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
<B><FONT COLOR="#FFFFCC">Tere, see on vasak raam</FONT></B>
<BR><B><FONT COLOR="#FFFFCC">oma taust tal :)</FONT></B>
</BODY>
</HTML>

2raami_vert_parem.html:
 
<HTML>
<BODY TEXT="#000000" BGCOLOR="#FCFFCC" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
Tere, see on parem raam
<BR>oma taust tal :)
<P>T&auml;helepanu! keskelt kinni haarates saab raamide proportsiooni muuta!
<BR>Tehes hiire parema nupuga kl&otilde;ps saab avada raami uude Netscape
aknasse.
<BR>&nbsp;
</BODY>
</HTML>

Et saada raamid kohakuti tuleb esimeses failis viia muutus kolmandsse ritta:

<FRAMESET ROWS="30%, 70%">
 

2. võimalik on ka raame raami sisse seada: vt näide

3. lingid, mis juhivad html faili sisu teise raami: vt. näide

siin on vist lihtsam lugeda teil source't kui mul seda siia ümber kirjutada :)

Märkused:

- raami laiust saab jätta paika

<FRAMESET COLS="30%, 70%">
        <FRAME SRC="2raami_vert_vasak.html" NAME="2raami_vert_vasak" BORDER=1 NORESIZE>
        <FRAME SRC="2raami_vert_parem.html" NAME="2raami_vert_parem" BORDER=1 NORESIZE>
</FRAMESET>

- raamilt saab võtta võimaluse teda scrollida:

<FRAMESET COLS="30%, 70%">
        <FRAME SRC="2raami_vert_vasak.html" NAME="2raami_vert_vasak" BORDER=1>
        <FRAME SRC="2raami_vert_parem.html" NAME="2raami_vert_parem" BORDER=1 SCROLLING=NO>
</FRAMESET>