Kodulehekülje koostamine EEK Mainor

1

Põhimõisted

Internet - ülemaailmne arvutivõrk

Internetiserver - arvuti, mis kujutab endast ülemaailmse arvutivõrgu ühte sõlme

WWW - (World Wide Web) ülemaailmne "võrgustik", internetiteenus, mis võimaldab

navigeerida veebilehelt veebilehe. Seega WWW on kogu Internetti hõlmav veeb.

SGML (Standard Generalized Markup Language) - üldisem markeerimiskeel -

fundamentaalne standard, millel põhineb HTML.

URI - (Universal Resource Identifier) universaalne ressurssiidentifikaator.

URL- (Universal Resource Locator) veebilehekülje aadress, mis koosneb järgmistest osadest:

meetod://host.domeen:port/kataloog/failinimi

1. meetod – määrab faili tüübi. Tüübiks on protokoll või teenus. Mõned meetodid on toodud tabelis 1.

2. host (peremees) - Internetiserveri nimi, mille kettal fail asub;

3. domeen (domain) – Internetiserverite grupp, mille hostinimedel on ühine sufiks (Eestis on selleks ee,

eu, Soomes fi, Lätis lv jne);

Igal võrku ühendatud arvutil on oma IP-aadress – neljast (IPv4, hetkel veel levinud, tulekul IPv6) kuni kolmekohalisest omavahel

punktidega eraldatud numbrist vahemikus 0…255 koosnev aadress, mis identifitseerib üheselt arvuti. Nt NETI aadressiks on

http://195.50.209.244 (www.neti.ee), EEK listid aga aadressil http://193.40.58.68 (https://lists.mk.ee/mailman/listinfo/).

Igale IP-aadressile vastab mingi tähekombinatsioon, mida hoitakse nimeserveris Sisestades nt aadressi http://athos.mk.ee,

edastatakse see nimeserverile, millest saadakse teada selle arvuti reaalne IP-aadress. Nimelise aadressi athos.mk.ee silbid (eraldatud

punktidega) vastavad Interneti alamvõrkudele, mida nim domeenideks. Antud näites . ee on 1. astme domeen (Eesti võrk), mk 2.

astme domeen (Mainori Kõrgkool) jne. Eraisik saab taotleda kolmanda astme domeeni, nt http://www.juku.mk.ee.

Domeeni registreerimist ja hinnakirja vt http://www.domeen.net/est/; http://maailm.com/domeen.php; http://www.infinit.ee/;

4. port – täpsemalt pordinumber, mida enamasti ei kirjutata, Internetiserver teab ise, millise pordi kaudu ta

välismaailmaga suhtleb. Vaikimisi kasutab http porti 80;

5. kaust (kataloog) – faili asukoht. ~ märgiga algav kausta nimi viitab arvutikasutaja nn isiklikule

koduleheküljele (täpsemalt kasutaja home kataloogi public_html alamkataloogi failile index.html).

Üldiselt koosneb URL kolmest osast: meetod://arvuti/kataloog/failinimi

Nt. http://www.eek.ee/~juku/lisa/tere.html.

Tabel 1. Meetodite näiteid

Meetod Faili või teenuse tüüp Näide

file Kohalikus arvutis olev fail file:///c:/veeb/internet.html

http Veebileht http://www.postimees.ee

ftp FTP-serveris olev fail ftp://porthos.eek.ee

news Uudisgrupid Usenet’iga news://news.ut.ee

telnet Kaug-sisselogimine telnet://porthos.eek.ee

mailto E-posti saatmine mailto:juku@neti.ee

HTTP -(Hypertext Transfer Protocol) kehtestab reeglid, kuidas veebisirvija dokumente

veebiserverist kätte saab. Veebilehtede aadressid algavad osaga http:// (vt tabel 1).

HTML (Hypertext Markup Language) - hüperteksti ülesmärkimise keel -SGMLi rakendus, mis

kujutab endast elementide ehk lipikute (tag) kollektsiooni.

HTMLi leiutas Tim Berners-Lee 1989. a Shveitsis Euroopa Tuumafüüsika Laboris CERNis, kus erinevaid

teadusdokumente hakati ühendama hüpertekstiks, st tekstis saab mingi võtmesõna kaudu pöörduda teiste sellega

seotud dokumentide poole.

1992 – HTML-i 1. versioon ja teaberuum (WWW), ülemaailmne levik 1994 – HTML 2.0 esimene laialdaselt heakskiidetud standard (sisestusvormid)

Kodulehekülje koostamine EEK Mainor

2

1996 – HTML 3.2 W3C (The World Wide Web Consortium, veebinduse standardiseerija (www.w3.org)

soovitus, (farme, applet) 1997 – HTML 4.0 (stiililehed põhistandardis, väliste objektide (skriptid jms) lisamiste täiendused) 2000 – XHTML 1.0 (The Extensible HyperText Markup Language), st HTML ja XML koos (suurem

rangus: märgendid on paaris ja väiketähtedena) 2006 – XHTML 2

2008 – HTML 5 (täiendavad märgendid <nav>, <footer>, <audio>, <video> jt, otsimootorite kergem

indekseerimine, veebilehtede kuvamine väiksematel ekraanidel)

HTML-dokument - .html või .htm laiendiga ASCII-tekstifail, mis sisaldab HTML-keele

reeglite alusel koostatud teksti.

Veebileht (web page) – veebis (Internetiserveris) asuv dokument. Veebilehe loomisel

kasutatakse HTML-märgistuskeelt, mis määrab kindlaks veebilehe sisu (tekstid, kujutised, viited,

audio- ja videofailid) ja väljanägemise.

Koduleht (home page) – veebisaidi esimene dokument, veebilehekülgede pealehekülg.

Veebikasutaja jaoks on koduleht esimene lehekülg, mis tuleb ekraanile pärast brauseri käivitamist.

Veebisait (website, site) – kodulehega algav veebilehtede kogumik sellega seotud teemal. Igal

veebisaidil on oma veebiaadress.

Veebiserver (WWW-server, web server) on programm kui ka seda sisaldav arvuti, mis

salvestab Internetist HTML-lehti või faile ja peab arvet nende üle, nt kellel on dokumentidele

juurdepääs.

Brauser e veebisirvija e veebilehitseja (WWW-brauser, web browser) - tarkvara, mis

võimaldab juurdepääsu veebilehekülgedele, kopeerides veebiserverist veebilehe ja näidates seda

vastuvõtja arvutiekraanil. Brauserid esitavad veebilehekülgi graafiliste või tekstidokumentidena

spetsiaalse graafikaliidese abil.

Veebimeister (webmaster) – isik, kes loob ja/või haldab veebisaiti.

FTP (File Transfer Protokol) – protokoll, mis võimaldab võrgus kahe arvuti vahel transportida

faile mõlemas suunas (üles- ja allalaadimine). Loe täpsemalt http://kuutorvaja.eenet.ee/kasutamine/andmetransport/ftp/ftp.html

Veebisirvijad (levinumad):

Lynx (tekstipõhine brauser, nt Linuxi keskkonnas)

Mosaic (1993) - www.mosaic.org

Netscape (1994) - www.netscape.com

Internet Explorer (1995) - www.microsoft.com

Opera (1996) - www.opera.com

Mozilla (1998) - www.mozilla.org

Safari (2003) http://www.apple.com/safari/

Firefox (2004) - www.firefox.com

Vt täiendavalt:

Vabavaraveeb - http://vabavara.eu/

Tucows (vaba- ja jaosvara) - http://www.tucows.com

HTML redaktoreid:

Notepad

EditPad - http://www.editpadpro.com

EditPad Lite (vabavara) - http://www.editpadpro.com/editpadlite.html

EditPlus (jaosvara) - http://www.editplus.com

Kodulehekülje koostamine EEK Mainor

3

Spetsiaalseid HTML redaktoreid:

HTML-Kit - http://www.chami.com/html-kit/download/

Macromedia Dreamweaver CS5.5 - http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver

Macromedia Dreamweaver 8.0 - http://macromedia-dreamweaver.soft32.com/

Zimplit - http://www.zimplit.com/est/

Veebihaldustarkvarad (suuremate veebisüsteemide loomiseks):

Joomla! - http://www.joomla.org/

WordPress - http://et.wordpress.org/

Veebisisupaketid (lihtsamate veebilsaitide loomiseks koos „majutusega“):

Edicy - http://www.edicy.com/

Weebly - http://www.weebly.com/

Serveri valik (kuhu majutada kodulehekülg)

Tasuta (firma veebisaidi jaoks pole sobivad ):

– zone.ee (25 MB)

– hot.ee (10 MB)

Tasulised:

– tantum.ee

– zone.ee

Tehes veebilehed HTML ja CSS keeltes, tuleks need eelnevalt veebilehitsejaga oma arvutis üle vaadata.

Teistele avalikustamiseks tuleb veebilehe failid (ka pildid eraldi) lisada (nt FTP tarkvara abil) serverisse. Ka

oma arvutist on võimalik teha veebiserver.

Veebisaidi koostamisel leia vastused järgmistele küsimustele:

Mis on loodava kodulehekülje eesmärk?

Mida “öelda”, kellele?

Kes on sihtgrupp (vanus, haridus, tegevusvaldkond)?

Kes peaksid olema kaasatud kodulehe loomisesse?

Kuidas teavet saidil organiseerida?

Kes on konkurendid? Milline on nende poolt pakutud lehtede kvaliteet? Mis meeldib, mis mitte?

Sinu eelised?

Millega te esilehel äratate kasutaja tähelepanu? (Eelised, boonused jne)

Järgnevalt asuda veebilehe plaaneerimist (vt Joonis 1).

Joonis 1. Veebilehe planeerimine (A .Kurm, www.arvutiklass.ee, veebidisain)

Kodulehekülje koostamine EEK Mainor

4

Veebilehe struktuur:

Lehtede paigutus

Viidete paigutus

Tekstide kasutus

Piltide, animatsioonide jms kasutus

Veebilehe failistruktuur:

Avalehe (pealehe) fail on üldjuhul index

Failide nimetustes ei soovita kasutada täpitähti ja tühikuid

Failide laiendid võivad olla htm, html, php jne

Kaustad (eraldi keelte jaoks). Pildifailid salvestada eraldi kausta

Failinimed defineerimisel kasutada ühtset stiili: nt suure või väikese algustähega, nimi on lühike ja

seotud failisisuga

Kodulehekülje komponendid:

HTML

CSS

programmeerimiskeeles kirjutatud scriptid

andmebaas

graafika- , heli-, videofailid

Kodulehekülge võib esitada:

1. Staatiliselt (HTML ja CSS-keel)

2. Dünaamiliselt (DHTML – Dynamic HyperText markup Language) - HTML-keele täiendus multimeedia

rakenduste tarvis (visuaalefektid, veebilehekülje dünaamiline välisilme jm). CGI programm (Common Gateway Interface), Perl, ASP (Active Server Pages), JSP

(JavaServer Pages), PHP, ColdFusion (serveri poolne meetod).

JavaScript, VBScript, Java applet programmid (kliendi poolne meetod).

Hetkel on levinud skriptikeskkond PHP (programmeerimiskeel veebiprogrammide loomiseks).

HTML-keel võimaldab kasutada:

tekste

graafika- ja helifaile

animatsioone

interaktiivseid menüüsid

päringuid serverist

lehekülgede sidumist nn viidete ehk

linkidega

…

Allikad. Täiendavat lugemist:

HTML 5 - http://www.w3.org/TR/2008/WD-html5-20080122/

HTML, XHTML ja CSS artiklid, juhendid, vahendid - http://www.interneti.info/

HTML tutvustus. K. Kalju - http://www.neti.ee/HTML.html

HTML koodi seletav kirjeldus. M. Roosalu - http://www.online.ee/~marc/WEB/HTML/code.html

Kodulehekülje koostamine EEK

5

Dokumendi ülesehitus

<html>

<head>

<title> Dokumendi pealkiri </title>

</head>

<body>

Dokumendi sisu

</body>

</html>

<html>

<head>

<title> Dokumendi pealkiri </title>

</head>

<frame>

Dokumendi sisu

</frame>

</html>

<html> <head> <base> <link> <meta> <script> <style> <title> </head>

<body> <!--> <a> <abbr> <address> <area> <article> <audio> <b> <blockquote> <br> <button> <canvas> <caption>

<cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <div> <dl> <dt> <em>

<embed> <fieldset> <figcaption> <figure> <footer> <form> <h1> … <h6> <header> <hgroup> <hr> <i> <iframe> <img> <input> <ins> <keygen> <kbd> <label> <li /> <map> <mark> <menu> <nav> <noscript> <object> <ol> <option> <output> <p> <param> <pre> <progress> <q> <rt> <ruby> <s> <samp> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <track> <u> <ul> <var> <video> <wbr>

</body> </html>

Pealkirjad

On olemas 6 erineva tasemega pealkirjatüüpi:

<h1> Esimese taseme pealkiri </h1>

<h2> Teise taseme pealkiri </h2>

<h3> Kolmanda taseme pealkiri </h3>

<h4> Neljanda taseme pealkiri </h4>

<h5> Viienda taseme pealkiri </h5>

<h6> Kuuenda taseme pealkiri </h6>

Teksti kujundamine

<b> … </b> - Rasvane kiri (Bold)

<i> … </i> - Kursiivkiri (Italic)

<u> … </u> - Allajoonitud kiri

<em> … </em> - Rõhutatud kaldkiri

<strong> … </strong> - Rõhutatud rasvane kiri

<cite> … </cite> - Tsitaat

^… - Ülemine indeks

_… - Alumine indeks

<big> … </big> - Suurendatud kiri

<small> … </small> - Vähendatud kiri

<pre>…</pre> - Eelnevalt vormindatud tekst

Näide 1. Valemi H2SO4 saame järgmiselt: H₂SO₄

Näide 2 . Lause kujunduse saame järgmiselt:

Kodulehekülje koostamine EEK

6

<strong><u>Meie</u></strong> <em>kiisul</em> <strike>kriimud</strike> <strong>silmad</strong>

<font>... </font> - fondid (kehtivuse kaotamas)

Atribuudid

face="kirjastiil” - kasutatav font eeldusel et see on olemas nt Arial. Võib kasutada mitut

kirjastiili nt <font face="“Arial”;”Helvetica”>…</font>

size= "[ n | +/-n ]" - kirjatüübi suhteline suurus 1 .. 7 |-6 ... +6 (võrreldes <basefont> kirjaga)

point size="[ n ]" - teksti absoluutne suurus punktides.

color ="[ #RRGGBB | color ]".

<basefont> - kogu dokumendile või tekstilõigule määratav kirja baastüübi suurus, stiil ja värv.

Atribuudid on samad. Nt päises <basefont color=”red”> või dokumendis <basefont color=”silver”>…</basefont>.

Element on kehtivuse kaotamas.

Erimärgid:

ä = &auml;

Ä = &Auml;

ö = &ouml;

Ö = &Ouml;

å = &aring;

Å = &Aring;

ü = &uuml;

Ü = &Uuml;

õ = &otilde;

Õ = &Otilde;

< = &lt;

> = &gt;

& = &amp;

" = &quot;

§ = &#167;

® = &reg;

© = &copy;

¼ = &#188;

½ = &#189;

¾ = &#190;

Rea- ja lõiguvahetus. Horisontaaljoon

<br /> - reavahetus

<p>…</p> - lõiguvahetus

<hr /> - horisontaaljoon

Atribuudid:

align=“[center | left | right ]” - asukoht

noshade - kaotatakse kolmemõõtmelisuse illusioon

size = “n” - joone jämedus pikselites

width =“[n | n%]” - joone pikkus pikselites | protsentides lehekülje laiusest

color ="[ #RRGGBB | color ]"

title=”tekst” – hiirega osutav info Nt <hr color="blue" size="3" align="right" width="30%" title=”See joon on paremal ja sinine”>

Teksti paigutus (joondus)

<center>... </center> - teksti tsentreerimine, kehtivuse kaotanud

<div align="[ left | center | right | justify ]">…</div> -teksti paigutus blokina, joondatuna vasakult |

keskelt | paremalt | rööpselt Näide <div align="center"> See tekst on joondatud keskele </div>

<blockquote>…</blockquote> - taandega tsitaat (eraldi blokis)

Loendid

<ul >…</ul> - järjestamata loend

Atribuudid:

type="[ circle | square | disc ]" – ringid | ruudud | punktid loendi elementide ees. HTML 4.0 ei

soovita kasutada

compact – esitada kompaktsemalt

<li /> - loendi element.

Atribuudid:

Kodulehekülje koostamine Lisa 1

7

type="[ circle | square | disc ]" – loendi element algab ringina | ruuduna | punktina

<ol >…</ol> - järjestatud loend

Atribuudid:

type="[ A | a | I | i | 1 ]"- järjekorranumbriteks on:

A - suured tähed (A ,B, C,...)

a - väikesed tähed (a, b, c,..)

I - rooma numbrid (I, II, III,...)

i - väikesed rooma numbrid (i, ii, iii,...)

1 - araabia numbrid (1, 2, 3,....)

start=”number” - esimese loendi elemendi järjekorranumber

compact – esitada kompaktsemalt

<li /> - loendi element

Atribuudid:

value="number" – loendi elemendi järjekorranumber

Näide 1. Järjestamata loend

<ul>

<li /> Esimene loend

<li /> Teine loend

<li /> Kolmas loend

</ul>

Näide 2. Järjestatud loend

<ol>

<li value=“5”> Viies loend

<li /> Kuues loend

<li value=“10”> K&uuml;mnes loend

</ol>

Näide 3. Järjestatud loend alates viiendast roomanumbrist

<ol type=”I” start=”5”>

<li /> Viies loend

<li /> Kuues loend

<li /> Seitsmes loend

</ol>

Näide 4. Hierarhiline loend

<ul>

<li /> Esimene tase, esimene liige

<li /> Esimene tase, teine liige

<ol>

<li /> Teine tase, esimene liige

<li /> Teine tase, teine liige

</ol>

<li /> Esimene tase, kolmas liige

</ul>

Kodulehekülje koostamine Lisa 1

8

<dl>…</dl> - definitsiooniloend <dt> - definitsiooni mõiste

<dd> - mõiste selgitus

Näide 5. Definitsiooniloend

<dl>

<dt> Esimene mõiste

<dd> Esimese mõiste seletus

<dt> Teine mõiste

<dd> Teise mõiste seletus

</dl>

Lehekülje kujundamine

<body> … </body> - dokumendi sisu

Atribuudid

background =“URL”- taustapildi asukoht (*.gif; *.jpg;*.png)

bgcolor =“[#RRGGBB | color]” - tausta värv

text=“[#RRGGBB | color]” -teksti värv

link =“[#RRGGBB | color]” - linkide värv

vlink =“[#RRGGBB | color]” - vaadatud linkide värv

alink =“[#RRGGBB | color]” - valitava lingi värv

leftmargin | rightmargin | topmargin | bottommargin =”n” - veerised vasakult | paremalt |

ülevalt | alt Näide <body bgcolor= rgb(100%,80%,75%) text=”#000000” link=”blue” vlink=”#0000FF” alink=”#00F”)

Värvid

#rrggbb r(red)-punase g(green)- rohelise b(blue)-sinise värvi igaühe intensiivsus

vahemikus 00 .. FF

#rgb värvide intensiivsus vahemikus 0..F

rgb(x,y,z) värvide intensiivsus vahemikus 0..255

rgb(x%,y%,z%) värvide intensiivsus vahemikus 0%..100%

Levinud värvid:

Black = "#000000"

Silver = "#C0C0C0"

Gray = "#808080"

White = "#FFFFFF"

Maroon = "#800000"

Red = "#FF0000"

Purple = "#800080"

Fuchsia = "#FF00FF"

Green = "#008000"

Lime = "#00FF00"

Olive = "#808000"

Yellow = "#FFFF00"

Navy = "#000080"

Blue = "#0000FF"

Teal = "#008080"

Aqua = "#00FFFF"

Kodulehekülje koostamine Lisa 1

9

Graafika.

<img src=”URI”> - dokumendil pildi aadress

Näide 1 <img src=”http://www.eek.ee/img/public/logon_main.png”>

Atribuudid:

width=“[n | n%]” - pildi laius pikselites | protsentides akna laiusest

hight=“[n | n%]” - pildi kõrgus pikselites | % akna laiusest

align="[ left | right | top | middle | bottom ]"- objekt paigutatakse kas:

left - vasakule tekst jääb objekti parema serva juurde;

right - paremale tekst objektist vasakule;

top - üles rea kõrgeima objekti servaga ühele joonele;

middle - vertikaalselt keskel või

bottom - objekti alumine serv rea kõrgusel.

border=“n” - raami laius pikselites

alt=“Alternatiivne tekst” – alternatiivne tekst, kui pilt pole nähtav, „kommentaar”

vspace=”n” – teksti kaugus vertikaalselt pildist pikselites

hspace=”n”- teksti kaugus horisontaalselt pildist pikselites

lowsrc=”URL” – kuvatav pilt, enne õige pildi(img) laadimist; aegunud

Näide 2 Pildi otsingutee (URI) või nimi vigane

<img src=”logo1.png width="100" height="40" border="1" alt="MK">

Näide 3 Pildi laiuse, kõrguse, raami ja kommentaari (hiirenool pildil) määramine

<img src=”logo1.png” width="100" height="40" border="1" alt="MK">

Näide 4 Teksti rajastus ja kaugused pildist

<img src=”logo1.png” width="100" height="40"

border="1" hspace="20" vspace="10"

align="middle">

Viited ehk lingid

Viide algab ja lõpeb ankruga:

<a>…</a> Atribuudid:

name=”nimi” -ankru nimi

href=”URL” - viidatav asukoht (URL). Nt href=”mailto: ” on viide elektronpostile

type=”sisu_info” - lisainformatsioon viidatava dokumendi sisu kohta

rel=”viite_tüüp” - seos antud dokumendi ja viite vahel

rev=”viite_tüüp” - eelmisele vastupidise toimega

accesskey=”sümbol” – kiirvalimisklahv viite aktiveermiseks (Alt+”sümbol”)

target =[_blank | _self | _parent | top | kaadri_nimi ] –viide avatakse:

_blank – uues aknas

_self – samas kaadris (vt frame)

_parent –viidatava dokumendi kaadris

_top – kõige pealmises kaadris, dokument kuvatakse pealmiseks ekraniseerituna

kaadri_nimi – ette defineeritud nimelises kaadris

Kaugviide – viide mujale arvuti (kataloogi) asuvale failile: <a href=URL>lingitav tekst</a>

Nt. <a href=”http://neti.ee”>NETI portaal</a>

Kodulehekülje koostamine Lisa 1

10

Lähiviide - viide sama arvuti kataloogi failile

<a href=”fail.laiend”>lingitav tekst</a> Näide 1. Viide lähtedokumendiga samas kataloogis asuvale failile

<a href=minu_cv.html>Minu CV</a>

Näide 2. Viide dokumendi kataloogi alamkataloogi „tekstid” asuvale failile

<a href=tekstid/tekst1.html>Minu luulekogu</a>

Näide 3. Viide lähtedokumendi kataloogist taseme võrra ülespool asuvasse kataloogi „info” asuvale failile

<a href=”../info.html”>Info allikad</a>

Näide 4. Viide dokumendile „minu_cv.html”, kasutades täielikku aadressi (pole soovitatav)

<a href=”http://www.eek.ee/~juku/doc/minu_cv.html>Minu CV</a>

Siseviide - viide dokumendi piires

<a href=#nimi>lingi tekst</a>

Kohale (nt reale, lõigule) kuhu viidatakse tuleb fikseerida ankur:

<a name=”asukoha_nimi”>…</a>, kusjuures „asukoha_nimi” on tõstutundlik Nt. <a href=”#algus”> Viide dokumendi algusse </a>. Seejuures on dokumendi algusese (nt <body>

elemendi rea järele fikseeritud nimeline ankur: <a name=”algus”></a>.

Elektronpostviide, nt aadressile juku@mk.ee

<a href=mailto:”juku@mk.ee”>juku e-post</a>

Näide Elektronpostviide aadressile juku@mk.ee koos teema reaga „Tagasiside”

<a href=mailto:”juku@mk.ee?subject=Tagasiside”>Juku e-post</a>

Pildile kinnitatud viide – viidatavaks on pildi aadress

<a href=”url”><img src=“pildi_asukoht”></a>

Näide 1. <a href=http://www.eek.ee><img src=“logo1.png”></a>

Näide 2. <a href=http://www.eek.ee><img src=“http://www.eek.ee/img/logo1.png”></a>

Autorlus. Autori kontaktandmed

<address> … </address> - tekst esitatakse kaldkirjas, kasutatakse autori kontaktandmete lisamiseks

Atribuudid:

ALIGN="[ center | left | right | justify ]" - info asukoht joondatud lehe keskele | vasakule |

paremale | rööpselt

Nt <address> <a href=mailto:kavi@hot.ee>K. Avi</a> </address>

Viidete baas

<base> - dokumendis olevate viidete vaikeväärtus. Määratakse dokumendi päises (<head>).

Atribuudid: href ja target (vt elemendi <a> atribuute).

Nt kui dokumendi päises on eelnevalt defineeritud <base href=”http://www.eek.ee”>, siis

saab dokumendi sisus (<body>) viidet EEK kirjalike tööde juhendile teha ilma algusaadressita

”http://www.eek.ee” järgmiselt:

<a href=”dokumendid/EEK_kirj_toode_juhend.doc”> Juhend </a>

<link> - dokumendiga seoste määramine

Nt <link rel=”stylesheet” href="stiilide_fail.css" type= "text/css"> kohaselt on faili stiilide_fail.css

ja põhidokumendi vahel nn suhteline seos (vt stiililehed).

Kodulehekülje koostamine Lisa 1

11

Harjutus 1 1. Koostage HTML-dokument, mille akna pealkirjaks on "HTML" ja dokumendi pealkirjaks „Harjutus 1”

esimese taseme pealkirjana (h1) joondatud keskele ja punast värvi.

2. Pealkirja alla lisage horisontaalne sinist värvi joon.

3. Joone alla EEK maja, joondatud samuti lehe keskele.

4. Lisage pildile kommentaariks EEK (alternatiivne tekst juhuks, kui pilt pole nähtav).

5. Lisage pildile viide http://www.eek.ee (pildile klõpsates avaneb EEK kodulehekülg).

6. Koostage lehe vasakusse serva teise taseme alapealkiri "Portaalid", mille alla moodustage number- ja

täpploetelu stiilis kaugviidetena järgmised portaalid:

1. DELFI

2. NETI

Meedia

Arvutid ja Internet

3. ZONE

7. Lisage paremale lehekülje lõppu horisontaaljoon, mis moodustaks 50 % lehekülje laiusest ja oleks

joondatud paremale. Selle alla lehe paremasse serva aadressvorminguna:

1. Copyright märk ja oma nimi

2. Oma e-posti aadress viitena ehk lingina.

8. Lehekülje lõppu vasakule serva lisage viide „Algusess” sama lehekülje algusesse (pealkirja „Harjutus 1”)

juurde.

9. Lisage kogu tööle rohekas taustavärv, must tekstivärv, punane linkide ja sinine külastatud linkide värv.

Kodulehekülje koostamine Lisa 1

12

Tabeli elemendid

<table> (tabeli algus)

<tr> (rea algus)

<td>1. lahter </td> <td>2. lahter </td>

</tr> (rea lõpp)

<tr> (uus rida)

<td>3. lahter </td> <td>4 .lahter </td>

</tr>

</table> (tabeli lõpp)

Tabeli atribuudid

Tabeli elemendi <table> atribuudid: o border=”n” - tabeli äärejoone jämedus. HTML5-s kehtivuse kaotanud

o align=”[left | center | right]” - tabeli paigutus lehekülje suhtes

o bgcolor =”värv” - tabeli tausta värvus

o bordercolor =”värv” - tabeli raami värvus

o height=”[n | n%]” - tabeli kõrgus pikselites või protsentides

o width=”[n | n%]” - tabeli laius pikselites või protsentides

o cellspacing=”n” - üksiklahtrite vaheline kaugus (vaikimisi 2 pikselit)

o cellpadding=”n” - lahtri sisu kaugus lahtri äärest (vaikimisi 1 px)

o frames - tabeli välimised äärejooned (vt elemendi frames atribuudid)

o rules - tabeli sisemised jooned (vt elemendi rules atribuudid)

Tabeli rea elemendi <tr> atribuudid: o align=”[left | center | right]” - tabeli rea lahtri sisu (teksti) joondus

o valign=”[top | middle | bottom | baseline]” - teksti vertikaalsuunaline joondus

o bgcolor =”värv” - rea tausta värvus

Tabeli lahtri elementide <td> ja <th> atribuudid:

o align=”[left | center | right]” - lahtri sisu (teksti) horisontaalne rajastamine

o valign=”[top | middle | bottom | baseline]” - teksti vertikaalsuunaline rajastamine lahtris

o bgcolor =”värv” - lahtri põhja värvus

o height=”[n | n%]” -lahtri kõrgus pikselites või protsentides

o width=”[n | n%]” - lahtri laius pikselites või protsentides

o nowrap - reavahetuse keelamine

o rowspan=n - n tabeli rea ühendamine

o colspan=n - n veeru ühendamine tabelis

o scope="[row | col | rowgroup | colgroup]" – juhtlahtri kehtiv piirkond

Tabeli pealkirja elemendi <caption> atribuudid:

align="[top | bottom | right | left]" - tabeli pealkirja asukoht tabeli suhtes

Tabeli ridade grupid

<thead>…</thead> - tabeli päis (tuleb defineerida enne tabeli keha)

<tfoot>...</tfoot> - tapeli lõpuosa, nn kokkuvõttev osa (tuleb defineerida enne tabeli keha)

<tbody>…</tbody> - tabeli keha

Atribuudid:

<table ...>... </table> - struktuur tabel

<tr ...> ... </tr> - (table row) tabeli rida

<td ...> ... </td> - (table data cell) tabeli lahter

<th ...> ... </th> - (table header) tabeli pealkirja sisaldav lahter

<caption...>... </caption> - tabeli pealkiri tabeli peal või all

Kodulehekülje koostamine Lisa 1

13

align="[left | center | right | justified]"- teksti horisontaalne joondus lahtrites

valign="[top | middle | bottom | baseline]" - teksti vertikaalne joondus lahtrites

bgcolor="värv" - rea tausta värv

Tabeli veergude grupid

<colgroup>…</colgroup>

Atribuudid:

span="n" - n veergu grupis

width="[n|n%]" - iga veeru laius antud grupis

bgcolor="värv" - veergude grupi värv

<col>…</col>

Atribuudid:

span="n"- n veergu grupis

width="[n|n%]" - iga veeru laius antud grupis

bgcolor="värv" - veergude grupi värv

Atribuut frames (välimised äärejooned) omadused: void - jooned puuduvad (sama border=”0”)

above - joon üleval

below - joon all

hsides - joon üleval ja all

vsides - joon vasakul ja paremal

lhs - joon vasakul

rhs - joon paremal

box - joon kõigil külgedel

border - joon kõigil külgedel

Atribuut rules (sisemised jooned) omadused none – jooned puuduvad

groups - jooned gruppide eraldajateks

rows - jooned ridade vahel

cols - jooned veergude vahel

all - jooned kõigi ridade ja veergude vahel

Harjutus 2. Koostage alljärgnev tabel. Tabel paigutage lehekülje keskele, tabeli lahtrites olevad

andmed samuti. Valige tabeli 1. reale sobiv tausta värv.

Minu teadmised arvutiõpetusest

Siia pane pilt Internet Tekstitöötlus Tabelarvutus Esitusgraafika

90% 80% 75% 75%

Harjutus 3 Koostage järgmine töönädal

Tabeli koostamiseks üks võimalikke alguseid:

<table rules="groups" cellpadding="5">

<caption align="top"> Töönädal </caption>

<colgroup span="1">

<col width="50"></col>

</colgroup>

<thead >

…

Kodulehekülje koostamine Lisa 1

14

Struktuurid (frame)

(kehtivuse kaotamas)

Frame-dokument on harilik HTML-dokument, mille kohaselt jagatakse dokument paanideks

(raamideks, kaadriteks). Elementide <body>…</body> osa asendatakse vastavalt elementidega

<frameset>…</frameset>-osaga. Frame-dokumendi üldstruktuur on järgmine:

<html>

<head> … </head>

<frameset …>

<frame src=”url” name=”nimi”>

</frameset>

</html>

Nt. Varasem arvutiveebi avalehekülg

(http://www.arvutiweb.ee/) oli koostatud kolme frame’ina

kõrvaloleval joonisel.

<frameset> … </frameset> - lehekülje jagamine paanideks (raamideks, kaadriteks).

Atribuudid:

rows="[n | n% | *]" - paanid jaotatakse horisontaalselt (ridadena); kõrgus protsentides,

pikselites või suhteosana

cols="[n | n% |*]" - paanid jaotatakse vertikaalselt (veergudena); laius protsentides, pikselites

või suhteosana

border="n" - paanide vaheliste piirjoonte jämedus

bordercolor="[ #RRGGBB | color ]" - paanide vaheliste piirjoonte värv

frameborder="[no | yes]" – paanide vahelised piiride keelamine | lubamine

Näited:

<frameset cols="195,99%"> - arvutiveebi alumised paanid on jagatud vertikaalselt kaheks osaks: vasakpoolne

paan on 195 px ja parempoolne osa 99% (vt joonis);

<frameset rows="20%,*, 10%"> - lehekülg jagatakse horisontaalselt kolmeks paaniks: ülemine 20%, alumine

10% ja keskmine arvutatavalt suhtarvuna 70% akna kõrgusest;

<frameset cols= "1*, 2*,1*"> - paanid jagatakse suhteosadena (1+2+1=5) vertikaalselt kolmeks osaks,

esimene osa moodustab 1/5, teine 2/5 ja kolmas 1/5 kogu lehe (akna) laiusest

<frame > - defineeritakse elemendi <frameset> sees üksikpaani (raami)

Atribuudid:

src="URL" – dokumendi asukoht paanis

name="nimi" - paani nimi, millele saab viidata (vt viited ehk lingid, elemendi <a> atribuuti

target

marginwidth=”n” - külgservade laius pikselites

marginheight=”n” - ülemise ja alumise serva laius pikselites

scrolling="[ auto | no | yes ]" - kerimisribad: automaatselt | keelatud | alati

noresize - keelatakse muuta paanide mõõte

<noframes>…</noframes> - harilikult teemakohane teade nende jaoks kelle brauseril struktuuride

töötlemise vahendid puuduvad (varasemate aegade probleem).

Kodulehekülje koostamine Lisa 1

15

Näide 1:

<noframes>

Kui teil ei õnnestu paane näha, siis kasutage sama dokumendi

<a href=”noframe.html”> paanideta versiooni </a>

</noframes>

Näide 2. Koostame kolmest paanist koosneva struktuuri vastavalt näitele

Vaadeldav näide koosneb vähemalt neljast failist:

1. raamid.html – struktuurifail;

2. sisukord.html – vasakusse paani (sisu) avatav

fail;

3. tiitel.html – paremale ülaosa paani (tiitel)

kuvatav fail;

4. algus.html – paremale alumisesse põhipaani

(algus) kõige pealt kuvatav fail

Faili raamid.html sisu: <html>

<head>

<title>...</title

</head>

<frameset cols="30%,*" frameborder="no" border="0" framespacing="0">

<frame src="sisukord.html" name="sisu" scrolling="auto" noresize frameborder="no">

<frameset rows="25%,*" frameborder="no" border="0" framespacing="0">

<frame src="tiitel.html" name="tiitel" scrolling="no" noresize frameborder="no">

<frame src="algus.html" name="algus" scrolling="auto" frameborder="no">

</frameset>

</frameset>

</html>

Fail tiitel.html on järgmine: <html>

<head>

<title>Firma ABCD</title>

</head>

<body text="#000000" bgcolor="#99ff99">

<p align="center"><h1><font color="#211f12">Firma ABCD</font></h1></p>

</body>

</html>

Fail sisukord.html on järgmine: <html>

<head>

<title>…</title>

</head>

<body text="#000000" bgcolor="#33ffff">

<p align="center"><h2>sisukord</h2><p>

<hr align=left size=3 noshade width="50%">

<a href="algus.html" target="algus">link 1</a>

<br><a href="link2.html" target="algus">link 2</a>

<br><a href="link3.html" target="algus">link 3</a>

<br><a href="link4.html" target="algus">link 4</a>

</body>

</html>

sisu

(sisukord.html)

Viide 1

(Algus.html)

Viide 2

Viide 3

Viide 4

…

tiitel

(tiitel.html)

algus

(algus.html)

Viite väljund

TARGET="[name | _blank | _parent | _self | _top]" name - viide väljastatakse määratud paani

_blank - viide väljastatakse sirvija uues aknas

_parent - viide väljastatakse eelnevas kaadris

_self - viide väljastatakse samas kaadris

_top - viide väljastatakse samas kaadris kuid eiratakse

olemasolevat kaadrit

Kodulehekülje koostamine Lisa 1

16

Harjutus 4. 1. Koostage kodulehekülg alljärgneva struktuuriga (farme või tabel) . Vasakul pool olev dokument

olgu sisukord.html ja paremal pool EEK kodulehekülg (www.eek.ee). Antud kodulehekülje

nimeks pange frame.html või tabel.html

POSTIMEES

SL ÕHTULEHT

2. Kodulehekülje vasakus osas olevas dokumendis on 2 kaugviidet: Postimees

(www.postimees.ee) ja SL Õhtuleht (www.sloleht.ee). Kõik viited peavad avanema kodulehe

paremas osas.

Harjutus 5. Koostage veeb, mille avaleheküljeks on alljärgnev struktuur. Antud ülesannet saab väga

edukalt lahendada ka tabelite kasutamisega.

Pilt (logo pildina) Viide 1

Viide 2 Viide 3

P Õ H I A K E N

Ül 1.Looge avalehekülg nimega index.html, mis sisaldab kaadreid (frame) ning on jaotatud üla- ja alaosaks

(200,*) vastavalt näitele.

Ül 2.Ülaosasse koostada tabel, mis oleks ühtlasi selle veebilehe menüü:

Pilt (logo pildina) Viide 1 Viide 2 Viide 3

Näiteks klõpsides viitel 1, avaneb antud viite sisu nn põhiaknasse (akna alaossa). Analoogselt

toimivad ka viide 2 ja 3.

Ül 3. Looge viite lehed.

Ül 4. Testige tulemus, vajadusel tehke parandusi.

Ül 5. Paigutage koostatud veebilehekülg Internetiserverisse (nt www.hot.ee)

Võimalikud viited: Viide 1 - Endast (kontaktandmed jne) või mõne firma tutvustus jm

Viide 2 - Hobid, sõbrad, muusika, sport jne või antud firma müügipakkumine

Viide 3 - Kogutud viited või firma partnerlussuhted

Pilt - … või firma kontaktandmed

Harjutus 6. Analoogne eelneva harjutusega, kuid veidi keerulisema lahendusega

Pilt (logo) Pilt 1 (sisukord 1) Pilt 2 (sisukord 2) Pilt 3 (sisukord 3)

Viide 1

Viide 2

Viide 3 P Õ H I A K E N

Kodulehekülje koostamine Lisa 1

17

Veebilehe standardid ja valideerimine (A. Kurm)

Veebileheküljed on tekstidokumendid, kuhu on lisatud pildi-, heli- ja videofailid ning hüperlingid

jne.

Tekst veebilehel. Tuleb üle vaadata kasutatud terminoloogia, sisu, teema, teabe aegumine ja

õigekiri.

Hüperlingid. Viited võivad olla seotud nii graafika kui tekstiga. Tuleb üle vaadata, kas viited

toimivad õigesti, avatakse õiges kohas (aknas), kas täidetud vormid pärast saatmist toimivad õigesti.

Graafika. Märksõnad on: kvaliteet, maht, olemasolu serveris (õiges kaustas).

Veebilehitsejad. Sirvijaid on erinevaid, mille tõttu võib veebileht või selle mingid osad olla sirvijates

erineva kuvamisega. Oluline on ekraani resolutsioon ja värvisügavus. Platvormid võivad näidata

erinevaid ekraaniresolutsioone ja ka värve. Veebileht võib erinevate resolutsioonidega erinev välja

näha. Platvormide erinev värvisügavus võib samuti mõjuda veebilehe välimusele. Teksti suurust saab

veebilehitsejas kasutaja muuta. Tuleb vaadata, kuidas veebileht erinevate tekstisuuruste ja ekraani

resolutsioonidega välja näeb.

Soovitused. Ei soovita kasutada kõige uuemaid tehnoloogilisi lahendusi. Kui kasutaja arvuti ei suuda

veebilehte üles laadida või näitab vaid osaliselt või on lehel üle „pingutatud“ animatsioonidega,

mahukad ja keritavad lehed jms, siis võib arvestada sellega, et see kasutaja ei soovi seda konkreetset

saiti enam külastada. Kasutaja võiks näha, milliseid viiteid ta on juba külastatud.

Suurim puudus on aegunud teave, (ava)lehe aegalane üleslaadimine, mitte avanevad viited, keeruline

navigeerimine või vajaliku teabe leidmine.

Veebilehe testimisvahendid. Vigu võib tekkida ka siis, kui järgida kõiki soovitusi ja standardeid.

Organisatsioon World Wide Web Consortium (W3C) http://www.w3.org/ tegeleb veebilehtedega

seotud probleemidega, kinnitab standardeid, ehk koodide kirjutamise reegleid, mida soovitatakse

järgida veebilehtede koostamisel. Standardite järgi veebilehe tegemine annab kindluse, et loodav

veebileht on erinevat tehnoloogiat omavate kasutajate arvutites normaalselt kuvatav.

Vanem standard, mida W3C soovitas oli HTML 4.01. Paljud veebilehed on praegugi veel tehtud

HTML 4.01 standarist lähtuvalt. Lähemalt vt http://www.w3.org/TR/html4/

Peale HTML 4.01 standardit loodi järgmisena standard XHTML 1.0. Mitmed veebilehed on

koostatud ka lähtuvalt sellest standardist. Lähemalt vt http://www.w3.org/TR/xhtml1/

Hetkel on HTML5 ülemaailmse veebikeele HTML viies põhiredaktsioon alles kujuneb standardiks.

HTML5 pakub arvukalt uusi elemente ("märgendeid") ja atribuute, mis iseloomustavad tänapäeva

veebikülgede tüüpilist kasutust. Paljud brauseri versioonid ei suuda veel kõiki HTML5 võimalusi

veebilehel välja näidata. Seega tehakse hetkel veebilehti edasi ka endiselt HTML4 kui ka XHTML-

ga, mis on eelmised versioonid. Iga versiooni kasutamise juures tuleb arvestada erinevustega, mis

nad sisaldavad. HTML5-s on paljud asjad jäetud samaks, osa on kaotatud ning lisatud on uusi

elemente. Seda kõike on tehtud selleks, et veebilehtede loojad saaksid muuta veebilehed veelgi

atraktiivsemks ja funktsionaasemaks. Lähemalt vt http://www.w3.org/TR/html5/

Kodulehekülje koostamine Lisa 1

18

Koodide korrektsust on võimalik kontrollida erinevatel veebilehtedel.

HTML 4.01. standardile vastavust saab kontrollida

o veebilehe aadressi sisestamisena http://www.htmlhelp.com/tools/validator/

o HTML faili üles laadimisena oma arvutist

http://www.htmlhelp.com/tools/validator/upload.html.en

o koodijupi kopeerimisena (veebilehel tekstiaknasse)

http://www.htmlhelp.com/tools/validator/direct.html.en

XHTML 1.0 standardile vastavust saab vaadata vastavalt aadressidelt

http://validator.w3.org/#validate_by_uri, http://validator.w3.org/#validate_by_upload,

http://validator.w3.org/#validate_by_input

(X)HTML5 standardile vastavust saab vaadata aadressilt http://html5.validator.nu (kolm

valikut on vaadeldaval lehel ripploendis)

Eesti keele õigekirja võib üle vaadata eesti keele spelleriga (http://www.filosoft.ee/html_speller_et/)

Täiendavalt vt veebilehtede valideerimisest Rene Saarsoo bakalaurusetööd „Veebilehtede

kodeerimispraktikad“ http://triin.net/2005/12/23/Veebilehtede_kodeerimispraktikad

Kodulehekülje koostamine Lisa 1

19

Cascading Style Sheets (stiililehed)

Cascading Style Sheets (CSS) ”astemlised“ stiililehed võimaldavad defineerida veebilehe välimust

(taust, font, värvus, kuju, paigutus jne) lihtsustades veebilehe koostaja tööd (hiljem on lihtsam

veebilehe kujundust muuta), failide mahtu ja allalaadimise aega. Ühte stiili saab kasutada korduvalt

mitmes kohas ja mitut stiili kombineerida.

CSS sai veebistandardiks alles HTML 4 versiooniga, mistõttu erinevad sirvijad võivad CSS

vahendeid hetkel tõlgendada erinevalt. Kehtivat standardit ja CSS valideerimist vt aadressilt http://jigsaw.w3.org/css-validator/.

Täiendavalt vt ka järgmiseid allikaid:

o http://www.w3.org/Style/CSS/

o http://www.w3schools.com/css/default.asp

o http://www.w3.org/TR/CSS2/

Stiilide lisamise võimalused veebilehele

Stiili rakendamiseks on järgmised võimalused:

1. Rea tasemel määratakse dokumendis igale elemendile eraldi (korduvalt):

<element style=”stiili definitsioonid”>…</element>

Näide 1

<h1 style="color:#FF0000; text-align:center">See pealkiri määratud stiiliga</h1>

2. CSS (Cascading Style Sheets, astmelise stiililehe) tasemel kahe võimalusena:

2. 1. CSS definitsioonid kirjutatakse iga HTML faili päisesse elemendi

<style type="text/css"> …</style> sisse: <head>

<style type="text/css">

<!--

Stiili definitsioonid

--> </style>

</head>

Näide 2. <head>

<title>...</title>

<style type="text/css">

body{background-color:red; margin-left:3cm; margin-top:2cm text-

align=right}

H1.esimene {margin-top:3cm; font-family:”Times New Roman”;

color:blue;font-size:150%}

H1.teine {font-family:Times; color:yellow}

P{text-align=justify}

#o{color:green}

.a{color:blue; text-align:center}

</style>

</head>

Elemendi <style> atribuudid:

disabled – stiile ei rakendata, kõik sirvijad ei toeta

Kodulehekülje koostamine Lisa 1

20

type=”[text/css | text/javascript]”

title=”pealkiri” – kõik sirvijad ei toeta

media=”[all, aural, braille, handheld, print, projection, screen, tty, tv]” – meediatüübid,

millele stiili rakendatakse. Võib valida mitu väljundit. Vaikeväärtuseks on all.

2.2. CSS definitsioonid salvestatakse eraldi tekstifaili (faili laiendiks on css, nt kujundus.css) ja

lisatakse iga HTML dokumendi päisesse selle faili relatiivne e. suhteline viide järgmiselt: <head>

<link href=”faili_nimi.css” rel=stylesheet type=text/css /> </head>

Näide 3. <head>

<title>...</title>

<Link href=”kujundus.css” rel=stylesheet type=text/css />

</head>

CSS süntaks

Stiil defineeritakse omaduste hulgana: defineeritav:väärtus Seega CSS süntaks koosneb järgmistest

osadest:

selektor (selector)

omadus (property)

väärtus (value)

selector {property: value}

Selektor on tavaliselt HTML element. Omadus on atribuut, mida on soov muuta. Atribuudil on väärtus.

Näide:

body {color: blue}

CSS definitsiooni määramisel:

omaduse (atribuudi) järele lisatakse koolon (:)

omadused koos väärtustega kirjutatakse loogelitse sulgude { ja} vahele

eri omadused eraldatakse semikooloniga (;)

mitmesõnaline väärtus pannakse jutumärkide vahele

Esitame stiili defineerimise võimalused, kus {stiil} tähistab stiili(de) definitsioone:

a) Ühele elemendile stiili defineerimine - element {stiil}

Näide 1. h1{color:red; font-size:150%}

a {text-decoration: none}

b) Elementide grupile ühesuguse stiili defineerimine - element1, element2, … elementN {stiil}

Näide 2. h1,h2,h3{color:red; font-size:150%}

c) Üksteise sees olevatele elementidele stiili defineerimine - element1 element2 {stiil}

Näide 3. a:hover {color:red; text-decoration: none}

ol li{list-style:upper-roman}

Kodulehekülje koostamine Lisa 1

21

ol ol ol {list-style-type:lower-roman}

p strong {background:green}

d) Klassi defineerimine - .klassinimi {stiil}. Mugavam kasutamisviis. Stiili saab rakendada kõigile

erinevatele HTML elementidele. NB! Klassi nime ees on punkt.

Näide 4. .centerblue{color:blue; text-align:center}

e) Elemendile klassi defineerimine:

Näide 5. p.paigutus{text-align=justify; margin-left:2cm; margin-top:0.5cm}

f) Identifikaatori defineerimine - #identifikaator {stiil}. Selliselt defineeritud stiili saame

rakendada vaid antud elemendile.

Näide 6. #blue{color:blue}

g) Elemendiga seotud identifikaatori defineerimine - element#identifikaator{stiil}

Näide 7. h3#center{text-align:center}

Kommentaarid stiilis - /* See on kommentaar */

Stiilide kattumisel samale elemendile saab stiili eelistada märgistusega !important

Näide 8. h3{text-align:center !important; color:red}

Kui mitu stiili erineb vaid mõne omaduse võrra, siis on mõttekas defineerida ühised omadused

stiilide grupile ning seejärel erinevad omadused vastavatele stiilidele eraldi.

.minu1, .minu2 {font-family: "Times New Roman", Times, serif; font-size: 12px}

.minu1 {color:red}

.minu2 {color:blue}

Stiile oleks mõttekas defineerida parema loetavuse huvides järgmiselt:

.minu {

font-family: "Times New Roman", Times, serif;

font-size: 12px;

background-color: #CCFFFF;

}

Mõõtühikud, mida väärtustena saab kasutada

CSS kasutamine dokumendis

Stiile saab kirjeldada ja muuta erinevatele HTML elementidele. Stiilide rakendamisel dokumendi

liigendamisel rõhutaksime järgmiste elementide tasemete erinevusi.

<p>…</p> - lõigu taseme element (võib olla bloki või rea tasemes)

Suhtelised:

px - piksel (pixels)

em - fondi kõrgus (ems)

ex – tähe x kõrgus (exs)

%

NB! Suhtearvu ja pikkusühiku vahel tühik

puudub, nt 3em (mitte 3 em).

Absoluutsed:

pt - punkt (points, 1pt=1/72 tolli)

in - toll (inch, 1 in=2.54 cm)

cm - sentimeeter (1cm=10mm)

mm - millimeeter

pc - picas (1pc=12 pt)

em - fondi kõrgus (ems)

ex - tähe kõrgus (exs)

%

Kodulehekülje koostamine Lisa 1

22

<div>…

</div> - bloki taseme element, reavahetus lisatakse enne ja pärast antud elementi

<span>…</span> - rea taseme element

a) Elemendile, elementide grupile või üksteise sees olevatele elementidele defineeritud stiil

rakendub kohe

b) Klassi atribuudi (vt näide 4) korral lisatakse elementi class=”klassi_nimi”

Näide 4.1. <p class=”centerblue”>See lõik joondatakse keskele sinise

tekstina</p>

Näide 5.1. <p class=”paigutus”>See lõik joondatakse äärest-ääreni

vasakult 2 cm ja ülevalt (eelnevast objektist) 0,5 cm

kauguselt.</p>

c) Analoogselt identifikaatori atribuudi korral.

Näide 6.1. <h1 id=”blue”>Esimese taseme pealkiri on sinist värvi</h1>

Näide 7.1. <h3 id=”center”>Kolmanda taseme pealkiri on joondatud

keskele</h3>

d) Elemendi atribuudiga stiili korral lisatakse elementi style=”stiil”

Näide. <div style=”background-color:green”>Vaadeldava bloki taust on roheline</div>

Fondi definitsioonid (type)

font-family: [fondi nimi | fondi pere nimi], [fondi nimi | fondi pere nimi], ...- fondi stiil e. shrift

Nt h1{font-family: arial, " Times New Roman"}

.minu {Arial, Helvetica, serif}

NB! Tühikuid sisaldavad fondinimed tuleb kirjutada jutumärkide vahele. Kui esimest määratud fonti

(klassi .minu nätel Arial) pole, siis võetakse teine (Helvetica), kuni fondi perest (serif vaadeldava

näite korral).

font-size - fondi suurus (vt pikkusühikud).

Võimalikud absoluutsed suurused: xx-small, x-small, small, medium, large, x-large, xx-

large suhtelised suurused: larger smaller .

Nt h1 {font-size: 12 pt}

.a75 { font-size:75%}

font-style: [normal, italic, oblique] - fondi esitamise viis.

Nt h3 {font-style: italic}

font-weight - fondi rõhutus.

Võimalikud valikud: normal, bold, bolder, ligther, 100, 200, 300, 400, 500, 600, 700, 900.

Nt .xb {font-weight: bold}

font-variant: [small-caps | normal] - kapiteelkiri, tavakiri

Nt .v {font-variant: small-caps}

Teksti definitsioonid (block, type)

text-align:[left | center | right | justify] - teksti joondus

Nt h1 {text-align: center}

Kodulehekülje koostamine Lisa 1

23

vertical-allign - teksti vertikaalne joondus

Valikud: baseline, sub, super, top, text-top, middle, bottom, text-bottom, % rea kõrgusest

Nt .x1 {vertical-align: sub}

text-indent – teksti(bloki) vasaktaane

Nt h1 {text-indent: 1.5 cm}

line-height:[väärtus] [pikkusühik] – rea kõrgus. Ilma pikkusühikuta on multiple – ridade arv enne ja

pärast antud rida

Nt .r3 {line-height: 3}

word-spacing - sõnade vahe (pikkusühikuna puudub %)

Nt h1 {word-spacing: 5 pt}

letter-spacing – sümbolite vahe (pikkusühikuna puudub %)

Nt li {letter-spacing: 5%}

white-space: [normal | pre | nowrap] – üks tühik mitme kõrvuti oleva tühiku asemel, tühikuid ei

kõrvaldata, rida ei poolitata (v.a elmendi br korral).

Nt .pealkiri {white-space: nowrap}

text-transform: [capitalize | uppercase | lovercase | none] – täheregister (suur algustäht, suurtähed,

väiketähed)

Nt .s {text-transform: uppercase}

text-decoration - teksti dekoreerimine

Valikud: underline, overline, line-through, blink, none (allakriipsutus, pealekriipsutus,

läbikriipsutus, vilkumine - ei toeta mitmed sirvijad, pole)

Nt a:link {text-decoration: none}

display – elemendi näitamise tase

Võimalikud variandid: none inline; block; list-item; run-in; compact; marker; table; inline-

table; table-row-group; table-header-group; table-footer; table-row; table-column-group; table-

column; table-cell; table-caption.

Nt .d {display: block }

Viidete e linkide definitsioonide näited

a:link {text-decoration: none; color: blue; line-height: 5; font-weight:bold} /*külastamata

viide*/

a:visited {text-decoration: none; color: red; line-height: 5} /*külastatud viide*/

a:active {text-decoration: none; color: green; line-height: 5} /*aktiivne viide*/

a:hover {color: light-blue; line-height: 5; font-family: arial } /*ajutiselt ilmuv viide*/

Värvi ja tausta definitsioonid (background)

color:[värv | värvi kood] - elemendi värv

Nt h1 {color: #66FFCC}

background-color:[värv | värvi kood] - dokumendi tausta värv

Nt body{background-color:blue}

background-image: url(URI) – (dokumendi) taustapilt

Nt body {background-image:url(http://www.eek.ee/logo.gif)}

.loik {background-image: url(karu.gif)}

background-repeat:[no-repeat | repeat | repeat-x | repeat-y] - taustapildi kordamine (ei korrata,

korratakse, korratakse vaid horisontaalselt (x-telg) või vertikaalselt (y-telg)

Nt body {background-repeat: repeat; background-image: url(karu.gif)}

background-attachment:[fixed | scroll] - taustapildi reageerimine kerimisele

Kodulehekülje koostamine Lisa 1

24

Nt body {background-image: url(karu.gif); background-attachment: scroll}

background-position:[horisontaalne joondus | vertikaalne joondus] – taustapildi asukoht

dokumendis

Horisontalse joonduse väärtused: [left | center | right | pikkusmõõt]

Vertikaalse joonduse väärtused: [top | center | bottom | pikkusmõõt]

Nt body {background-image: url(karu.gif); background-position: center}

body {background-image: url(karu.gif); background-position: center center}

p {background-image: url(karu.gif); background-position: 30% 50%}

background – tausta definitsioonid lühendatud kujul

Nt .taust {background: scroll url(karu.gif) no-repeat center bottom}

Valikut background soovitatakse sirvijate paremini toetamisel kasutada background-repeat,

background-attachment, background-position asemel.

Ääriste, paigutuse ja tabelduse definitsioonid (box)

margin-left - vasak ääris (vaba ruum vasakust servast ehk äärejoonest, left margin)

Nt body {margin-left: 1 cm}

margin-right - parem ääris (right margin)

Nt p {margin-right: 10 pt}

margin-top ülemine ääris (top margin)

Nt p {margin-top: 0.5 in}

margin-bottom alumine ääris (bottom margin)

Nt p {margin-bottom: 10%}

margin – kõik neli äärist korraga (vastavalt järjekooras: ülemine, parem, alumine ja vasak)

Nt p {margin: 2.5 cm 3 cm 2.5 cm 2 cm}

.neli {margin: 2 cm} – kõik äärised on 2 cm

width:[auto | pikkusühik] – laius (pikkusühikutes) bloki tasemel elemendile

height:[auto | pikkusühik] – kõrgus (mitte % pikkusühikuna ) bloki tasemel elemendile

Nt .paigutus {height: 50px; width: 200px}

img height: 200px; width: 200px}

float:[left | right | none] – paigutus teksti elemendi suhtes

Nt img {float: right} – kõik pildid paigutatakse paremale

clear:[left | right | none] – keelatakse float tüüpi elemente kasutada vastavalt vasakul või paremal

Nt h3 {clear: right}

padding-top – ala elemendi sisu ja ülemase ääre vahel pikkusühikutes (mitte % pikkusühikuna)

Nt blockquote { padding-top: 1cm}

padding-right – ala elemendi sisu ja parema ääre vahel pikkusühikutes (mitte % pikkusühikuna)

Kodulehekülje koostamine Lisa 1

25

Nt blockquote { padding-right: 3cm}

padding-bottom – ala elemendi sisu ja alumise ääre vahel pikkusühikutes (mitte % pikkusühikuna)

Nt blockquote { padding-bottom: 2cm}

padding-left – ala elemendi sisu ja vasaku ääre vahel pikkusühikutes (mitte % pikkusühikuna)

Nt blockquote { padding-left: 1.5cm}

padding – lühendatud variant: ala elemendi sisu ülemase, parema, alumise ja vasaku ääre vahel

Nt blockquote { padding: 1cm 3cm 2cm 1.5cm}

Piirdejoonte definitsioonid (border)

border:[border-width border-style border-color] – (tabelit/lõiku/blokki ümbritseva) piirdejoone

paksus, laad ja värv. NB! Piirdejoone paksuse näitamiseks peab olema määratud ka selle laad.

Nt .jooned { border:3 dotted blue}

p { border:1 double red}

border-style:[none | dotted | dashed | solid | double | groove | ridge | inset | outset] – piirdejoone

laad: piirdejooned puuduvad, punktiir, rõhutatud punktiir, pidev, topelt, sooniline, vastupidine

eelmisele, ülemine ja vasak piirdejoon rõhutatud, parem ja alumine piirdejoon rõhutatud

Nt .piirdej {border-style: outset}

Omaduse border-style väärtuste erijuhud:

o 4 väärtuse korral on piirdejoone väärtused järjekorras vastavalt ülemine, parem, alumine ja

vasak piirdejoon

Nt .neli {border-style: dotted dashed solid double}

o 3 väärtuse korral on piirdejoone väärtused: esimene ülemise, teine vasaku ja kolmas alumise

piirdejoonele

Nt .kolm {border-style: dashed solid double}

o 2 väärtuse korral on piirdejoone väärtused: esimene ülemise ja alumise, teine vasaku ja

parema piirdejoone väärtused

Nt .kaks {border-style: solid double}

o 1 väärtuse korral on piirdejoone väärtused kõigile piirdejoontele

Nt .yks {border-style: solid }

border-width:[thin | medium | thick | auto | väärtus pikkusühikutena] - piirde joone paksus

ülevalt, paremalt, alt ja vasakult. NB! Piirdejoone paksuse näitamiseks peab olema määratud ka selle

laad.

Nt .jooned {border-style:dashed; border-width:5 1 2 3 }

.jooned {border-style:dashed; border-width:5px 1px 2px 3px }

table {border-style:ridge; border-width:thin medium thick auto}

border-color:värv – äärejoonte värvid; kuni 4 värvi rakendatuna järjekorras: ülemisele, paremale,

alumisele ja vasakule piirdejoonele

Nt p {border-color: red green blue silver}

Piirdejoone paksus, laad ja värv igale piirdejoonele eraldi:

border-top nt div { border-top: 5px outset #0000FF; }

border-right nt div { border-right: medium dashed #990000; }

border-bottom nt div { border-bottom: thick solid #00FFFF; }

border-left nt div { border-left: thick double #FFFF33; }

Piirdejoone paksus igale piirdejoonele eraldi:

border-top-width nt p { border-style: solid; border-top: 2 }

border-right-width nt div { border-style: solid; border-right: 4 }

border-bottom-width nt span { border-style: solid; border-bottom: 5 }

Kodulehekülje koostamine Lisa 1

26

border-left-width nt .vasak { border-style: solid; border-left: 7 }

Näide: div { border-style: solid; border-top: 2; border-right: 4; border-bottom: 5; border-left: 7}

.jooned { border-style: solid; border-top: 2; border-right: 4}

Loendi definitsioonid (list)

list-style-type:[disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |

upper-alpha | none] – loendi märgendid: täpp; ring; ruut; araabia nr; väike rooma nr;roomanumber;

väiketäht; suurtäht; märgend puudub

Nt .loend { list-style-type: circle} /* loendi märgendiks on ring, sõltumata elemendist ul või ol

*/

ol { list-style-type: upper-roman } /* loendi märgendiks on roomanumbrid I, II, III, …*/

ol ol { list-style-type: decimal } /* teise tasemeloendi märgendiks on araabia numbrid 1, 2,

3, …*/

list-style-image: [url(URI) | none] – loendi märgendiks graafika element (pilt, ikoon)

Nt ul {list-style-image: url(curve.gif)}

list-style-position: [inside | outside] – loendi lõigutaane: taandamata (märgendiga samalt

positsioonist); taandatud (tekstiga samalt positsioonilt)

Nt ul { list-style-position: inside}

list-style:[list-style-type list-style-position url ] – loendi lühendatud definitsioon: laad positsioon

pilt

Nt ol { list-style: square outside}

ol ol { list-style: url(pall.gif) outside}

Objekti positsiooni definitsioonid (positioning)

position:[absolute | relative | static] – objekti positsioon lehel

top – objekti kaugus ülemisest äärest pikkusühikutena

left– objekti kaugus vasakust äärest pikkusühikutena

Nt img { left: 3cm; top: 2cm; position: absolute}

<img style=position:absolute; left:1 cm SRC=logo.gif>

height, width – objekti kõrgus, laius pikkusühikutena

Nt img {height: 100px; width: 200px; left: 3cm; top: 2cm; position: absolute}

visibility:[inherit | visible | hidden] - nähtavus

z-index:[arv] – üksteist (osaliselt) katvate kihtide nähtavuse järjestus

overflow:[visible | hidden | scroll | auto] - ületäituvuse nähtavus: nähtav; varjatud; keritav

Nt. .xy {overflow: scroll; visibility: visible}

<div id="Layer2" style="position:absolute; left:100px; top:20px; width:120px; height:65px; z-

index:1">

Visuaalsed efektid (extensions)

Visuaalseid efekte ei toeta mitmed sirvijad.

cursor – hiirekursori kuju

Võimalikud valikud: hand; crosshair; text; wait; default; help; e-resize; n-resize; nw-resize;

w-resize; sw-resize; s-resize; se-resize; auto

Nt .hiir {cursor: n-resize} /* hiire kujuks on järgmine nool: ↕ */

Kodulehekülje koostamine Lisa 1

27

cursor:hand

cursor:n-resize

cursor:crosshair cursor:nw-resize

cursor:text cursor:w-resize

cursor:wait cursor:sw-resize

cursor:default

cursor:s-resize

cursor:help cursor:se-resize

cursor:e-resize

cursor:auto

filter – piltide (teksti) moonutamine

Mõned näited:

.f {filter: Invert} /* pilt on negatiivis*/

.f {filter: Gray} /* pilt on must-valge*/

.f {filter:Shadow(color = blue, direction=150, enabled=1) /* sinine vari*/

.f {filter:Wave(freq=15 strength=2, enabled=1)} /* freq-sagedus, strength-lainetuse

intensiivsus*/

<img src="logo.gif" style="filter:FlipV(enabled=1)"> - pilt pööratakse 180˚ ümber

vertikaaltelje (FlipH –horisontaaltelje) suhtes

.f {filter: Alpha(Opacity=5, FinishOpacity=70, Style=2, StartX=0, StartY=0, FinishX=150,

FinishY=150)}

/* Opacity=0..100 – läbipaistmatus */

Kokkuvõte CSS definitsioonidest (font, text ja taust)

Font Valikud Näide

font-family: fondi nim, fondi pere nimi font-family: Arial, Helvetica, sans-

serif

font-style: normal, italic, oblique font-style:italic

font-variant: normal, small-caps font-variant: small-caps

font-weight: normal, bold, bolder, ligther, 100, 200, 300,

400, 500, 600, 700, 900 font-weight:100

font-size:

xx-small, x-small, small, medium, large, x-

large, xx-large suhtelised suurused: larger

smaller

font-size: 12pt

color: #värvi_kood, värvi_nimi,

rgb(red_val,green_val,blue_val)

color:#0000FF

color:blue

Tekst Valikud Näide

text-align: left, right, center või justify text-align:justify

Kodulehekülje koostamine Lisa 1

28

Tekst Valikud Näide

vertical-allign: baseline, sub, super, top, text-top, middle,

bottom, text-bottom, % rea kõrgusest vertical-allign: sub

text-indent: väärtus: em, cm, px või % akna suurusest text-indent:0.5cm

line-height: normal või suurus või protsenti fonti suurusest line-height:0.5

text-decoration: none, underline, overline, line-through või blink text-decoration:none

text-transform: capitalize (suur algustäht), uppercase (suurtäht),

lowercase, none text-transform:capitalize

letter-spacing: normal või väärtus letter-spacing:1em

Background Valikud Näide

background-color: # värvi_kood, värvi_nimi,

rgb(red_val,green_val,blue_val), transparent

background-

color:rgb(255,255,0)

background-image: url(failinimi või hüperlink), none background-

image:url(taust.gif)

background-repeat: repeat, repeat-x, repeat-y, no-repeat background-repeat:repeat-x

background-attachment: scroll, fixed background-

attachment:fixed

background-position: top, center, bottom, left, center, right background-position:left

bottom

Kodulehekülje koostamine Lisa 1

29

Harjutus 7. Koostage allpool näidatud veebileht kasutades stiile. Stiilid on järgmised: 1. dokumendi keha (body) äärised – 2cm (ülalt, alt, vasakult, paremalt); kirjasuurus

12pt; Arial, Helvetica või sans-serif font;

2. pealkiri (h1) Stiilide kasutamisest - punane, paksem (bolder),

TRÜKITÄHTEDEGA, 4 p x s õ r e n d u s e g a , 16pt suurusega, 12pt

reakõrgusega ja Arial, Helvetica või sans-serif fondiga kiri;

3. taustaks (klass taust) on pilt (pilved.jpg) joondatud lehe keskele, taustavärviga:

#CCFFFF;

4. loendis (klass loend) on märgenditeks pilt (blue.gif). Alamloendi võib teha

erineva;

5. lingi stiilid - Arial, Helvetica või sans-serif font; reakõrgus 12pt, ilma alajooneta;

linkide värvid ja suurused on erinevad (link, vlink, hover); hiirekursori kuju – käsi

(hand).

Kodulehekülje koostamine Lisa 1

30

Vormi (form) põhielemendid

Vorm (form) on Windowsi tavapäraste andmesisestusobjektide (tekstikast, valikmenüü, märkeruut

jne) päringukompleks, millel on vaid üks Submit-tüüpi nupp. Submit-tüüpi nupu abil on võimalik

sisestatud (valitud) infot saata serverisse või e-maili aadressile.

Seega: vorm on HTML-dokumendi interaktiivne osa, mille elementide abil saab kasutaja

informatsiooni sisestada ja saata (teksti kujul) serverisse.

Vormide koostamiseks on HTML-keeles järgmised elemendid:

<form> - vormi alguse märgend

<input> - sisestusväli

<select>…<select> - valikmenüü

<textarea>…<textarea> - mahukamate tekstide

sisestusväli

<label>…<label> - silt

<fieldset>…</fieldset> - (märgendite) grupeerimine

</form> - vormi lõpu märgend

Elemendi <form>…</form> atribuudid:

action = "URL | mailto:" päringu saaja URL aadress (serveripoolne programm või e-mail)

method= "get | post" päringu tüüp:

a) get meetodit kasutatakse, kui vormi andmed ei vaja välist töötlemist, nt

andmebaasides andmete otsimisel. Edastatav info lisatakse aadressribal

küsimärgi järele, seega tegemist on avatud infoga. Post meetodi korral

kasutatakse standardsisestuse meetodit (sõltub operatsioonisüsteemist) ja infot

ei lisata avalikult URL-i.

b) post meetodi puhul saadetakse andmed varjatumalt.

Näide 1: <form action="http://abc.ee/Saada.php " method="post">

Näide 2: <form action="mailto:juku111@hot.ee" method="post">

enctype="sisu tüüp" Vaikimisi väärtuseks on "application/x-www-form-urlencoded (andmed

saadetakse URL-iks kodeerituna), failide üleslaadimiseks:

enctype="multipart/form-data" ja e-maili aadressile saatmiseks:

enctype="text/plain"

name="nimi" vormi nimi, et vormi saaks kasutada scriptide ja stiilide abil

Element <input> näitab seda välja, mille sisu saab kasutaja aktiveerida või muuta.

Elemendi <input> atribuudid:

1. type= "[text | password | checkbox | radio | submit | reset | hidden | file | button | image]", kus

a) text lahter teksti sisestamiseks

Nt <input type="text" name="tekst" value="abcde" size="10" maxlength="5">

b) password lahter teksti varjatud sisestamiseks(tärnid)

c) checkbox valiku lahtrid (kastid, kontrollkastid). Korraga saab samast

grupist mitu valida

Nt <input type="checkbox" name="Keeled" checked value="Inglise">

Kodulehekülje koostamine Lisa 1

31

d) radio ühese valiku lahtrid (ringid, valikunupud). Korraga saab samast grupist valida vaid

ühe

Nt <input type=radio name="Naine" value="Naine">Naine

e) submit vormi saatmise nupp

Nt <input type="submit" value="Saada">

f) reset vormi tühistamise nupp

Nt <input type="reset" value="Puhasta">

g) hidden varjatud info edastamiseks

h) file faili üles laadimiseks

i) button nupp, erinevate tegevuste täitmiseks (scriptide abil)

Nt <input type="button" value="OK">

j) image pilt vormi saatmise nupul

Nt <input type="image" name="OK" src="majav.jpg">

2. name="nimi" sümboolne nimi, mida kasutatakse vormi saatmisel

3. value="väärtus" vormi saatmisel algväärtus (väljad, kus on muudetav tekstiline või numbriline

väärtus)

4. size="x" sisestusakna laius pikselites (type="password" korral sümbolite arv)

5. maxlength="x" sisestuse maksimaalne pikkus

6. checked valikute näitamine type="radio" ja type="checkbox" korral

7. src="URI" pildi asukoha määramine type="image" korral

Element <button>…</button>

on põhimõtteliselt sama, mis <input type="button"> mõningase lisavõimalusega (nt pildi kasutus).

Atribuudid:

type= " submit | reset | button " vt <input>

name="nimi" nupu sümboolne nimi

value="väärtus" algväärtus (nt value="submit")

Näide:

<form action="mailto:juku11@hot.ee" enctype="text/plain" method="post" name="vorm">

<button type="reset" value="reset" name="reset">Reset<Img src="pilt.gif"

alt="klõpsa"></button>

</form>

Element <select>…</select> on valikmenüü, kus kasutaja saab valida ühe valiku <option>

elementide abil. Vähemalt 1 valik peab olema alati.

Elemendi <select> atribuudid:

name="nimi" valikmenüü nimi, mis saadetakse koos teiste andmetega

size="x" korraga ekraanil näidatavate valikute (ridade) arv, ülejäänuid saab

kerimise abil vaadata.

multiple lubatakse valida korraga mitut

Element <option>…</option> abil tehakse valikud elemendis <select>

Kodulehekülje koostamine Lisa 1

32

Elemendi <option> atribuudid:

value="väärtus" valiku väärtus, mis tagastatakse koos vormi teiste andmetega

selected näitab, et see atribuut on algväärtusena juba valitud

Näide

<select name="Haridus">

<option >Kesk</option>

<option >Kõrg</option>

</select>

Element <textarea>…</textarea> on suuremate tekstide sisestamiseks.

Elemendi <textarea> atribuudid:

name="nimi" tekstipiirkonna nimi

rows="x" vormi kõrgus ridades

cols="y" vormi laius sümbolites

Näide

Täiendav info:<br>

<textarea name="info" rows="3" cols="30"></textarea>

Elementi <label>…</label> kasutatakse teksti (märgendi) ja sellele järgneva <input> elemendi

sidumiseks.

Atribuudid:

For="elemendi_ID" määrab, missuguse vormi elemendi jaoks ta silt on

Näide:

<label for="Taevas">Taevas: <input type="radio" name="Valik" value="Taevas"

ID="Taevas"><label><br>

<label for="Maa">Maa: <input type="radio" name="Valik" value="Maa" ID="Maa"><label><br>

Elemendi <fieldset>…</fieldset> abil saab teematiliselt seotud märgendeid grupeerida.

Elemendi <legend>…</legend> abil saab lisada pealkirja elemendile fieldset.

Elemendi legend atribuudid:

align="left | right | ceneter | top | bottom" - elemendi legend paigutuse joondamine

Kodulehekülje koostamine Lisa 1

33

<html>

<head>

<title>Vormid</title>

<style type="text/css"> .abs{position:absolute;left:200} </style>

<script language="Javascript">

function teata(){

alert("Tänan! Klõpsa saada nuppu, ankeedi puhastamiseks aga Puhasta nuppu.");}

</script>

</head>

<body bgcolor>

<b>Täitke alljärgnev ankeet:</b>

<br>

<form action="mailto:juku11@hot.ee?subject=Ankeet" enctype="text/plain" method="post" name="vorm">

<Div style="position:absolute;left:50">

<fieldset>

<legend>Vastaja </legend>

Eesnimi:<span class="abs"><input name="eesnimi" type="text"></span><br>

Perekonnanimi:<span class="abs"><input name="perekonnanimi" type="text"></span><br>

Email:<span class="abs"><input name="email" type="text" ></span><br>

S&uuml;nniaasta:<span class="abs"><input name="aasta" type="text" maxlength=4></span><br><br>

</fieldset><br><br>

Sugu:<span class="abs"><input name="sugu" type="radio" value="Naine">Naine

<input name="sugu" type="radio" value="Mees" >Mees </span><br><br>

Keelteoskus:<span class="abs">

<input name="keeled" type="checkbox" value="vene"> Vene <br>

<input name="keeled" type="checkbox" value="inglise"> Inglise<br>

<input name="keeled" type="checkbox" value="saksa"> Saksa <br>

<input name="keeled" type="checkbox" value="prantsuse"> Prantsuse <br>

<input name="keeled" type="text" value="muu">

</span><br><br><br><br><br><br>

Haridus:<span class="abs">

<select name="Haridus" title="Sinu haridus">

<option >Alg</option>

<option >Põhi</option>

<option selected>Kesk</option>

<option >Kõrg</option>

</select>

</span><br><br>

Täiendav info:<span class="abs">

<textarea name="Info" rows="3" cols="30"></textarea>

</span>

<br><br><br><br>

Valitud parool:<span class="abs">

<input type=password name="parool" size=6 maxlength=11></span><br><br>

<span class="abs">

<input type="button" value="Valmis" onClick="javascript:teata()" >

</span><br><br>

<fieldset>

<legend align=center>Andmete saatmiseks klõpsa <b>saada</b> nuppu </legend>

<input type="reset" value="Puhasta" >&nbsp;&nbsp; &nbsp;<input type="submit" value="Saada" >

</fieldset><br><br>

</Div>

</form>

</body>

</html>