Veebilehe tegemiseks kasutatakse erilist sümbolite süsteemi ehk keelt - HTML-i (Hypertext Markup Language - "hüperteksti märkimiskeel"). HTML ei ole programmeerimiskeel ja veebi tegemine ei eelda programmeerimisoskust, ehkki see võib aidata asja kiiremini selgeks saada (ja ka vastupidi - HTMLi omandamine võib olla heaks eelduseks programmeerimise õppimisele).
Vahemärkusena võiks öelda - ka ainult HTML-iga on võimalik luua väga ilusaid ja informatiivseid veebilehti, eriti kasutades uusimate versioonide võimalusi. Professionaalne veebikujundus kasutab lisaks HTMLile ka mitmeid teisi tehnoloogiaid, kuid neid tuleks vaadelda kui lisavõimalusi, mitte kui baasmaterjali.
Veebilehel on lühidalt öeldes kaks peamist koostisosa - sisu ja vorm. Sisu all mõistame materjali, mida soovime lugejale esitada (tekst, pildid, helid), vormi all aga selle materjali esitusviisi määratlevat mehhanismi. Vormi peamiseks esitusviisiks on märgendid (tag), mis määravad lehe eri osade väljanägemise ja ülesanded. Märgendeid kirjutatakse < >-märkide vahele ja kasutatakse tüüpiliselt näiteks nii:
Siin on üks <b> eriti tähtis </b> asi. - "Eriti tähtis" on paksus kirjas.
Märgendeid kasutatakse reeglina paarikaupa - vormitava lõigu alguses ja lõpus (erijuhtudest on juttu järgnevas punktis). Lõppmärgend erineb algusmärgendist kaldkriipsu poolest märgendi alguses.
Vajadus luua standardseid dokumente, kus sisu ja vorm oleks üksteisest eraldatud, on märksa vanem kui veeb - samu põhimõtteid rakendati ka paberdokumentatsiooni ettevalmistamisel. Nii loodi 70. aastatel [L] SGML - Standard Generalized Markup Language - , millest loodeti üldkasutatavat standardit igasuguse dokumentatsiooni koostamiseks. See osutuks aga suuremahuliseks ning üpris keerukaks ja kohmakaks süsteemiks ning enamik dokumente koostati muul viisil (nagu [L] TeX või [L] PostScript). See sai ka üheks veebi leiutamise ajendiks - luua standardne dokumendiesitusviis, mis oleks samas ka lihtsalt õpitav ja arusaadav. Nii tuletatigi SGMList [L]HTML - HyperText Markup Language.
HTMLi esmane ametlik spetsifikatsioon ([L] versioon 1.0) ilmus 1993. aasta paiku. Standard võimaldas kasutada lihtsaid tekstivorminguid (lõik, reavahetus, nimistud) ja lihtsat graafikat. Järgnes otsingute periood (HTML 1.1, [L] HTML+), mil mitmed osapooled pakkusid välja uusi tehnikaid, millest suur osa jäi piisava toetuse puudumisel kõrvale (kuid mitmed neist leidsid oma koha hilisemates versioonides. Kokkuleppele jõutud materjali põhjal aga loodi [L] HTML 2.0.
Versioon 2.0 aastast 1995 oli esimene laialdaselt heakskiidetud standard, mis võimaldas lisaks eelnevale kasutada ka sisestusvorme (need aga eeldavad töötlustarkvara olemasolu serveris)
Versioon 3.2 aastast 1997 - järgmine suurem standard (aasta varem ilmunud 3.0 jagas HTML+ saatust - palju uuendusi põhjustas lahkarvamusi ja standard ei leidnudki lõplikku heakskiitu), mis tõi laia kasutusse raamidega (frame, eesti keeles ka "paanid") lehed, samuti tabelid ning HTMLi-väliste vahenditega loodud valmisprogrammid (applets). Tagantjärgi peetakse ebaõnnestunud uuenduseks <font>-märgendit, mis oli mõeldud teksti välimuse määratlemiseks, kuid oli liiga jäik ja rikkus pealegi sisu ja vormi lahususe põhimõtet. Alternatiivina pakuti välja stiililehed ([L] CSS ehk Cascading Style Sheets) - ehkki ka nende puhul võttis ühisele arusaamisele jõudmine aega, tagasid nad siiski lehe loetavuse ka juhul, kui stiilimääranguid mingil põhjusel kasutada ei saanud. Märkida võib ka asjaolu, et lõigumärgend <p> muutus alles siin paarismärgendiks - eelnev standard sätestas selle üksikuna.
Versioon 4.0 aastast 1997/98 ja varsti järgnenud parandatud versioon [L]4.01 olid viimased klassikalise HTMLi versioonidest. Olulise muudatusena viidi kogu esituskuju määramisega tegelev osa (kirjastiilid, värvid jne) märgenditest välja (neid saab kasutada, kuid see on ebasoovitav) - stiililehed leidsid oma koha põhistandardis. Ka laiendati väliste objektide (eri programmeerimiskeeltes loodud skriptid jms) lisamise mehhanismi. Viimase suure muutusena oli erinevate keelte parema toetuse lisamine - seni oli HTML olnud üsna ladina tähestiku keskne.
2000/2001. aastast pärineb teine laialt kasutatav SGMLi tuletis - [L]XML ehk Extensible Markup Language. Kui HTMLi eesmärgiks oli võrgudokumentide loomine võimalikult lihtsal viisil (ja seetõttu keskendus sageli rohkem nende ekraanivälimusele kui struktuurile), siis XML lähtub suuremal määral SGMLi algsest eesmärgist - luua hea struktuuriga dokumente. XML on tänaseks leidnud kindla koha failiformaatides (näiteks OpenOffice-i dokumendid põhinevad XMLil, ka Microsoft kavatseb oma tulevased dokumendiformaadid sellele rajada). Muuhulgas eristab XMLi HTMList ka võimalus ise märgendeid luua.
HTMLi ja XMLi "kokkusulatamisel" aastatel 2000-2002 saadi [L] XHTML, mis käesoleva materjali kirjutamise ajal on W3C ametlikuks soovituseks. XHTMLi eripäraks varasemate versioonidega võrreldes on mõnevõrra suurem rangus - kõik märgendid on paaris, nõutav on väiketähtede kasutamine märgendites (XML on tõstutundlik) jne. Põhimõtteks on saavutada ühilduvus XMLiga, samal ajal täites ka HTML 4.01 nõudeid - seega oli XHTML 1.0 puhul tegu mitte otseselt uue HTMLi versiooniga, vaid HTML 4.01 "uuestikirjutamisega" läbi XMLi reeglistiku. XHTMLi viimane ametlikult ilmunud versioon 1.1 kujutab endast mõningaid tehnilisi muudatusi eelmises versioonis (modulaarsuse ja puhtama XMLi suunas), kuid teisalt ei toeta 1.1. versioon enam vanu veebilehitsejaid - seetõttu tasub esialgu jääda 1.0 juurde. XHTML 2.0 ilmub arvatavasti lähema aasta jooksul (hetkel on väljas draft 7) ja muudab ära mitmed seni kasutusel olnud tehnikad (näiteks piltide lisamine).
Tuleb märkida, et erinevalt tarkvarast ei ole veebimaastikul sugugi nii oluline "viimase vingeima versiooni" tagaajamine. Väga palju veebikehti kasutavad endiselt üsna vanu standardeid - ilmselt vastab enim veebilehti käesoleval ajal veel HTML 4.0/4.01 standardile, kuna ka paljud veebitegemisprogrammid generereerivad just sellele standardile vastavaid lehti. Märksa olulisem kui uusim standard on aga üldse mingi standardi järgimine - lehti, mis vilistavad absoluutselt kõigile standarditele, on veebis kaugelt liiga palju. Paraku on ka selles vallas vaja visata kivi Microsofti kapsaaeda - selle firma veebivahenditel (olgu siis tegu IE või Frontpage'iga, rääkimata MS Office'i HTML-funktsioonidest) on pikk traditsioon standarditest suure kaarega mööda käia.
Mõned tähtsamad muutused HTMLi ajaloo jooksul:
HTML-dokumendil on mõned kohustuslikud märgendid, mis määravad dokumendi piirid ja põhilise jaotuse. Esmalt tuleb määrata "algus ja ots" ehk dokumendi piirid. Varem oli asi hoopis lihtne:
<HTML>
dokumendi tekst
</HTML>
Seoses XMLi nõuetega XHTMLis on siin asi mõnevõrra keerulisem - XML vajab lisaks veel infot lehekülje kodeeringu ja muu sarnase kohta. Nii on sama pilt näiteks XHTML 1.1-s selline:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="et" xmlns="http://www.w3.org/1999/xhtml"> dokumendi tekst </html>
Kahtlemata näib see algajale keeruline, kuid üldiselt võib selle algosa lahtiseletamise jätta hiljemaks ja kasutada sellist dokumendipäist mõnda aega lihtsalt pimesi. Kommentaariks siiski niipalju, et:
Tähelepanuks veel - XHTML puhul on dokumendi tüübidefinitsioone tegelikult kolm - range variant (strict), rohkem vabadusi andev ja enam HTML 4.01-e meenutav üleminekuvariant (transitional) ja raamide kasutamist võimaldav variant (frameset). Versioon 1.1 aga lähtub vaid rangest variandist, seega on siin taas vaid üks DTD. Alljärgnev materjal aga kasutab XHTML 1.0 Transitional-definitsiooni, mis on laialt kasutusel ja suuremate võimalustega.
Nagu näeme, on ka märgendite kirjaviis erinev - vanas versioonis kasutati suurtähti, uues väiketähti.
Kõige laiemas laastus jaguneb HTML-dokument "peaks" ehk päiseks ja "kehaks" ehk põhiosaks. Päis on mõeldud dokumenti iseloomustava info jaoks, selle sisse aga paigutatakse omaette <title>-märgendite vahele dokumendi pealkiri (ilmub brauseri lugemisaknas harilikult selle ülaserva). Seega on dokumendi üldine ülesehitus järgmine:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Minu esimene veebileh </title> </head> <body> dokumendi tekst </body> </html>
Nagu juba pealkiri ütleb, on veebilehe esmaseks otstarbeks midagi öelda. Seega moodustab lehe põhiosa tekst, mida saab erinevate vahenditega esile tõsta. HTML on päris algusest peale võimaldanud kasutada kõiki peamisi tekstitöötlustehnikaid - kohe vaatleme neid lähemalt.
Tavalist, ilma mingite lisailustustega teksti võib veebilehele sisuliselt kirjutada ilma mingeid märgendeid lisamata - enamik veebilehitsejaid suudab seda mõista (muidugi tähendab selline toimine vilistamist kõigi standardite peale).
Tuleb aga silmas pidada, et lehekülje lugemisel ei arvestata ühtegi sisestamisel Enter-klahviga tehtud reavahetust - seda selleks, et kindlustada teksti paindlik kujundamine brauseris (lugemisakna suurendamisel või vähendamisel paigutub aknas olev tekst vastavalt akna uutele mõõtudele automaatselt ringi). Kui soovime tekstis kasutada kindlaksmääratud reavahetust, tuleb see panna paika <br>-märgendiga (tuleneb sõnast break - murdekoht, katkestus). Näiteks:
Kogu see lause, mille ma nüüd siia kirjutan, paistab näiteks Mozillaga suures aknas lugedes ühe pika
lausena kuni siiani,<br></br>
see tekst aga on uuel real.
Siin näeme jällegi üht olulist muutust, mille XHTML on kaasa toonud. Varasemas HTMLis piisas katkestuse tegemiseks üksikust <br>-märgendist, nüüd aga on kõik märgendid paaris. Et aga selle ja veel mõne teise tühja märgendipaari kasutamisel tööd kokku hoida, on loodud alternatiivne esitus:
<br></br> => <br />
Tähelepanu - kaldkriipsu ees on tühik! See säästab vanemaid brausereid, mis XHTMLi ei tunne, "lolliks minemisest" - tühik võimaldab neil järgnevat kaldkriipsu ignoreerida ja tõlgendada märgendit veidi vigase, kuid siiski loetava "vana HTMLi" märgendina.
Seega võiksime eespooltoodud näite kirjutada XHTMLis ka nii:
Kogu see lause, mille ma nüüd siia kirjutan, paistab näiteks Mozillaga suures aknas lugedes ühe pika lausena
kuni siiani,<br />
see tekst aga on uuel real.
Arvutiajastu tekstikujunduses ei kasutata enam lõigu alguses teksti nihutamist ehk taandrida, selle asemel jäetakse lõigu ette pikem reavahe või tühi rida. HTML-is tähistatakse uut lõiku <p>-märgendiga ( paragraph). <p> on alates HTML 3.2-st paarismärgend (lõigu alguses ja lõpus), kuid sageli jäeti ka hiljem kuni XHTMLi ilmumiseni </p> lõigu lõppu panemata. Korrektne on aga siiski kasutada märgendit nii lõigu alguses kui lõpus - ja tänaseks on XHTML teinud selle ka kohustuslikuks. <p> erineb <br /> - reavahetusest suurema reavahe poolest lõigu ees ja järel.
Väga paljud HTMLi märgendid lubavad kasutada täpsustavaid määranguid ehk parameetreid. XHTMLi tulekuga on muutunud rangeks reegliks järgnev kuju parameetrite kirjutamisel (parameetreid võib olla mitu, kuid need kõik tuleb kirjutada samal viisil):
<märgend parameeter1="väärtus1"> dokumendi tekst </märgend>
<p>-märgendi parameetritest kasutatakse sageli lõigu positsioonimäärangut lugeja aknas - kas vasakul, keskel või paremal (vastavalt left, center või right). Selleks lisatakse märgendisse align-parameeter:
<p align="center">
Vahel tuleb siiski tekst esitada fikseeritud kujul - näiteks luuletus või laulutekst. Siin on kõige käepärasemaks kasutada <pre>- märgendipaari (preformatted ehk eelvormindatud), mille vahel olev tekst kuvatakse täpselt selliselt, nagu ta on sisestatud (tõsi, ka sellise juhtumi korral tuleks võimalusel kaaluda stiililehe kasutamist, kuna <pre> on jäik ettekirjutus ning võib mõnel juhul muuta lehe hoopis raskemini loetavaks). Näiteks:
<pre> Tulin linnast lumesadu tööd ei leidnud kusagilt </pre>
Enamasti näitavad veebilehitsejad eelvormindatud teksti teistsuguses kirjastiilis kui tavalist teksti - levinuim on Courier-stiil.
Pealkirjamärgendeid on 6, eri suuruse ja stiiliga. Üldkuju on selline:
<hx>Pealkiri </hx>
x tähistab siin numbrit ühest kuueni - <h1> on suurim ja <h6> väikseim pealkiri. Pealkirjad paigutatakse automaatselt omaette reale, reavahetussümboleid ei pea kasutama.
Tasub meelde jätta, et <h1>-märgendeid kasutatakse ainult suurte lehekülgede avapealkirjas - kaks <h1>-pealkirja mõjuvad liigse karjumisena. Alapealkirjadele on sobivaimaks formaadiks <h3> või <h4>. Näiteks nii:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Aadu arvutiäri </title> </head> <body> <h1>Aadu arvutiäri</h1> <h2>Tere tulemast!</h2> <p> ( siin on avatekst, tervitus vms.) </p> <h4>Arvutid</h4> <p> (tekst)</p> <h4>Tarkvara</h4> <p> (tekst)</p> </body> </html>
Uuemad brauserid saavad küll aru näiteks Windowsis kirjutatud ja täpitähti sisaldavast leheküljest, kuid mõnes muus süsteemis (näiteks Unixi terminalilt) kirjutamisel võib tekkida probleeme - töökoha klaviatuuril võivad täpitähed lihtsalt puududa. Sel juhul tuleb asendada erisümbolid (paraku on anglofiilist arvutile meie jaoks omased täpitähed ikkagi vaid erimärgid!) neid esindavate koodidega. Seda tehakse kahel võimalikul moel:
1)Sümbol "&", numbritähis "#", vastava tähemärgi kood (näit. 64 - @), semikoolon
2)Sümbol "&", "alusmärk" (näiteks "a"), "efektikood" (näiteks "uml"), semikoolon
Teise meetodi korral saadakse märk mingist standardsest tähest, millele lisatakse mingi täiendav osa (täpid, kriips vms). Eesti tähtede puhul vajatakse lisaefektina täppe (uml - tuleneb saksa Umlaut'ist, kuna saksa keel on ilmselt maailma tuntuim keel, kus kasutatakse täpitähti), ja lainelist joont ehk tildet (tilde), seega kirjutatakse neid nii:
ä - ä ö - ö ü - ü õ - õ (suurtähed kirjutatakse analoogiliselt)
HTMLi areng on üha enam liikumas stiililehtede kasutamise suunas (sisu ja vormi lahusus) ning seetõttu on ka siintoodud märgendid ilmselt määratud mõne aja pärast taanduma. Et nad aga siiani standardis sees on, siis vaatleme lühidalt levinumaid tehnikaid tekstirõhutuste tegemiseks.
Teksti erinevaid rõhutusi - rasvast kirja, kaldkirja, allajoonimist jms - saab HTML-is teha kahel viisil. Esmalt nn. füüsilised märgendid - <b> (bold - rasvane kiri), <i> (italic - kaldkiri), <u> (underline - allajoonimine) jne, mis määravad väljastuse välise kuju. Teine, üldiselt soovitavam võimalus on aga kasutada loogilist märgendamist, mis annab paindlikuma esiletoomise - iga brauser saab kasutada omaenda rõhutusmehhanisme (kui kasutatav brauser ei suuda näidata kaldkirja, saab selle asendada mõne muu rõhutusviisiga). Enamasti pruugitakse järgmisi märgendeid:
<strong> - tugev rõhutus, harilikult rasvane kiri <em> - rõhutus, tavaliselt kaldkiri või rasvane kaldkiri <dfn> - definitsioon, tavaliselt rasvane kaldkiri <cite> - tsitaat, tavaliselt kaldkiri <code> - programmitekst, tavaliselt sansseriikiri (nagu <pre>) <blockquote> - taandega lõik, mille ees ja taga on tühi rida (nagu <p>)
Siin äratoodud loetelu ei ole lõplik - on veel teisigi võimalusi.
Indeksite esitamiseks (nihkega üles või alla) on märgendid <sup> (superscript - ülemine indeks) või <sub> (subscript - alumine indeks). Vahel tuleb kasutada ka teksti läbikriipsutamist - selle saavutame <strike>-märgendi abil.
NB! Siinkohal oleks ilmselt sobiv mainida veel üht asjaolu, mis XHTMLi tulekuga rangemaks läks. Nimelt ei ole seal lubatud põimitud märgendipaare, nagu näiteks
<em>Niimoodi <strong>küll</em></strong> ei tohi seda kirjutada.
Seega erinevate märgendipaaride kasutamisel peab üks paar asuma tervikuna teise sees, mitte aga vaheliti. Sama lause sellisel kujul
<em>Niimoodi <strong>küll</strong>lt;/em> ei tohi seda kirjutada.
on aga korrektne.
Ja veel üheks soovituseks on jätta tühikud väljapoole vormindamismärgendeid, mitte nende sisse - vastasel juhul võib mõni veebilehitseja neid ignoreerida. Seega mitte
Niimoodi<strong> küll </strong>ei tohi seda kirjutada.
vaid hoopis nii:
Niimoodi <strong>küll</strong> ei tohi seda kirjutada.
HTML võimaldab teha järjestamata ja järjestatud loendeid. Järjestamata loend luuakse <ul>-märgendiga (unordered list), loendi iga element tähistatakse <li>-märgendiga (list item). Näiteks nii:
<ul> <li>Kapsad</li> <li>Kaalikad</li> <li>Porgandid</li> </ul>
Tähelepanuks - algselt oli <li> üksikmärgend, kuid hilisemad versioonid soovitasid kasutada ka lõpumärgendit (nagu <p> puhul) ning XHTMLis on see kohustuslik.
Veel üks märkus: eriti suuremate veebilehtede koostamisel on mõistlik kasutada programmeerimisest laenatud võtet - treppimist (vt. eelmine näide) ehk tühikute kasutamist erinevate struktuuride paremaks esiletoomiseks. Ehkki HTML ei arvesta tühikuid rea ees ja lehe väljund <li>-märgendite ette löödud tühikutest ei muutu, on sellist HTML-koodi palju kergem lugeda (seda eriti pikkade lehtede puhul) ja ka hallata.
Soovi korral saab <ul>-märgendit täiendada elemendi ette asetatava märgi kindlaksmääramisega:
<ul type="square"> (loendi elemente tähistavad ruudukesed).
Järjestatud loendi (<ol> - ordered list) tegemine on igati samalaadne. Erinevuseks on võimalik tüübimääramine - kui tüüpi ei määrata, nummerdatakse elemendid järjekorras araabia numbritega. Võimalikud tüübivariandid on järgmised:
Näiteks: <ol type="I"> - suurte rooma numbritega loend.
Loendi mingile elemendile saab panna järjekorranumbri ka üldisest numeratsioonist sõltumatult - selleks peab elementi määravasse <li>- märgendisse lisama value-parameetri. Näiteks selliselt:
<ol type = "a"> <li value="j">loendi elemendi tekst </li> </ol>
Kommentaari all mõeldakse teksti, mille eesmärgiks on selgituste andmine veebilehe eri osade kohta. Kommentaar on nähtav ainuüksi veebilehe koodis, brauseriga lehe vaatamisel teda näha ei ole. HTMLis oli kommentaari üldkuju selline:
<!-- see on kommentaar -->
XHTMLi tulekuga lisandus XML-i stiilis kommentaar:
<![CDATA[see on kommentaar]]>
Käesoleva materjali kirjutamise hetkel kehtivad paralleelselt mõlemad vormid, kuid ilmselt kaldub vaekauss teise variandi kasuks.
Kommentaaride lisamine on kasulik eeskätt neis kohtades, kus on kasutatud keerulisemaid konstruktsioone või on olukord sundinud appi võtma mõne ebatavalise lähenemise.
Meie senitehtud töö on tegelikult sarnane mistahes tekstitöötlusprogrammis loodud dokumendiga - sisestame teksti ning kujundame seda vastavalt oma vajadustele. Nüüd aga lisame oma dokumendile selle, mis tegelikult veebi nii populaarseks on teinud - ühendused teistele lehekülgedele.
Viidete lisamise eelduseks on muidugi asjaolu, et me teame nende taga peituvate dokumentide sisu ja see on mingisuguseks täienduseks meie lehel öeldule. Väga veider on vaadata lehte, kus on kõrvuti ühendused Valgesse majja ja Playboy kodulehele - kui veel arvestada, et harilikult on sellise lehekülje enda sisu nullilähedane, siis puudub sellisel üllitisel tegelikul igasugune otstarve.
Kaugviite all mõtleme viidet mõnda teise Interneti-arvutisse. Sellise viite lihtsaim üldkuju on järgmine:
<a href="soovitud URL">Viite tekst</a> (URL kohta vt. peatükki 1.3.4)
Näide:
<a href="http://www.ttu.ee/users/jyri/"> Jüri lehekülg </a>
Kaugviite URL koosneb seega WWW-dokumendi tunnusest (http://), arvuti aadressist (www.ttu.ee) ja kataloogidest, mida mööda dokumendini jõuda (/users/jyri).
Uuem standard näeb üldiselt ette ka viidete kirjeldamise title-parameetriga - see aitab nii tavalise veebilehitseja kasutajat (hiirekursori viimisel viite tekstile kuvatakse kursori juures vastav kirjeldus) kui alternatiivsete meetoditega (näiteks pimeda inimese ekraanilugeja) veebi lugevat inimest. Niisiis on viisakas kirjutada nii:
<a href="http://www.ttu.ee/users/jyri/" title="Jüri Juurika kodulehekülg"> Jüri lehekülg </a>
Siin on veel üks asjaolu, mida tuleks arvestada. Enamikus veebiserverites on igal kasutajal võimalik luua oma kataloogi alla kindlaksmääratud nimega alamkataloog, kuhu paigutada oma veebilehed (nimega public_html, html.docs vmms). Väljaspool seda kataloogi asetsevad leheküljefailid ei ole lugejale kättesaadavad. Veebikataloogi enda nime aga URL-i ei lisata. Näitena toodud kasutajakataloogis /users/jyri/ on veebilehtede jaoks tegelikult veel kolmas alamkataloog public_html, mida aga URL-i ei lisata, samuti ei määrata ka dokumendi nime (URL lõpeb katalooginimega ja kaldkriipsuga) - eeldatakse, et public_html kataloog sisaldab dokumenti nimega index.html või welcome.html (täpne loetelu sõltub konkreetse veebiserveri häälestuest). Sellise nimega dokumendi puudumisel annab see URL lugejale veateate ("404 File Not Found").
Lähiviite all mõtleme viidet samas arvutis asetsevale dokumendile. Lähiviidete (ja ka kaugviidete) õigeks kasutamiseks peame teadma kataloogide struktuuri ja failide asukohta sihtkohaks olevas arvutis. Veebiserverites on peaaegu eranditult puukujuline kataloogistik - s.t. on olemas peakataloog, millest hargnevad "puuokstena" alamkataloogid, nendest omakorda nende alamkataloogid jne.
Kui nüüd nii Jüri, Mari kui Ats hakkavad endale kodulehti tegema, loovad nad esimeseks leheks automaatselt tuvastatava lehekülje - enamasti nimega index.html või welcome.html. Jüri on loonud oma kataloogi kaks lehekülge - index.html (avalehekülg) ja teine.html. Kui Jüri soovib nüüd viidata oma ühelt lehelt teisele, lisab ta näiteks index.html-ile sellise viite:
<a href="teine.html" title="Jüri teine leht"> Minu teine lehekülg </a>
Kuna leheküljed asuvad ühes ja samas kataloogis, piisab URL-iks vaid failinimest.
Kui Mari tahab lisada oma lehele viite Jüri koduleheküljele, kirjutab ta sellise viite:
<a href="../jyri/" title="Minu sõbra Jüri kodukas"> Jüri kodulehekülg </a>
Kuna URLi ei lisata veebikataloogi nime (public_html) ja antud juhul ka mitte soovitava faili nime (otsitav on index.html), siis piisab vaid katalooginimest (jyri). Selleni jõudmiseks tuleb aga teha kataloogipuus samm tagasi (kataloogi users) ja siis alles astuda Jüri kataloogi. Tagasisammu märgitakse kahe punktiga (..).
Täpselt samasuguse tulemuse aga annaks ka kogu Jüri kataloogile eelneva kataloogistiku lisamine URLi - seega saaks ka nii:
<a href="/users/jyri/" title="Minu sõbra Jüri kodukas"> Jüri kodulehekülg </a>
Siin tähistab esimene kaldkriips peakataloogi.
Kui aga Mari soovib viidata Jüri teisele leheküljele, peab ta lisama ka failinime (kuid jällegi jätab välja public_html-i!):
<a href="/users/jyri/teine.html" title="Jüri tegi teise lehe ka"> Jüri teine lehekülg </a>
Siseviite all mõistame sama dokumendi piires toimivat viidet. Siseviited on eriti heaks abiliseks pikkade ja keerulise sisuga dokumentide korral (teadusartiklid jms.). Ka on pikema dokumendi puhul heaks tooniks lisada dokumendi algusesse siseviidetest koosnev sisukord, millelt saab "hüpata" otse huvipakkuvale lõigule. Muidugi on siinkohas mõistlik tuletada meelde ka soovitust mitte panna ühte faili ülearu pikki tekste - kuid kui vahel on seda siiski vaja teha, siis kasutame siseviiteid.
Siseviite määramiseks tuleb ära märkida nii viide ise kui ka koht dokumendis, kuhu viidatakse. Näiteks soovib Mari panna oma retseptikogu Internetti kõigile lugeda. Retsepte on aga palju ja seepärast tuleks iga retsepti algusesse kirjutada nimeviide. Näiteks seljanka juurde (paneme tähele XHTMLi tühja märgendi lühikujule vastavat märgendilõppu tühiku ja kaldkriipsuga!):
<a name= "Seljanka" />
Dokumendi algusesse aga tuleks teha sisukord, mis võiks olla näiteks selline:
<a href="#Bubert"> Bubert </a> <br /> <a href="#Kotletid"> Kotletid </a> <br /> <a href="#Seljanka"> Seljanka </a> <br /> <a href="#Vahvlid"> Vahvlid </a> <br />
Üks märkus siiski - selline kood on igati standardne, kuid ühes mõttes siiski kehv. Nimelt on pimedate, ekraanilugejaga veebi kasutavate inimeste üheks peamiseks probleemiks viidete eristamine muust tekstist või teistest viidetest (seepärast on muuhulgas mõistlik vältida tekstiseseid viiteid või kasutada nende ees mingit kindlaksmääratud tähistust, mis järgnevast viitest teada annab!). Siin jääb erinevate viidete vahele vaid reavahetus - kasulik oleks sõnastada viited nii, et nad sisaldaks ka eraldajana toimivat tavateksti. Näiteks:
<a href="#Bubert"> Bubert </a> (õppisin emalt) <br /> <a href="#Kotletid"> Kotletid </a> (vanaema moodi) <br /> <a href="#Seljanka"> Seljanka </a> (Jüri keedab seda, sest ta muud eriti teha ei oska) <br /> <a href="#Vahvlid"> Vahvlid </a> (õe firmakas) <br />
Siseviide on seega viide nimega märgitud kohale samas dokumendis. Nime ette käib sümbol "#" (nn. trellid). Kui nüüd Jüri sooviks oma lehelt viidata ühele retseptile Mari kokaraamatus (olgu selle faili nimeks toidud.html), peaks tema viide nägema välja nii:
<a href="/users/mari/toidud.html#Tort" title="Mari tort - nämm-nämm!"> Mari fantastilise tordi retsept </a>
Siiani tegime oma lehekülge n.ö. ühes suunas - meie teeme ja teised loevad. Kui aga soovime saada teada oma lugejate arvamust või muud tagasisidet, on lihtsaimaks võimaluseks lisada oma lehele elektronpostiviide. See on analoogiline tavalise viitega, kuid teisele lehele viimise asemel käivitab lugeja arvutis brauseriga määratud E-postiprogrammi (Outlook, Evolution, Pegasus, Pine vms.). Selle meetodi kasutamine eeldab meie lugejailt E-postiprogrammi olemasolu ja brauseri vastavat häälestust - seega ei garanteeri leheküljele pandud viide lugejale reaalset võimalust meile teadet saata (kuid annab vähemalt teada meie aadressi, kuhu seda hiljem läkitada). Kindla teateedastusmeetodina tuleb kasutada sisestusvorme (mida me siinkohal ei käsitle). E-postiviide lisatakse leheküljele nii:
<a href="mailto:jyri@marvin.ttu.ee"> Jüri Juurikas - jyri@marvin.cc.ttu.ee </a>
Seega asendatakse E-postiviites hüpertekstilehekülje tunnus (http://) postitunnusega (mailto:) ning URL adressaadi E-aadressiga, muus osas on viide sama.
Varem oli siin ka soovitus kirjutada E-aadress lisaks viitele endale ka viite teksti - kui lugeja soovib seda endale üles kirjutada või meelde jätta, ei pea ta hakkama viidet ennast "torkima". See põhimõte ei ole iseendast valeks muutunud, kuid paraku on suure osa inimeste rumalus olukorda mõneti karmistanud. Jutt on muidugi spämmist ehk rämpspostist.
Raskema kategooria spämmilevitajad kasutavad aadresside kogumiseks veebi otsimootoritega samal põhimõttel toimivaid otsiroboteid - kui kuskil veebilehel leidub meiliaadressi meenutav tekstilõik (tüüpiliselt siis mingitekst@mingitekst), salvestatakse see roboti poolt automaatselt andmebaasi. Kui tegu on reaalselt töötava veebiaadressiga, hakatakse sinna varsti saatma üleskutseid osta Viagrat, pornolehti ja vanu pükse - loomulikult aadressiomanikult selleks luba küsimata. Probleemi saab lahendada mitmeti:
Veebilehte ei kujutata tänapäeval enam ilma graafikata ettegi. Loomulikult annab oskuslikult valitud ja paigutatud pildimaterjal lehele palju juurde, samas aga meenutagem kaht asja. Esiteks - esimesed veebilehed olid hoopis ilma graafikata ning sisaldasid ainult teksti ja viiteid, ka praegu koostatakse nii mõnedki leheküljed samadel alustel. Teiseks - on palju kasutajaid, kes kas siis tehnilistel (nõrgem arvuti, tekstikuvar, aeglane modemiühendus, tekstibrauser jne) või isiklikel (nägemispuue) põhjustel ei saa graafiliselt esitatud infot kasutada. Seda arvestades tuleks graafika lisamisel järgida põhimõtet "nii palju kui vajalik, nii vähe kui võimalik". Macromedia Flashil põhinevate veebilehtede lai levik on kogu probleemile andnud veel hoopiski uue mõõtme - täiesti Flashi-põhise lehe jaoks tuleb harilikult luua eraldi HTMLis alternatiivversioon.
Tervenisti graafiliste lehekülgede lugejaid kummitavad järgmised probleemid, millest tihtipeale autoril aimu pole:
Kui mingil põhjusel on ikkagi tarvis luua sedasorti lehekülg, peaks tegija mõtlema ka alternatiivlehekülje loomisele. See sisaldagu kas ainult teksti (s.h. põhilehekülje tähtsamate piltide sõnalisi kirjeldusi) või minimaalselt graafikat.
Tavalise pildi paigutamine veebilehele toimub kõige lihtsamal kujul selliselt (jällegi XHTMLi lühikujul):
<img src="pildifaili nimi" />
Siiski on siin hulk parameetreid praktiliselt kohustuslikud. Kõige rohkem räägitud on neist ilmselt alt - pilti lühidalt kirjeldav alternatiivtekst, mida näeme tekstibrauseris (sisutu teksti [IMAGE] asemel) või ka graafilises veebilehitsejas, kui viime hiirekursori pildile.
<img src="foto.gif" alt="Foto - mina, vanaema ja meie kass." />
On ka juhuseid, kus kirjeldamisel ei ole mõtet - näiteks lõigu algust märkivate graafiliste sümbolite (pallikesed, tärnid jms) puhul. "Siin on sinine muna"-sarnane kirjeldus ei ole eriti informeeriv. Sellisel juhul tuleks alt-parameeter ikkagi lisada, vältimaks "[ IMAGE ]"-märget, kuid jätta kas tühjaks (alt="") või panna kirjelduseks näiteks tärn vms.
Teiseks abistavaks parameetriks alt-i kõrval on longdesc - viide tekstifailile, kus asub pikem tekstiline kirjeldus pildi kohta. Rangelt võttes on see hädavajalik vaid ülisuurt infomahtu kandvate piltide juures, kuid puuetega kasutajate ligipääsunõuded (millel on suur võimalus muutuda lähiajal kohustuslikuks standardiks!) sätestavad ka selle parameetri praktiliselt kohustuslikuna. Niisiis:
<img src="foto.gif" alt="Foto - mina, vanaema ja meie kass." longdesc="fotokirjeldus.txt" />
Veel on mõistlik uurida välja meie kasutatav pildi mõõtmed pikselites ehk ekraanipunktides (seda saab teha nii veebilehitseja kui enamiku graafikaprogrammide abil) ja anda pildimärgendile parameetriteks ka pildi kõrgus ja laius - sellega vähendame kasutaja brauseri töökoormust ja tulemuseks on pildi kiirem laadimine. Niisiis:
<img src="foto.gif" alt="Foto - mina, vanaema ja meie kass." longdesc="fotokirjeldus.txt" width="200" height="140" />
Üheks kasulikuks võtteks on võimalus jätta pildi ümber vaba ruumi - selleks kasutame vspace- ja hspace- parameetreid (vastavalt vertikaalne ja horisontaalne ruum pikselites). Niisiis:
<img src="foto.gif" alt="Foto - mina, vanaema ja meie kass." longdesc="fotokirjeldus.txt" width="200" height="140" hspace="30" vspace="25" />
Ja viimaks saab pildi asukohta reguleerida ümbritseva teksti suhtes - seda teeb align-parameeter. Kui seda ei kasutata, paigutatakse pilt vasakusse ekraaniserva ning järgnevat teksti alustatakse pildi alaserva kõrvalt. Sagedamini vajatakse aga järgmisi väärtusi:
Seega meie näide võiks olla selline:
<img src="foto.gif" alt="Foto - mina, vanaema ja meie kass." longdesc="fotokirjeldus.txt" width="200" height="140" hspace="30" vspace="25" align="left" />
<img>-märgendil on veel mõningaid võimalikke parameetreid (spetsiifilisemate kasutusviisidega), kuid nendega tutvumine jäägu juba huviliste endi hooleks.
Veebis saab selle kirjatüki kirjutamise ajal kasutada kolme liiki graafikafaile - GIF-, JPEG- ja PNG-tüüpi. Jämedalt eristatuna on esimene teisest veidi parema kvaliteediga ja võimaldab oma uuemas, 89. aasta modifikatsioonis salvestada ka animatsiooni (vt. täpsemalt allpool), teine aga pastelsema väljanägemise ning väiksema mahuga. PNG on GIF-i sarnane puhaste värvitoonidega formaat, mis aga lubab suuremat värvitoonide arvu. PNG puhul on väikeseks miinuseks vähesem levik kahe esimesega võrreldes - ehkki tänased veebilehitsejad saavad üldiselt kõik ka selle formaadiga hakkama. Seepärast on - jällegi laias laastus - võimalik soovitada GIF-i joonistatud graafika ja väikeste fotode jaoks, JPEG-d aga suurte piltide ja fotode tarvis. Veebipoolseid ettekirjutusi kummagi formaadi kasutamiseks aga ei ole. Ilmselt vahetab millalgi tulevikus PNG GIF-i välja - seda enam, et GIF-i puhul on juba aastaid õhus kohtuvaidlus õiguste üle sellele failiformaadile. Kõik mainitud formaadid võimaldavad kasutada lisaefekte, millest tuntumad on läbipaistev taust (transparency) ja kihtesitus (interlaced GIF, progressive JPEG - pilt laetakse kihtidena, algne udune kujutis teravustub kiht-kihilt; võimaldab saada pildi sisust aimu varakult ja soovi korral suure pildi laadimine katkestada). GIF 89 standard lubab ka animatsioone - ühte GIF-faili salvestatakse multifilmina rida erinevaid kaadreid ning GIF-i laadimine käivitab animatsiooni.
Lehekülge looma hakates on ilmselt tarvis koguda endale vajaminev graafikamaterjal ning see siis oma veebikataloogi kopeerida. Kui tegu pole just paari-kolme pildiga, oleks otstarbekas luua veebikataloogi alla omaette alamkataloog graafika jaoks - suurtes, sadu pilte sisaldavates süsteemides võiks veel ka graafika ära sorteerida - fotod ühte, taustad teise, joonised kolmandasse, muu pudi-padi neljandasse "kasti". Sellisel juhul tuleb muidugi lisada katalooginimed ka graafikamärgendisse (lühiduse mõttes oleme jätnud suurema osa parameetritest siin kirjutamata, kuid see ei tähenda, et neid ei tuleks lisada!):
<img src="graafika/fotod/mari.jpg" alt= "Mari pilt" />
Nagu viidete puhul, saab ka graafika korral kasutada nii lähi- kui kaugviiteid. Näiteks kui Mari kirjutab oma kodulehele eespooltoodud graafikamärgendi (eeldades, et ta on loonud public_html alla alamkataloogid graafika ja fotod), siis Jüri, kes sooviks panna Mari pilti ka enda lehele, peab sinna lisama sellise rea:
<img src="/users/mari/graafika/fotod/mari.jpg" alt="Minu pruudi pilt" />
Kui aga Mari pilti tahab oma lehele panna näiteks Tartu Ülikoolis õppiv vend Volli, peab ta kas 1) kopeerima pildifaili mari.jpg oma arvutisse ja kasutama tavalist pildimärgendit, või 2) kasutama kaugviidet Mari pildile. Teise variandi korral näeks Volli lehe graafikamärgend välja selline:
<img src="http://www.ttu.ee/users/mari/fotod/mari.jpg" alt= "Minu õe pilt" />
Tõsi, kaugviiteid tasub kasutada vaid juhul, kui viidatav arvuti ei asu väga kaugel (vastasel juhul võib pildi lugemine võtta mõttetult palju aega) või pildi omanik ei luba mingil põhjusel seda teistel endale kopeerida.
Graafikat saab kasutada ka viidete tegemiseks kas siis viite teksti asemel või koos sellega. Selleks tuleb lihtsalt kombineerida graafika- ja viitemärgendid. Näiteks juba meil vaadeldud viide Jüri leheküljelt Mari lehele:
<a href="/users/mari/" title="Mari koduleht">Mari lehekülg</a>
Mari pildile viitamine aga käis nii (jällegi jättes osa parameetreid kirjutamata):
<img src="/users/mari/fotod/mari.jpg" alt="Mari pilt" />
Nüüd paneme need kaks kokku:
<a href="/users/mari/" title="Mari koduleht"><img src="/users/mari/fotod/ mari.jpg" alt="Mari pilt" /> Mari kodulehekülg </a>
Tulemuseks on viide tekstiga "Mari kodulehekülg", mille ees on samuti viitena toimiv Mari foto.
Veel ühe märkusena võib lisada võimaluse eemaldada pildi ümbert sinna vaikimisi pandav viidet tähistav raamjoon - selleks tuleb pildimärgendisse lisada parameeter border="0":
<a href="/users/mari/" title="Mari koduleht"><img src="/users/mari/fotod/ mari.jpg" alt="Mari pilt" border="0" /> Mari kodulehekülg </a>
Border-parameetrile saab anda väärtusi 0-st 7-ni - soovi korral saab raamjoone hoopiski paksuks teha (mida suurem number, seda paksem joon) ja nii pildile omapärase välimuse anda.
Kui ennist sai mainitud, et suurte piltide panemine pealeheküljele on halb mõte, siis tuleks nüüd vaadata, mida suurte piltidega teha tuleks. Lihtne variant on teha lehele vastavasse kohta lihtsalt viide:
<a href="pildifaili nimi" title="Minu sünnipäevapilt">Siin on suur pilt minu sünnipäevapeost (555 kB) </a>
Nagu näeme, on pildi kirjeldusele lisatud ka pildi suurus - enamik kasutajaid oskab siis hinnata, kas pilt pakub huvi ja kas on aega selle lugemist ära oodata.
Selle variandi miinuseks on asjaolu, et kasutaja, kes valib viite ja vaatab pilti, peab kasutama tagasiminemiseks brauseri tagurdusmehhanismi (mida mõnel vanal brauseril ei ole). Veidi soliidsem variant oleks teha eraldi lehekülg, mis sisaldab ainult pilti ja viidet tagasi alglehele. Seega on esilehel viide:
<a href="fotoleht.html" title="Minu sünnipäevapilt">Siin on suur pilt minu sünnipäevapeost (555 kB) </a>
ja pildilehel fotoleht.html pildi all viide tagasi (oletagem, et algleht on index.html):
<a href="index.html" title="Tagasi"> Tagasi esilehele </a>
Ehk kõige soliidsem variant, mis nõuab küll veidi tööd graafikaga, on teha suurest pildist vähendatud koopia (inglise keeles kasutatakse terminit thumbnail - "pöidlaküüs") ja panna see graafilise viitena esilehele:
<a href="fotoleht.html" title="Minu sünnipäevapilt"><img src="v_foto.gif" alt= "pildilink suurele pildile"> Suur pilt minu sünnipäevapeost (555 kB) </a>
Selline lahendus annab kasutajale aimu suurest pildist nii viite teksti kui ka väikese pildi kaudu.
Veebianimatsiooni lihtsaim vorm on animeeritud GIF-fail - multifilmisarnane kaadrite kogum. Sel juhul ei erine tema märgendid tavalise graafika omadest. Teised animatsiooniliigid ja muu multimeedia eeldavad reeglina brauserile lisatud vastavat tarkvara (plugin). Sellisena jääb see materjal meie õppematerjali käsitletavast materjalist välja.
Lihtsakoeliste "liikuvate piltide" lisamine leheküljele annab küll mõningase uudsena näiva efekti esmakordsel lugemisel, pideval lehekülje külastamisel aga muutuvad animatsioonid pahatihti häirivaks (ekstreemse näitena on teada juhuseid, kus need kutsusid epilepsiahaigel esile haigushoo). Seega oleks ehk asjakohane soovitus - maksimaalselt üks animatsioon lehekülje kohta.
Algne HTML oli mõeldud dokumendi struktuuri kirjeldamiseks - märgendite abil taheti öelda "see siin on lõik", "see siin on pealkiri" jne. Kuid nagu palju muudki Internetis, arenes ka veeb oma algsest otstarbest peagi kaugemale. Kui veebist sai meedialiik, muutus oluliseks visuaalselt efektse väljanägemise saavutamine, mis aga muutus teinekord tõeliseks "mustaks maagiaks" - tulemus oli saavutatud ebastandardsete vahenditega "peedist pesumasinale trumli" tegemisega. Takkapihta hakkasid kaks juhtivat veebilehitsejat - Netscape ja Internet Explorer - suures võistlustuhinas juurutama omaenese uusi märgendeid, mida vaid konkreetne lehitseja toetas. Nii kippuski kujunema olukord, kus üha enam võttis võimust brauserispetsiifiline veebiloome - lehtedel hakkas kohtama silte "Best viewed with IE" või "Optimized for Netscape at 800 x 600". Veeb hakkas kaotama üht oma peamist tõmbenumbrit - standardsust ja ühtmoodi mõistetavust. Ka hakkas uute märgenditega üha enam kaduma algne üsna selge vahe struktuuri ja kujunduse vahel (eriti süüdistatakse selles HTML 3.2-s sissetoodud font-märgendit).
Olukorra parandamiseks pakkus W3C (World Wide Web Consortium) välja uue tehnoloogia, mis pidi tegema taas selge vahe kujunduse ja struktuuri vahele - HTML-i kõrvale pakuti välja uus standard, mis pidi võtma kogu kujunduspoole enda peale. Standardi nimeks sai Cascading Style Sheets ehk kaskaad- stiililehed - "kaskaad" viitab võimalusi tuletada ühtedest lehtedest teisi (sarnaselt objektorienteeritud programmeerimisega). CSS-i "käimatõmbamine" võttis omajagu aega - päris pikalt oli ka siin probleeme erinevate tõlgendustega eri veebilehitsejate poolt, mistõttu ka CSS-iga lehed nägid pahatihti eri brauserites isemoodi välja. HTML 4 ja eriti XHTML-i ajaks aga oli algsele CSS1-le (CSS tase 1) lisandunud täiendavate võimalustega CSS2 - muuhulgas sisaldab see ka spetsiaalselt ekraanilugejatele mõeldud stiilimääranguid - ning järk-järgult on CSS-ist saanud veebikujunduse standard. Käesoleva kirjutise valmimise ajal on katsetuste staadiumis ka juba CSS 3.
Stiilileht koosneb reeglitest. Reeglid määravad üksikute elementide esitamise vormi.
Reegel koosneb selektorist (määrab sisuliselt HTML-märgendi, mille kuvamise viisi käesoleva reegliga määratletakse - näiteks lõigumärgend <p>) ja definitsioonidest, mis määravad kuvamisvormi eri aspektid (tähesuurus, värvid, kirjastiil, reavahe, joondus jpm). Definitsioonideosa ümbritsetakse looksulgudega ning need eraldatakse teineteisest semikooloniga.
Seega on reegli üldkuju järgmine:
selektor
{
definitsioon1;
definitsioon2;
...
definitsioon N
}
Märkus: paigutus on vaba - kogu reegli võib kirjutada ka ühele reale või jaotada eri ridadele mõnel teisel viisil.
Definitsioon koosneb omadusest ja selle väärtusest (definitsiooni ja reegli paar sarnaneb HTMLi märgendites kasutatavale argumendi ja väärtuse paarile, kuid kirjaviis on veidi teistsugune).
Olgu näitena toodud reegel, mis sätestab lõigumärgendi <p> kuvamise vormi:
p {font-size: 8pt; color: red}
Lühike reegel nagu see tasub paigutada ühele ja samale reale. p on siin selektor, määrates käsitletavaks märgendiks lõigumärgendi <p> (NB! <gt;-märke stiililehe selektorile ei lisata).
Definitsioone on selles reeglis kaks. Esimene koosneb omadusest font-size ja selle väärtusest 8pt - seega määratakse lõigu teksti suuruseks 8 punkti. Teine definitsioon määrab samal moel lõigu tekstivärviks punase.
Stiilimääranguid saab kasutada kolme moodi:
1. otse HTML-märgendi sees style-parameetrina - sobib siis, kui seda määrangut vajatakse vaid selles konkreetses kohas. Näide:
<p style="font size: small; color: red; font-weight: bold; font-family: Arial, Helvetica, non-serif">See on märgendisisene stiilimäärang</p>
See variant on eelkõige mõeldud asendama varasemat jäika <font>-märgendit.
2. Eraldi plokina HTML-faili päises head-märgendi sees - sobib juhul, kui ühel lehel vajatakse erinevaid stiile, mida aga ülejäänud lehed ei vaja. Näide:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Stiilne veebileht </title>
<style type="text/css">
<![CDATA[
body
{
font size: small;
color: red;
font-weight: bold;
font-family: Arial, Helvetica, non-serif
}
]]>
</style>
</head>
<body>
dokumendi tekst
</body>
</html>
Märkus: Stiilimäärangud tuleks panna kommentaarisümbolite (<![CDATA[ ja ]]> - kasutame uuemat, XML-ipõhist kommenteerimisviisi!) vahele, et brauserid, mis style-märgendit ei tunne, ei hakkaks kogu definitsioonide teksti tavalise ekraaniteksti pähe kõigile demonstreerima.
3. Eraldi .css -laiendiga failina, millesse kirjutatakse stiilimäärangud (ja ainult määrangud - HTML-märgendeid seal ei kasutata!). Veebilehel, millel soovitakse seda stiililehte kasutada, peab olema päises (head-osas) rida
<link="stylesheet" rel="stiililehefail.css" type="text/css" />
Seega - stiilimäärangute mõju levib üldisemalt tasemelt konkreetsemale. See protsess sarnaneb vee voolamisega kärestiku ühelt astmelt teisele - sellest ka "kaskaadi" lisamine terminisse.
Juhul, kui erinevad stiilid esitavad erinevaid, vastuolulisi määranguid, on prioriteet lokaalsemal stiilil. Seega on samas failis asuv stiil tähtsam kui eraldi failist loetu ning märgendisisene tähtsam neist mõlemast. Nii võib veebisaidile määrata üldiseks tekstivärviks tumesinise, ühele lehele eraldi aga rohelise ning omakorda selle lehe ühele lõigule hoopis punase.
Veel üks märkus. Erinevalt HTML-ist tuleb CSS-is kirjutada kommentaarid sarnaselt C-programmeerimiskeelega - märgiühendite /* ja */ vahele:
/* See on CSS-i kommentaar */
Omaduste väärtuste kirjeldamisel saab kasutada nii absoluutseid kui suhtelisi ühikuid - punkti, senti- ja millimeetrit jms. Väärtusi saab anda ka protsentidena (näiteks lehekülje laiusest) või ka kindlate üldväärtustena (näiteks kirjastiili puhul small, medium, large jne). CSS2 standard toetab järgmisi ühikuid:
Värve saab esitada nii kuueteistkümnendkoodis numbrina (levinuim tehnika), nimena (NB! Ehkki värvinimesid toetab enamik brausereid, ei ole need siiski ametlikus CSS-standardis - täiesti standardse stiili jaoks tuleb kasutada teisi võimalusi) kui ka RGB-kolmikuna (määratakse ära punase, rohelise ja sinise komponendi sisaldus toonis). Näiteks:
Nagu nägime - veebitegemine on üldiselt lihtne, kuid kohati ka mitte nii lihtne, kui vahel tundub. Tuleks endale teadvustada järgmisi punkte:
1995-2012, Kaido Kikkas
Käesoleva dokumendi paljundamine, edasiandmine ja/või muutmine on sätestatud kas GNU Vaba Dokumentatsiooni Litsentsi versiooni 1.2 või uuemaga (Litsentsi ingliskeelne täistekst) või Creative Commonsi Autorile viitamine + Jagamine samadel tingimustel 3.0 Eesti litsentsiga
1995-2012, by Kaido Kikkas. This document is distributed under either GNU Free Documentation License (v1.2 or newer) or Creative Commons Attribution-ShareAlike 3.0 Estonia license.