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

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.

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.

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.

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).

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; ...

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.

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;}

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

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;}

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

CSS: označevanje besedila – font-family

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

CSS: označevanje besedila – font-style

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.

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

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

CSS: označevanje besedila – font-size

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

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;}

Barve

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%;}

Lastnosti besedila: text-align, text-indent

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

Robovi

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

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;}

Naštevanja

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.

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>

Razredi

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>

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.

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.

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

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).

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