11.10.2010
Kódování a entity v XHTML Úvod do CSS Internetové publikování
1
Kódování znaků
Počítače přirozeně pracují pouze s čísly
Zprostředkování práce se znaky
definice párování číslo ~ znak soubor definic = kódová stránka, kódování počet znaků které může kódování obsahovat = 2bity
Původní kódování – ASCII
7 bitové, 128 znaků
1
11.10.2010
Kódování znaků
Osmibitová rozšíření – 256 znaků
různá kódování pro různé jazyky podle různých standardů
Různá kódování češtiny
CP852
ISO 8859-2
osmibitové kódování češtiny v systému MS-DOS osmibitové kódování češtiny v UNIXových systémech
Windows-1250
osmibitové kódování češtiny používané v systémech Microsoft Windows
Kódování znaků
Nelze použít více kódování najednou
Vícebytová kódování (vícekrát 8 bit na 1 znak)
utf-8
utf-16
proměnná délka jednotky, min 8 bitů kompatibilní s ASCII proměnná délka jednotky, min 16 bitů nekompatibilní s ASCII, varianty
další, např. kódování čínštiny
2
11.10.2010
Nastavení kódování
Specifikace použitého kódování v dokumentu
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Specifikace kódování před/při uložení souboru
…Nastavení kódování
Kódování souboru
Určuje fyzický způsob reprezentace znaků neobsažených v ASCII v souboru
Označení kódování v dokumentu
Informuje prohlížeč a umožňuje mu automaticky zvolit správné zobrazení
<meta http-equiv="Content-Type" content="text/html; charset=windows1250"> <meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-2"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Obě kódování musí být nastavena stejně
3
11.10.2010
Prvky HTML jazyka
Znakové entity
Znaky které neumíme zadat z klávesnice Znaky jejichž použití je vyhrazeno HTML
Příklad
<, >, & &název_entity;
> < & “ Pevná mezera
> < & "
&#číslo_unicode_znaku;
← Й
← Й
Prvky HTML jazyka
Entity definované XHTML
http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent
Přehlednější v češtině (písmenné)
http://www.jakpsatweb.cz/html/entity.html http://www.jakpsatweb.cz/html/entity-vsechny.html
4
11.10.2010
Prvky HTML jazyka
Entity zadané číslem znaku v tabulce UNICODE http://en.wikipedia.org/wiki/Unicode
Seznam znaků
http://alanwood.net/unicode/
Tyto znaky se zobrazí správně pokud je podporuje prohlížeč a jsou dostupné v použitém fontu
Graficky "dokonalé" stránky
Vznik graficky "dokonalých" stránek
požadavky firem "aby to bylo jako na reklamním letáčku" snaha začínajících tvůrců předvést "všechny elementy které znají"
5
11.10.2010
Problémy
Spousta zbytečného kódu Omezená podpora minoritních platforem, počítačů Přemíra grafiky – dlouhá doba načítání Závislost na rozlišení Obtížná údržba dokumentů
Drobné změny v designu je třeba opravovat na mnoha místech najednou
Špatný příklad formátování
Proč je uvedený způsob špatný?
Pokyny pro formátování jsou promíchány s informací Kód je velmi špatně udržovatelný
TIP zkuste si změnit barvu zvýraznění na červenou
http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-004/spatny-priklad.html
6
11.10.2010
Lepší příklad formátování
Proč je uvedený způsob lepší než předchozí?
Pokyny pro formátování jsou oddělené od informace Kód je dobře udržovatelný
Změnou stylu se změní formátování všech instancí
http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-004/lepsi-priklad.html
Cascading Style Sheets
Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace
Specifikace stylu pro každý element zvlášť Definice stylu v hlavičce dokumentu Připojení stylu z externího souboru
7
11.10.2010
Styl v hlavičce HTML
Definice stylu pro jediný HTML soubor Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích
<style type="text/css">
Struktura pravidla v CSS selektor { vlastnost1: hodnota; vlastnost2: hodnota; ... vlastnostN: hodnota }
Selektor
Vlastnost
Nejjednodušší selektor je jméno objektu (např. elementu, kterého se definice týká) Jméno nastavitelné vlastnosti (> 90 v CSS 2.1)
Hodnota
Hodnota na kterou se má daná vlastnost nastavit Typ hodnoty je dán podle typu vlastnosti
8
11.10.2010
Hodnoty vlastností v CSS
Délkové míry URL Řetězec
‘řetězec’ “řetězec”
Klíčové slovo Barva
Vlastnosti písma Vlastnost
Popis
Hodnoty
font-style
styl písma
normal italic oblique
font-variant
varianta písma
normal small-caps
font-weight
síla tahu písma
normal bold bolder lighter 100 200 ... 900
9
11.10.2010
Barvy v CSS Způspb zápisu
Vysvětlivky
color_name
Jméno barvy (red, green, blue, magenta, ...)
rgb(x,x,x)
Složky palety RGB 0-255
rgb(y%, y%, y%)
Procentuální složky palety RGB 0-100%
#rrggbb
Hexadecimální číslo vyjadřující složky palety RGB 00-ff
Více o barvách
Vlastnosti pozadí a barev Vlastnost
Popis
Hodnoty
color
Barva textu
barva
background-attachment
nastavuje, zda mají obrázky na pozadí rolovat se zbytkem stránky
scroll fixed
background-color
barva pozadí elementu
barva transparent
background-image
obrázek na pozadí
url none
background-position
poloha obrázku na pozadí
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
background-repeat
opakování obrázku na pozadí
repeat repeat-x repeat-y
10
11.10.2010
URL
url(text_url) Text URL může být uzavřen do uvozovek, takže je správně obojí
background: url("http://www.example.com/pinkish.png") background: url(http://www.example.com/pinkish.png)
Vlastnosti písma Vlastnost
Popis
Hodnoty
font-family
seznam preferovaných rodin řezů písma
family-name generic-family
family-name
Čárkami oddělený seznam písem v sestupném pořadí priority Použije se první dostupné písmo Bezpečnější je vkládat názvy do uvozovek – jsou to řetězce Např.
font-family: "Franklin Gothic Book", "Arial"; Je-li na klientském počítači dostupný font „Franklin Gothic Book“ použije se, jinak se použije Arial
11
11.10.2010
Vlastnosti písma Vlastnost
Popis
Hodnoty
font-family
seznam preferovaných rodin řezů písma
family-name generic-family
generic-family
Generické rodiny písem – jsou vždy dostupné (i když nemusí vypadat vždy stejně Možnosti
'serif' (např. Times) 'sans-serif' (např. Helvetica) 'cursive' (např. Zapf-Chancery) 'fantasy' (např. Western) 'monospace' (např. Courier)
Výčet by měl vždy končit písmem z generické rodiny
font-family: "Franklin Gothic Book", "Arial", sans-serif;
Jednotky délky v CSS
Relativní Jednotka
Význam
em
Odpovídá velikosti písma v aktuálním elementu (pokud se používá pro nastavení velikosti písma, odpovídá velikosti písma mateřského elementu)
ex
Odpovídá výšce písmene x
px
pixel – jeden bod definovaný relativně vzhledem k rozlišení zařízení (bod na obrazovce)
12
11.10.2010
Jednotky délky v CSS
Absolutní Jednotka
Význam
in
Palec
cm
Centimetr
mm
Millimetr
pt
bod (1 pt = 1/72 inch)
pc
pica (1 pc = 12 point)
Tyto hodnoty má význam používat, pouze je-li známo fyzické rozlišení zařízení
Jednotky délky v CSS
Procenta Jednotka
Význam
%
Určuje délku relativně vzhledem k jiné délce Každá vlastnost která může přijmout hodnotu v procentech definuje tuto referenční délku
13
11.10.2010
Vlastnosti písma Vlastnost
Popis
Hodnoty
font-size
velikost písma
xx-small x-small small medium large x-large xx-large smaller larger délková jednotka %
Velikosti xx-small – xx-large jsou absolutní Smaller / larger indikují o jednotku menší / větší písmo oproti rodičovskému elementu Podobně se chovají %
Vlastnosti textu Vlastnost
Popis
Hodnoty
letter-spacing
Mezery mezi písmeny
normal length
text-align
Zarovnání
left right center justify
text-decoration
Ozdoba písma
none underline overline line-through blink
text-indent
Odsazení 1. řádky
length %
text-transform
Transformace velikosti písma
none capitalize uppercase lowercase
white-space
Interpretace mezer a ostatních "bílých" znaků
normal pre nowrap
word-spacing
Velikost mezer mezi slovy
normal length
14
11.10.2010
Formátovací model margin (vnější okraj) border (rámeček)
padding (vnitřní okraj) Obsah elementu
Vlastnosti okrajů Vlastnost
Popis
Hodnoty
margin
Zkratka pro nastavení všech okrajů
margin-top margin-right margin-bottom margin-left
margin-bottom
Spodní okraj
auto length %
margin-left
Levý okraj
auto length %
margin-right
Pravý okraj
auto length %
margin-top
Horní okraj
auto length %
Podobně pro vnitřní okraje se margin nahradí padding Např. padding-left
15
11.10.2010
Vlastnosti ohraničení Vlastnost
Popis
Hodnoty
border-color
Barva ohraničení
color
border-style
Styl ohraničení
none hidden dotted dashed solid double groove ridge inset outset
border-width
Tloušťka ohraničení
thin medium thick length
Možno též nastavovat vlastnosti každého ze 4 ohraničení zvlášť Názvy vlastností mají vložené –top-, -bottom-, -left-, -rightNapř. border-left-width
16
