HTML tutvustus

Kain Kalju

Hypertext Markup Language (HTML) on lihtne markeerimiskeel, mida kasutatakse platformist sõltumatu hyperteksti koostamiseks. HTML'is saab esitada või viidata uudiseid, elektronposti, dokumente või hypermeediat: interaktiivseid menüüsid, graafikat, animatsioone, filme, teha päringuid andmebaasidest. HTML on kasutuses World Wide Web (WWW) võrgus alates 1990. aastast. Viimasel ajal on tavaline staatiline HTML juba moest läinud. Paljudes kohtades kasutatakse dünaamiliselt "ilmast sõltuvalt" muututavaid lehekülgi. Selleks, et lehekülgi "aktiivseteks" muuta, kasutatakse CGI programme (serveri poolne meetod) või JavaScripti , JAVA applette ja ActiveX programme (kliendi poolne meetod).

  1. Struktuur
  2. Elemendid

      <!-- , <A> , <ADDRESS> , <APPLET> , <AREA> , <B> , <BASE ...> , <BASEFONT SIZE=...> , <BIG> , <BGSOUND> , <BLINK> , <BLOCKQUOTE> , <BODY> , <BR> , <CAPTION> , <CENTER> , <CITE> , <CODE> , <DD> , <DFN> , <DIR> , <DIV> , <DL> , <DT> , <EM> , <EMBED> , <FRAMESET> , <FONT> , <FORM> , <H...> , <HEAD> , <HR> , <HTML> , <I> , <IMG> , <INPUT> , <ISINDEX> , <LI> , <META> , <MAP> , <NOBR> , <NOFRAMES> , <OBJECT> , <OL> , <OPTION> , <P> , <PARAM> , <PLAINTEXT> , <PRE> , <S> , <SCRIPT> , <SELECT> , <SMALL> , <SPACER> , <STRIKE> , <STRONG> , <SUB> , <SUP> , <TABLE> , <TD> , <TEXTAREA> , <TH> , <TITLE> , <TR> , <TT> , <U> , <UL> , <VAR> , <WBR> ,

Lihtsaim HTML document võiks välja näha järgmiselt:

Mingi tekst. *wow* 


<html>
<head>
<title>N&auml;idis dokument</title>
</head>
<body>
<p>Mingi tekst. <em>*wow*</em></p>
</body>
</html>

Elementide kehtivust näitab järgmine skeem: 

HTML
        |
        \-HEAD
        |  |
        |  \-TITLE
        |      |
        |      \-<TITLE>
        |      |
        |      \-"Näidis dokument"
        |      |
        |      \-</TITLE>
        |
        \-BODY
         |
         \-P
          |
           \-<P>
           |
           \-"Mingi tekst."
           |
           \-EM
           |  |
           |  \-<EM>
           |  |
           |  \-"*wow*"
           |  |
           |  \-</EM>
           |
           \-</P>

HTML dokument sisaldab kahte tüüpi tähemärke: ilmutatult esitatavad ja ilmutamata esitatavad. Ilmutatult saab esitada kõiki tähemärke a-st z-ini, va. täpitähed. Täpitähti ja muid erilisi märke peab esitama kujul &otilde; mis tähistab õ tähte või &#174; mis tähistab ® märki. Vaata ka sümbolite tabelit .

Kõik HTML elemendid asuvad < ja > vahel ja kommentaarid asuvad <!-- ja --> vahel. Elementide kehtivuse lõpetab märge, mis asub </ ja > vahel. Näiteks elemendi <B> kehtivuse lõpetab märge </B>. Osasid märkeid, nagu näiteks <BR>, võib ka ilma lõpetava märketa kasutada.

Elemendid võivad sisaldada ka lisa atribuute:
<IMG SRC="image.gif" ALT="Esimene &quot;T&otilde;eline&quot; n&auml;ide">
<UL COMPACT="compact">

Kommentaar. <!-- ... --> Elementi <!-- kasutatakse dokumentidele kommentaaride lisamiseks. Kommentaare browserid kasutajale ei näita. Elementide <!-- ja --> vahele peidetakse vanemate browserite eest ka JavaScripti programme. Tuleb veel arvestada seda, et osad vanemad browserid peavad kommentaari lõpuks ka ainult > märki, nii et kommentaari tekst ei tohiks sisaldada HTML märke.

Ankur. <A> Element, mille abil defineeritakse viide järgmisele dokumendile. Atribuut HREF=... määrab viidatava URL'i. Näiteks: <A HREF="http://www.neti.ee/"> Atribuut TARGET=... abil saab määrata akna, millele see dokument väljastatakse. (_blank, _self, _parent, _top, etc..) Atribuut NAME=... teeb vastava tekstilõigu viitena kättesaadavaks. Näiteks <A NAME="jutt"> saaks viidata kui <A HREF="#jutt">. Atribuut TITLE=... kasutatakse viite kirjeldamiseks.

Aadress. <ADDRESS> Kasutatakse tegija autorluse ja kontaktandmete esitamiseks. Tekst esitatakse tavaliselt kaldkirjas. Atribuut ALIGN=... määrab teksti asukoha lehel. (CENTER,LEFT,RIGHT,JUSTIFY)

Java applet. <APPLET> Elementi kasutatakse JAVA applettide HTML'ile integreerimiseks. Atribuut CODE=... märab JAVA appleti nime. Atribuut CODEBASE=... määrab JAVA appleti asukoha. Atribuut WIDTH=... määrab Java akna laiuse pixelites. Atribuut HEIGHT=... määra Java akna kõrguse pixelites. Atribuut ALT=... määrab teksti, mida näidatakse kui browser tunneb APPLET elementi, kuid millegi pärast programmi ennast ei käivita. Atribuut NAME=... määrab Java programmi nime, et mitu samal dokumendil olevat programmi üksteisega suhelda saaks. Atribuut ALIGN=... määrab programmi akna asukoha dokumendil. (LEFT,RIGHT,TOP,TEXTTOP,MIDDLE,ABSMIDDLE,BASELINE,BOTTOM,ABSBOTTOM)

Rasvane kiri. <B>
Tekst esitatakse rasvaselt. Kasutatakse mingi tekstilõigu esiletoomiseks.

Element <BASE> määrab dokumendil olevate viidete vaikimisi atribuudid. HREF=... näitab dokumendi originaal asukohta. Lisatakse faili nime ette täieliku URL'i koostamisel. TARGET=... määrab akna nime, millele viidatav dokument läheb.

Element <BASEFONT SIZE=...> määrab dokumendi vaikimisi teksti suuruse. Suurus antakse numbritega 1'st kuni 7'ni.

Taustheli. <BGSOUND> Atribuut SRC=... viitab heli asukohale. Heli formaat sõltub browserist. Atribuut LOOP=... määrab mitu korda heli esitatakse (väärtus antakse numbritega). LOOP=INFINITE puhul esitatakse taustheli lõputult.

Suurendatud tekst. <BIG> Tekst esitatakse tavalisest suuremana.

Element <BLINK> paneb teksti vilkuma. Sobib hästi lugeja tähelepanu äratamiseks.

Kommenteeritud plokk. <BLOCKQUOTE> Jätab kommenraari eest ja tagant rea vabaks. Kommentaar algab taandreaga. Atribuut ALIGN=... määrab ploki asukoha. (CENTER,LEFT,RIGHT,JUSTIFY)

Dokumendi sisu. <BODY> BACKGROUND=... - viide taustaks olevale pildile (GIF, JPG, etc..). BGCOLOR=... - tausta värv. Vaata ka RGB tabelit ! TEXT=... - teksti värv. LINK=... - viidete värv. VLINK=... - vaadatud viidete värv. ALINK=... - valitava viite värv. BGPROPERTIES=FIXED - kasutatav koos BACKGROUND-iga. Peale seda tausta ei scrollita. Värv antakse RGB'na järjestuses punane, roheline, sinine. Numbrid on HEX'is. "#00FF00"

Näiteks: <BODY BGCOLOR="#C0DCC0" TEXT="#000000" LINK="#000080" VLINK="#800080" ALINK="#FF0080">

Reavahetus. <BR>
Atribuut CLEAR=... läheb järgmise tühja kohaga algava rea algusesse piltidest jms. objektidest mööda. CLEAR väärtuseks võib olla LEFT, RIGHT, ALL

Elemendi <CENTER> vahel olevad objektid asetatakse rea keskele.

Tsitaat. <CITE> Lõik esitatakse tavaliselt kursiivis.

Element <CODE> esitatakse tavaliselt programmide lõike. Text on tavaliselt täiesti tavalise fondiga.

Defineeritud nimekiri. <DL>, <DT>, <DD> Nimekiri termidest ja nende seletustest. <DT> - termin, <DD> - seletus.

Definitsioon. <DFN> Tekst esitatakse tavaliselt kas rasvaselt või rasvaselt kursiivis.

Kataloogi nimekiri. <DIR> Kasutatakse koos elemendiga <LI> nimekirjade koostamiseks.

Element <DIV> <DIV ALIGN=LEFT> - Paneb teksti vasakusse serva. <DIV ALIGN=CENTER> - Paneb teksti keskele. <DIV ALIGN=RIGHT> - Paneb teksti paremasse serva.

Rõhutatud kaldkiri. <EM>

Element <EMBED> lubab teistes formaatides dokumente otse HTML leheküljele panna. Ainukeseks tingimuseks, et neid näha, peab kasutaja keskkond neid tundma. Atribuut SRC=... viitab dokumendile, mida tahetakse esitada. Atribuut WIDTH=... määrab laiuse. Värtus antakse pixelites numbritega. Atribuut HEIGTH=... määrab kõrguse. Värtus antakse pixelites numbritega.

Struktuur. <FRAMESET>

Font. <FONT> Atribuut SIZE=... annab tekstile suuruse -6'st kuni +6'ni võrreldes muu (BASEFONT) tekstiga. Atribuut COLOR=... annab tekstile värvi. RGB's "#00FF00" - roheline või sõnaga "green" - roheline. Ainult põhivärvid saab sõnadega määrata. Vaata ka RGB Tabelit !. Atribuut FACE=... märab kasutatava fondi eeldades, et kasutajal on selline olemas. Saab defineerida ka mitu fonti eraldades need komadega; browser valib esimese olemasoleva.

Päringuvorm. <FORM> Atribuut ACTION=... näitab päringu saaja asukohta (URL'i), milleks on tavaliselt CGI programm. Atribuut METHOD=... näitab päringu tüüpi (POST või GET). Atribuut ENCTYPE=... näitab päringu kodeerimise tüüpi. Vaikimisi on kodeerimise tüübiks application/x-www-form-urlencoded.

Dokumendis sisalduvate pealkirjade esiletoomiseks on kuus kirjatüüpi. <H1 ... H6>
H1 - Rasvane, väga suur font, üks või kaks rida enne ja pärast vabad. H2 - Rasvane, suur font, üks või kaks rida enne ja pärast vabad. H3 - Italic, suur font, üks või kaks rida enne ja pärast vabad. H4 - Rasvane, keskmine font, üks rida enne ja pärast vabad. H5 - Italic, keskmine font, üks rida enne ja pärast vabad. H6 - Rasvane, sama font nagu tavalisel tekstil, üks rida enne ja pärast vabad.

<H... ALIGN=...> asetab vastava suurusega pealkirja vastavasse kohta. (CENTER, LEFT, RIGHT)

Dokumendi päis. <HEAD> Elementi <HEAD> vahele pannakse dokumendi pealkiri ja lisa info.

Horisontaalne kriips. <HR> Atribuut SIZE=... määrab joone jämeduse. Väärtus antakse numbritega pixelites. Atribuut WIDTH=... annab joonele pikkuse. Väärtus võib olla kas numbites pixelit või protsentides lehekülje laiusest. Atribuut ALIGN=... saab määrata asukoha (LEFT, RIGHT, CENTER). Atribuut NOSHADE abil tekib tavaline varjuta 2 mõõtmeline kriips.

Dokumendi algus <HTML> ja lõpp </HTML>.

Italic. <I>
Tekst esitatakse kursiivis.

Pilt. <IMG> Atribuut ALIGN=... määrab asukoha ekraanil (TOP, MIDDLE, BOTTOM, LEFT, RIGHT, BASELINE, TEXTTOP, ABSMIDDLE, ABSBOTTOM). Atribuut ALT=... - kommentaar nendele kes mingil põhjusel pilti ennast ei näe. Atribuut ISMAP näitab, et tegu on klikitava pildiga. Kasutatakse koos elemendiga <A> ja <MAP> Atribuut USEMAP=... määrab kliendi poolse kaardi (<MAP>) nime, mida kasutame. Atribuut SRC=... näitab pildi asukohta. Atribuut LOWSRC=... saab määrata pildi, mida näidatakse enne atribuudiga SRC=... näidatavat pilti. Atribuut WIDTH=... ja HEIGHT=... saab anda pildile ise suuruse pixelites. Atribuut BORDER=... saab määrata ankru olemasolul viidet näitava ümbrise rasvasust. Värtus antakse numbritega pixelites. Atribuut START=... määrab millal hakatakse näitama mitme kaadrilist pilti (klippi). (FILEOPEN,MOUSEOVER) Atribuut LOOP=... mitu korda klippi esitame. (nr,INFINITE,-1) Atribuut HSPACE=.. mitu pixelit jäteme horisontaalis pildi ümber vabaks Atribuut VSPACE=.. mitu pixelit jäteme vertikaalis pildi ümber vabaks

Sisestus. <INPUT>. Kasutatakse koos <FORM> elemendiga päringuvormidel.

  1. Teksti sisestamine. <INPUT TYPE=TEXT>
    • Atribuut NAME=... annab sisestusele nime.
    • Atribuut MAXLENGTH=... määrab sisestavate tähemärkide arvu.
    • Atribuut SIZE=... määrab näidatava sisestusrea pikkuse.
    • Atribuut VALUE=... annab algväärtuse.
  2. Salajase teksti sisestamine. <INPUT TYPE=PASSWORD>
    • Atribuut NAME=... annab sisestusele nime.
    • Atribuut MAXLENGTH=... määrab sisestavate tähemärkide arvu.
    • Atribuut SIZE=... määrab näidatava sisestusrea pikkuse.
    • Atribuut VALUE=... annab algväärtuse.
  3. Kontroll kastike. <INPUT TYPE=CHECKBOX>
    • Atribuut NAME=... annab sisestusele nime.
    • Atribuut VALUE=... annab väärtuse.
    • Atribuut CHECKED annab algväärtuseks valitud.
  4. Nupuke. <INPUT TYPE=RADIO>
    • Atribuut NAME=... annab sisestusele nime.
    • Atribuut VALUE=... annab väärtuse.
    • Atribuut CHECKED annab algväärtuseks valitud.
  5. Pilt. <INPUT TYPE=IMAGE>
    • Töötab samamoodi nagu <TYPE=SUBMIT>, aga edastab ka klikitud koha x ja y kordinaadid.
  6. Varjatud väärtus. <INPUT TYPE=HIDDEN>
    • Atribuut NAME=... annab sisestusele nime.
    • Atribuut VALUE=... annab väärtuse.
    • Atribuudid NAME ja VALUE on kohustuslikud.
  7. Faili upload. <INPUT TYPE=FILE>.
    • Päringu meetod peab olema POST. Täpsemalt kirjeldab RFC1867.
    • Atribuut ENCTYPE="multipart/form-data" määrab kodeeringu ja on kohustuslik.
    • Atribuut NAME=... annab sisestusele nime.
    • Atribuut MAXLENGTH=... määrab sisestavate tähemärkide arvu.
    • Atribuut SIZE=... määrab näidatava sisestusrea pikkuse.
    • Atribuut VALUE=... annab algväärtuse.
  8. Täitmise nupp. <INPUT TYPE=SUBMIT>
    • Peale nupule vajutamist läheb <FORM> täitmisele.
    • Atribuut NAME=... annab sisestusele nime.
    • Atribuut VALUE=... annab väärtuse (tekst, mis on nupule kirjutatud).
  9. Katkestamise nupp. <INPUT TYPE=RESET>
    • Tühistab senise sisestuse.
    • Atribuut VALUE=... annab väärtuse (tekst, mis on nupule kirjutatud).
  10. Tavaline nupp. <INPUT TYPE=BUTTON>
    • Atribuut VALUE=... annab väärtuse (tekst, mis on nupule kirjutatud).
    • Atribuut ONCLICK=... täpsustab, mis juhtub nupule vajutamisel. Kasutatakse näiteks koos JavaScriptidega.
  11. Numbrite sisestus. <INPUT TYPE=NUM>
    • Atribuut VALUE=... annab algväärtuse.
    • Atribuut ONCHANGE=... täpsustab, mis juhtub numbrite muutmisel. Kasutatakse näiteks koos JavaScriptidega.

Otsimise kastike. <ISINDEX> Kasutatakse tekstist sõnade üles leidmiseks. Tekitab lihtsa sisestuskastikese, millega saab päringu saata samale URL'ile. Atrubuut PROMPT=... - saad teha oma kirjelduse. Vastasel juhul tuleb "This is a searchable index..."

Nimekirja element. <LI> Kasutatakse tavaliselt koos <DIR>, <OL>, <UL> elementidega.

Elementi <META ... > kasutatakse koos <HEAD> elemendiga dokumendile lisa info külge pookimiseks. <META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Jan 1996 21:21:00 GMT"> - dokumendi kasutus lõpeb peale näidatud aega. <META HTTP-EQUIV=REFRESH CONTENT="10; URL=http://www.neti.ee/"> - vahetab lehekülje 10 sekundi pärast http://www.neti.ee/ vastu. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-2022-JP"> - määrab kooditabeli. <META NAME="Keywords" CONTENT="märksõnad"> <META NAME="Description" CONTENT="Dokumendi sisu kirjeldus">

Kliendi poolne imagemap. <MAP> Kasutatakse koos <IMG> elemendiga. Atrubuut NAME=... määrab kaardi nime.

Element <NOBR> ei luba tekstis reavahetusi.

Elemendi <NOFRAMES> vahele saab panna ülejäänud lehe sisu. Kasutatakse ainult koos <FRAMESET> elemendiga.

Objekt. <OBJECT> Objektiks võib olla ActiveX programm, CGI programm, animatsioon või mis iganes. Atribuut ALIGN=... määrab asukoha ekraanil. (CENTER, LEFT, RIGHT) Atribuut CLASSID=... autentimise sertifikaat. Atribuut ID=... objekti nimi. Atribuut DATA=... määrab objekti asukoha. (URL) Atribuut TYPE=... määrab objekti MIME tüübi. Atribuut WIDTH=... määrab objekti akna laiuse pixelites. Atribuut HEIGHT=... määra objekti akna kõrguse pixelites. Atribuut BORDER=... määrab raami suuruse pixelites. Atribuut STANDBY=... abil saab määrata teksti, mida näidatakse kasutajale objekti downloadimise ajal.

Järjestatud nimekiri. <OL>

Script. <SCRIPT> Kasutatakse JavaScripti HTML'ile integreerimiseks. Atribuut LANGUAGE=... märab scripti keele (LiveScript, JavaScript, VBScript). Atribuut SRC=... viitab scripti asukohale (URL). Kasutatakse, siis kui ei taheta scripti otse HTML dokumendile integreerida <SCRIPT> ja </SCRIPT> elementide vahele.

Rippmenüü. <SELECT>

Element <SUB> Tekst nihutatakse poole rea võrra alla.

Element <SUP> Tekst nihutatakse poole rea võrra ülesse.

Paragraaf. <P> Kasutatakse tavaliselt tekstilõikude omavaheliseks eraldamiseks. Atribuut ALIGN=... määrab textilõigu asukoha (LEFT, CENTER, RIGHT).

JAVA appleti parameeter. <PARAM> Atribuut NAME=... parameetri nimi. Atribuut VALUE=... parameetri väärtus.

Tavaline text. <PLAINTEXT> Tavaline mitte html tekst (Content-type: text/plain). Alates sellest atribuudist kaotavad HTML elemendid oma tähenduse.

Eelnevalt formaaditud tekst. <PRE> Kogu tekst esitatakse samasugusel kujul nagu see on algtekstis paika pandud.

Vähendatud tekst. <SMALL> Tekst esitatakse tavalisest väiksemana.

Tühik. <SPACER> Atribuut TYPE=... tüüp. (horizontal, vertical, block) Atribuut SIZE=... suurus. Horisontaalselt tähemärkides. Vertikaalselt ridades. Atribuudid WIDTH, HEIGHT ja ALIGN on täpselt sama tähendusega, nagu <IMG> elemendil.

Läbi joonitud tekst. <STRIKE> <S>

Rõhutatud rasvane kiri. <STRONG>

Tabel. <TABLE> Atribuut BORDER=... määrab tableli äärejoonte jämeduse. Atribuut CELLSPACING=... määrab tabeli joonte jämeduse. Atribuut CELLPADDING=... määrab tabeli sisu kauguse joontest. Atribuut WIDTH=... määrab tabeli sisu pikkuse.

Pikema teksti sisestus. <TEXTAREA>

Dokumendi pelkiri. <TITLE> Kasutatakse koos <HEAD> elemendiga dokumendi pealkirjastamiseks.

Trükitekst. <TT> Tekst esitatakse "typewriter" fondiga.

Element <U> teeb teksti alla joonituks.

Järjestamata nimekiri. <UL> Märget <LI> näidatakse täpikesena. Atribuut TYPE abil saab määrata kas tehakse täpike (CIRCLE) või ruut (SQUARE).

Muutaja esitamine. <VAR> Kasutatakse tekstis mingi programmi näite muutujate esitamiseks. Tavaliselt on tekst kursiivis.

Element <WBR> lubab reavahetusi. Kasutatakse koos elemendiga <NOBR> reavahetusi lubatava piirkonna määramiseks.

Paanikaks ei ole põhjust, kui teie browser annab siin kirjeldatust teistsuguse tulemuse. Tuleb lihtsalt browserit vahetada ;-)

© Copyright 1996-1997, Kain Kalju
All Rights Reserved [vajalik internetiühendus]