Označevalni jeziki: HTML
Download
Report
Transcript 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 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
fantasy
Times New Roman, Garamond,
Georgia
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 {
P {
LI {
B {
font-size:
font-size:
font-size:
font-size:
large; }
12pt; }
90%; }
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:
1.
2.
Uporabljamo 2 programa:
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.
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