MS SilverLight veebidisaini 6. osa

Andrus Rinde räägib pisut HTML'ist ja CSS'st.
HTML'i teab maailm juba aastast 1990, kui sündis WWW. WWW sündis CERNis tuumafüüsikute ühendamiseks.

HTML tekstielemendid: pealkirjad (h1 ... h5); tekstilõik (p); reavahetus (br); lõigu sees eraldi kujundatav fraas (span); loendid (ul, ol)

HTML teksti vormindamine: rasvane kiri (bold); kaldkiri (italic); eriti rõhutatud tekst (strong); suurendatud (big); üla- ja alaindeks

HTML pildielement: element (img), kaks kohustuslikku atribuuti src (viide piltifailile või URL) ja alt. Saab ka vaida laiust (width) ja kõrgust (height).

HTML hüperlink: element (a), üks kohustuslik atribuut href (lingitava materjali URL). Valikuline atribuut akna valikuks on target.

HTML tabel: enamus veebilehti on kujundatud tabelite abil. Tabeli loob element (table), rea loob (tr) ja lahtri loob element (td). Laiuse (width) saab anda pikselites või protsentides. (border) tegeleb äärtega, (cellspacing) ja (cellpadding) puhverdavad lahtreid. Joondus on horisontaalne (align) ja vertikaalne (valign). (colspan) ja (rowspan) võimaldavad lahtreid venitada üle teiste.

HTML alajaotused: element (div) aitab grupeerida objekte, et neid stiile kasutades kujundada.

CSS (Cascading Style Sheets) on astmelised stiililehed, milles märgitakse üles veebilehtede kujundus. Stiile võetakse arvesse järgmises järjestuses, kus viimane on kõrgeima prioriteediga:

• veebilehitseja vaikestiil;
• väline stiil ehk lingitud CSS lehed;
• sisemine stiil ehk HTML elemendid (head) osas defineeritud stiil;
• reastiil, konkreetse HTML elemendi sees määratud stiil.

Kujundusklasside (class) kasutamisel peab soovitud elementide algusmärgenditesse soovitud klass kirja panema.

CSS'i kommentaar on /* Kommentaar */

Kolm tähtsat osa on selector {property: value}, mitmetäheline väärtus pannakse jutumärkidesse. Erinevad omadused eraldatakse semikooloniga.

Klassid võimaldavad sama tüüpi elementidel erinevaid kujundusi luua: selector.class {property: value}. Universaalsed klassid sobivad erinevatele elementidele: .class {property: class}.

NB! 16 px = 1 em.

Näidiseid erinevatest (eba)kujundustest:

• https://e.bcskoolitus.ee/veebidisain/yks.html
• https://e.bcskoolitus.ee/veebidisain/yksyks.html
• https://e.bcskoolitus.ee/veebidisain/kaks.html
• https://e.bcskoolitus.ee/veebidisain/kakskaks.html

Samuti, saab panna DeepZoom objekti HTML'i faili ja seda palju lihtsamalt kui Silverlight objekti.

Näited uuest HTML5'st:

• http://www.youtube.com/html5
• http://www.youtube.com/watch?v=3R6sb4NO25E

Need on tehtud HTML ja CSS'dega, pole vaja mingit MS Sliverlight pluginit.