Oled siin:Kasulikke näpunäiteid kaasautoritele...
Kasulikke näpunäiteid kaasautoritele...
Sissejuhatus
HTML (nn. hüpertekst markup language) on lihtne keel veebilehekülgedel publitseerimiseks mõeldud teksti struktureerimiseks ja kujundamiseks. Lühidalt koosneb see spetsiaalsetest koodidest ehk täägidest (inglise k. tag), mis asuvad "väiksem"- ja "suurem"-märkide (vastavalt: "<" ja ">") vahel.
XHTML standardi järgselt on täägi sisu kirjutatud alati väikeste tähtedega. Täägid tuleb alati sulgeda. St., alati peab eksisteerima igale avamis-täägile paariline vastava sulgemis-täägi näol (nn. paaristääg), või siis peab olema tegemist nn. isesulguva täägiga.
Näiteks, kui soovime osa teksti kirjutada rõhutatult, kasutame selles "bold" avamis-täägi "<b>" ja vastavat sulgemis-täägi "</b>". Sulgemis-täägi teine märk peale "väiksem"-märki on "tagurpidi-kaldkriips" (ingl.k. backslash). Vaatame näidet:
Näites on kasutatud veel ühte täägi, milleks on isesulguv tääg "<br />" ja mis tähistab reavahetust. Hea komme on kasutada veebis blokk-teksti, st. kui soovime tähistada uue lõigu algust, asetame järjest kaks reavahetuse täägi. Taandrida blokk-teksti alternatiivina veebis reeglina ei kasutata! Tähelepanelik lugeja pani tähele, et isesulguval täägil on tagurpidi-kaldkriips hoopis eelviimane märk, st. vahetult enne täägi lõpetavat "suurem"-märki, samas kui puudub eraldiseisev sulgemis-tääg.
Üks oluline reegel on veel: paaristäägid ei tohi omavahel "sassi" minna. St., kui soovime teksti saada nii kursiivi kui rasvaseks, kirjutame esmalt avamis-täägi, mis antud juhul on kursiivteksti avamis-tääg. Seejärel paneme kirja avamis-täägi ka rasvase teksti tähistamiseks. Seejärel tuleb meie poolt formaaditav tekstiosa, millele järgneb esmalt viimasena avatud, ehk rasvase teksti lõputääg. Alles seejärel võib sulgeda kursiivkirja, ikka vastava sulgemis-täägiga. Näide:
Avamis- ja sulgemistääge koos nendevahelise sisuga, või siis ka ainult isesulguvat täägi kutsutakse elemendiks.
Milliseid tääge enim vaja läheb? Toome siinkohal ära olulisemad:
Meid ei huvita mudellennu veebi kontekstis lehekülje vormistamise täägid, kuna meie sisumootor saab lehekülje päise ja sisu õige formeerimisega ise hakkama. Seega, täägide <html>, <head>, <body> ja <frameset> ning <script>, <link>, <meta>, <title> ja <isindex> ning mõistagi nende sulgemis-täägide kasutamine ei ole mitte ainult mittesoovitatav, vaid on suisa KEELATUD! Eriti tähelepanelik tasub olla, kui kopeerime artikli sisuks mingi valmis veebilehe või selle fragmendi. Ka selline kopeerimine peaks alguse ja lõpu saama ühe ja sama elemendi avamis-täägist ja ulatuma täpselt sellesama elemendi sulgemis-täägini. Näiteks tabeli kopeerimisel otsime "kõige suurema" tabeli (elemendid võivad olla üksteise sees, sh. ka tabelid) avamis-täägi <table> (mis on esimene "<table>" tääg failis), ja seejärel talle vastava sulgemis-täägi </table> (mis on viimane selline antud failis) ning kopeerime sisu koos nendega - mitte rohkem ega vähem!
Olgu veel mainitud, et iga tääg (kuni sulgemis-täägini) moodustab ühe tekstielemendi. Isesulguva täägi sees teisi elemente loomulikult olla ei saa, küll aga avamis- ja sulgemistäägist koosneva elemendi sees võib olla lõpmata hulk teisi elemente. Seega tasub väga tähelepanelik ja hoolikas olla, kui proovite elemendi avamis- ja sulgemis-tääge ülesse leida.
Tabeli loomine
Ülaltoodud näitel on toodud üherealine, kolme tulbaga tabel. Esimene tabeli rida võiks sisaldada tulpade pealkirju - antud näiteks on selleks jrk, nimi ja tulemus. Lisame veel ühe rea:
Tabelit saab ka formaatida. Näiteks, kui me soovime määrata tabeli raamistiku mitteläbipaistvaks või tabelile mingi kindla laiuse, käib see atribuutide lisamisega täägile. Atribuut on samuti väikeste tähtedega, talle järgneb võrdusmärk ja ülakomade või jutumärkide sees (soovitav on siiski kasutada sama märki järjekindlalt - erinevalt antud õpetusest, kus osa näiteid on nimelt ühtemoodi, osad teistmoodi) atribuudi väärtus või selle väärtuste jada. Vaatleme järgmist näidet:
See tabel on ilma nähtava raamita (Drupal joonistab siiski halli raami), kogu sisuelemendi jaoks kasutada olevat laiust kasutav (100%). Esimese sisurea kõrgus on 12 pikselit.
Tabeli juures võib vaja minna veel ühte nippi. Nimelt saab erinevaid andmevälju (ja tegelikult ka ridu) ühendada. Selleks kirjeldatakse andmeväli atribuuti "colspan" kasutades, väärtus näitab, mitu tulpa sellel real on "kokku kleebitud". Kuna tulpade arv kõikidel ridadel peab olema võrdne, tasub antud trikki kasutades see alati üle arvutada. Näide:
Siin on tabeli päises siis ühendatud kaks tulpa, mis kannavad ühist pealkirja. Järgmistel ridadel aga on väärtused eraldi tulpadena. Kolmandal real on punktisumma puudu, tühja ala tähistamiseks on kasutusel tühi väärtus " ", mis tähistab mittepoolitatavat tühjust ja on vajalik panna tabeli tühjade andmeväljade sisuks, et kõik brauserid näitaks tabeli sisu korrektselt.
Pilt
Pildi lisamiseks peame samuti kasutama atribuute. Kes mäletab - "<img />" oli isesulguv tääg. Praktikas kasutatakse teda sarnasel kujul:
Näeme, et atribuut "src" näitab teed failini. Tee peab Drupali puhul algama tagurpidi-kaldkriipsuga ja näitama teed kokkulepitud failihoidla asukohani. Vabalennu ala piltide puhul on selleks siis kataloogi "files" alamkataloog "vabalend", selle alamkataloog (aasta 2011 järgi) "11" ja seal asuva faili nimi. Faili nimi on mõistlik hoida samuti väiketähtedest koosnevana, kus ei ole tühikuid ja täpilisi tähti. Sama kehtib faililaiendi kohta.
Atribuut "alt" on piltidele HTML standardi järgselt kohustuslik ja vajalik juhtudeks kus kasutaja brauser ei suuda pilte näidata. Ilus on selle väärtuseks panna pildi lühikirjeldus või lühike pealkiri, kui see aga tundub mõttetu, tuleks väärtus jätta tühjaks, st. alt="". Atribuut peab seega alati kirjeldatud olema!
Atribuut "title" on vabatahtlik, hiirega vastavast elemendist (siin vastavast pildist) üle sõitmisel näidatakse seda teksti vaatajale. Hea moodus pildi pealkirja kirja panemiseks ja näitamiseks. Erinevalt "alt" atribuudist võib antud atribuudi väärtus olla märksa pikem, sest ainult teksti nägevatele kasutajatele seda ei kuvata, seega ei segune see vaatamisel ka muu sisuosaga.
Pidage meeles, et liiga suured pildid võtavad mõttetult ruumi nii veebiserveris, aga veelgi olulisem, tekitavad kasutajale lisa-internetiarve (kui arveldatakse mahu alusel) ja teevad lehekülje laadimise tuntavalt aeglasemaks. Seega, laadige veebiserverisse kohe õiges suuruses (st. mahult pisike) pilt!
Ankur ehk hüperlink
Hüperlink võimaldab tema peale klikkimisel hüpata uuele veebilehele. Tegelikult saab hüpata ka lehekülje sees, näiteks sisukorra ja peatüki vahel. Samuti sama veebilehe eri lehekülgede vahel. Samuti saab hüperlink viidata failile.
Atribuut "href" määarab faili asukoha. Eelmises lõigus seletatud reeglid failinimede kohta kehtivad ka siin, kokkuleppeliselt asuvad protokollid meil kataloogipuus, mis algab kataloogiga "protokoll". Algus ja lõputäägi vahel on tekstiosa, mida kuvatakse vaatajale. Sinna võib korrata välise lingi korral ka atribuudi "href" sisu, siis on see ka väljatrükilt arusaadav.
Atribuut "target" väärtusega "_blank" on trikk, mis uuemas XHTML vormingus on küll ebasoovitav, aga ometi ainikene viis lingi avamiseks brauseri UUES aknas. Me ju ei taha, et kasutaja meie veebilehelt lahkuks? ;-)
NB! Üldiselt ei ole ilus piltidele ja dokumentidele viidata võõras veebiserveris ilma omaniku loata. Erandiks on FAI kodulehekülg, kus seda on spetsiaalselt nõutud, et dokumentide (aja jooksul vananevaid) versioone ei kopeeritaks teistesse veebiserveritesse. Muudel juhtudel eelistaks, kui saate dokumendid siiski mudellennu lehele laadida. Piltide puhul on see eriti oluline.
Loetelu
Nummerdatud loetelu korral pannakse igale elemendile automaatselt järjekorranumber. Nummerdamata loetelu korral sidekriips või näiteks CSS abil kirjeldatud graafiline sümbol. Nimekirja elemendiks võib olla järgmine nimekiri.
Näitena on toodud nummerdamata loetelu kahest lennukist ja kolmanda elemendina kolmikpunktist sümboliseerimaks vajadust varulennukite järele.
Drupal kipub nummerdamata loeteludes kasutama enda stiilikirjeldustes kasutatud graafilisi elemente. Enamasti need sobivad konteksti ja seega pole peamurdmine, miks kriipsu asemel tekkis näiteks pallike, otstarbekas ;)
Veidi lisainfot "edasijõudnule"
Uuemas veebi "keeles" eelistatakse teksti formaatimiseks CSS nimelist kujunduskeelt. See tähendab, et kui meil oli vanasti lubatud elemendi paigutuse määramine vastava täägi parameetriga, näiteks tema vasakule joondamiseks:
siis tänapäevasem on kasutada selleks CSS (ingl. k. Cascading Style Sheet) formaati. Kõige lihtsam ja eelmisele meetodile lähedasem on CSS kirjelduse kaasa panemine "style" atribuudi väärtusena. Kirjeldus koosneb lõpmata arvust CSS-elementidest, millest igaüks koosneb omakorda CSS-atribuudist, koolonist, väärtusest/nende jadast ning semikoolonist selle lõpus. Toodud näites on lihtsuse huvides vaid üks CSS-atribuut "align".
aga sama asja võib teha ka nii, et element määratakse mingisse klassi:
ja eraldiseisvas CSS kirjelduse failis kirjeldatakse vastava klassi jaoks vajalikud parameetrid. Olgu siinkohal mainitud, et alati pole klassi vaja määrata, sest CSS failis võib elemente vormindada ka täägi nime järgi globaalselt, id parameetri järgi, ja kõikide nende erinevate kombinatsioonide järgi. Mudellend lehe kujundamisel on vaja teada, et hüperlingid failidele/protokollidele on meil "hea tava alusel" määratud classi "link", st. antud link peaks olema toodud kujul:
Kui soovime mingit tekstiosa formaatida CSS abil, aga meil puudub selleks sobiv tääg, võib alati kasutada kas <div> või <span> tääge (koos vastavate sulgemistäägidega) ning sobivat style või class atribuuti.
Allpool veel väike nimekiri enamlevinud CSS-atribuutidest koos kasutusnäidete ja seletusega.
Antud tabeli päise element on kirjeldatud näiteks selliselt:
Teksti formaatimine käib CSS abil seega taoliselt:
Tähelepanelik lugeja märkab, et teksti saab rasvaseks teha, alla joonida ning näiteks kursiivi panna nii spetsiaaltäägi kui CSS-i abil. Viimane neist on tegelikult soovitatav meetod, kuid kuna ka esimene toimib ja on hetkel veel toetatud, võib mudellennu lehekülgedel kasutada esimest.
Olgu veel ka ära mainitud, et HTML toonide määramiseks/leidmiseks on hea kasutada mõnda abivahendit. Ka valmis kirjutatud HTML koodi võiks testida, näiteks HTML Tidy nimelist online veebilehte kasutades.
Tervitades ja häid veebilehti soovides,
Indrek
HTML (nn. hüpertekst markup language) on lihtne keel veebilehekülgedel publitseerimiseks mõeldud teksti struktureerimiseks ja kujundamiseks. Lühidalt koosneb see spetsiaalsetest koodidest ehk täägidest (inglise k. tag), mis asuvad "väiksem"- ja "suurem"-märkide (vastavalt: "<" ja ">") vahel.
XHTML standardi järgselt on täägi sisu kirjutatud alati väikeste tähtedega. Täägid tuleb alati sulgeda. St., alati peab eksisteerima igale avamis-täägile paariline vastava sulgemis-täägi näol (nn. paaristääg), või siis peab olema tegemist nn. isesulguva täägiga.
Näiteks, kui soovime osa teksti kirjutada rõhutatult, kasutame selles "bold" avamis-täägi "<b>" ja vastavat sulgemis-täägi "</b>". Sulgemis-täägi teine märk peale "väiksem"-märki on "tagurpidi-kaldkriips" (ingl.k. backslash). Vaatame näidet:
See on tavaline - <b>see aga rasvane</b> tekst.<br /> See on uus rida.
Näites on kasutatud veel ühte täägi, milleks on isesulguv tääg "<br />" ja mis tähistab reavahetust. Hea komme on kasutada veebis blokk-teksti, st. kui soovime tähistada uue lõigu algust, asetame järjest kaks reavahetuse täägi. Taandrida blokk-teksti alternatiivina veebis reeglina ei kasutata! Tähelepanelik lugeja pani tähele, et isesulguval täägil on tagurpidi-kaldkriips hoopis eelviimane märk, st. vahetult enne täägi lõpetavat "suurem"-märki, samas kui puudub eraldiseisev sulgemis-tääg.
Üks oluline reegel on veel: paaristäägid ei tohi omavahel "sassi" minna. St., kui soovime teksti saada nii kursiivi kui rasvaseks, kirjutame esmalt avamis-täägi, mis antud juhul on kursiivteksti avamis-tääg. Seejärel paneme kirja avamis-täägi ka rasvase teksti tähistamiseks. Seejärel tuleb meie poolt formaaditav tekstiosa, millele järgneb esmalt viimasena avatud, ehk rasvase teksti lõputääg. Alles seejärel võib sulgeda kursiivkirja, ikka vastava sulgemis-täägiga. Näide:
Õige: <b><i>rasvane kursiivkiri</i></b><br /> Vigane: <b><i>vigane soperdis</b></i><br />
Avamis- ja sulgemistääge koos nendevahelise sisuga, või siis ka ainult isesulguvat täägi kutsutakse elemendiks.
Milliseid tääge enim vaja läheb? Toome siinkohal ära olulisemad:
Meid ei huvita mudellennu veebi kontekstis lehekülje vormistamise täägid, kuna meie sisumootor saab lehekülje päise ja sisu õige formeerimisega ise hakkama. Seega, täägide <html>, <head>, <body> ja <frameset> ning <script>, <link>, <meta>, <title> ja <isindex> ning mõistagi nende sulgemis-täägide kasutamine ei ole mitte ainult mittesoovitatav, vaid on suisa KEELATUD! Eriti tähelepanelik tasub olla, kui kopeerime artikli sisuks mingi valmis veebilehe või selle fragmendi. Ka selline kopeerimine peaks alguse ja lõpu saama ühe ja sama elemendi avamis-täägist ja ulatuma täpselt sellesama elemendi sulgemis-täägini. Näiteks tabeli kopeerimisel otsime "kõige suurema" tabeli (elemendid võivad olla üksteise sees, sh. ka tabelid) avamis-täägi <table> (mis on esimene "<table>" tääg failis), ja seejärel talle vastava sulgemis-täägi </table> (mis on viimane selline antud failis) ning kopeerime sisu koos nendega - mitte rohkem ega vähem!
| Tääg | Seletus |
| <b></b> | bold - rasvane tekst |
| <i></i> | italics - kursiivkiri |
| <u></u> | underline - allajoonitud kiri |
| <sub></sub> | subscript - alaindeks |
| <sup></sup> | superscript - ülaindeks |
| <table></table> | table - tabel |
| <tr></tr> | table row - tabeli rida |
| <td></td> | table data cell - tabeli andmeväli |
| <ul></ul> | unordered list - numereerimata nimekiri |
| <ol></ol> | ordered list - nummerdatud nimekiri |
| <li></li> | list item - nimekirja element |
| <a></a> | anchor - ankur ehk hüperlink dokumendile, teisele veebilehele |
| <div></div> | division - eraldatud, eriliselt formaaditud lõik |
| <span></span> | span - eriliselt formaaditud tekstiosa |
| <br /> | break - reavahetus |
| <img /> | image - pilt |
Tabeli loomine
<table>
<tr>
<td>jrk</td>
<td>nimi</td>
<td>tulemus</td>
</tr>
</table>
Ülaltoodud näitel on toodud üherealine, kolme tulbaga tabel. Esimene tabeli rida võiks sisaldada tulpade pealkirju - antud näiteks on selleks jrk, nimi ja tulemus. Lisame veel ühe rea:
<table>
<tr>
<td>jrk</td>
<td>nimi</td>
<td>tulemus</td>
</tr>
<tr>
<td>1.</td>
<td>Hea Piloot</td>
<td>101 punkti</td>
</tr>
</table>
Tabelit saab ka formaatida. Näiteks, kui me soovime määrata tabeli raamistiku mitteläbipaistvaks või tabelile mingi kindla laiuse, käib see atribuutide lisamisega täägile. Atribuut on samuti väikeste tähtedega, talle järgneb võrdusmärk ja ülakomade või jutumärkide sees (soovitav on siiski kasutada sama märki järjekindlalt - erinevalt antud õpetusest, kus osa näiteid on nimelt ühtemoodi, osad teistmoodi) atribuudi väärtus või selle väärtuste jada. Vaatleme järgmist näidet:
<table border='0' width='100%'>
<tr height='12px' >
<td>jrk</td>
<td>nimi</td>
<td>tulemus</td>
</tr>
<tr>
<td>1.</td>
<td>Hea Piloot</td>
<td>101 punkti</td>
</tr>
</table>
See tabel on ilma nähtava raamita (Drupal joonistab siiski halli raami), kogu sisuelemendi jaoks kasutada olevat laiust kasutav (100%). Esimese sisurea kõrgus on 12 pikselit.
Tabeli juures võib vaja minna veel ühte nippi. Nimelt saab erinevaid andmevälju (ja tegelikult ka ridu) ühendada. Selleks kirjeldatakse andmeväli atribuuti "colspan" kasutades, väärtus näitab, mitu tulpa sellel real on "kokku kleebitud". Kuna tulpade arv kõikidel ridadel peab olema võrdne, tasub antud trikki kasutades see alati üle arvutada. Näide:
<table border='0' width='100%'>
<tr height='12px' >
<td colspan='2'>Tulemus (sek ja punkte)</td>
<td>Koht</td>
</tr>
<tr>
<td>10 sek</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>0 sek</td>
<td> </td>
<td>-</td>
</tr>
</table>
Siin on tabeli päises siis ühendatud kaks tulpa, mis kannavad ühist pealkirja. Järgmistel ridadel aga on väärtused eraldi tulpadena. Kolmandal real on punktisumma puudu, tühja ala tähistamiseks on kasutusel tühi väärtus " ", mis tähistab mittepoolitatavat tühjust ja on vajalik panna tabeli tühjade andmeväljade sisuks, et kõik brauserid näitaks tabeli sisu korrektselt.
Pilt
Pildi lisamiseks peame samuti kasutama atribuute. Kes mäletab - "<img />" oli isesulguv tääg. Praktikas kasutatakse teda sarnasel kujul:
<img src="/files/vabalend/11/puhkehetk.jpg" alt="Vabalennumehed" title="Vabalennumehed puhkehetkel, Nurmsi 01.01.2011" />
Näeme, et atribuut "src" näitab teed failini. Tee peab Drupali puhul algama tagurpidi-kaldkriipsuga ja näitama teed kokkulepitud failihoidla asukohani. Vabalennu ala piltide puhul on selleks siis kataloogi "files" alamkataloog "vabalend", selle alamkataloog (aasta 2011 järgi) "11" ja seal asuva faili nimi. Faili nimi on mõistlik hoida samuti väiketähtedest koosnevana, kus ei ole tühikuid ja täpilisi tähti. Sama kehtib faililaiendi kohta.
Atribuut "alt" on piltidele HTML standardi järgselt kohustuslik ja vajalik juhtudeks kus kasutaja brauser ei suuda pilte näidata. Ilus on selle väärtuseks panna pildi lühikirjeldus või lühike pealkiri, kui see aga tundub mõttetu, tuleks väärtus jätta tühjaks, st. alt="". Atribuut peab seega alati kirjeldatud olema!
Atribuut "title" on vabatahtlik, hiirega vastavast elemendist (siin vastavast pildist) üle sõitmisel näidatakse seda teksti vaatajale. Hea moodus pildi pealkirja kirja panemiseks ja näitamiseks. Erinevalt "alt" atribuudist võib antud atribuudi väärtus olla märksa pikem, sest ainult teksti nägevatele kasutajatele seda ei kuvata, seega ei segune see vaatamisel ka muu sisuosaga.
Pidage meeles, et liiga suured pildid võtavad mõttetult ruumi nii veebiserveris, aga veelgi olulisem, tekitavad kasutajale lisa-internetiarve (kui arveldatakse mahu alusel) ja teevad lehekülje laadimise tuntavalt aeglasemaks. Seega, laadige veebiserverisse kohe õiges suuruses (st. mahult pisike) pilt!
Ankur ehk hüperlink
Hüperlink võimaldab tema peale klikkimisel hüpata uuele veebilehele. Tegelikult saab hüpata ka lehekülje sees, näiteks sisukorra ja peatüki vahel. Samuti sama veebilehe eri lehekülgede vahel. Samuti saab hüperlink viidata failile.
<a href="/protokollid/vabalend/11/nurmsi2011.jpg">Nurmsi 2011 protokoll</a>
<a href="http://www.helicamp.eu/" target="_blank">Helicamp Estonia koduleht</a>
Atribuut "href" määarab faili asukoha. Eelmises lõigus seletatud reeglid failinimede kohta kehtivad ka siin, kokkuleppeliselt asuvad protokollid meil kataloogipuus, mis algab kataloogiga "protokoll". Algus ja lõputäägi vahel on tekstiosa, mida kuvatakse vaatajale. Sinna võib korrata välise lingi korral ka atribuudi "href" sisu, siis on see ka väljatrükilt arusaadav.
Atribuut "target" väärtusega "_blank" on trikk, mis uuemas XHTML vormingus on küll ebasoovitav, aga ometi ainikene viis lingi avamiseks brauseri UUES aknas. Me ju ei taha, et kasutaja meie veebilehelt lahkuks? ;-)
NB! Üldiselt ei ole ilus piltidele ja dokumentidele viidata võõras veebiserveris ilma omaniku loata. Erandiks on FAI kodulehekülg, kus seda on spetsiaalselt nõutud, et dokumentide (aja jooksul vananevaid) versioone ei kopeeritaks teistesse veebiserveritesse. Muudel juhtudel eelistaks, kui saate dokumendid siiski mudellennu lehele laadida. Piltide puhul on see eriti oluline.
Loetelu
Nummerdatud loetelu korral pannakse igale elemendile automaatselt järjekorranumber. Nummerdamata loetelu korral sidekriips või näiteks CSS abil kirjeldatud graafiline sümbol. Nimekirja elemendiks võib olla järgmine nimekiri.
<ul>
<li>Esimene lennuk nimekirjas</li>
<li>Teine lennuk nimekirjas</li>
<li>...</li>
</ul>
Näitena on toodud nummerdamata loetelu kahest lennukist ja kolmanda elemendina kolmikpunktist sümboliseerimaks vajadust varulennukite järele.
Drupal kipub nummerdamata loeteludes kasutama enda stiilikirjeldustes kasutatud graafilisi elemente. Enamasti need sobivad konteksti ja seega pole peamurdmine, miks kriipsu asemel tekkis näiteks pallike, otstarbekas ;)
Veidi lisainfot "edasijõudnule"
Uuemas veebi "keeles" eelistatakse teksti formaatimiseks CSS nimelist kujunduskeelt. See tähendab, et kui meil oli vanasti lubatud elemendi paigutuse määramine vastava täägi parameetriga, näiteks tema vasakule joondamiseks:
<td align="right">vasak tekst</td>
siis tänapäevasem on kasutada selleks CSS (ingl. k. Cascading Style Sheet) formaati. Kõige lihtsam ja eelmisele meetodile lähedasem on CSS kirjelduse kaasa panemine "style" atribuudi väärtusena. Kirjeldus koosneb lõpmata arvust CSS-elementidest, millest igaüks koosneb omakorda CSS-atribuudist, koolonist, väärtusest/nende jadast ning semikoolonist selle lõpus. Toodud näites on lihtsuse huvides vaid üks CSS-atribuut "align".
<td style="align:right;">vasak tekst</td>
aga sama asja võib teha ka nii, et element määratakse mingisse klassi:
<td class="vasakutekstiklass">vasak tekst</td>
ja eraldiseisvas CSS kirjelduse failis kirjeldatakse vastava klassi jaoks vajalikud parameetrid. Olgu siinkohal mainitud, et alati pole klassi vaja määrata, sest CSS failis võib elemente vormindada ka täägi nime järgi globaalselt, id parameetri järgi, ja kõikide nende erinevate kombinatsioonide järgi. Mudellend lehe kujundamisel on vaja teada, et hüperlingid failidele/protokollidele on meil "hea tava alusel" määratud classi "link", st. antud link peaks olema toodud kujul:
<a class="link" href="/protokollid/vabalend/minuprotokoll.pdf">Vabalennu protokoll PDF kujul</a>
Kui soovime mingit tekstiosa formaatida CSS abil, aga meil puudub selleks sobiv tääg, võib alati kasutada kas <div> või <span> tääge (koos vastavate sulgemistäägidega) ning sobivat style või class atribuuti.
Allpool veel väike nimekiri enamlevinud CSS-atribuutidest koos kasutusnäidete ja seletusega.
| Atribuut | Näide | Seletus |
| align | "align:left;" | elemendi joondamine vasakule, paremale, keskele [left, right, center] |
| text-align | "text-align:left;" | teksti joondamine vasakule, paremale, keskele [left, right, center] |
| color | "color:green;" | elemendi/teksti värv ingliskeelse standardvärvina |
| color | "color:#dd3333;" | elemendi/teksti värv HTML kodeeringus (#dd3333; on spetsiaalne punane toon) |
| background-color | "background-color:#cccccc;" | elemendi tasuta värv, näites kasutatud värv HTML kodeeringus on spetsiaalne hall toon |
| margin | "margin:10px;" | elemendi väline ääris 10 pikselit lai |
| padding | "padding:10px;" | elemendi sisemine ääris 10 pikselit lai |
| border | "border:1px solid black;" | tabeli raam pideva joonena, 1 piksel lai, musta värvi |
| border | "border:none;" | tabeli raam nähtamatuks |
| text-decoration | "text-decoration:underline;" | teksti eriefektid, siin allajoonimine |
| font-weight | "font-weight:bold;" | fondi muutmine rasvaseks |
| font-size | "font-size:10pt;" | fondi suurus 10pt (st. punkti, ingl.k. point) |
<td style="text-decoration:undeline;color:blue;">Atribuut</td>
Teksti formaatimine käib CSS abil seega taoliselt:
Ja nüüd <span style="font-weight:bold;text-decoration:underline;">rasvane ja allajoonitud tekst</span>.<br />
Tähelepanelik lugeja märkab, et teksti saab rasvaseks teha, alla joonida ning näiteks kursiivi panna nii spetsiaaltäägi kui CSS-i abil. Viimane neist on tegelikult soovitatav meetod, kuid kuna ka esimene toimib ja on hetkel veel toetatud, võib mudellennu lehekülgedel kasutada esimest.
Olgu veel ka ära mainitud, et HTML toonide määramiseks/leidmiseks on hea kasutada mõnda abivahendit. Ka valmis kirjutatud HTML koodi võiks testida, näiteks HTML Tidy nimelist online veebilehte kasutades.
Tervitades ja häid veebilehti soovides,
Indrek