1. Označevalni jeziki: HTML
Cascading Style Sheets (CSS)

2. Motivacija za razvoj CSS
Osnovna motivacija za razvoj označevalnih jezikov je bila interoperabilnost dokumentov.
Interoperabilnost je bila na spletu na začetku popolnoma zagotovljena zaradi
standardiziranosti HTML in
njegove popolne usmerjenosti v označevanje strukture dokumentov.
Vse oblikovne lastnosti strukturnih elementov so bile izbrane tako, da so jih lahko prikazali računalniki in zasloni z minimalnimi grafičnimi zmogljivostmi.

3. Motivacija za razvoj CSS
Standardnost je postala zelo vprašljiva zaradi poskusov Microsofta in Netscapa, da prevzameta tržišče brskalnikov.
To sta počela z uvajanjem novih oznak, ki jih konkurenčni brskalnik ni mogel prikazati.
Te nove oznake so bile usmerjene izključno v označevanje videza dokumentov.

4. Motivacija za razvoj CSS
Posledice takega razvoja:
bistveno zmanjšanje interoperabilnosti dokumentov,
prevlada označevanja oblike pred označevanjem strukture.
W3C je bil prisiljen nekatere nove oznake vključiti v standard HTML  pretirana rast standarda.

5. Motivacija za razvoj CSS
Konzorcij W3C je reagiral na propadanje standardizacije HTML z dvema novima standardoma:
Cascading Style Sheets (CSS) uvajajo močne in elegantne metode oblikovanja ob ohranjanju strukture.
Extensible Markup Language (XML) uvaja nove metode strukturiranja in možnost oblikovanja lastnih struktur.
Standard CSS deluje v dokumentih, označenih s HTML in dokumentih, označenih z XML.
XML ima tudi svoj jezik za pisanje CSS – XSL (Extensible Stylesheet Language).

6. CSS: uvod
CSS vsebujejo navodila za oblikovanje standardnih strukturnih elementov, definiranih v HTML.
Ta navodila omogočajo določanje lastnosti strukturnih elementov dokumenta:
barve, velikosti, vrste pisave;
pozicioniranje besedila;
določanje robov dokumentov ali njihovih delov;
lastnosti ozadja;
...

7. CSS: uvod Elemente CSS lahko
vključimo v glavo dokumenta in veljajo za ta dokument,
ali pa jih shranimo kot samostojno datoteko, na katero se v glavi sklicuje poljubno število dokumentov.
Ta drugi način omogoča postavljanje oblikovno enotnih spletišč, ki jim je mogoče spremeniti videz s posegom v eni sami datoteki.

8. CSS: struktura Osnovna struktura “ukaza” v CSS je
selektor {lastnost: vrednost;}
Možne so različne izpeljanke, naprimer
sel {lastn1: vred1; lastn2: vred2;}
sel1, sel2 {lastn: vred;}
Selektor je običajno oznaka v HTML, naprimer
H1 { font-size: x-large; color: red;}

9. CSS: označevanje besedila
Nekatere lastnosti besedila
font-family
font-style
font-weight
font-size

10. CSS: označevanje besedila
font-family
Določa vrsto pisave.
Ni nujno, da ima vsak računalnik, na katerem beremo dokument, na voljo zahtevano vrsto pisave.
Pametno je navesti več alternativnih vrst ali širšo družino, da lahko spletni brskalnik izbere “najbližjega”.
P {font-family: Times New Roman, Times, serif;}

11. CSS: označevanje besedila
Generične družine
družina
primeri
sans-serif
Arial, Verdana, Tahoma
serif
Times New Roman, Garamond, Georgia
fantasy
Critter, Cottonwood
cursive
Adobe Poetica, Zapf-Chancery
monospace
Courier New, Courier, Prestige

12. CSS: označevanje besedila – font-family

13. CSS: označevanje besedila
font-style
Določa obliko pisave.
Možne vrednosti:
normal | italic | oblique
font-weight
Določa “težo” pisave.
Nekatere vrednosti:
normal | bold | bolder | lighter

14. CSS: označevanje besedila – font-style

15. CSS: označevanje besedila
font-size
Določa velikost pisave.
Možno definirati na različne načine:
absolutna velikost,
relativna velikost,
enote velikosti,
odstotki.
Nevarno je definirati velikost v enotah velikosti. Rezultati so včasih nepredvidljivi na različnih brskalnikih.
Stare verzije IE pa so, naprimer, narobe interpretirale odstotke.

16. CSS: označevanje besedila
font-size: možne vrednosti
absolutna velikost:
xx-small|x-small|small|medium|large|x-large|xx-large
relativna velikost:
larger | smaller
enote velikosti:
pt | in | em
odstotki velikosti nadrejenega elementa

17. CSS: označevanje besedila
font-size: primeri
H1 { font-size: large; }
P { font-size: 12pt; }
LI { font-size: 90%; }
B { font-size: larger; }

18. CSS: označevanje besedila – font-size

19. Barve
Lastnost color omogoča nastavljanje barve poljubnega strukturnega elementa.
Barvo je mogoče definirati na različne načine:
Opisno, osnovne vrednosti: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white in yellow.
Opisno, po standardu SGV: 147 vrednosti, npr aliceblue, azure, burlywood, coral, darkgray...
S heksadecimalno kodo (po standardu RGB) s strukturo #rrzzmm (r=rdeča, z=zelena,m=modra). Primer: #9900CC za vijoličasto

20. Barve Primera določanja barve v CSS:
Prvi trije nivoji naslovov v mornarsko modri barvi H1, H2, H3 {color: navy;}
Ozadje dokumenta v rumenkasti barvi BODY {background-color: #FFFFCC;}

21. Barve

22. Lastnosti besedila Poravnava
lastnost: text-align, vrednosti: left|right|center|justify
Primer: P {text-align: justify;}
Zamik, recimo zamik prve vrste odstavka
lastnost: text-indent, vrednosti: dolžinske enote | odstotki
Primer: P {text-indent: 5%;}

23. Lastnosti besedila: text-align, text-indent

24. Robovi
Lastnosti: margin-left, margin-right, margin-top, margin-bottom,
Vrednosti: dolžinske enote | odstotki

25. Robovi

26. Naštevanja Simboli za označevanje alinej lastnost: list-style-type,
vrednosti: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

27. Naštevanja
Primer naštevanja oštevilčenih in neoštevilčenih alinej, definiran za več nivojev:
OL OL {list-style-type: decimal; list-style-type: lower-alpha;}
UL {list-style-type: circle;}

28. Naštevanja

29. Razredi
Včasih je smiselno, da ima isti strukturni element lahko več različnih videzov, odvisnih od njegove vsebinske funkcije.
Te različne videze opišemo z razredi selektorja (oznake HTML), ki označuje ta strukturni element.

30. Razredi
Primer: opomba je strukturno odstavek besedila, navajeni pa smo, da se vizualno loči od običajnega besedila.
V tem primeru uvedemo za selektor <p> nov razred opomba.
Recimo, da želimo opombe prikazati z manjšimi mornarsko modrimi črkami, za 5% širine okna zamaknjenimi od levega roba.
V CSS bo to opisano kot
p.opomba {margin-left: 5%; color: navy; font-size: smaller;},
v besedilu pa je tak odstavek označen
<p class=“opomba”>To je opomba...</P>

31. Razredi

32. Sklicevanje na CSS CSS je v samostojni datoteki.
Datoteka mora imeti podaljšek .css, v našem primeru je to teststyle.css.
V glavi spletnega dokumenta se sklicujemo nanjo:
<head>
...
<link rel = ″stylesheet″ type = ″text/css″ href = ″teststyle.css″>
</head>

33. Hierarhija oznak in dedovanje lastnosti
Standard se imenuje “cascading...”
ker deluje na hierarhičen način,
ker se lastnosti dedujejo navzdol po hierarhiji oznak,
ker lahko lastnost spremeniš na kateremkoli nivoju hierarhije in velja za ta nivo in podrejene nivoje.

34. Hierarhija oznak in dedovanje lastnosti
Primer dela opisa v CSS
...
Body {margin-left: 5%;
text-align: justify;}
H1, H2, H3 {margin-left: 0%;
text-align: left;}
Naslovi so podrejeni strukturnemu elementu Body, vendar se oblikujejo na svoj način.
Ostali besedilni elementi dokumenta dedujejo opis od elementa Body.

35. Koristni naslovi
Interaktivna šola spletnega oblikovanja (vključno s HTML in CSS):
SVG Color names:
Pregledna predstavitev numeričnih kod nekaterih barv:

36. Vaje: preizkus osnovnih oznak
Načrt dela:
Delu dokumenta (v “surovi” besedilni obliki) določimo osnovno strukturo v HTML. Z obliko se ne ukvarjamo.
Sestavimo navodila v CSS za oblikovanje tega dokumenta. Navodila variiramo in spremljamo spremembe videza.
Uporabljamo 2 programa:
urejevalnik s formatom ASCII (Notepad, Beležnica),
spletni pregledovalnik.
Odpremo nov direktorij (ime po dogovoru).
V urejevalniku gradimo dokument.
V pregledovalniku spremljamo napredek (gumb reload, refresh).

37. Vaje: preizkus osnovnih oznak
Dokumenti:
Besedilo, ki ga oblikujemo
material-za-vaje/vzorec-besedila.txt
Slika, ki je del besedila
material-za-vaje/pregled-postopkov.jpg
Originalni dokument za “zgled” oblikovanja.
medjezicno-iskanje-dokumentov.pdf