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 = 2 bity Původní kódování ASCII 7 bitové, 128 znaků 1
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 osmibitové kódování češtiny v systému MS-DOS ISO 8859-2 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 proměnná délka jednotky, min 8 bitů kompatibilní s ASCII utf-16 proměnná délka jednotky, min 16 bitů nekompatibilní s ASCII, varianty další, např. kódování čínštiny 2
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=windows- 1250"> <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
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
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
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
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
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 <head> <style type="text/css"> <!--... definice stylu... --> </style> </head> Struktura pravidla v CSS selektor { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota } Selektor Nejjednodušší selektor je jméno objektu (např. elementu, kterého se definice týká) Vlastnost 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
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
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
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
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 em ex px Význam 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) Odpovídá výšce písmene x pixel jeden bod definovaný relativně vzhledem k rozlišení zařízení (bod na obrazovce) 12
Jednotky délky v CSS Absolutní Jednotka in cm mm pt pc Význam Palec Centimetr Millimetr bod (1 pt = 1/72 inch) 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
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
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
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-, -right- Např. border-left-width 16