CVIČENÍ WWW1 (PWA1) č. 1

CVIČENÍ WWW1 (PWA1) – č. 1 Přihlášení ke školní síti (v případě, že předmět zahajuje cvičení v laboratoři jako první). Ve spolupráci s p. Kolečkem se provede registrace žáků do sítě Novell. Žáci jsou seznámeni s organizací síťových disků a se způsobem jejich využití. Úkol na doma – zkusit (podle návodu na školním webu) připojení z domova ke školní síti přes FTP. Organizace práce v laboratoři Zopakování některých zásad typických pro laboratoř. Domovským adresářem žáka bude adresář s názvem třídy umístěný na lokálním disku (v našem případě na disku D: v adresáři STUDENTI). Důvod – pracuje-li aplikace se souborem přímo na síťovém disku, může to vést k problémům (např. Homesite). Žák si průběžně zálohuje data na osobní síťový disk G: kopírováním. Základní práce v souborovém manažeru Práce s okny (načítání obsahu, přepínání mezi okny, třídění obsahu, ..) Procházení stromovou strukturou disku. Vytváření adresářové struktury. Operace se soubory (kopírování, přesuny, přejmenování) a se skupinami souborů. Hvězdičková a otazníková konvence. Prohlížení, editace a mazání souboru. Běžně používané klávesové zkratky. Samostudium Projděte si níže uvedené odkazy a podle prvního tutorialu trénujte práce se soubory a složkami. Všechny operace provádějte v rámci složky své třídy na lokálním disku, tj. D:/STUDENTI/<složka vaší třídy>/ Užitečné odkazy: http://www.cbvk.cz/programy_pro_knihovny/_dokumentace/totalcmd/totalcmd.htm - úvod do používání Total Commanderu. http://blog.fineboard.cz/navody-a-tutorialy/343-total-commander-tipy-a-triky – užitečné tipy a triky v Total Commanderu.

CVIČENÍ WWW1 (PWA1) – č. 2 Kódování textové informace Co je to znak, znaky tisknutelné a řídicí. ASCII tabulka (žáci již mají základy binární číselné soustavy) a její struktura. Rozšíření ASCII tabulky o stránku znaků národní abecedy (WINDOWS-1250, UNICODE, kódování UTF-8). WINDOWS-1250 0 0 1 2 3 4 5 6 7 8 9 A B C D E F

1 0

NUL

2 1

SOH 16

DLE

STX 17

DC1 32

! 48 0 1 64 @ A 80 P Q 96 ` a 112 p q 128 € NZ 144 NZ ‘ 160 ˇ 176 ° ± 192 Ŕ Á 208 Ð Ń 224 ŕ á 240 đ ń

3 2

ETX 18

DC2 33

" 49 2 65 B 81 R 97 b 113 r 129 ‚ 145 ’ 161 ˘ 177 ˛ 193 Â 209 Ň 225 â 241 ň

4 3

EOT 19

DC3 34

# 50 3 66 C 82 S 98 c 114 s 130 NZ 146 “ 162 Ł 178 ł 194 Ă 210 Ó 226 ă 242 ó

5 4

ENQ 20

DC4 35

$ 51 4 67 D 83 T 99 d 115 t 131 „ 147 ” 163 ¤ 179 ´ 195 Ä 211 Ô 227 ä 243 ô

6 5

ACK 21

NAK 36

% 52 5 68 E 84 U 100 e 116 u 132 … 148 • 164 Ą 180 µ 196 Ĺ 212 Õ 228 ĺ 244 ő

7 6

BEL 22

SYN 37

& 53 6 69 F 85 V 101 f 117 v 133 † 149 – 165 ¦ 181 ¶ 197 Ć 213 Ö 229 ć 245 ö

8 7

BS 23

ETB 38

' 54 7 70 G 86 W 102 g 118 w 134 ‡ 150 — 166 § 182 · 198 Ç 214 × 230 ç 246 ÷

9 8

HT 24

CAN 39

( 55 8 71 H 87 X 103 h 119 x 135 NZ 151 NZ 167 ¨ 183 ¸ 199 Č 215 Ř 231 č 247 ř

A 9

LF 25

EM 40

) 56 9 72 I 88 Y 104 i 120 y 136 ‰ 152 ™ 168 © 184 ą 200 É 216 Ů 232 é 248 ů

B 11

VT

* 57 : 73 J 89 Z 105 j 121 z 137 Š 153 š 169 Ş 185 ş 201 Ę 217 Ú 233 ę 249 ú

27

ESC 42

+ 58 ; 74 K 90 [ 106 k 122 { 138 ‹ 154 › 170 « 186 » 202 Ë 218 Ű 234 ë 250 ű

D 12

FF

26

SUB 41

C

10

CR 28

FS 43

, 59 < 75 L 91 \ 107 l 123 | 139 Ś 155 ś 171 ¬ 187 Ľ 203 Ě 219 Ü 235 ě 251 ü

E 13

SOH 29

GS 44

60 = 76 M 92 ] 108 m 124 } 140 Ť 156 ť

F 14 30

RS 45

15

SI

. 61 > 77 N 93 ^ 109 n 125 ~ 141 Ž 157 ž 172 173 ® 188 189 ˝ ľ 204 205 Í Î 220 221 Ý Ţ 236 237 í î 252 253 ý ţ

31

US 46

/ 62 ? 78 O 94 _ 110 o 126

47 63 79 95 111 127

DEL 142

Ź 158 ź 174 Ż 190 ż 206 Ď 222 ß 238 ď 254 ˙

143 159 175 191 207 223 239 255

Je možno „trénovat“ tak, že každý napíše své jméno v rozšířeném ASCII kódu pomocí HEXA soustavy a převede je do binární soustavy na 0 a 1. Př.: Jan Novák = 4A 61 6E 20 4E 6F 76 E1 6B Užitečné odkazy: http://cs.wikipedia.org/wiki/Ascii - úvod do ASCII, vysvětlení řídicích znaků. http://cs.wikipedia.org/wiki/Znakov%C3%A1_sada – přehled znakových sad. http://cs.wikipedia.org/wiki/Windows-1250 - povídání o znakové sadě WINDOWS-1250.

Práce s textem v Poznámkovém bloku a v Listeru Založení textového souboru (Shift + F4 apod.). Ukládání textového souboru v kódování ANSI, UNICODE a UTF-8. Vyhodnocení informací z hexadecimálního výpisu souboru v Listeru. Porovnání různě kódovaných souborů co do velikosti. Vkládání znaků pomocí ALT + xxxx , kontrola podle ASCII tabulky (xxxx začíná nulou pro číslo>127; pozor na nastavený typ klávesnice - musí být česká).

ANSI (ASCII + rozšíření na WINDOWS - 1250) odřádkování UNICODE

UTF - 8

tabulátor

Hlavička

Hlavička

Zobrazení textu v internetovém prohlížeči Otevření textového souboru v internetovém prohlížeči. Autodetekce znakové sady a její ověření. Pokusy s různými znakovými sadami.

velikost souboru 17 bajtů



CVIČENÍ WWW1 (PWA1) – č. 3 Úvod do HTML Význam zkratky – HyperText Markup Language. Vysvětlit, co je to hypertext, jaká je úloha značek (Mark) při vykreslování stránky. Verze HTML – význam verze HTML 3.2 (dotvořil se sortiment značek, na kterých stojí základ současného webu), aktuální verze HTML 4.01 (změny oproti verzi 3.2 budou probrány později), budoucí verze HTML 5. Souvislost HTML s XHTML. Užitečné odkazy: http://cs.wikipedia.org/wiki/Html Obsah a forma HTML dokumentu Obsah = sdělení (hlavně texty) – to je na stránkách prvotní. Forma = rozvržení obsahu (formátování textu, druh písma, okraje, styly objektů, centrování, odsazení, barvy čehokoliv apod.) – to je druhotné (ale rovněž důležité). Původní myšlenkou HTML bylo, že jak obsah, tak forma se budou vytvářet HTML značkami. Moderní web naproti tomu přísně (striktně) odděluje tvorbu obsahu od formy. Obsah je dán HTML, forma se vytváří pomocí kaskádových stylů (CSS). Svůj záměr - psát stránky dle striktních požadavků moderního webu (STRICT) nebo z těchto požadavků slevit a přechodně (TRANSITIONAL) využívat k formátování obsahu prostředků HTML - sdělujeme prohlížeči úvodní značkou našich stránek, tzv. DTD (viz dále). Do jaké míry se nám tento záměr nakonec podaří realizovat, to nám řekne validátor. V případě úspěchu budou naše stránky validní podle pravidel STRICT nebo TRANSITIONAL. Struktura HTML dokumentu Realizace HTML dokumentu jako textového souboru (práce s textovými soubory byla probrána v minulém cvičení včetně kódování do ANSI, UTF aj. – NotePad, Lister). Činnost internetového prohlížeče po načtení HTML souboru – vysvětlit, jak a z čeho prohlížeč vytváří stránku. Části HTML souboru – struktura je obsažena v přehledu HTML 3.2, který žáci dostanou vytisknutý. Vysvětlit základní pojmy a pravidla (tagy a jejich druhy, direktivy, pravidla HTML, ..)

Definice typu dokumentu (DTD budeme využívat k přepínání cílového prohlížeče do jednoho z vykreslovacích režimů) HTML dokument Hlavička

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <meta name="keywords" content="hudba, kytara, Beatles"> Název stránky (hlavička obsahuje dodatečné informace vztahující se k celé stránce) Tělo stránky

(tělo obsahuje pokyny pro vykreslení všech objektů tvořících výslednou podobu stránky)

Výše uvedenou strukturu je vhodné vysvětlovat v prostředí HomeSite – vytvoří se automaticky při spuštění programu. Vzájemné vztahy mezi jednotlivými částmi HTML dokumentu lze přehledně znázornit pomocí stromové struktury stránky.

HTML

HEAD META HTTPEQUIV META NAME

TITLE

BODY

OBJEKT 1

OBJEKT 2

OBJEKT 3

Osvědčilo se vysvětlovat strukturu HTML souboru v pořadí BODY→HEAD→DTD (tj. od nejpochopitelnějšího k nejnáročnějšímu). Objekt BODY odpovídá oknu prohlížeče na monitoru a to, co je v BODY, odpovídá tomu, co bude vykresleno v okně. Hlavička HEAD obsahuje dodatečné informace vztahující se k stránce jako k celku. Některé z nich použije prohlížeč pro správné vykreslení stránky (informace o znakové sadě, název stránky, cesty k dalším souborům nutným pro sestavení stránky apod.), jiné jsou určeny pro další zařízení (pro roboty, vyhledávače apod.). DTD (Document Type Definition) má za úkol informovat prohlížeč a další internetová zařízení o pravidlech, podle kterých je stránka napsána (zda se jedná o HTML či XHTML, podle které normy apod.). Na základě těchto informací se prohlížeč „rozhodne“ pro postup, jak bude stránku z došlých údajů skládat dohromady. Vykreslovací režimy prohlížeče Moderní prohlížeče disponují alespoň dvěma vykreslovacími režimy: -

STANDARDNÍ MÓD neboli režim platných standardů a

-

QUIRK MÓD neboli režim zpětné kompatibility.

O tom, do kterého módu se prohlížeč přepne, aby vykreslil naši stránku, rozhoduje DTD neboli „definice typu dokumentu“ uvedená na začátku HTML souboru. Na internetu je mnoho „starých“ stránek napsaných v poměrně dávné minulosti, tj. podle technologií, které jsou dnes již překonané. QUIRK mód slouží pro správné zobrazování právě těchto stránek. Narazíli moderní prohlížeč na takovou starou stránku, nenajde v ní DTD odpovídající moderní technologii a přepne prohlížeč do QUIRK módu. Prohlížeč se začne chovat jako jeho starší verze, tj. „vrátí se v čase“ a vykreslí starou stránku bez problémů. Při psaní stránek budeme volit takové DTD, které přepne prohlížeč do standardního módu. Tím dosáhneme toho, že prohlížeč se bude snažit vykreslit naši stránku podle dnešních norem, tj. pro nás předvídatelným způsobem. V mnoha případech se tak vyhneme rozdílnému vykreslování stránky v různých typech prohlížečů. Nejjednodušším způsobem, jak přepnout drtivou většinu moderních prohlížečů do STANDARD módu, je sdělit prohlížeči, že stránka je psána podle striktních pravidel pro oddělení obsahu a formy – STRICT a použít DTD ve tvaru

(1)

Pro korektní přepnutí do QUIRK módu stačí sdělit prohlížeči, že stránka je psána podle „starých“ nebo přechodových pravidel pro oddělení obsahu a formy - TRANSITIONAL. Pro využití posledně zmíněné možnosti stačí použít DTD

(2)

Netroufáme-li si napsat stránku podle pravidel STRICT a přesto chceme donutit prohlížeč, aby se přepnul do režimu STANDARD, použijeme DTD

(3)

Pro psaní stránek, k jejichž formátování nebudeme využívat kaskádové styly, je vhodné používat DTD podle (2) nebo (3); v těchto případech lze dosáhnout validity stránky podle TRANSITIONAL. Až se budeme učit formátovat stránku pomocí CSS, je žádoucí používat DTD podle (3) a postupně se snažit o validitu také podle (1), tj. STRICT.

Shrnutí: Typ HTML dokumentu

DTD

Vykreslovací mód prohlížeče

STRICT – zásady moderního webu, mj. přísné oddělení formy od obsahu.

STANDARD

TRANSITIONAL – nelpí se

QUIRK

Formátování obsahu může být provedeno HTML značkami.

STANDARD

Obsah je tvořen HTML, forma se vytváří výhradně přes kaskádové styly. striktně na zásadách moderního webu.

Některé prohlížeče umožňují uživateli zjistit, do kterého režimu činnosti jsou právě přepnuty. Pro Mozillu Firefox zvolte nabídku „Nástroje → Informace o stránce“.

Užitečné odkazy: http://www.jakpsatweb.cz/doctype.html http://www.jakpsatweb.cz/css/mody-prohlizecu.html http://wellstyled.com/html-doctype-and-browser-mode.html http://www.sovavsiti.cz/c01043.htm

Seznámení s prostředím programu HomeSite Automatické vygenerování struktury HTML souboru po spuštění – popis struktury. Orientace v prostředí HomeSite – okno editace, okno náhledu na stránku. Ukládání HTML souboru -

Připomenout nutnost ukládání na lokální disk do domovské složky žáka na disku D: (při práci přímo na síťovém disku G: nastávají potíže s náhledy).

-

Navyknout si ukládat ještě „prázdnou“ stránku. Při práci s ještě neuloženou stránkou nefungují odkazy na dokumenty nacházející se na disku (na obrázky apod.).

-

Všimnout si, že při ukládání si můžeme zvolit typ výsledného kódování souboru. Pokud je tato možnost nepřístupná, lze ji zapnout zaškrtnutím volby „Enable non-ANSI file encoding“ v nabídce „Options → Settings → File Settings“.

První pokusy v editoru -

Vyplnění titulku; po uložení na disk se výsledek projeví až v externím prohlížeči – zkusit si to (náhled v HomeSite titulek stránky nezobrazuje).

-

Vložení několika náhodných slov do BODY, vysvětlit chování textu v okně prohlížeče (jak je to s ukončením řádku apod., všimnout si, že text má určitý výchozí styl apod.).

-

Vysvětlit význam generátoru textu pro návrh stránek, vygenerovat náhodný text na http://lipsum.org, přenést jej do BODY (např. přes schránku), zkoumat chování textu v okně prohlížeče při změnách velikosti okna.

-

Vložení parametru do BODY (vysvětlit princip automatického vkládání parametrů), zkusit to na příkladu „bgcolor“. Vysvětlit kódování barev, využít toho, že žáci již znají základy HEXA soustavy. Vysvětlit pojem TRUE COLOR, dojít k tomu, kolik barev je možno vytvořit, vysvětlit, proč se používají pouze barvy z palet omezené velikosti. Vysvětlit, které barvy lze zadat jménem.

Pokusy s přepínáním prohlížeče mezi režimy STANDARD a QUIRK -

Zkusit si změny v DTD a v Mozille FF detekovat výsledný režim.

-

Detekovat režim prohlížeče při zpracování různých stránek na internetu.

CVIČENÍ WWW1 (PWA1) – č. 4 Informace o kódování stránky Zohlednění použitého kódování výsledného dokumentu pomocí meta tagu, např. ANSI = <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">, UTF8 = <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, vkládat do ještě před kvůli čitelnosti titulku. Užitečné odkazy: http://www.jakpsatweb.cz/cestina.html#meta (odtud si lze tagy zkopírovat např. přes schránku do HomeSite). Použití validátoru Co to je validátor a k čemu se dá použít. HTML validátory na internetu – - oficiální w3c na http://validator.w3.org, český na http://validator.webylon.info - výhody českého validátoru (pro začínající programátory). Validace dokumentu vytvořeného v HomeSite – - vkládání zdrojového textu do validátoru, výhody „přímého vstupu“ přes schránku, - čtení výstupu validátoru a práce s chybovými hláškami, - validita dokumentu podle „TRANSITIONAL“ a „STRICT“ deklarace. Vkládání a formátování textu Zásady a doporučení pro psaní stránek – - Tagy sice nejsou „case sensitive“, ale naučíme-li se psát je malým písmem, usnadníme si pozdější přechod na XHTML . - Párové tagy vždy ukončujeme (raději i tehdy, kdy je to nepovinné – např. p, td aj.) - Další užitečná doporučení pro psaní webu najdeme na http://www.semantika.name/desatero-semantickeho-webu.html Vložení dominantního nadpisu stránky – tag h1. Význam dominantního nadpisu. Co se stane, když místo h1 napíšu hl – princip ignorování neznámého tagu. Další úrovně nadpisů - h2 až h6, jejich reálná použitelnost. Možné důsledky neukončení párového tagu. Odstavec jako základ pro vložení textové informace – - p jako „paragraph“, - vzhled odstavce v okně prohlížeče a jeho chování vůči okolním objektům, - formátování odstavce (zarovnání = align) a následná ztráta validity stránky ve stylu STRICT. Fyzické a logické styly písma – rozdíly mezi fyzickým a logickým stylem (vysvětlit na příkladu b – strong a i - em), myšlenka maximálně přístupného webu, doporučení nahrazovat fyzické styly logickými, příklady nezavržených fyzických stylů - horní a dolní index (km2, H2O apod.). Vnoření tagů – - zásady pro vnoření tagů, - nebezpečí zkřížených tagů (např. Toto je tučně a toto navíc kurzívou a toto už je zkřížený tag), reakce validátoru. Tagy zavržené ve verzích HTML 4 (vyznačit ve vytisknutých seznamech HTML 3.2) – - podtržení u, - přeškrtnutí strike, - vlastnosti písma font, - základní velikost písma basefont, - centrovaný text center, - seznamy dir a menu. Vytváření validních dokumentů s použitím zavržených tagů – - důvody pro zavržení některých tagů, - reakce HomeSite při vložení zavrženého HTML tagu, - možnosti tagu font („size“, „color“, „face“) - změna DTD na nižší verzi HTML (např. HTML 3.2) a revalidace dokumentu. Entity – - základní myšlenka entit – vkládání speciálních znaků, jejichž zobrazení v prohlížeči nezávisí na zvoleném kódování dokumentu, - jednotná syntaxe &xxxx; (xxxx je kód entity), - pomoc při vkládání entity v prostředí HomeSite, - přehled entit je k dispozici na disku I: ve složce příslušného předmětu v souboru „xhtml-entity.pdf“, - je možno zkoušet např. toto: 27ºC, 1kΩ, ω=2πf, .. Užitečné odkazy: http://www.jakpsatweb.cz/html/entity.html CVIČENÍ WWW1 (PWA1) – č. 5 Blokové a řádkové elementy Rozdíl mezi elementem, tagem a atributem . Toto je červený text. Atribut je vlastnost. Tag je značka vymezující začátek, příp. konec elementu. Element je objekt vytvořený tagem. Užitečné odkazy: http://www.456bereastreet.com/archive/200508/html_tags_vs_elements_vs_attributes/ Blokové elementy (BLOCK) Element si pro sebe zabere ve vodorovném směru celou šířku okna prohlížeče (začíná tedy na samostatném řádku a má ho celý pro sebe). Jakýkoliv následující element (ať už blokový nebo řádkový) začíná až na dalším řádku. Seznam blokových elementů: - prvky pro formátování textu p, br, center, hr, - prvky pro strukturování dokumentu h1 až h6, div, blockquote, address, pre, - prvky seznamů ul, ol, li, dl, dt, dd (chovají se jako bloky jen do určité míry) Užitečné odkazy: http://www.jakpsatweb.cz/html/bloky.html Řádkové elementy (IN-LINE)  Element si pro sebe zabere v rámci řádku jen tolik místa, kolik mu dovolí jeho (zformátovaný) obsah. Vedle sebe mohou být na stránce pouze řádkové elementy. Seznam řádkových elementů: - elementy pro logické styly písma (em, strong, dfn, code, samp, kbd, var, cite), - elementy pro logické styly písma nově přidané do HTML 4 (abbr, acronym, del, ins, q), - elementy pro fyzické styly písma (tt, i, b, u, strike, big, small, sub, sup, font, basefont), - odkazy a, - obrázky img, - řádkový kontejner span. Užitečné odkazy: http://www.jakpsatweb.cz/html/text.html Pravidla pro vnořování elementů Pravidlo 1: Do řádkového elementu nesmíme vložit blokový element. Příklad: Toto je text odstavce, který měl být tučně Všechny ostatní možnosti jsou dovoleny, tj. blokové elementy (s výjimkou následujícího pravidla 2) mohou obsahovat jak další blokové, tak i řádkové elementy: Příklady: ü Toto je text odstavce, který bude tučně ü <div> Kousek textu a tučný text a kurzíva a červený text. </div> ü Pravidlo 2: Do odstavce p a nadpisů h1 až h6 nesmíme vložit blokový element. p h1 až h6 Příklady: <h1> Dobrý začátek, ale špatný pokus o odřádkování. </h1> Pravidlo 2 má tuto logiku: Odstavec p je elementární bloková jednotka, která se už nedá dělit na další bloky. Nadpisy h1 až h6 jsou jen zvláštními typy odstavce. Užitečné odkazy: http://www.jakpsatweb.cz/html/bloky.html#hn Obě pravidla je nutno dodržovat, jinak můžeme očekávat velké problémy s neočekávaným chováním stránky. Některé prohřešky proti oběma pravidlům nemusí vést k chybnému vykreslování stránky a nemusí je objevit ani validátor. Validátory a prohlížeče si totiž při vykreslování chybně napsané stránky pomáhají tím, že se pokoušejí „domýšlet“ správnou podobu kódu. Jak „uvažuje“ prohlížeč Napište v NotePadu kousek textu a uložte jej jako soubor s koncovkou HTM nebo HTML. Zobrazte obsah souboru v prohlížeči Mozilla Firefox. Označte libovolnou část textu, pomocí pravého tlačítka myši vyvolejte nabídku a z ní vyberte položku „Zobrazit zdrojový kód výběru“. Ukáže se, že aby prohlížeč mohl obsah souboru vykreslit, „domyslel“ si chybějící HTML značky. Prohlížeč si především „domýšlí“ tagy, které jsou v příslušné HTML specifikaci definovány jako nepovinné. Mezi nepovinné tagy patří otevírací i ukončovací značky pro html, head i body. Nepovinný je i tag pro ukončení odstavce . Zkuste si změnit obsah souboru na Prohlížeč si „domyslí“ toto: V okamžiku, kdy prohlížeč narazil na tag h1, zjistil porušení pravidla 2 (nadpis nemůže být v odstavci) a aktuálně otevřený odstavec p ukončil. Poté už jenom doplnil chybějící značku pro uzavření nadpisu. Pozn.: nadpis má povinnou ukončovací značku. Z toho vidíme, že prohlížeč nedoplňuje pouze nepovinné tagy, ale také ty, jejichž absence způsobuje ztrátu validity. Výše uvedené chování nám pomůže pochopit chybové hlášení validátoru při zpracování kódu „ “ Validátor si „domyslel“ ukončení odstavce před nadpisem a vadí mu uzavírací tag . Užitečné odkazy: http://atd.havrlant.net/jak-funguje-html - perfektní vysvětlení, jak „přemýšlí“ prohlížeč http://www.w3.org/TR/html4/index/elements.html - seznam všech HTML elementů (O = Optional neboli nepovinný tag) CVIČENÍ WWW1 (PWA1) – č. 6 Seznamy Princip, typy a použití nejznámější typy seznamů – neuspořádaný a uspořádaný, má přesně danou strukturu a některé rysy blokového elementu (viz dále), používaný pro navigaci na stránkách. Neuspořádaný seznam = unordered list = ul Uspořádaný seznam = ordered list = ol Společné rysy seznamů ul a ol chovají se jako bloky, ale mohou obsahovat jen li = list item, položky seznamu se zobrazí jako bloky s odsazením od levého okraje a s odrážkami, odrážky lze změnit atributem type elementu ul nebo ol. Položka seznamu li může obsahovat řádkový prvek nebo další seznam, sama musí být obsažena uvnitř seznamu, její ukončení tagem je nepovinné. Náměty k procvičení (hotový kód vždy přezkoušet validátorem) jednoúrovňové seznamy s různými typy řazení (číslování) a odrážek, víceúrovňové (vnořené) seznamy, seznamy se změnou logiky číslování (řazení) položek. Užitečné odkazy: http://www.jakpsatweb.cz/html/seznamy.html Odkazy Princip odkazu, typy odkazů je to řádkový element (odkazy se na stránce řadí vedle sebe), a href se používá k vytváření hypertextových odkazů (hypertext reference), a name se používá k vytváření záložek. a href – hypertextový odkaz Účel – kliknutím na odkaz se přeneseme do cíle. element a = anchor vnořený element pro aktivaci odkazu (na co mám kliknout) <a href="http://www.neco.cz" rel="nofollow">Sem klikni</a> cíl odkazu (kam se mám přenést po kliknutí) Cíl odkazu obecná syntaxe URL cílového dokumentu, různé typy protokolů (http, mailto, file, ..), zápis cesty k dokumentu (absolutní a relativní cesty, používané symboly), záložka (bude probráno dále), „prázdný“ odkaz # (pro ladicí účely) Element pro aktivaci odkazu musí to být řádkový element (text, obrázek aj.), nesmí to být další odkaz, tabulka, formulář aj. Parametry target pro definici cílového rámce (není validní podle STRICT specifikace), title jako univerzální „popisovač“. Vytváření navigace přes seznam položek – prakticky jediný uznávaný způsob, příklad: <ul> <li><a href="http://www.atlas.cz" rel="nofollow">Atlas</a></li> <li><a href="http://www.seznam.cz" rel="nofollow">Seznam</a></li> <li><a href="http://www.centrum.cz" rel="nofollow">Centrum</a></li> </ul> vodorovná navigace – v HTML např. pomocí tabulky. a name – záložka Účel – záložka je pojmenované místo v dokumentu, na které se mohu přenést kliknutím na odkaz. Odkaz na záložku v navigaci <ul> <li><a href="#kapitola1" rel="nofollow">KAPITOLA 1</a></li> <li><a href="#kapitola2" rel="nofollow">KAPITOLA 2</a></li> <li><a href="#kapitola3" rel="nofollow">KAPITOLA 3</a></li> </ul> Vytvoření záložky v názvu kapitoly jméno záložky cílem odkazu je záložka <h2><a name="kapitola2" rel="nofollow">Kapitola 2</a></h2> element a = anchor Skok na záložku nacházející se v jiném dokumentu <a href="jiny.html#kapitola2" rel="nofollow">KAPITOLA 2</a> Alternativa k záložkám – identifikátor ID <h2 id=”kapitola2”>KAPITOLA 2</h2> CVIČENÍ WWW1 (PWA1) – č. 7 Obrázky Účel grafiky na webu - má dekorativní funkci (tapeta na pozadí stránky, výplň a orámování objektů, efekty), - nese užitečnou informaci (nákresy, fotografie apod.). Pravidla pro webovou grafiku - pozor na autorská práva, - volba vhodného grafického formátu, - pečlivá příprava grafiky s ohledem na minimální velikost souboru. Používané formáty - GIF obrázek se může skládat z většího počtu rámců, které se střídají (možnost animace), v každém rámci může být max. 256 různých barev z předem namíchané palety, jedna barva v rámci může být průhledná (pozadí stránky je přes obrázek vidět), obrázek je bezeztrátově komprimován, hodí se pro kresby a technickou grafiku (schémata), nehodí se pro ukládání fotografií (málo barev). - JPG obrázek může obsahovat až 16 miliónů různých barev (TRUE COLOR 24 bitů), formát nepodporuje animace ani průhledné barvy, obrázek je ztrátově komprimován (na úkor kvality) s nastavitelným stupněm kvality, hodí se pro ukládání fotografií, nehodí se pro kresby a technickou grafiku (vznik rušivých artefaktů). - PNG 2 varianty: paletově orientovaný nebo TRUE COLOR, možnost řídit průhlednost barvy (některé prohlížeče to neumí zobrazit), formát nepodporuje animace, obrázek je bezeztrátově komprimován, hodí se na kombinace kresby a fotografie (hodně barev, průhlednost, jemné detaily). Užitečné odkazy: http://fireworks.jakpsatweb.cz/index.php?page=formaty Dekorativní grafika v HTML - má za následek ztrátu validity u stránek psaných podle STRICT specifikace, - klasickými příklady jsou tapety (na pozadí stránky nebo prvků tabulky) <body background="tapeta.jpg"> Obrázek pro tapetu je většinou malý obrázek, který je prohlížečem rozkopírován jako dlaždice ve vodorovném i svislém směru po celé ploše okna. Aby byl vytvořen plynulý vzor, musí obrázek vyhovovat určitým požadavkům. Další informace včetně různých atributů pro použití pozadí v HTML je možno nalézt na http://www.jakpsatweb.cz/pozadi.html. Grafika nesoucí užitečnou informaci - je zastoupena elementem img, který je tvořen nepárovým tagem, - img by se neměl používat pro vykreslení grafiky, která nemá vypovídací hodnotu, - img je řádkovým elementem (chová se stejně jako „písmenko“, obrázky se řadí vedle sebe). element img = image je tvořen pouze startovacím tagem alternativní text <img src="../images/fotka.jpg" alt=”Pepa u moře” width=”320” height=”200”> šířka a výška obrázku v pixelech relativní cesta k obrázku - cesta k souboru s obrázkem může být relativní i absolutní (vyhýbáme se absolutní cestě), - alternativní popisek je povinný i pro stránky psané podle TRANSITIONAL specifikace, - alternativní popisek má za úkol nahradit obrázek v případě, že tento nemůže být vykreslen, - alternativní popisek je prohlížečem IE mylně vykreslován jako bublinková nápověda, která se správně realizuje atributem title, - je vhodné vždy zadávat u obrázků rozměry, - není vhodné udávat jiné rozměry obrázku, než jsou rozměry originálu. Zvláště nevhodné je zmenšování velkého originálu tak, aby se vešel na stránku – stejně musíme stahovat velký obrázek a tím i zbytečné množství dat. Dodatečná změna rozměrů způsobuje u některých grafických formátů ztrátu kvality („rozsypání“ grafiky u GIFu apod.). - kliknutím pravého tlačítka na obrázek a aktivací volby „Vlastnosti“ zjistíme pouze hodnoty atributů width a height, nikoliv skutečné rozměry obrázku, - formátovací atributy border, align, hspace a vspace jsou dnes zastaralé a způsobují ztrátu validity u stránek psaných podle STRICT deklarace. Užitečné odkazy: http://www.jakpsatweb.cz/obrazky.html, http://fireworks.jakpsatweb.cz/index.php?page=html, http://validator.w3.cz/docs/pes-ben.html CVIČENÍ WWW1 (PWA1) – č. 8 Tabulky – elementy pro prezentaci tabulkových dat Účel tabulek na webu - zobrazení klasických tabulkových dat, - formátování obsahu (dnes by se mělo nahrazovat pomocí CSS). Nejjednodušší tabulka <table> <tr> první řádek <td>První vlevo</td> <td>První uprostřed</td> <td>První vpravo</td> </tr> První vlevo První uprostřed První vpravo Druhý vlevo Druhý uprostřed Druhý vpravo <tr> <td>Druhý vlevo</td> <td>Druhý uprostřed</td> <td>Druhý vpravo</td> </tr> druhý řádek </table> - element table obsahuje řádky tr (table row) složené z buněk td (table data), - vykreslování probíhá po celých řádcích shora dolů a po buňkách v řádku zleva doprava, - musíme vypsat obsahy všech buněk, - elementy tr a td jsou párové a jejich ukončování je nepovinné. Co může být vnořeno do tabulkových elementů - v elementu table mohou být pouze řádky tr (a některé speciální pro tabulky, viz dále) - v elementu tr mohou být pouze buňky td (nebo th, viz dále), - v elementu td může být cokoliv (třeba obsah celé stránky). Rozměry elementů tvořících tabulku (v pixelech nebo v procentech rozměru nadřazeného prvku) - je povoleno zadávat šířku celé tabulky i u STRICT deklarace bez ztráty validity, - šířka celého sloupečku se řídí podle nejširší buňky sloupečku, ostatní buňky se přizpůsobí, - nastavení výšky tabulky způsobuje ztrátu validity i podle TRANSITIONAL deklarace (ale většinou to funguje), - zadávat šířku a výšku buňky u STRICT deklarace vede ke ztrátě validity, - výšku řádku nelze zadat v elementu tr, zadávají se výšky buněk td; výška celého řádku se řídí podle nejvyšší buňky v řádku, výšky ostatních buněk v řádku se tomu přizpůsobí, - vykreslení rámečku border lze použít bez ztráty validity podle STRICT deklarace. Grafika v elementech tvořících tabulku - veškeré změny barev v tabulce mají za následek ztrátu validity podle STRICT deklarace, - obarvení rámečků mají za následek ztrátu validity i podle TRANSITIONAL deklarace (všechny varianty atributu bordercolor v elementech table, tr, th a td), - barvu pozadí lze nastavit u elementů table, tr, th i td, - obrázkové výplně lze použít do pozadí elementů table, td a th, - použití obrázkových výplní v tabulkách není v HTML dovoleno a způsobuje ztrátu validity i podle TRANSITIONAL deklarace, většinou to ale funguje. Tabulky s přesahy buněk - slévání buněk ve vodorovném směru (atribut colspan), - slévání buněk ve svislém směru (atribut rowspan), - použití TABLE WIZARD v HomeSite. Umístění tabulky na stránce - bez použití atributu align se tabulka chová podobně jako blokový element, - při použití align=“center“ se tabulka chová jako vycentrovaný blokový element, - při použití align=“left“ nebo align=“right“ se tabulka chová jako „plovoucí“ element obtékaný za ním následujícími objekty zprava nebo zleva (možnost umístit tabulky vedle sebe apod.), - použití atributu align má za následek ztrátu validity u stránky psané podle STRICT deklarace. Užitečné odkazy: http://www.jakpsatweb.cz/tabulky.html http://www.jakpsatweb.cz/html/tabulky.html http://www.jakpsatweb.cz/tabulky-format.html Konverze tabulky do HTML - makro pro převod tabulky z Wordu http://suplik.petnik.cz/stahnete/word2html.zip, - program pro převod tabulky z Excelu, Wordu aj. http://interval.cz/clanky/tabulka-v-html-mavnutim-proutku/ - diskusní stránka o konverzi tabulek do HTML http://diskuse.jakpsatweb.cz/?action=vthread&forum=3&topic=74766. CVIČENÍ WWW1 (PWA1) – č. 9 Tabulky – elementy pro formátování stránky Formátování stránky pomocí tabulky - tabulkový design celé stránky (design, layout), - formátování dílčího obsahu (vodorovná navigace, náhrada tabelátorů apod.). Tabulkový design stránek - tabulkový design je na webu velmi častý pro svou jednoduchost a spolehlivost, - tabulkový design má i některé nevýhody a dnes se nahrazuje technologií CSS. Příklady: - pevná šířka obsahu okraj okraj <table align=”center” width=”640” height=”100%”> <tr> <td>Tady bude obsah stránky</td> </tr> </table> info <table width=”100%” height=”100%”> <tr valign=”top”> <td width=”200”>navigace</td> <td>Tady bude obsah stránky</td> <td width=”150”>info</td> </tr> </table> Obsah stránky - vícesloupcový layout navigace Obsah stránky - záhlaví Hlavička navigace Obsah stránky <table width=”100%” height=”100%”> <tr> <td colspan=”2” height=”20”>Hlavička</td> </tr> <tr valign=”top”> <td width=”200”>navigace</td> <td>Tady bude obsah stránky</td> </tr> </table> Pozn.: atributy označené červeně způsobují ztrátu validity stránky i podle TRANSITIONAL deklarace. Užitečné odkazy: http://www.jakpsatweb.cz/tabulky-design.html Tabulkové formátování obsahu - tabulek se dá v HTML využít pro pozicování a formátování obsahu stránky (obsah se rozmístí do buněk tabulky a využije se všech možností tabulek v HTML – nastavení rozměrů, barvy a výplně pozadí, zarovnání obsahu i samotné tabulky apod.) Příklady: - vodorovná navigace Odkaz Odkaz Odkaz Odkaz <table align=”center”> <tr> <td width=”60”>Odkaz</td> <td width=”60”>Odkaz</td> <td width=”60”>Odkaz</td> <td width=”60”>Odkaz</td> </tr> </table> - přechodná změna formátování Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. Tady je text, který je formálně odlišen od okolního textu např. změnou šířky řádku, orámováním, je vypodložen grafikou, má barevné pozadí apod. <table width=”480” align=”center” bgcolor=”#f2dbdb”> <tr> <td> Tady je text, který je formálně odlišen od okolního textu např. změnou šířky řádku, orámováním, je vypodložen grafikou, má barevné pozadí apod. </td> </tr> </table> Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. - náhrada různých typů tabelátorů Text zarovnaný doleva Text zarovnaný doprava <table width=”100%”> <tr> <td>Text zarovnaný doleva</td> <td align=”right”>Text zarovnaný doprava</td> </tr> </table> CVIČENÍ WWW1 (PWA1) – č. 10 Osobní stránky – zadání projektu Obecné zásady pro vytváření zdrojového kódu - stránky pište jako validní podle TRANSITIONAL deklarace HTML 4.01, případné prohřešky proti validitě si budete muset obhájit, - do hlavičky vložte stručný a výstižný titulek, jméno a e-mail autora kódu a způsob kódování dokumentu, - stránky opatřete hypertextovou navigací; každý dokument vašeho webu vyjma úvodní stránky bude obsahovat odkaz na úvodní stránku; navigace na všech stránkách webu musí vypadat stejně, - na úvodní stránce popište cíl a sdělení celého webu a uveďte kontakt na sebe jako na autora, - ke strukturování textu používejte nadpisy h1, h2 až h6 podle potřeby (h1 je pouze 1x, pak h2 – nepřeskakovat hned na h3 apod.), a to i v případě, že textové nadpisy nahrazujete grafikou, - veškerý text a jiné řádkové elementy rozdělujte do odstavců p, neoddělujte odstavce řádkovým zlomem br, ten neslouží ke členění textů do odstavců, - pro účely tohoto projektu se vám povoluje používat tabulkový design stránek (neumíte dosud CSS), vyzkoušejte maximálně jeho možnosti (při dodržení výše uvedeného požadavku na validitu dokumentu), - vyhýbejte se značkám div a span, pokud nejsou potřeba, - barvy musí být definovány s ohledem na dostatečný kontrast jasu a odstínu popředí a pozadí. Na pozadí nesmí být použit vzorek, který jakkoli snižuje čitelnost obsahu. Užitečné odkazy: http://www.pixy.cz/dogma/dogmaw41/cs/index.html http://www.semantika.name/desatero-semantickeho-webu.html Požadavky na minimální obsah webu (pro případ osobních stránek) - úvodní stránka, - stručné osobní informace, - záliby a oblíbená činnost, - oblíbené odkazy, - fotogalerie, - o projektu (vše o výrobě tohoto webu, shánění podkladů, volba koncepce, jak dopadla validace a proč apod.) Tipy pro atraktivní design stránek Obrázková navigace - obrázek rozdělíme rastrem na malé obdélníčky a z některých uděláme odkazy. Princip: - z obrázku „nařežeme“ malé obrázky a ty složíme k sobě pomocí tabulky. Provedení: - „rozřezání“ provedeme ručně nebo pomocí nějaké utility, např. http://www.bzone.de/zips/splitz.zip, která nám obrázek nejen „rozřeže“, ale i složí do tabulky. Příklad: Původní grafika „Rozřezání“ podle rastru a převod do HTML tabulky Výsledek Výsledný kód HTML, který podobné programy vygenerují, bychom vždy měli zkontrolovat a případně upravit podle svých potřeb. Klikací mapa - v obrázku si vyznačíme plochy, které se budou chovat jako odkazy. Princip: - jde o element HTML, který se vytváří tagem map. Obsahem tohoto tagu jsou oblasti, které kreslíme přes obrázek a které budou reagovat na kliknutí myši. http://www.jakpsatweb.cz/html/obrazky.html#map . Provedení: - v HomeSite je pěkný průvodce, který vám s vytvářením klikací mapy pomůže. Příklad: <img src="ssier0.jpg" usemap="#rozcestnik" alt="SSIER" border="0"> Obrázek, přes který nakreslíme klikací mapu jménem „rozcestnik“ <map name="rozcestnik"> <area alt="SPŠE Rožnov" shape="poly" coords="173,104,472,173,467,260,309,261,132,176" href="#" title="SPŠE Rožnov"> <area alt="SOU Rožnov" shape="poly" coords="22,27,163,28,160,121,360,200,435,190,433,124,496,56,536,87,47 2,161,419,209,355,213,158,122,26,110" href="#" title="SOU Rožnov"> </map> Užitečné odkazy: http://blog.hakam.net/2008/programy-na-tvorbu-klikaci-mapy/ http://diskuse.jakpsatweb.cz/?action=vthread&forum=11&topic=36 CVIČENÍ WWW1 (PWA1) – č. 11 Úvod do CSS Co je to CSS a k čemu je to dobré - CSS = Cascading Style Sheets = kaskádové stylopisy. - Stylopis je předpis, kterým se předepisuje forma stránky (barvy prvků, jejich rozměry, umístění na stránce atd.). Buď je umístěn přímo v HTML dokumentu nebo je v externím souboru, na který je ze stránky odkaz. - Forma stránky je podle zásad moderního webu dána stylopisem, obsah stránky je vytvořen HTML značkami. Vyhovíme-li beze zbytku tomuto požadavku, mohou být naše stránky validní podle STRICT deklarace. Pak může naše stránka začínat např. deklarací <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> - Stylopisem můžeme zcela předefinovat vzhled a chování jakéhokoliv elementu stránky či celých skupin nejrůznějších objektů. CSS navíc podstatně rozšiřuje formátovací možnosti HTML. - Výhodou je, že jediným zásahem do stylopisu můžeme rázem změnit vzhled a chování celé stránky (nebo dokonce více stránek v případě externího stylopisu). Tři různé způsoby, jak psát stylopis - Interní stylopis - stylopis se umístí přímo do HTML souboru do hlavičky stránky, tj. do elementu tvořeného tagem head. Jakákoliv změna ve stylopisu se projeví změnou chování nebo vzhledu této jediné stránky. - In-line stylopis - stylopis se umístí jako atribut do tagu, který chceme formátovat. Změna ve stylopisu se projeví změnou chování nebo vzhledu pouze toho elementu, který je vytvořen tímto tagem. Jeho použití se nedoporučuje, neboť popírá některé principy, kvůli kterým bylo CSS zavedeno, nicméně někdy se mu nevyhneme. - Externí stylopis - stylopis se umístí do externího souboru, kterému dáme koncovku css. Do hlavičky HTML dokumentu, který bude tohoto stylopisu využívat, vložíme na externí CSS soubor odkaz. Změna ve stylopisu se najednou projeví na všech stránkách, v jejichž hlavičkách je na tento stylopis odkaz. V současnosti je to jediný doporučovaný způsob, jak „ostylovat“ HTML dokument. Interní stylopis Budeme chtít přebarvit hlavní nadpis stránky namodro a všechny nadpisy druhé úrovně načerveno – bez ohledu na to, kolik jich na stránce bude. Kdybychom měli vystačit s prostředky HTML, museli bychom udělat ve stránce změny na tolika místech, kolik je ve stránce dotyčných nadpisů. V případě nového požadavku na jinou barvu by se všechno opakovalo.. CSS umožňuje zadefinovat, jak se bude dotyčný tag projevovat, ať už je na stránce použit kdekoliv a kolikrát chce.. Základní pojmy (týkají se každého druhu stylopisu): selektor selektuje ze stránky všechny objekty tvořené tagy h2 a přiřazuje jim červenou barvu h2 {color: red;} vlastnost hodnota stylopis středník je oddělovač, za kterým může následovat další CSS vlastnost <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>První pokus s CSS <style type="text/css"> h1 {color: blue;} h2 {color: red;}

interní stylopis

HLAVNÍ NADPIS

Tady bude nějaký text v odstavci..

Kapitola 1

Tady bude nějaký text 1. kapitoly..

Kapitola 2

Výsledek v prohlížeči

Tady bude nějaký text 2. kapitoly..

In-line stylopis Chceme, aby konkrétní odstavec vybočoval z obvyklého vzhledu tím, že bude mít jinou šířku než ostatní a bude vhodným způsobem orámován. Kdybychom měli vystačit s prostředky HTML, museli bychom text tohoto odstavce umístit do tabulky a tu vhodně naformátovat. Všimněte si, že CSS podstatně převyšuje formátovací možnosti obyčejného HTML.
HLAVNÍ NADPIS

in-line stylopis

Tady bude nějaký úvodní text .. Tady bude nějaký úvodní text .. Tady bude nějaký úvodní text ..

Kapitola 1

Lorem ipsum dolor sit amet, consec adipiscing elit. Praesent posuere, pulvinar blandit, urna mattis, non suscipit sapien interdum tortor.

Kapitola 2

Mauris placerat, dolor congue vulputate, massa imperdiet orci, porta lorem neque velit. In et velit dolor sodales blandit ac et est.

Výsledek v prohlížeči

Externí stylopis Externí soubor se stylopisem můžeme vyrobit v jakémkoliv textovém editoru (např. v NotePadu) nebo použijeme vhodnější nástroj, např. utilitu TopStyle, která je integrována přímo v HomeSite.

název a umístění HTML souboru

název a umístění CSS souboru

seznam CSS vlastností vložení externího stylopisu

Předběžný pohled na výsledek

Odkaz na soubor s externím stylopisem

Užitečné odkazy: http://www.jakpsatweb.cz/css/css-uvod.html Doporučený způsob práce s CSS

vytváření a úpravy externího stylopisu + aktualizace CSS souboru

vytváření a úpravy HTML kódu

předběžný pohled na výslednou stránku

CVIČENÍ WWW1 (PWA1) – č. 12 Obecné zásady pro práci s CSS Jaké DTD zvolit už při zakládání HTML dokumentu? - Mnoho vážných problémů s CSS nám odpadne, když zajistíme přepnutí cílového prohlížeče do módu STANDARD. Prohlížeč přepnutý naopak do QUIRK módu se totiž chová jako jeho starší verze a tudíž nemusí „znát“ mnohá pravidla CSS. Navíc v případě IE by se naše stránka vykreslovala i s anomáliemi, které jsou pro starší verze IE typické. - Přepnutí drtivé většiny moderních prohlížečů do módu STANDARD zajistíme použitím DTD

1

Tímto DTD však dáváme prohlížeči na vědomí, že stránka bude psána podle STRICT specifikace. Aby byly naše stránky validní, musíme pak striktně dodržovat pravidla pro vzájemné oddělení obsahu HTML dokumentu od jeho formy + další zásady, které z těchto pravidel vyplývají. To může být někdy obtížné – např. všechno formátování už musíme dělat přes CSS a ne HTML značkami. Dobrou zprávou je, že i když tato pravidla porušíme, prohlížeč zůstane přepnut do STANDARD módu, stránky pouze nebudou validní. - Prohlížeč můžeme přepnout do módu STANDARD také pomocí následujícího DTD.

2

Tímto DTD dáváme prohlížeči na vědomí, že stránka bude psána podle TRANSITIONAL specifikace. Udržovat takto napsaný dokument jako validní je mnohem snadnější a navíc máme jistotu správného zobrazování stránky, protože prohlížeč pracuje v STANDARD módu. Z praktických i pedagogických důvodů budeme upřednostňovat DTD 1 . Toto DTD lze vyrobit jednoduchou editací šablony nabídnuté HomeSite po spuštění programu (umazáním slovíčka Transitional včetně mezery před ním).

Pozn.: Pokud bychom potřebovali otestovat stránku v QUIRK módu (např. chceme odhadnout, jak se stránka bude chovat ve starší verzi IE), stačí jakkoliv porušit DTD, např. umazat písmenko D v DOCTYPE.

Jak zobrazit vazby mezi prvky HTML dokumentu? - vazby mezi objekty HTML dokumentu se dají graficky znázornit jako stromová struktura, - pro úspěšné použití CSS je znalost stromové struktury stránky velkou pomocí. Ukázka v prostředí HomeSite:

Vše „vyrůstá“ z objektu „HTML“, který je „kořenovým“ neboli „ROOT“ elementem. Všechny elementy tvořící obsah stránky jsou obsaženy v elementu „BODY“, který je vzhledem k nim „předchůdcem“ (ancestor) a ony jsou vzhledem k němu „následníky“ (descendant). Vzájemně nejbližší předchůdci a následníci jsou vůči sobě „rodiči“ (parent) a „dětmi“ (child). Vztah „parent-child“ lze vysledovat např. u dvojic elementů „UL - LI“, „LI - STRONG“, „BODY – H1“ aj.

Obsah stránky (BODY) je možno pro větší přehlednost nakreslit takto: BODY

rodič - dítě

H1

P

P

H2

UL

P rodič - dítě

EM

STRONG

STRONG

předchůdce - následník

LI

STRONG

STRONG

STRONG

LI

STRONG

LI

STRONG

STRONG

STRONG

sourozenci

Některé prohlížeče umožňují zobrazit stromovou strukturu HTML dokumentu. IE od verze 8 má v sobě pro tyto účely tzv. Nástroj pro vývojáře, který se spouští klávesou F12. Pro FireFox existuje rozšíření pro vývojáře FireBug, http://getfirebug.com/. Na obrázku je postup při spuštění podobné utility v prohlížeči Google Chrome. Utilitu vyvoláme přes pravé tlačítko myši a vybereme volbu „Zkontrolovat prvek“.

Po stromové struktuře můžeme „cestovat“ a studovat všechny elementy a jejich vlastnosti. Prvek, na kterém máme zrovna kurzor myši, se ve stránce vysvítí.

Jak selektovat prvky ze stránky a pak je stylovat - typy selektorů a jejich použití Selektor seznamu - Máme přebarvit na žluto pozadí všech nadpisů H1 a H2. Potřebný selektor se složí ze selektorů pro H1 a H2 oddělených čárkami: h1, h2 {background-color: yellow;} Selektor následníka - Máme přebarvit na červeno pozadí jen těch prvků STRONG, které jsou v seznamech UL. Potřebný selektor se složí ze selektorů pro UL a STRONG, mezi které vložíme mezeru: ul strong {background-color: red;} Selektor dítěte - Máme přebarvit na zeleno pozadí jen těch prvků STRONG, které jsou přímými následníky prvků EM (tj. dětmi, mezi nimi a EM už není žádný prvek). Potřebný selektor se složí ze selektorů pro EM a STRONG, mezi které vložíme značku “větší než”: em > strong {background-color: green;} Selektor nejbližšího mladšího sourozence - Máme přebarvit šedou barvou pozadí jen těch odstavců P, které jsou hned za nadpisy H2 (všechny H1, H2 a P a UL na obrázku jsou sourozenci, prvek uvedený v dokumentu dříve je starší). Potřebný selektor se složí ze selektorů pro H2 a P, mezi které vložíme značku “+”: h2 + p {background-color: gray;}

BODY

H1

P

EM

P

EM

STRONG FONT

H2

STRONG

P

P

UL

H2

LI

STRONG

P

P

LI

STRONG

STRONG

STRONG

STRONG

P

P

LI

STRONG

STRONG

STRONG

Selektor dítěte a selektor nejmladšího sourozence podporuje IE až od verze 7. Pokud bychom při psaní stránky zvolili takový DTD, který by prohlížeč přepnul do QUIRK módu, tyto selektory by nefungovaly ani ve vyšších verzích IE (prohlížeč „zestárne“ a tyto prvky nezná..). Problematika selektorů je mnohem širší, více na http://www.webtip.cz/art/wt_tech_html/wt_cssserial_003.html. Test prohlížeče na to, jak zvládá určité typy selektorů, lze najít na http://www.css3.info/selectors-test/.

Validace dokumentu s kaskádovými styly - lze použít odkaz na CSS validátor uvedený na adrese http://validator.w3.org, - lze použít přímý odkaz na CSS validátor http://jigsaw.w3.org/css-validator/, - na stránkách CSS validátoru se seznamte s volbou „Další možnosti“ a s rozbalovací nabídkou „Profil“,

- nastudujte si historii CSS, seznamte se s verzemi CSS a s jejich podporou v dnešních prohlížečích.

Užitečné odkazy: http://www.jakpsatweb.cz/css/css-historie.html http://en.wikipedia.org/wiki/Cascading_Style_Sheets#History http://www.webylon.info/K.21

CVIČENÍ WWW1 (PWA1) – č. 13 Zásady pro psaní HTML podle STRICT specifikace Používání DTD vede k tomu, že cílový prohlížeč bude přepnut do režimu STANDARD (a to právě potřebujeme pro minimalizaci problémů s vykreslováním stránky v CSS). Současně nás však tato deklarace zavazuje k tomu, že budeme HTML dokument psát podle striktních zásad, na kterých stojí moderní web (STRICT specifikace). Aby byly naše stránky validní podle STRICTu, musíme splnit přísnější podmínky než u deklarace TRANSITIONAL. Zde jsou hlavní zásady, které nám v tom pomohou: - Všechny přestupky proti TRANSITIONAL deklaraci jsou zároveň přestupky proti STRICTu. - Zákaz používání jakékoliv kombinace HTML značek a atributů pro formátování vzhledu a chování stránky – to vše už musíme dělat pomocí CSS. - Příkladem formátovacího elementu, který je ve striktní deklaraci zakázán, je CENTER Toto má být vycentrováno nebo FONT Toto je nevalidní, i když se formátuje přes CSS Dalšími příklady elementů zakázaných podle STRICTu jsou dnes již zapovězené prvky STRIKE, U a další (je možno vyzkoušet ve validátoru). - Příkladem zakázaného formátovacího atributu je align
Toto má být vycentrováno
nebo bgcolor: Tady bude obsah stránky - Řádkové elementy nesmí být přímo v BODY, ale musí být vnořeny do některého blokového prvku. - Přirozenými stavebními prvky obsahu jsou odstavce P. Všechen běžný textový obsah by měl být strukturován do odstavců, tj. měl by být vnořen do prvků P. - Přímo v BODY nesmí být žádné další řádkové elementy – obrázky, odkazy, elementy vytvářející fyzické a logické styly atd.: Takhle přímo v BODY se nesmí povalovat žádný text. . .

Drobné poznámky k psaní CSS - Řádkové elementy si své rozměry vydobudou samy svým obsahem (např. „šířka“ věty je dána počtem znaků atd.), proto nemá smysl zadávat jim rozměry přes CSS (šířka, výška). Starší verze IE se vám při vykreslování stránky přesto snaží vyhovět a to vede k problémům. CSS validátor na tuto logickou chybu nereaguje. - Ne všechny barvy můžete zadat v CSS pomocí názvu barvy, nižší verze CSS to považují za nevalidní.

Logické členění obsahu stránky - Pro logické členění obsahu formátovaného pomocí CSS jsou určeny HTML elementy DIV a SPAN. - DIV je neutrální blokový element:
Tady může být celý kus stránky, který bude mít zvláštní formátování přes CSS. V DIVu může být obsažen jakýkoliv HTML element, tedy i další DIV.
- SPAN je neutrální řádkový element: Tady je kousek textu a tady je jeho pokračování, které bude mít zvláštní formátování přes CSS. SPAN je řádkový element, proto do něj nesmíme uzavírat žádné blokové prvky. - Stránku s řádkovými prvky umístěnými přímo v BODY lze udělat validní ve STRICTu např. tímto způsobem:
Záložka jménem „top“, tento text i následující obrázek už neleží přímo v BODY, ale jsou vnořeny do blokového elementu DIV. Jedná se tedy o validní zápis i podle STRICT deklarace. . .
Neutrální kontejnery by se měly používat pouze k tomu účelu, ke kterému jsou určeny – k rozdělení obsahu stránky na logické celky, které se následně formátují přes CSS. Snažíme se výskyt DIVů a SPANů minimalizovat na skutečně nevyhnutelné případy, kdy se bez nich neobejdeme (vytváření efektů rámů, plovoucího obsahu aj.). Na obrázku je ukázka použití DIVů – celá stránka je vnořena do obálky, která může být pomocí CSS speciálně vybarvena, dostane rozměry a určíme její chování vůči oknu prohlížeče. Obsah této obálky můžeme dále rozčlenit na 3 panely, jejichž vlastnosti také definujeme pomocí CSS. BODY

DIV id=“obalka“

DIV id=“levy_panel“

Obsah levého panelu

DIV id=“stred“

Obsah prostředního panelu

DIV id=“pravy_panel“

Obsah pravého panelu

Zneužívání DIVů a SPANů je častým nešvarem, který vede ke vzniku problematického stylu popsanému např. na http://www.semantika.name/fekalni-styl.html.

Vývojové pomůcky pro práci s CSS Rozšíření FIREBUG

pro FireFox

- jde o rozšíření poskytující přístup k detailním informacím o tom, jak pracuje prohlížeč se zdrojovým kódem stránky, - umožní nám pochopit fungování dědičnosti v HTML stromu, poskytne nám detailní přehled o vlastnostech prvků na našich stránkách, graficky nám ukáže formátovací modely ke každému prvku aj., - doplněk instalujeme klasicky z prostředí FireFoxu z nabídky Nástroje → Správce doplňků nebo přímo z adresy http://getfirebug.com/,

- doplněk aktivujeme z prostředí FireFoxu klávesou F12 nebo pomocí příslušných ovládacích prvků (pravým tlačítkem myši a volbou Zkoumat prvek, ťuknutím na ikonku ve stavovém řádku aj.)

Aplikace FastStone Capture - jde o aplikaci, jejíž primární funkcí je snímání nejrůznějších výřezů obrazovky a jejich následné konverze do různých grafických formátů. Aplikace má v sobě navíc utilitky užitečné pro webdesignéra - lupu pro detailní zkoumání obrazovky, - kapátko pro analýzu a snímání barev a - pravítko pro měření rozměrů objektů na obrazovce.

Formátování písma - U písma se dá pomocí CSS určovat - definice písma (druh fontu neboli rodina písma), - vzhled (styl) písma, - varianta písma, - tučnost písma, - velikost písma, jeho šířka a další vlastnosti. Vlastnost font a všechny její následující „podvlastnosti“ navigují prohlížeč, jak skládat text z fontů, které jsou nainstalovány na klientském počítači. Definice písma - druh fontu Fonty se dělí do těchto základních tříd: Patkové - Serif - (Times New Roman, MS Georgia) Bezpatkové - Sans-Serif - (MS Arial, MS Verdana, Helvetica) Strojové - Monospace - všechna písmena jsou stejné šířky, tzv. písmo neproporcionální neboli „písmo psacího stroje“ (Courier, MS Courier New) Ozdobné - Fantasy - (Alpha Geometrique, Critter, Cottonwood, FB Reactor) Kurzíva - Cursive - podobné ručnímu nebo skloněnému písmu (Comic Sans MS, Caflisch Script, Adobe Poetica) prohlížeč hledá na počítači nainstalovaný font podle seznamu zleva doprava body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

ü

}

h1,h2 {

nezapomenout uvést nakonec základní třídu fontu – „poslední záchrana“

font-family: Georgia, serif; }

Nastudujte si z níže uvedených odkazů typické použití patkových a bezpatkových písem – které se hodí na prostý text, které na nadpisy apod. Prostudujte si případy pro typické použití strojového písma. Vyberte si písma, která budete na svých stránkách preferovat, a vezměte v potaz kritéria doporučovaná v odkazech (čitelnost písma, všeobecná rozšířenost fontu, ne příliš mnoho různých fontů apod.). Písma si odzkoušejte na pokusné stránce vytvořením vlastního stylopisu, který přiřadí různé fonty textu obsaženému v odstavcích a textu v nadpisech. Užitečné odkazy: http://interval.cz/clanky/kaskadove-styly-fonty/ - dobrý úvod, http://www.free-template.eu/fonty.html http://www.webtip.cz/art/wt_tech_html/wt_cssserial_013.html - přehled, doporučení, http://typografie.wz.cz/stranky.html - obecné zásady, kombinování písem, http://www.dgx.cz/tools/fonts/ - jak který font vypadá, http://www.tvrdek.cz/weblog/typografie/13/fonty-na-webu/ - praktické rady, podrobný přehled, http://typografie.dero.name/typografie-fonty-1.phtml - seriál o stylování písma přes CSS.

CVIČENÍ WWW1 (PWA1) – č. 14 Dědičnost a kaskáda V HTML stromech jsou některé vlastnosti dědičné (a některé dědičné nejsou). Hodnota dědičné vlastnosti se dědí od rodičovského prvku a „přebíjí“ výchozí hodnotu.

Není-li vlastnost definována stylopisem, výchozí hodnotu jí přiřadí prohlížeč.

Hodnota přiřazená stylopisem „přebíjí“ výchozí i zděděnou hodnotu.

/* Žádný stylopis,

body {

body {

všechny vlastnosti

color:

color:

prvků mají

olive}

olive}

prohlížečem

p{

přiřazeny výchozí

color:

hodnoty , např.

red }

color:

#000000

BODY

BODY

*/

P

P P

Výsledná hodnota vlastnosti prvku je dána kombinací dědičnosti a kaskády stylopisných pravidel. Přesný algoritmus není jednoduchý, proto velmi zjednodušeně: vlastnosti přidělené stylopisem mají přednost před vlastnostmi zděděnými, jsou-li v konfliktu dvě pravidla stylopisu, vítězí poslední z pravidel (poslední karta přebíjí vše..), konkrétnější pravidlo má přednost před méně konkrétním. ul { body {

color:

BODY

color:

gray}

olive} P

pb{

P

UL UL

color:

red}

BB B b{

LI LI

BBB

LI LI

LI LI

BBB

BBB

I

color:

blue}

Olivovou barvu textu zdědí všichni potomci BODY, tj. všechny prvky stránky. Šedou barvu textu zdědí všichni potomci UL. Modrou barvu textu získají všechny prvky B. Prvek B, který je potomkem prvku P, získá nakonec červenou barvu textu. Tady se uplatňuje pravidlo „konkrétnější pravidlo vítězí“ (selektor p b je konkrétnější než selektor b). Nezáleží na pořadí těchto dvou selektorů ve stylopisu.

Procvičování dědičnosti, kaskády a dosud probraných vlastností písma Připravte si HTML kód se stromovou strukturou podobnou stromu z předchozího obrázku. Proveďte link na soubor s externím stylopisem, který prozatím ponechte prázdný. Stránku si zobrazte ve Firefoxu s nainstalovaným doplňkem FireBug. Pomocí doplňku FireBug zjistěte, jaký druh písma přiřadil prohlížeč jednotlivým prvkům na stránce. Prohlídněte si výchozí hodnoty i jiných vlastností než font-family. Skutečné hodnoty přiřazené vlastnostem každého prvku najdete v záložce Panel-computed.

Pomocí záložky Panel-computed prozkoumejte, čím se liší výchozí vlastnosti nadpisů H1, H2, .. od vlastností obyčejného textu. Pomocí stylopisu změňte druh písma prvku BODY na některé bezpatkové a přesvědčte se, že vlastnost fontfamily je dědičná (záložka Styly). Pomocí stylopisu změňte druh písma nadpisů na některé patkové a v záložce Styly sledujte přerušení toku dědičnosti.

Procvičte si na stromové struktuře různé druhy selektorů ve spojení s dalšími vlastnostmi textu, které už znáte – barva písma color a barva pozadí background-color. Přesvědčte se, že všechny tyto vlastnosti kromě background-color jsou dědičné. Pozorujete nějaký rozdíl mezi tím, když stylujete dědičné vlastnosti prvku BODY nebo HTML? Vyzkoumejte, zda lze pomocí stylopisu ovlivnit vlastnosti písma v titulku stránky (barva, typ písma, pozadí písma). Vzhled (styl) písma Stylopis rozšiřte o další dědičnou vlastnost font-style, která upravuje sklon písma. Vyzkoušejte všechny tři povolené hodnoty: normal – výchozí hodnota, znamená přirozený sklon písma (vyzkoušejte také na prvcích I a EM), italic – nahradí dané písmo jeho verzí s kurzívou; není-li k dispozici, prohlížeč skloní písmo sám, obligue – uměle skloněný text (zjistěte skutečnou hodnotu této vlastnosti u prvků I a EM).

Varianta písma Stylopis rozšiřte o další dědičnou vlastnost font-variant, která umožňuje vykreslovat normálně zadaný text buď normálně nebo tzv. kapitálkami. Některé prohlížeče tuto vlastnost neovládají. Vyzkoušejte: normal – výchozí hodnota, znamená normální variantu písma, small-caps – kapitálky, tj. text se nahradí velkými písmeny. Malá písmena se od velkých odliší tím, že jsou o trochu nižší. Tučnost písma Stylopis rozšiřte o další dědičnou vlastnost font-weight, která umožňuje řídit tučnost písma (jeho „váhu“). Vyzkoušejte: normal, bold, bolder, lighter – výchozí hodnota je normal a bold je tučně. Hodnoty bolder a lighter nemusí být správně vykresleny (ne každé písmo disponuje těmito variantami tučnosti), čísla 100, 200, 300, 400, 500, 600, 700, 800, 900 – číselně odstupňovaná tučnost, větší číslo znamená tučnější písmo. Samo písmo musí tyto varianty tučnosti obsahovat, většinou to v praxi nefunguje. Velikost písma Stylopis rozšiřte o další dědičnou vlastnost font-size, která umožňuje řídit velikost písma. Vyzkoušejte: xx-small, x-small, small, medium, x-large, xx-large – absolutní hodnoty. Výchozí hodnota prohlížeče pro neformátovaný text je medium, toto si však může uživatel změnit,

smaller, larger – relativní hodnoty, pomocí nich se dá zvětšovat nebo zmenšovat písmo po stupnici absolutních hodnot (larger udělá z hodnoty small hodnotu medium atd.), číselné vyjádření velikosti písma v příslušných jednotkách px (pixely), pt (typografické body), em (čtverčíky neboli šířka velkého písmene M), ex (výška malého písmena x), mm (milimetry), cm (centimetry), pc (pica), in (palce), % (procenta z velikosti rodičovského prvku). Nejčastěji se pro účely prezentace stránky na stínítku obrazovky používají tučně zvýrazněné jednotky.

Užitečné odkazy: http://typografie.dero.name/typografie-css.phtml http://www.webtip.cz/art/wt_tech_html/wt_cssserial_013.html http://www.kai.tul.cz/~satrapa/www/kurs/velikost.html Zkrácená varianta deklarace písma v CSS Místo font-family: serif; font-size: 15px; font-style: italic; font-variant: small-caps; font-weight: bold; se dá použít zkráceného zápisu font: italic small-caps bold 15px serif; Musí být dodrženo uvedené pořadí vlastností písma. Povinné jsou v tomto zkráceném zápisu pouze velikost (font-size) a rodina písma (font-family), ostatní se mohou podle potřeby vynechat. Užitečné odkazy: http://www.jakpsatweb.cz/css/font.html Délkové jednotky v CSS Pixel (picture element) je obrazový bod. Z pixelů se tvoří vizuální podoba dokumentu – na stínítku obrazovky, na promítací stěně, na papíru při tisku. Velikost pixelu je dána typem zobrazovacího zařízení a podmínkami jeho provozu. Příklady: Velikost pixelu na stínítku monitoru je dána aktuálním nastavením monitoru, např. jeho rozlišením. Pokud upravujeme příslušnými ovládacími prvky geometrii obrazu, např. jeho šířku a výšku, měníme také velikost pixelu. Zoomováním obrazu promítaného dataprojektorem na plátno nebo přibližováním a oddalováním projektoru od promítací stěny se podstatně mění velikost pixelu. U tiskáren je velikost pixelu dána konstrukcí tiskárny a požadovanou kvalitou tisku v DPI. Pixel je tedy relativní délková jednotka vztažená vždy ke konkrétnímu zobrazovacímu zařízení. Přepočet mezi pixely a absolutními délkovými jednotkami jako např. centimetry, milimetry a palci obecně není možný a může se vztahovat pouze na konkrétní situaci. Námět na společnou práci v laboratoři: Nastavte stylopisem velikost písma kořenového prvku dokumentu dle vlastní volby v pixelech (např. 20px) body {font-size: 20px;} a ověřte skutečnou velikost písma na obrazovce monitoru a na promítací stěně pro dataprojektor. Velikosti určete v pixelech a v milimetrech. Na promítacím plátně jsou pixely dobře viditelné a lze je spočítat, pro zjišťování délek na monitoru použijte utilitu „Pravítko“ z FS Capture. Pomocí fotoaparátu zhotovte snímek detailu písma z promítací stěny a sejměte makrosnímek z monitoru. Pokuste se zjistit, co přesně velikost fontu znamená a jak se měří. Užitečné odkazy: http://css-tricks.com/css-font-size/ http://reference.sitepoint.com/css/lengthunits

Pixel na monitoru je vysoký asi 0,26mm...

.. a na promítací ploše dataprojektoru může mít třeba 5mm.

CVIČENÍ WWW1 (PWA1) – č. 15 Relativní délková jednotka „em“ Délka 1em je odvozena od šířky velkého písmena „M“. Z historických důvodů je dnešní pojetí výšky písma totožné s šířkou velkého „M“, takže stylopis body {font-size: 1em} znamená, že velikost písma ponecháváme na stejné hodnotě, jakou mu přidělil prohlížeč, tj. na výchozí hodnotě – např. 16px. Zápis body {font-size: 0.8em} znamená, že velikost písma měníme na 0,8 × 16 = 12,8 px.

body {

BODY

font-size: 20px }

PP

p{

20px

20px

x 0,8 =

x 0,8 =

16px

UL

PP

16px

II

16px – dědí se vypočtená hodnota,

font-size: 0.8em 16px

}

BBB

x 1,1 =

LI

LI

LI

17,6px

nikoliv 0.8em 20px

BB

b{ font-size: 1.1em

BB

BB

x 1,1 =

22px

}

V případě rozměrů udávaných v relativních jednotkách se dědí vypočtené hodnoty, nikoliv původní relativní hodnoty. To má dobrý důvod. Kdyby tomu tak nebylo a element I by zdědil od odstavce P místo vypočtené hodnoty 16px hodnotu 0,8em, písmo by se dále zmenšilo na 0,8 × 16 = 12,8 px a s každým dalším zanořeným elementem by bylo stále menší a menší. Rozměry udávané v procentech „%“ se vztahují k rozměrům rodičovského prvku. Platí 1em = 100% 1.1em = 110% 0.75em = 75%

Užitečné odkazy: http://www.jakpsatweb.cz/css/css-jednotky.html#relativni

Sazba písma Jak vypadá řádek - jak se měří výška písma – příklad pro font-size: 30px 30px

- výška řádku se udává jako násobek výšky písma. Příklad pro řádkování 2 line-height: 2; nebo line-height: 200%; nebo line-height: 2em

2x30px=60px

line-height: 1.5; nebo line-height: 150%; nebo line-height: 1.5em

1.5x30px=45px

line-height: 1.2; nebo line-height: 120%; nebo line-height: 1.2em

1.2x30px=36px

- toto je výchozí hodnota běžných prohlížečů – nejmenší řádkování, při kterém ještě do sebe nezasahují sousední řádky. line-height: 1; nebo line-height: 100%; nebo line-height: 1em

1x30px=30px

- sousední řádky do sebe zasahují. Pokud má text nastaveno barevné pozadí jako na ukázce, dochází k přemazávání písma pozadím spodního řádku. Alternativní zadávání řádkování

font: 30px/1.5 serif

Užitečné odkazy: http://www.slideshare.net/maxdesign/line-height

Kouzla s textem Následující vlastnosti se přiřazují převážně blokovým elementům, příp. elementům HTML a BODY a řídí chování textů v nich obsažených: - vodorovné zarovnání textu, - odsazení prvního řádku odstavce, - dekorace textu, - transformace textu, - vertikální zarovnání, - prostrkání textu, - bílé mezery Vodorovné zarovnání textu Stylopis pro cvičný HTML text rozšiřte o dědičnou vlastnost text-align, která upravuje vodorovné zarovnání textu vůči nadřazenému blokovému elementu. Vyzkoušejte všechny čtyři povolené hodnoty, které už znáte z HTML - left, right, center a justify. Odsazení prvního řádku odstavce Vyzkoušejte další dědičnou vlastnost text-indent, která umožňuje odsadit první řádek textu. Vyzkoušejte hodnoty zadávané v relativních jednotkách em, ex, % (z čeho se berou procenta?) a px. Které jednotky lze použít, když chceme odsadit první řádek o předem známý počet znaků? Dekorace textu Vyzkoušejte další (částečně) dědičnou vlastnost text-decoration, která umí podtrhávat, „nadtrhávat“, přeškrtnout nebo rozblikat text hodnotami underline, overline, line-through a blink. Všechny čtyři hodnoty lze libovolně kombinovat, např. text-decoration: underline overline; Hodnotu blink, prosím, nepoužívejte, stránky pak vypadají jako pozvánka do cirkusu. Vlastnost text-decoration se dá použít i na řádkové elementy, v tomto případě ale není dědičná. Vyzkoušejte, podle čeho se prohlížeč řídí při výběru barvy dekorační čáry. Transformace textu Vyzkoušejte další (částečně) dědičnou vlastnost text-transform, která transformuje zdrojový text na velká, malá písmena a na kapitálky hodnotami uppercase, lowercase a capitalize. Vlastnost text-transform se dá použít i na řádkové elementy, v tomto případě ale není dědičná. Výchozí hodnotou je none. Svislé zarovnání Stylopis pro cvičný HTML text rozšiřte o vlastnost vertical-align, která upravuje svislé zarovnání textu vůči řádku. Vyzkoušejte hodnoty baseline, sub, super,top, text-top, middle, bottom a textbottom.

Vlastnost není dědičná.

Prostrkání textu Stylopis rozšiřte o další dědičné vlastnosti word-spacing a letter-spacing které umožňují měnit vzdálenosti mezi slovy a mezi jednotlivými znaky (tzv. prostrkání slov nebo písmen). Předpisem word-spacing: 0.1em; letter-spacing: 1em; přidáváme hodnotu 0.1em k výchozí vzdálenosti mezi slovy a 1em k výchozí vzdálenosti mezi znaky. U této vlastnosti nelze použít procenta. Bílé mezery Je libovolná posloupnost mezer, tabelátorů a dalších řídicích znaků pro odřádkování („enter“) v HTML kódu stránky. Vlastnost white-space určuje, jak se tyto znaky projeví v prohlížeči. Hodnoty: normal – chování odpovídající HTML, tzn. série mezer se „smrskne“ do 1 mezery a ostatní řídicí znaky (tabelátory, konce řádků aj.) se ignorují, nowrap – mezery se stahují do 1 mezery, text se však na konci okna prohlížeče neláme na druhý řádek. Stránku pak musíme ovládat vodorovným posuvníkem. Pro normální účely nepoužitelné. pre – blok se chová stejně jako HTML element PRE, tj. prohlížeč dodržuje veškeré formátování zdrojového textu včetně sérií mezer, tabelátorů, konců řádků apod. Užitečné odkazy: http://www.webtip.cz/art/wt_tech_html/wt_cssserial_014.html

Výplně řádkových elementů Řádkovým elementům můžeme nastavit barevnou výplň a {background-color: #CCFFFF}

nebo vyplnit jejich pozadí obrázkem a {background-image: url(pozadi.jpg)}

Název obrázku spolu s případnou cestou k němu může být uzavřen v uvozovkách nebo v apostrofech. Větší obrázek bude ořezán na velikost odpovídající textovému obsahu prvku, malý obrázek bude naopak použit jako tapeta. Pro kombinaci vlastností podkladu lze použít zkrácené formy a {background: yellow url(pozadi.jpg)} Další chování obrázku na pozadí bude probráno ve spojitosti s formátováním blokových elementů.

Rámečky kolem řádkových elementů Řádkovým elementům můžeme nastavit rámečky strong {border-style: double; border-width: 3px; border-color: red} nebo zkráceně strong {border: double 3px red} Na tom, v jakém pořadí hodnoty uvedeme, nezáleží.

Všimněte si, že šířka bočních hran rámečku zvětšuje celkovou šířku textu, kdežto na výšku řádku rámeček nemá vliv. Proto se může stát, že rámeček zasahuje do sousedních řádků. Všimněte si, jak se chová rámeček kolem textu, který je přerušen koncem okna prohlížeče. Prostudujte si další možnosti, které pro styly rámečků nabízí CSS (solid, dotted, groove, inset, outset, ridge, ..). Další možnosti rámečků probereme ve spojitosti s okraji blokových elementů. Vnitřní okraje řádkových elementů Odstup textového obsahu od rámečku lze řídit pomocí vlastnosti padding em {padding: 5px}

Pokud rámeček chybí, odstup se počítá ve vodorovném směru od obklopujícího textu. Před prvek i za prvek se vloží navíc prázdný prostor o délce paddingu. Další možnosti paddingu probereme ve spojitosti s blokovými elementy.

CVIČENÍ WWW1 (PWA1) – č. 16 Identifikátory HTML elementům lze přiřadit jednoznačná jména, tzv. identifikátory.
Hlavní nadpis stránky
identifikátor
Tady je text, který slouží jako úvodní průpovídka. Bla bla bla, ...atd.

Tady je text dalšího odstavce.

STYLOPIS: p#motto{ font-size: 0.8em; font-style: italic; width: 50%; }

Na stránce nemohou být dva různé elementy s identifikátorem stejného jména. Identifikátor použitý v selektoru stylopisu vybírá ze stránky právě tento jedinečný prvek – v našem případě jde o konkrétní odstavec P, který má jméno „motto“. Protože identifikátor je na stránce jedinečný a nemůže být přiřazen ještě jinému prvku, dá se předchozí zápis zjednodušit na #motto {font-size: 0.8em; font-style: italic; width: 50%; } Identifikátory se dají použít k pojmenování a následnému ostylování částí stránky vybraných pomocí neutrálních kontejnerů SPAN a DIV. Příklad na využití řádkového kontejneru SPAN - změna stylu souvislé části textu:
Dnešní výhra je 13592 dolarů a bude ..
STYLOPIS: #vyhra{ font-size: 150%; font-weight: bold; color: red; }

Příklad na využití blokového kontejneru DIV - změna stylu souvislé části stránky:
Toto je text nějakého odstavce.

Tady bude obsah patičky..

STYLOPIS: #paticka{ border: groove 5px blue; padding: .5em; background-color: yellow; font-weight: bold; text-align: center; }

Zásada – snažte se redukovat počet identifikátorů i kontejnerů DIV a SPAN na skutečně nutné minimum. V následující ukázce je nadbytečný DIV, který je použit jenom z toho důvodu, že bylo potřeba pojmenovat seznam UL, protože je v něm obsažena navigace stránky a jeho formátování přes CSS bude jiné než formátování jiných seznamů na stránce. Stejného efektu je však možno dosáhnout, když pojmenujeme přímo příslušný seznam UL.

...

...
Nadbytečný DIV
...

...

...

...

ü

Třídy (class) V CSS lze vytvořit tzv. třídy a napsat k nim stylopisy. HTML element zařazený do třídy přebírá její vlastnosti.
Kapitola 1.

STYLOPIS: .podtrzeny{ text-decoration: underline; }

Tady bude nějaký text..

.cerveny{ color: red; }

Tady je kousek zvýrazněného textu a tady je pokračování.

Do jedné třídy můžeme zařadit více elementů různého typu. Jeden a ten samý element může patřit do více tříd a z každé z nich si přibere její vlastnosti. Jeden konkrétní nadpis H2 patří do třídy „podtrzeny“, jeden konkrétní odstavec P zase do třídy „cerveny“. Jeden konkrétní kousek textu uzavřený do elementu SPAN patří do obou těchto tříd a je červený i podtržený zároveň.

BODY

Tento P patří do třídy “cerveny“

Tento H2 patří do třídy

H2

P

P

„podtrzeny“

I SPAN

Tento SPAN patří do obou tříd, tj. „cerveny“ i „podtrzeny“

Zásada – snažte se redukovat počet tříd na skutečně nutné minimum. Příklady, jak toho dosáhnout: - výše uvedený příklad se zařazováním jednoho elementu do více tříd, - jednu třídu můžeme definovat různě pro různé prvky. Chceme např. něco zvýraznit, ale zvýraznění celého odstavce bude vypadat jinak než zvýraznění odkazu nebo zvýraznění tučného písma. Třídu „zvyrazni“ definujeme jinak pro odstavec, jinak pro odkaz a jinak pro tučné písmo:

Nadále platí zákaz posílání mailů na adresu [email protected]

STYLOPIS: p.zvyrazni{ border: 1px solid red; } b.zvyrazni { background-color: silver; } a.zvyrazni { font-size: 120%; font-weight: bold; }

Pseudotřídy Pseudotřída je zvláštní typ třídy, která se aplikuje na prvek až tehdy, nastane-li v prohlížeči specifická situace. Pseudotřídy spojené s událostmi:

STYLOPIS:

Dosud nenavštívený odkaz

Již navštívený odkaz

“Myší kurzor” se vznáší nad odkazem

Odkaz aktivován, např. je stlačeno levé tlačítko myši

a:link{ text-decoration: none; text-weight: bold; color: blue; background-color: yellow; } a:visited{ color: yellow; background-color: green; }

a:hover{ color: yellow; background-color: blue; }

a:active{ color: yellow; background-color: red; }

Záleží na pořadí, v jakém se pseudotřídy definují ve stylopisu, viz např. http://www.kit.tul.cz/~satrapa/www/kurs/pseudotridy.html Všimněte si zvláštnosti v chování pseudotřídy „:active“ ve starších verzích prohlížeče IE. Pseudotřídy spojené s událostmi fungují ve starších verzích IE pouze spolu s prvkem A (odkazy). Obecně se dají aplikovat na další prvky a vytvářet tak např. efekty při najetí na odstavec (p: hover{}). Aby tyto efekty fungovaly v nových verzích IE, je nutné přepnout prohlížeč do STANDARDního módu volbou vhodného DTD.

Aplikace na pseudotřídy Jsou k dispozici tyto obrázky: ball_purple.gif

ball_green.gif

ball_orange.gif

ball_red.gif

Máte vytvořit tento efekt: Dosud nenavštívené odkazy jsou ozdobeny grafickým symbolem fialového kolečka. Po najetí kurzoru myši změní kolečka barvu na oranžovou. Při stisknutí levého tlačítka myši kolečko zčervená. Již navštívený odkaz dostane zelenou barvu.

Návod: Vyrobíte HTML kód pro odkazy vedle sebe. Vypnete podtržení odkazů pomocí CSS vlastnosti text-decoration. Přebarvíte odkazy pomocí vlastnosti color. Obrázek umístíte do pozadí odkazu pomocí CSS vlastnosti background-image. Vypnete opakování obrázku na pozadí vlastností background-repeat. Umístíte obrázek do levé části odkazu a svisle ho vycentrujete vlastností background-position. Nastavíte odkazům takovou hodnotu padding-left, aby obrázek nezasahoval do levé části odkazu. Nastavíte odkazům takovou hodnotu padding-right, aby měly odkazy od sebe vhodný odstup. Nastudujte a vyzkoušejte, jak zjednodušit zápis všech vlastností pozadí do jedné CSS vlastnosti background, viz např. http://books.google.com/books?id=FfeIdwiu8qcC , „preview this book“, str. 234 Více k použití pseudotříd nastudujte a vyzkoušejte podle http://www.havlena.net/cz/clanky/hypertextove-odkazy-styly

CVIČENÍ WWW1 (PWA1) – č. 17 Box – model pro blokové elementy Rozměry blokových HTML elementů se řídí podle následujícího modelu. Margin Border Padding Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah.

height

height – starší verze IE

width width – starší verze IE Šířka width a výška height blokového elementu se vztahují k (textovému) obsahu. Nezadáme-li rozměry v CSS, element zabere celou šířku okna prohlížeče, výška se odvodí z výšky obsahu. Starší verze IE chápou rozměry jinak (viz obrázek), což vede k závažným problémům. Chceme-li se jim vyhnout v moderních verzích IE, musíme zajistit přepnutí prohlížeče do standardního módu použitím vhodného DTD. Padding je odstup, který si drží (textový) obsah od okrajů prvku (aby obsah nebyl „nalepený“ až na okraje). Nastavují se mu pouze rozměry. Pokračuje v něm barva pozadí prvku. Border je rámeček kolem prvku. Nastavují se mu rozměry, styl a barva. Margin je odstup, který si prvek drží od jiných prvků stránky (je to jeho „privátní zóna“). Nastavují se mu pouze rozměry. Vlastnosti rámečku (border) lze zadávat zjednodušeným způsobem, tj. zadáme rozměry, styl i barvu jako seznam hodnot oddělených mezerami. Na pořadí nezáleží, prohlížeč sám pozná, co z toho je rozměr, co barva a co je styl.

Následující obrázek ukazuje, jak nám může pomoci při analýze rozměrů blokových elementů nástroj FireBug.

margin

padding border

Vyzkoušejte si, jaké výchozí hodnoty vlastností padding, border a margin přiřazuje prohlížeč elementům BODY, nadpisům H1, H2, .., odstavcům P, seznamům UL, OL a jejich položkám LI, DIVům. Ověřte si pokusem, že tyto vlastnosti nejsou dědičné. Nastavte šířku a výšku konkrétnímu odstavci (např. si ho pojmenujte identifikátorem), zvolte nenulové hodnoty pro jeho padding a border a vnitřek odstavce vhodně vybarvěte. Pro začátek nastavte takovou výšku odstavce, aby se do něj veškerý text pohodlně vešel. Ověřte si, že když nezadáte styl rámečku, rámeček se nezobrazí, neboť výchozí hodnotou stylu je none. Zjistěte, jakou barvou se vybarví rámeček, když barvu nezadáte. Pro názornost zvolte styl rámečku solid a vhodně jej vybarvěte. Zjistěte, jak široký bude rámeček, když jeho šířku (border-width) nezadáte. Přepínejte prohlížeč IE mezi standardním módem a módem zpětné kompatibility a pomocí elektronického pravítka sledujte rozdíly ve vykreslování box modelu. Sledujte, jak se rozdíly prohlubují, když zvětšujete hodnoty padding a border-width. Sledujte, co se děje, když se text nevejde do předem stanovených rozměrů odstavce. Zjistěte, jak se přitom zachová IE v režimu zpětné kompatibility (bude probráno a vysvětleno dále – přetékání obsahu). Užitečné odkazy: http://www.jakpsatweb.cz/css/mody-prohlizecu.html

Každé ze čtyř stran blokového elementu lze zadat jiné hodnoty (rozměry, barvy a styly rámečku). Pro následující ukázky je použito vlastnosti padding, stejné zásady však platí i pro border i pro margin. STYLOPIS:

Výčet všech 4 hodnot v libovolném pořadí

p { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }

Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah.

Výčet všech 4 hodnot ve směru hodinových ručiček, začíná se shora • 5px „ 20px

STYLOPIS:

Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude ‚ 10px nějaký textový obsah. ƒ 15px

p { • ‚ ƒ „ padding: 5px 10px 15px 20px; }

Výčet hodnot, „horní“ → „levá a pravá“ → „dolní“ • 5px ‚ 15px

Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah.

‚ 15px

ƒ 20px

STYLOPIS: p { • ‚ ƒ padding: 5px 15px 20px; }

Výčet 2 hodnot, „horní a dolní“ → „levá a pravá“ • 10px ‚ Tady bude nějaký textový obsah. Tady 15px bude nějaký textový obsah. Tady bude nějaký textový obsah. • 10px

STYLOPIS: ‚ 15px

p { • ‚ padding: 10px 15px; }

1 hodnota společná pro všechny strany 10px Tady bude nějaký textový obsah. Tady 10px bude nějaký textový obsah. Tady bude 10px nějaký textový obsah. 10px

STYLOPIS: p { padding: 10px; }

Možnosti vykreslování rámečků Volbou vhodné kaskády CSS vlastností lze dosáhnout libovolné kombinace tloušťky, barvy a stylu na každé straně rámečku. Pokuste se vysvětlit, jak „uvažuje“ prohlížeč při vykreslování následujících rámečků. Vyzkoušejte další zajímavé kombinace, snažte se přitom použít co nejjednoduššího stylopisu.

P

p { border: red solid; border-width: 0 3px; } p { border: 3px green;

P

border-top-style: double; } p { border-color: green red;

P

border-style: double solid; }

Přetékání obsahu Chování prohlížeče v případě, že obsah prvku přesáhne jeho rozměry, ošetřuje CSS vlastnost overflow. Výchozí hodnota je visible. Obsah, který se nevejde do předepsaného rámce, přeteče a zůstane viditelný (visible). STYLOPIS: p#box{ background-color: #FFEFD5; border: 1px red dotted; width: 30em; height: 10em;}

obsah, který přetekl..

Obsah, který přetekl rámec vymezený blokovému elementu, se překresluje přes objekty, které následují za ním (není na obrázku). Vyzkoušejte přepnutím prohlížeče do režimu zpětné kompatibility: Starší verze IE vybarvují barvou pozadí i obsah, který přetekl. Objekty, které následují, „uhnou“ a nejsou překresleny.

Použijeme-li pro vlastnost overflow hodnotu auto, zabráníme přetečení obsahu do zbytku stránky a na celý obsah se dostaneme pomocí posuvníku, který se automaticky vytvoří podle potřeby. STYLOPIS: p#box{ background-color: #FFEFD5; border: 1px red dotted; width: 30em; height: 10em; overflow: auto; }

Vložte do zkoumaného boxu dlouhé slovo, které se do něj nevejde na šířku. Ověřte si, že se automaticky vygeneruje vodorovný posuvník. Zjistěte, zda se rozměry posuvníků započítávají do rozměrů width a height. Vyzkoušejte hodnoty hidden a scroll a uvažte, k čemu by se daly použít. Vyzkoušejte vlastnosti overflow-x a overflow-y a zjistěte na internetu, v kterých prohlížečích fungují. Procvičování tříd, pseudotříd a formátování rámečků Rozdělte odkazy na stránce na tři druhy: 1. odkazy vedoucí na externí stránky, 2. odkazy na poslání e-mailu, 3. odkazy na obrázky. Založte tomu odpovídající třídy a pseudotřídy s tím cílem, aby každý druh odkazu vypadal jinak a choval se jinak po najetí kurzoru myši. Odzkoušejte na HTML dokumentu. Inspirace:

Výchozí podoba odkazu

Odkaz po najetí kurzoru myši

Externí odkaz Odkaz pro e-mail Odkaz na obrázek

Ikonky si sežeňte na internetu, např. na http://www.famfamfam.com/lab/icons/silk/ nebo na školní síti dle pokynů vyučujícího (hledejte na disku I: ve složce ICONS).

CVIČENÍ WWW1 (PWA1) – č. 18 Margin (okraj) Margin je minimální odstup od jiných objektů na stránce, který si prvek nárokuje jako svoji „privátní zónu“. Na každé ze 4 stran blokového prvku může být nastavena jiná hodnota. Blokové elementy uvedené v HTML kódu za sebou se na stránce vykreslí pod sebe. Aby se vyhovělo požadavkům každého z nich na „privátní zónu“, ve svislém směru si bloky od sebe udržují odstup, který je roven většímu z obou marginů.

margin-top: 30px

vertikální odstup 30px margin-bottom: 20px

Margin se dá nastavit i pro celé BODY. Objekty na stránce si zachovávají odstup od okrajů okna. odstup od horního okraje okna 30px margin: 15px

odstup od levého okraje okna > 15px

Při umísťování blokového elementu do BODY platí pravidlo o větším marginu jen ve svislém směru, ve vodorovném směru se marginy sčítají. Vyzkoušejte přepnutím prohlížeče do režimu zpětné kompatibility: Starší verze IE zacházejí s pravidly o výsledném marginu jinak. Pro vodorovné vystředění blokového elementu vůči nadřazenému bloku se používají tzv. automatické okraje. 21px STYLOPIS: h1 { auto auto 21px

width: 200px; text-align: center; background: Green; color: White; margin: 21px auto; }

okraje se dopočítají tak, aby byly stejné Automatické okraje mají význam tehdy, je-li udána šířka bloku, v opačném případě blok zabere celou šířku okna a není co středit. Samotný text by pak byl vystředěn vůči oknu stylopisem text-align: center, nikoliv automatickými okraji. Vyzkoušejte, že automatické okraje nefungují ve starších verzích IE. Nastudujte si techniky, jak na to (využití vlastnosti text-align a její nestandardní interpretace staršími verzemi IE), viz např. http://www.jakpsatweb.cz/css/margin.html

Plovoucí prvky V normálním případě se HTML prvky na stránku vykreslují v tom pořadí, v jakém se nacházejí v HTML kódu. Pomocí CSS vlastnosti float to můžeme změnit, neboť můžeme některé prvky „naučit plavat“ v řádkovém obsahu stránky. Takovým plovoucím prvkům říkáme „plaváčky“. Aby se prvek mohl stát plovoucím, musí mít zadánu šířku. Prvek, kterému přiřadíme do vlastnosti float hodnotu right nebo left, se stane „plaváčkem“ a „odpluje“ ve vodorovném směru z pozice, kterou by normálně zaujal, doprava nebo doleva, dokud nenarazí na překážku (např. okraj okna), a tam zůstane. NADPIS float: right

Tady měl původné být

Prvek, který je v HTML kódu uveden za ním a „neumí plavat“ (jeho vlastnost float má výchozí hodnotu none) si „plaváčku“ nevšímá a normálně se vykreslí, takže může zabrat stejnou část okna, ve které už „plaváček“ je. Obsah tohoto prvku se však „plaváčku“ vyhne a proteče kolem něho.

NADPIS

Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl. Plaváček je blíže k uživateli a překrývá vše pod sebou, například rámeček.

Vyzkoušejte si: Vytvořte v HTML 3 prázdné DIVy a pojmenujte je pomocí ID v tomto pořadí tak, jak jdou za sebou v HTML kódu: modry, zluty a cerveny. Dejte jim pomocí CSS odpovídající barvu pozadí a nastavte jim čtvercové rozměry takto: modrý → 120 x 120px, červený → 100 x 100px, žlutý →

150 x 150px.

Přesvědčte se, že čtverečky jsou naskládány na sobě v tom pořadí, v jakém jste je uvedli v HTML kódu. Udělejte ze všech tří čtverečků plaváčky, tj. definujte jim vlastnost float takto: modrý → left, červený → right, žlutý →

right.

Postupně zmenšujte šířku okna prohlížeče a sledujte přeskupování plaváčků. Zadejte každému čtverečku jiné velikosti okrajů margin a prozkoumejte, jaká platí pravidla pro odstup mezi plovoucími objekty ve vodorovném i svislém směru. Zkuste si to i pro starší verze IE. Experimentujte s jinými kombinacemi „rozplavání“ čtverečků.

Přidejte do HTML kódu odstavce a sledujte, jak jejich obsah protéká mezi plaváčky. Vyzkoušejte, jak jde plovoucí elementy dodatečně pozicovat všemi směry pomocí okrajů margin (tyto okraje můžete zadávat také záporné). Vyzkoušejte, že starší verze IE zdvojnásobují u plovoucích elementů okraj margin, kterým se prvek zastaví např. o konec okna – viz např. http://www.jakpsatweb.cz/css/priklady/float-margin-left-bug-ie.html. Seznamte se s řešením v podobě tzv. podtržítkového hacku. Vytvořte následující konfiguraci stránky.

Ukončení obtékání Nechceme-li, aby některý prvek sousedil s „plaváčkem“ a dělil se tak s ním o místo pro svůj obsah, přidělíme tomuto prvku vhodnou hodnotu vlastnosti clear. Prvek h2 s obsahem „Kapitola 1“ z následujícího obrázku stále sousedí s plaváčkem, ale my chceme, aby byl umístěn až pod něho. Stylopis h2 {clear: left} zajistí, že h2 se nebude za žádných okolností dělit o svůj obsah s nalevo sousedícími plaváčky, tj. bude vykreslen až za nimi.

NADPIS

NADPIS Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl. KAPITOLA 1

Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl.

Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl. clear: left

KAPITOLA 1

Další možné hodnoty vlastnosti clear jsou right, both (prvek nechce mít za sousedy plaváčky z pravé ani levé strany) a none.

NADPIS Poznámka k odstavci

Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text.

Další poznámka

Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text.

A opět moje poznámka

Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text.

Vytvořte stránku dle výše uvedeného vzoru. Poznámky vlevo od textu jsou plovoucí elementy, které sousedí s příslušným odstavcem. Odstavce mají nastavený levý okraj tak, aby pro poznámky uvolnily místo. Pro vytvoření efektu poznámky založte třídu (class).

Plovoucí řádkové elementy Pro „rozplavání“ elementu je potřeba zadat mu šířku, což v případě řádkových elementů není normálně možné. Platí pravidlo, že řádkový element, kterému aplikujeme vlastnost float s hodnotou left nebo right, se stane blokovým elementem a je tedy zcela korektní zadat mu rozměry. Vytvořte následující jednoduché menu jako řadu plovoucích ostylovaných elementů A s nastavenou vlastností float: left.

Rozestup mezi odkazy vyřešte pomocí vlastnosti margin. Zvolte jednotnou šířku (width) odkazů. Ještě před aplikací vlastnosti float se přesvědčte, že zadání šířky odkazu je v moderních prohlížečích ignorováno, protože řádkovému elementu nelze zadávat rozměry. Vyzkoušejte chování ve starších verzích IE – tady to (v rozporu s pravidly) funguje. Vyřešte grafické zvýraznění celého menu např. orámováním nebo vybarvením podkladu. Zjistíte, že nejde o zcela triviální úlohu. Uzavřeme-li celé menu např. do DIVu, na který aplikujeme případný stylopis, zjistíme, že nefunguje. Pokuste se vysvětlit, proč to tak je, a problém vyřešte. Nápověda: DIV bez obsahu má nulovou výšku. Užitečné odkazy: http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082

CVIČENÍ WWW1 (PWA1) – č. 19 Layout stránky pomocí marginu Pevné okraje: Obsah si drží předem definované odstupy od okrajů okna prohlížeče, šířka obsahu se dynamicky přizpůsobuje šířce okna prohlížeče.

8px

50px

8px

50px

50px

50px

8px

8px

obsah, na který se dostanu posuvníkem

HTML:

CSS:

body { margin: 0; } #obalka { margin: 8px 50px; background: #E6E6FA; border: 1px red dotted; }

Vyzkoušejte vlastnosti max-width a min-width pro nastavení mezních hodnot šířky obálky. Prozkoumejte podporu této vlastnosti u starších verzí IE. Tento layout aplikujte na dříve vytvořený HTML kód, který jenom uzavřete do „obálky“.

Pevná šířka obsahu: Obsah má pevnou šířku a drží se ve vodorovném směru ve středu stránky. Boční okraje se dynamicky mění podle aktuální šířky okna prohlížeče.

HTML:

CSS:

body { margin: 0; text-align: center; } #obalka { width: 500px; margin: 8px auto; background: #E6E6FA; border: 1px red dotted; text-align: left; }

hack pro starší verze IE

Starší verze IE neznají „automatické okraje“. Pro jejich náhradu se využívá toho, že na rozdíl od jiných prohlížečů aplikují vlastnost text-align i na blokové elementy (o historii tohoto problému viz http://www.webylon.info/K.35 ). Tento layout opět aplikujte na dříve vytvořený HTML kód, který jenom uzavřete do „obálky“. Zkombinujte tento layout s efekty rámečku přidanému k prvku BODY.

Cvičení na layout s použitím vlastnosti margin: Obsah stránky rozdělte pomocí DIVů na tři na sebe navazující bloky. V každém bloku může být umístěn libovolný obsah. Celou stránku uzavřete do obálkového DIVu. Jeden obrázek umístěte do pozadí BODY tak, aby se držel v horním pravém rohu okna. Druhý obrázek umístěte do pozadí obálky tak, aby se držel v levém dolním rohu okna. Okraje všech tří bloků (levý a pravý margin) nastavte takto: První blok bude končit svým pravým okrajem ve ¾ šířky okna. Druhý blok se bude držet uprostřed stránky a jeho šířka bude činit 70% z šířky okna. Třetí blok bude mít levý okraj široký 35% a pravý okraj 5% z aktuální šířky okna.

Obrázky seženete např. na adrese http://www.clker.com . Pokuste se stejného účinku dosáhnout bez použití obálkového DIVu.

Layout stránky pomocí plovoucích elementů Jednoduchý je layout stránek, na kterých obsah nemá udánu výšku. Cvičení: třísloupcový layout, který se přizpůsobuje šířce okna. DIVy Menu, Obsah a Aktuality jsou plovoucí elementy. Jejich šířky a velikosti jejich okrajů ve vodorovném směru jsou procentuálně odvozeny od šířky okna tak, že jejich součet je 100%. Element

margin-left

margin-right

width

celkem na šířku

Menu

0

0

18%

18%

Obsah

1%

1%

62%

64%

Aktuality

0

0

18%

18%

Celkem

100%

Patička s autorem stránek musí mít vlastnost clear: left, aby bylo ukončeno obtékání. Nevýhoda řešení – chcete-li přidat v některém plovoucím bloku padding, musíte přepočítat hodnoty width ve výše uvedené tabulce, protože padding zvětší šířku bloku.

1) float: left

3) float: right

2) float: left

Nevýhodou předchozího řešení je, že šířce okna se přizpůsobuje nejen šířka obsahu, ale i šířka bočních panelů. Zvlášť nepříjemné je to u levého panelu s navigací, který by se správně neměl zúžit do té míry, že by se do něj nevešel obsah. Cvičení: boční panely mají pevně zvolenou šířku, prostřední panel s obsahem dynamicky mění šířku tak, vyplnil zbylý volný prostor. Oběma bočním panelům dejte pevnou šířku a udělejte je jako plovoucí – jeden nalevo a druhý napravo. Prostřední panel s obsahem musí být v HTML kódu až za nimi. Dejte mu postranní okraje (margin-left a margin-right) takové, aby se do nich vešly oba boční panely.

3) obsah není plovoucí

1) float: left

width: 140px

2) float: right width: 140px margin-left: 145px

margin-right: 145px

Promyslete, za jakých okolností by se uplatnila u patičky vlastnost clear s hodnotami left, right nebo both.

Layout stránek, na kterých má obsah pevně danou výšku, je složitější. Cvičení: dvousloupcový layout s pevně danou výškou a s šířkou přes celé okno. Celý obsah stránky je uzavřen v obálkovém DIVu, který nemá udánu šířku, má kolem dokola margin 10px (tím se udržuje ve vodorovném středu okna) a má výšku 400px. V obálce jsou dva DIVy: Menu a Obsah. Oba mají výšku nastavenu na 100%, tj. stejnou jako má jejich rodičovský element – obálka. Menu má nastavenu šířku 150px a je to plovoucí element s float: left. Obsah nemá nastavenu šířku, proto se rozlije do zbytku obálky. Přetečení obálky je ošetřeno prostřednictvím overflow: auto.

Vytvořte třísloupcový layout (opět je pevně stanovena výška, šířka je přes celé okno, šířka bočních panelů se s šířkou okna nemění):

Layout stránek, na kterých se výška obsahu přizpůsobuje výšce okna, je ještě složitější. Cvičení: výška i šířka layoutu je vždy rovna výšce a šířce okna. Návod: Vypněte všechny okraje (margin), výplně (padding) a rámečky (border) ve svislém směru. Dejte obálce výšku 100%. Dejte prvkům HTML a BODY výšku 100% (to je klíčové).

Řešení využívá pouze toho, co jsme se dosud naučili. Později vyzkoušíte jiné řešení pomocí absolutního pozicování.

CVIČENÍ WWW1 (PWA1) – č. 20 Vlastnost display, praktické příklady Princip: Vlastnost display určuje, jakým formátovacím modelem se prvek řídí. Blokové prvky mají výchozí hodnotu této vlastnosti nastavenu na block, řádkové na inline. Změnou hodnoty můžeme změnit formátovací model, např. přeměnit řádkový element na blokový a obráceně. Přehled dalších možností: Hodnota vlastnosti display

popis

block

prvek se stává blokovým elementem

inline

prvek se stává řádkovým elementem

list-item

prvek se stává položkou seznamu (s odrážkou)

...mnoho dalších hodnot...

prvek přebírá vlastnosti jiných struktur – námět k samostudiu

Pomocí display: block změníme odkazy z řádkových prvků na blokové: HTML:

CSS:

Seznam Centrum Atlas

#menu { width: 20em; background-color: #F5DEB3; padding: 5px; } #menu a{ text-decoration: none; margin: 5px 1em; background-color: White; width: 7em; /* výchozí hodnota je display: inline; */ display: block; }

Ovládání vlastnosti display prvku a display: inline (výchozí hodnota)

width: 7em nefunguje, protože řádkovému prvku nelze zadat rozměry

display: block

width: 7em funguje, protože z odkazů se staly blokové elementy

Ověřte si, že v režimu zpětné kompatibility lze v IE zadat řádkovému prvku rozměry (což je proti duchu HTML).

Vytváření navigace ze seznamu Vhodným ostylováním seznamu UL a do něho vnořených prvků lze vykouzlit téměř jakoukoli navigaci. Výchozí formátování seznamu UL bez CSS: margin-top: 16px

blokový prvek UL

padding-left:40px

margin-bottom: 16px

Seznam
prvek seznamu LI vnořený do UL

Centrum

Atlas

řádkový prvek A vnořený do LI

Pomocí display: block a display: inline změníme položku seznamu li na blokový nebo řádkový prvek. Výsledkem bude svislé (block) nebo vodorovné (inline) menu. HTML:

CSS:

Seznam

Centrum

Atlas

#menu { width: 15em; background-color: #F5DEB3; padding-bottom: .3em; } #menu li{ /* výchozí hodnota je display: list-item; */ /* změníme na */ display: block; /* nebo na display: inline; */ } #menu a{ text-decoration: none; border-bottom: 3px groove silver; }

Ovládání vlastnosti display prvku li display: list-item (výchozí hodnota)

display: block

display: inline

(zmizely odrážky seznamu)

(z položek seznamu jsou řádkové prvky)

Následující menu je oživeno tím, že odrážky jsou nahrazeny vlastní grafikou. Stejné menu může být na každé stránce webu. Právě aktivní položka seznamu může být zvýrazněna např. prostřednictvím identifikátoru (v naší ukázce se jmenuje active). HTML:

CSS:

#menu

{

Item one

list-style-image: url(icons/arrow.gif);

Google

}

Seznam

#menu #active

{

Neviditelný pes

list-style-image: url(icons/arrow_red.gif);

Centrum

}

Další ukázky vycházejí ze stejného HTML kódu, uvedených efektů je dosaženo pouze pomocí CSS. Pokuste se je napodobit.

Pokuste se vyrobit výše uvedené navigace ve vodorovné variantě. Rozsáhlou sbírku navigací a další náměty ke studiu naleznete na http://css.maxdesign.com.au/listamatic/ . Doplňte výše uvedené techniky vypodložením odkazu obrázkovým pozadím, které se může vyměnit po najetí kurzoru myši. Spodní linka může být vytvořena CSS vlastností border-bottom.

pozadí ve výchozím stavu

pozadí po najetí myši

Zvládnutí některých dalších efektů, které můžete najít na výše uvedené adrese, předpokládá znalost technik relativního, absolutního a fixního pozicování.

Relativní pozicování Princip: Relativně pozicovaný prvek se vykreslí tak, že se posune z místa, kde by byl normálně vykreslen, do nové polohy o relativní posun ve směru x a y. Okolní objekty se chovají tak, jako kdyby k tomuto posunu nedošlo.

Objekty na stránce: nadpis H1, DIV kontejner #menu plovoucí doleva, odkazy A převedené na bloky pomocí display: block, DIV kontejner #obsah s nastaveným levým okrajem.

#menu a:hover{ position: relative; left: 1em; }

Po najetí myši nad odkaz se odkaz posune tak, aby si vůči své původní poloze podržel zleva odstup délky 1em, tj. posune se doprava.

Vlastnosti left a right slouží k relativnímu posunu ve vodorovném směru. Kombinace left: 1em je totéž jako right: -1em. Je praktické zvyknout si u relativního pozicování pouze na jednu kombinaci, např. na vlastnost left. Vlastnosti top a bottom slouží k relativnímu posunu ve svislém směru. Kombinace top: 1em je totéž jako bottom: -1em. Je praktické zvyknout si u relativního pozicování pouze na jednu kombinaci, např. na vlastnost top. Vlastnosti left, right, top a bottom fungují pouze ve spojení s vlastností position. Jelikož okolní objekty se vykreslují tak, jako by k relativnímu posunu vůbec nedošlo, mohou se s pozicovanými prvky překrývat. Relativně pozicovaný prvek, u kterého neuvedeme vlastnosti left, right, top a bottom, se vykreslí tak, jako bychom mu zadali nulový relativní posun. To je základní „finta“, které se hojně využívá jako základu pro budování absolutně pozicovaného webu.

Vymyslete stylopis pro vytvoření následujícího efektu, kdy se překrývá nadpis s blokem textu. Nadpis je relativně posunut ze své výchozí pozice směrem nahoru.

Zdrojový HTML text:

Nadpis

Praesent enim erat, iaculis vitae dignissim convallis, semper vel dolor. Nullam cursus magna a nunc mollis mollis vitae non leo. Nulla placerat fermentum metus, quis iaculis orci adipiscing in. Pellentesque eu velit felis. Nulla eleifend, nulla quis lacinia hendrerit, urna justo aliquet eros, vel semper neque enim vitae tortor. Nunc porta tellus eu justo venenatis hendrerit. Etiam eget tellus ac enim mollis egestas non id augue. Etiam rhoncus sodales erat eget porttitor. Suspendisse eget orci risus, non lobortis nisl. Suspendisse consequat fermentum sagittis.

Aenean ut nisl eget est placerat mattis. Pellentesque ut augue odio, sed varius nulla. Phasellus dictum consectetur magna vitae mattis. Morbi sagittis eleifend massa, nec sollicitudin enim elementum in. Maecenas dignissim molestie urna, vitae tempus neque scelerisque ac. Aliquam consectetur dapibus interdum. Quisque varius vehicula magna eget tincidunt. Donec faucibus pellentesque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus fringilla blandit. Sed lobortis, enim a dictum cursus, mauris ligula viverra erat, nec vehicula metus turpis non nulla. Quisque vulputate hendrerit lacus a mattis. Mauris ut enim ipsum, a egestas nisi.

Experimentujte s relativním posunem nadpisu ve všech směrech.

CVIČENÍ WWW1 (PWA1) – č. 21 Absolutní pozicování Vlastnost a hodnota – position: absolute Princip: Prvky, které nejsou absolutně pozicovány, se vykreslují do BODY. Prvky, které jsou absolutně pozicovány, se vykreslují do zvláštních vrstev, které jsou „výš“ než BODY. Prohlížeč postupuje tak, že nejprve vyjme ze zdrojového kódu všechny absolutně pozicované prvky a vykreslí stránku do BODY bez nich, jakoby tam vůbec nebyly. Pak vezme absolutně pozicované prvky a vykreslí je do vrstev na místa, která vypočítá podle stylopisu. Vrstvy jsou očíslovány celými kladnými čísly: čím vyšší číslo, tím je vrstva „výše“, tj. blíže k pozorovateli a dále od BODY. Samotné BODY se považuje za vrstvu č. 0. Mnohé prohlížeče podporují vrstvu č. -1, která je podsunuta pod BODY a dá se použít např. pro umístění obrázku. Vrstvy fungují jako nezávislá kreslicí plátna, jejichž obsahy se tak mohou překrývat. To, do které vrstvy absolutně pozicovaný prvek umístíme, se dá ovlivnit tím, že číslo vrstvy zapíšeme do jeho vlastnosti z-index. Polohu absolutně pozicovaných prvků v příslušné vrstvě lze libovolně řídit vlastnostmi left, right, top a bottom.

#patro_-1 {position: absolute; right: 10px; top: 10px; width: 127px; z-index: -1} top:10px

right:10px top:120px

left:50px

right:30px

left:150px bottom:30px

#patro_1 {position: absolute; left: 50px; top: 120px; width: 250px; z-index: 1}

#patro_2 {position: absolute; left: 150px; right: 30px; bottom: 30px; z-index: 2}

#patro_-1 {position: absolute; right: 10px; top: 10px; width: 127px; z-index: -1}

HTML: Obsah BODY ..
...
.. tady může pokračovat..
...
..dále..
...
..a tady třeba končí..

#patro_1 {position: absolute; left: 50px; top: 120px; width: 250px; z-index: 1}

#patro_2 {position: absolute; left: 150px; right: 30px; bottom: 30px; z-index: 2}

#patro_-1 si zachovává odstup 10px od horní i levé části okna. #patro_1 si zachovává odstup 120px od horní a 50px od levé části okna. #patro_2 se drží 30px od spodní části okna. Skutečnost, že si zachovává odstup 150px zleva a 30px zprava, znamená, že jeho šířka se odvozuje od aktuální šířky okna. Vůči čemu se vztahují pozice top, bottom, left a right? Pokud je absolutně pozicovaný element obsažen v jiném prvku, který je sám pozicován, vztahují se vůči tomuto prvku (bude probráno samostatně), v opačném případě je pozicován vůči HTML. POZICOVÁNÍ VŮČI HTML Toto pozicování se uplatňuje u prvků, které nejsou vnořeny do žádného pozicovaného prvku. V takovém případě se pozice prvku top, bottom, left a right v příslušné z-vrstvě vztahují k vnějším okrajům výplně (padding) prvku HTML. Za HTML se považuje počáteční část HTML dokumentu, která se vejde do okna prohlížeče (tj. když je případný posuvník nahoře – viz následující obrázek). Prvky #patro_-1, #patro_1 a #patro_2 z naší ukázky nejsou vnořeny do žádného prvku, který by byl pozicován, ale leží přímo v BODY. Proto se jejich pozice top, bottom, left a right budou vztahovat k HTML. Toto je

HTML

top:120px

bottom:30px

Zápis bottom: 30px tedy znamená, že prvek se bude vznášet 30px nade dnem okna pouze v případě, že se dokument vejde celý do okna prohlížeče. V opačném případě se vytvoří posuvník, po jehož použití se vzdálenost prvku ode dna okna zvětšuje – viz následující obrázek.

Vzdálenost klesá

Toto je

BODY

Rolujeme dolů Vzdálenost roste

Důsledek – absolutní pozicování neboli pozicování vůči HTML nelze použít např. na patičku, která se má držet ve spodní části okna nebo pro výrobu navigace, která si zachovává fixní polohu vůči oknu. K takovým účelům se dá použít fixní pozicování (position: fixed), které se vztahuje k prvku BODY, tj. k části dokumentu aktuálně zobrazeného v okně. Vytvořte následující layout. Všechny panely jsou absolutně pozicovány vůči HTML.

Vytvořte následující layout. Nadpis není pozicován, všechny panely jsou absolutně pozicovány vůči HTML. Obsah se pružně přizpůsobuje aktuální šířce okna prohlížeče.

CVIČENÍ WWW1 (PWA1) – č. 21 POZICOVÁNÍ VŮČI POZICOVANÉ OBÁLCE Prvek, který chceme absolutně pozicovat, už je obsažen v jiném prvku, který je sám nějak pozicován (má nastavenu hodnotu vlastnosti position na relative, absolute nebo fixed). Pozice top, bottom, left a right se již nevztahují k HTML, ale k okrajům tohoto nadřazeného prvku. HTML:
... ... ...

div#page {position: absolute; left: 50px; right: 50px; top: 50px; bottom: 50px; ...} 5px 5px

img#horni {position: absolute; left: 5px; top: 5px}

5px img#dolni {position: absolute; right: 5px; bottom: 5px} 5px

Pozicovaná obálka vystupuje vůči prvkům v ní obsažených jako vykreslovací plocha s z-indexem 0. Pro pozicované prvky v ní obsažené si zakládá své vlastní vrstvy, které opět čísluje od 1 nahoru. APLIKACE – PROMÍTÁNÍ OBRÁZKU NA ABSOLUTNÍ POZICI Vnitřek odkazu rozdělíme na textovou část a na prázdný SPAN, ze kterého uděláme blok. Umístíme ho na absolutní pozici vzhledem k okrajům navigace, dáme mu rozměry obrázku a do jeho pozadí umístíme úvodní obrázek. Po najetí myši nad odkaz obrázek vyměníme za jiný. HTML:
Pampeliška Vodopád Hory Mraky 

promítací plocha pro obrázek – zatím prázdná

CSS: #menu {

position: relative; width: 220px; height: 150px;

vůči DIVu #menu se bude pozicovat jeho vnitřek

...; } #menu a { display: block;

Z odkazů budou bloky – nutné, protože obsahují SPANy, ze kterých budeme dělat také bloky.

...; } #menu a span { position: absolute; top: 5px;

“Promítací plátno“ – SPAN - budeme absolutně pozicovat vůči prvku #menu.

right: 5px; width: 91px;

Tím se automaticky převede na blok. Zadáme mu rozměry shodné s rozměry obrázků....

height: 91px; background-image: url(img/strom.jpg);

}

background-repeat: no-repeat; ... a vypodložíme ho úvodním obrázkem.

#menu a:hover {/* kvuli nekterym prohlizecum */ position: static; } a:hover #prvni { background-image: url(img/pampeliska.jpg); z-index: 1; }

Po najetí myši obrázek vyměníme.

a:hover #druhy { background-image: url(img/vodopad.jpg); z-index: 1; }

...

Vytvořte vlastní menu, ve kterém zkombinujete dynamickou výměnu grafiky se změnou CSS formátování jiných prvků.

CVIČENÍ WWW1 (PWA1) – č. 22 ZADÁNÍ ZÁVĚREČNÉHO PROJEKTU HTML + CSS Možné zaměření stránek - osobní stránky, - stránky zaměřené na zájmovou činnost, - stránky zaměřené na rozbor určité problematiky, - stránky zaměřené na prezentaci. Komunikace s vyučujícím - Konzultujte s vyučujícím, o čem vaše stránky budou. Hodnota obsahu musí být vyučujícím odsouhlasena. - Zvolte si konkrétní cíl, jehož byste chtěli pomocí CSS dosáhnout, a konzultujte ho s vyučujícím (reakce stránky na různé události, speciální grafické efekty, zajímavá navigace, neobvyklý layout apod.). Požadavky na minimální obsah webu - Web bude tvořen minimálně 5 stránkami, které budou mezi sebou provázány přehlednou navigací, viz http://www.pixy.cz/dogma/dogmaw41/cs/details-04.html . - Úvodní stránka vysvětluje účel webu a poskytuje kontakt na administrátora, viz http://www.pixy.cz/dogma/dogmaw41/cs/details-05.html . - Jednou ze stránek bude fotogalerie. - Jedna stránka bude o vás jako o autorovi. - Poslední stránka bude „o projektu“ (vše o výrobě tohoto webu, shánění podkladů, volba koncepce, jak dopadla validace a proč, odkaz na dokumentaci). Obecné zásady pro vytváření zdrojového kódu - Stránky vytvořte dle zásad přísného oddělení formy od obsahu, tj. důsledným využitím technologie CSS nad HTML základem. - HTML kód pište jako validní podle STRICT deklarace HTML 4.01, případné prohřešky proti validitě si budete muset obhájit. - Zachovávejte obecná pravidla pro vytváření HTML dokumentů i pravidla sémantického webu http://www.semantika.name/desatero-semantickeho-webu.html. - Veškeré formátování webu řešte jediným externím CSS souborem, jehož validitu nakonec otestujete a zdokumentujete. - Stránky opatřete vhodnou hypertextovou navigací založenou na neuspořádaném seznamu. - Pro účely tohoto projektu se vám nepovoluje používat tabulkový layout stránek. - Stránky musí být napsány pro standardní vykreslovací mód současných verzí statisticky nejpoužívanějších internetových prohlížečů (alespoň Mozilla a Internet Explorer). Základní funkce stránek musí být zachovány i po přepnutí uvedených prohlížečů do režimu zpětné kompatibility.

Co všechno se má odevzdat -

Hotové stránky o Veškerý obsah webu zabalte do ZIP archivu a odevzdejte na kořenový adresář vašeho osobního disku G: ve formě VASEPRIJMENI.ZIP. o Stránky umístěte na některý volně přístupný server.

-

Dokumentace o Na kořenový adresář vašeho osobního disku G: odevzdejte dokumentaci v PDF souboru ve formě VASEPRIJMENI.PDF. Dokumentace bude obsahovat: §

Popis cílů práce, vysvětlení koncepce stránek, základní myšlenky layoutu a jeho grafické znázornění, popis prostředků, kterými bylo cíle dosaženo.

§

Popis problémů, které se musely během práce řešit, seznam nevyřešených problémů.

§

Popis změn ve vykreslování, ke kterým dojde při přepnutí prohlížeče do režimu zpětné kompatibility, snímky těchto změn pořízené v reálném provozu.

§

Zdrojové kódy tvořící ty části práce, kterých si ceníte nejvíce (spolu s popisem řešení).

§

Seznam všech informačních zdrojů, které vám významně pomohly při řešení (při neuvedení zdroje je řešení považováno za plagiát). S citacemi vám pomůže www.citace.com .

§

Doklady o HTML (každá stránka zvlášť) a CSS validaci.

§

Odkaz na web, kde jsou stránky umístěny.

§

Vlastní zhodnocení práce.

Termín odevzdání - Nejzazší termín odevzdání – DEADLINE - celé práce (soubory webu + dokumentace + umístění na web) je ..................... . Hodnocení - Kritéria hodnocení jsou obsažena v následující tabulce. Míra splnění každého kritéria bude bodově ohodnocena tak, že můžete nasbírat max. 100 bodů. Celkovému počtu bodů je jednoznačným způsobem přiřazena výsledná známka.

Bodové hodnocení a klasifikace ročníkové práce z HTML + CSS 81-100 .. 1

šk. rok: třída:

71- 80 .. 2 61- 70 .. 251- 60 .. 3 podíl na známce hodnocená oblast podoblasti váha

Příjmení a jméno

zaměření stránek

Superman František Průměrný Josef Podcenil Martin

Osobní web Filmotéka ?

úplnost 2

náročnost 1,8

hodnocení stránek a dokumentace 80 % stránky zpracování obsah forma web 2 0,5 1,5 0,2

20 % dokumentace obsah forma 1,5 0,5

bodový zisk (0-10) v každé podoblasti 10 8 1

10 5 2

10 5 2

10 6 3

10 4 1

10 9 5

10 5 1

10 5 1

4131210celkem Σ(body*váha) 100 / 100 55,8 / 100 15,6 / 100

50 40 30 20

.. .. .. ..

34 45

známka poznámka 1 3 5

STRÁNKY úplnost = míra splnění rámcových cílů daných zadáním, vypracování na požadované technické úrovni (HTML+CSS+dodržování norem), rozsah práce náročnost = zkoumá se, jak vysoké cíle jste si kladli. Hodnotí se vlastní přínos do řešené problematiky, nápaditost, nové způsoby řešení. zpracování = hodnotí se technologická stránka práce (čistota a přehlednost kódu, komentáře, HTML + CSS validita, vhodnost použití konkrétní techniky, důsledné oddělení obsahu od formy apod.) obsah = hodnotí se vlastní obsah stránek, gramatická stránka projevu aj. forma = zkoumá se snadnost a uživatelská přívětivost ovládání, základní layout stránek, grafická stránka provedení, funkčnost v různých prohlížečích. web = hodnotí se míra funkčnosti stránek umístěných na webu a souborová struktura webu DOKUMENTACE forma = míra splnění požadavků na vzhled, rozvržení a zpracování dokumentace, uvedení zdrojů obsah = kvalita popisu koncepce stránek, uvádění faktů a konkrétních parametrů, neodbíhání od tématu, logika a sled popisu problematiky, gramatická stránka projevu, stylistika

Další tipy pro atraktivní design stránek – co se nevešlo.. Zarovnávání bloků vzhledem k oknu

Blok se drží uprostřed okna prohlížeče ve vodorovném i svislém směru

HTML:

Tady bude obsah stránky...
top:50%

pro spolehlivé počítání výšky ve většině prohlížečů

CSS: left:50%

html,body { height: 100%; margin: 0; padding: 0; background: #dadada; }

#box { position: absolute; left: 50%; top: 50%; width: 500px; height: 340px; margin-left: -250px; margin-top: -170px; overflow: auto; border: 3px solid red; background: white; }

#boxin { margin: 1em; }

...

CVIČENÍ WWW1 (PWA1) č. 1

Recommend Documents

HLAVNÍ NADPIS

Kapitola 1

Kapitola 2

HLAVNÍ NADPIS

Kapitola 1

Kapitola 2

Hlavní nadpis stránky

Kapitola 1.

Nadpis