Označevalni jeziki: HTML

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

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 barviH1, H2, H3 {color: navy;} • Ozadje dokumenta v rumenkasti barviBODY {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): http://www.w3schools.com/ • SVG Color names: http://www.december.com/html/spec/colorsvg.html • Pregledna predstavitev numeričnih kod nekaterih barv: http://www.htmlhelp.com/icon/hexchart.gif

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 http://www.mf.uni-lj.si/~jure/pred_bib/rac-komun/ material-za-vaje/vzorec-besedila.txt • Slika, ki je del besedila http://www.mf.uni-lj.si/~jure/pred_bib/rac-komun/ material-za-vaje/pregled-postopkov.jpg • Originalni dokument za “zgled” oblikovanja. http://www.mf.uni-lj.si/~jure/my-hp/ medjezicno-iskanje-dokumentov.pdf