označevalni jeziki: html
DESCRIPTION
Označevalni jeziki: HTML. Cascading Style Sheets (CSS). Motivacija za razvoj CSS. Osnovna motivacija za razvoj označevalnih jezikov je bila interoperabilnost dokumentov. I nteroperabilnost je bila na spletu na začetku popolnoma zagotovljena zaradi s tandardiziranosti HTML in - PowerPoint PPT PresentationTRANSCRIPT
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