označevalni jeziki: html

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 jeselektor {lastnost: vrednost;}

Možne so različne izpeljanke, naprimersel {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: primeriH1{ 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

barviH1, H2, H3 {color: navy;}

Ozadje dokumenta v rumenkasti barviBODY {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 kotp.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:

1. Delu dokumenta (v “surovi” besedilni obliki) določimo osnovno strukturo v HTML. Z obliko se ne ukvarjamo.

2. 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 oblikujemohttp://www.mf.uni-lj.si/~jure/pred_bib/rac-komun/

material-za-vaje/vzorec-besedila.txt

Slika, ki je del besedilahttp://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