Stručný obsah
Kniha K2036.indb 3
1.
Stavební kameny webových stránek
23
2.
Práce se soubory webových stránek
41
3.
Základní struktura dokumentu HTML
53
4.
Text
89
5.
Obrázky
119
6.
Odkazy
133
7.
Stavební kameny kaskádových stylů
143
8.
Práce s kaskádovými styly
157
9.
Definování selektorů
169
10. Formátování textu pomocí stylů
187
11. Rozvržení pomocí stylů
211
12. Kaskádové styly pro rozličná zařízení
247
13. Práce s webovými písmy
269
14. Vylepšení jazyka CSS3
281
15. Seznamy
297
16. Formuláře
313
17. Audio, video a jiná multimédia
339
1.11.2012 12:34:35
Stručný obsah
18. Tabulky
363
19. Práce se skripty
369
20. Testování a ladění webových stránek
375
21. Publikování stránek na webu
387
A.
Referenční příručka jazyka HTML
393
B.
Vlastnosti a hodnoty jazyka CSS
409
Rejstřík
431
4
Kniha K2036.indb 4
1.11.2012 12:34:35
Obsah Úvod Stručně o jazycích HTML a CSS
15 15
Co to je HTML5
16
Co to je CSS3
16
Webové standardy a specifikace
Postupné vylepšování – praxí osvědčený postup Je tato kniha pro vás vhodná?
16
17 18
Co se v této knize naučíte
18
Co se v této knize nenaučíte
20
Z čeho se tato kniha skládá
20
Konvence používané v této knize
Zpětná vazba od čtenářů Zdrojové kódy ke knize Errata
21
21 22 22
Kapitola 1
23
Stavební kameny webových stránek
23
Základní stránka HTML Sémantický kód jazyka HTML
25
Blokové a řádkové elementy a jazyk HTML5
26
Důraz na sémantiku v jazyce HTML5
27
Význam naší základní stránky HTML
28
Proč je sémantika důležitá
Elementy, atributy a hodnoty
30
31
Elementy
31
Atributy a hodnoty
31
Rodičovské a dceřiné elementy
Textový obsah webové stránky Odkazy, obrázky a jiný netextový obsah
Kniha K2036.indb 5
24
32
33 34
1.11.2012 12:34:35
Obsah Jména souborů Pište malá písmena v názvech souborů
35 35
Slova oddělujte spojovníkem
35
Používejte správnou příponu
36
Adresy URL
36
Absolutní adresy URL
37
Relativní adresy URL Co byste si měli odnést
38 39
Kapitola 2
41
Práce se soubory webových stránek
41
Plánování webových stránek Vytvoření nové webové stránky Ukládáme naši webovou stránku Definujeme výchozí a domovskou stránku
41 42
Specifikace výchozí stránky složky nebo domovské stránky
Editace webových stránek Uspořádání souborů Prohlížení stránek v prohlížeči Nechte se inspirovat od jiných Prohlížení kódu jiných vývojářů pomocí vývojářských nástrojů
43 45 46
46 47 48 49 50
Kapitola 3
53
Základní struktura dokumentu HTML
53
Základní kostra webové stránky Dvě části stránky – element head a element body
Vytváříme název Tvorba nadpisů Struktura dokumentu v jazyce HTML5
53 55
56 57 59
V dnešním ekosystému dělejte, co můžete
61
Shrnutí
62
Seskupování nadpisů Běžné komponenty stránek Vytváříme záhlaví Označování navigace Vytváříme článek Definujeme sekci Specifikace postranního panelu Tvorba zápatí
63 64 65 66 68 70 73 75
6
Kniha K2036.indb 6
1.11.2012 12:34:35
Obsah Vytváříme obecné obalující elementy Vylepšujeme přístupnost pomocí specifikace ARIA Pojmenování elementů třídou nebo identifikátorem
77 81 83
Přidělení jedinečného identifikátoru elementu
83
Přiřazení třídy k elementu
83
Doplňujeme elementy o atribut title Jak přidávat element title k elementům
Přidávání komentářů
85 85
86
Kapitola 4
89
Text
89
Vytváříme odstavec Doplňování kontaktu na autora Vytváříme obrázek Specifikace času Označujeme důležitý text Označování citací a referencí Citování textu Zvýrazňování textu Vysvětlujeme význam zkratek Definujeme termín Tvorba horního a dolního indexu Sledování změn textu Označujeme zdrojový kód Předformátovaný text Specifikujeme poznámku tištěnou drobným písmem Zalamujeme řádky Vytváříme části textu Další elementy
89 90 91 93 95 97 98 100 101 102 103 105 107 108 110 110 111 112
Element u
112
Element wbr
112
Elementy ruby, rp a rt
113
Elementy bdi a bdo
114
Element meter
115
Element progress
116
Kapitola 5
119
Obrázky
119
Obrázky na webu
119
Formát
119
Barva
120
7
Kniha K2036.indb 7
1.11.2012 12:34:35
Obsah Velikost a rozlišení
120
Rychlost stahování
121
Průhlednost
121
Animace
Pořizování obrázků Výběr grafického programu Ukládání obrázků Adobe Photoshop Adobe Fireworks
Vkládáme obrázky do stránky Poskytnutí alternativního textu Specifikujeme velikost obrázku Úprava velikosti obrázků ve webovém prohlížeči Úprava velikosti obrázků s grafickým programem Doplňujeme ikony pro webové stránky
122
122 123 123 123 124
125 126 127 129 130 131
Kapitola 6
133
Odkazy
133
Anatomie odkazu Vytváříme odkaz na jinou webovou stránku
133 134
Blokové odkazy jazyka HTML5
135
Vytváříme kotvy Odkaz na konkrétní kotvu Vytváříme další typy odkazů
138 140 140
Kapitola 7
143
Stavební kameny kaskádových stylů
143
Stavba pravidla stylu Přidáváme komentáře k pravidlům stylů Kaskáda – kdy dochází ke kolizím pravidel Hodnota vlastnosti
143 144 145 148
Hodnota inherit
148
Předdefinované hodnoty
148
Délky a procenta
148
Prostá čísla
149
Adresy URL
149
Barvy
150
Nové možnosti zápisu barvy v jazyce CSS3 – formáty RGBA, HSLA a HSL
151
8
Kniha K2036.indb 8
1.11.2012 12:34:35
Obsah
Kapitola 8
157
Práce s kaskádovými styly
157
Vytváříme externí šablonu stylů Odkazujeme na externí šablony stylů Šablona stylů v dokumentu Aplikujeme vnořené styly Důležitost umístění Šablony stylů specifické pro typy médií Nabízíme alternativní šablony stylů Nechte se inspirovat od jiných – jazyk CSS
157 158 159 161 162 163 164 166
Kapitola 9
169
Definování selektorů
169
Sestavujeme selektory Vybíráme elementy jménem Vybíráme elementy třídy nebo identifikátoru Vybíráme elementy na základě kontextu Vybíráme část elementu Vybíráme odkazy na základě jejich stavu Vybíráme elementy podle atributů Specifikujeme skupiny elementů Spojujeme selektory Shrnutí typů selektorů
169 170 171 173 177 179 180 183 184 185
Kapitola 10
187
Formátování textu pomocí stylů
187
Výběr rodiny písma Specifikujeme alternativní písma Píšeme kurzívou Uplatňujeme tučné písmo Nastavení velikosti písma Nastavujeme výšku řádku Nastavujeme všechny hodnoty písma najednou Nastavujeme barvu Změna pozadí Řídíme prokládání Odsazujeme text Konfigurace chování bílých znaků Zarovnávání textu Změna velikosti písmen Kapitálky Ozdobujeme text
187 189 190 191 193 196 197 199 200 203 204 204 206 207 208 208
9
Kniha K2036.indb 9
1.11.2012 12:34:36
Obsah
Kapitola 11
211
Rozvržení pomocí stylů
211
Co si musíme promyslet, když začínáme tvořit rozvržení
211
Oddělování obsahu od vzhledu
212
Rozdíly mezi webovými prohlížeči
212
Způsoby rozvrhování
Uspořádání stránek Měníme vzhled elementů jazyka HTML5 ve starších prohlížečích Resetování a normalizování výchozích kaskádových stylů Box model Měníme pozadí Nastavujeme rozměry elementu Šířka, vnější okraje a hodnota auto
Nastavujeme vnější okraje elementu Přidáváme vnitřní okraje okolo obsahu elementu Plovoucí elementy Řídíme, kde elementy obtékají Nastavujeme rámeček Posouváme elementy z přirozeného toku Umísťujeme elementy absolutně Umísťujeme elementy v trojrozměrném prostoru Jak se vypořádat s přetékáním obsahu Zarovnáváme elementy svisle Změna ukazatele myši Zobrazování a skrývání elementů
212
213 216 219 220 222 224 226
227 229 231 232 235 237 237 239 241 243 243 244
Kapitola 12
247
Kaskádové styly pro rozličná zařízení
247
Strategie a úvahy
247
Vyhrazené webové stránky pro mobilní telefony
248
Webové stránky pro všechna zařízení
249
Jedny webové stránky pro všechna zařízení – realizace
Popis a implementace dotazů na médium Syntaxe a příklady dotazů na médium
Stavíme adaptabilní stránku pomocí dotazů na médium
249
251 252
257
Tvorba obsahu a kódu jazyka HTML
258
Výběr přístupu pro tvorbu designu
258
Postupný vývoj rozvržení
260
Zobrazujeme kaskádové styly s dotazy na médium v prohlížeči Internet Explorer 8 a jeho starších verzích
265
10
Kniha K2036.indb 10
1.11.2012 12:34:36
Obsah
Kapitola 13
269
Práce s webovými písmy
269
Co to je webové písmo Souborové formáty webového písma
269 269
Podpora webových písem ve webových prohlížečích
270
Právní problémy
270
Kde najdeme webová písma
271
Vlastní hosting
271
Služby poskytující webová písma
271
Kvalita a zobrazování webového písma
Stahujeme naše první webové písmo Práce s direktivou @font-face Začleňování webových písem do webové stránky Práce s více webovými písmy
Staráme se o velikost souboru a upravujeme vzhled písma
272
272 273 274 275
276
Kapitola 14
281
Vylepšení jazyka CSS3
281
Testovací vlastnosti Rychlý pohled na kompatibilitu v prohlížečích Postupné vylepšování pomocí alternativních řešení jazyka JavaScript Zakulacujeme rohy elementů Přidáváme vržené stíny k textu Přidáváme vržené stíny k dalším elementům Aplikujeme více obrázků na pozadí Přechody na pozadí Nastavujeme průhlednost elementů
281 283 283 284 288 289 291 292 295
Kapitola 15
297
Seznamy
297
Vytváříme uspořádané a neuspořádané seznamy Výběr značek seznamu Vybíráme počátek číslování seznamu Vlastní značky seznamu Řídíme umístění značek seznamu Nastavujeme všechny vlastnosti stylu seznamu najednou Měníme vzhled vnořených seznamů Vytváříme seznamy definic
297 300 301 301 303 304 305 308
11
Kniha K2036.indb 11
1.11.2012 12:34:36
Obsah
Kapitola 16
313
Formuláře
313
Tvorba formulářů Zpracování formulářů O jazyku PHP
Odesíláme formulářová data prostřednictvím e-mailových zpráv Uspořádání formulářových polí Vytváříme textová pole Vytváříme pole pro zadávání hesla Tvorba polí pro e-mailovou adresu, telefonní číslo a adresu URL Označujeme části formuláře popisky Tvorba přepínačů Vytváříme rozevírací seznamy Vytváříme zaškrtávací pole Vytváříme textové oblasti Jak umožnit návštěvníkům nahrávat soubory na server Tvorba skrytých polí Vytváříme odesílací tlačítko Odesíláme formulář prostřednictvím obrázku Zakazujeme formulářové elementy Nové funkce jazyka HTML5 a jejich podpora v prohlížečích
313 315 315
318 320 322 324 325 327 328 329 331 332 333 334 335 336 337 338
Kapitola 17
339
Audio, video a jiná multimédia
339
Zásuvné moduly třetích stran a přirozená podpora Formáty videosouborů Přidání videa do stránky Atributy videí Jak k videu doplnit ovládací prvky a automaticky ho přehrát Opakované přehrávání a obrázkový poutač Zabraňujeme přednačítání videa Více zdrojů videa Více zdrojů prostředku a element source Přidáváme video se záložním odkazem Přidáváme video se záložním flashovým videem Zajištění přístupnosti Přidáváme zvukové soubory Vložení zvukového souboru do stránky Přidáváme do stránky zvukový soubor s ovládacími prvky Atributy elementu audio Přidáváme ke zvukovému souboru ovládací prvky, automatické přehrávání a opakované přehrávání
339 340 341 341 342 343 344 345 345 346 347 350 350 351 351 352 352
12
Kniha K2036.indb 12
1.11.2012 12:34:36
Obsah Přednačítání zvukového souboru Poskytujeme více zdrojů audia Vkládáme zvukový soubor se záložním odkazem Přidáváme zvukový soubor se záložním flashovým přehrávačem Vkládáme zvukový soubor s náhradním flashovým přehrávačem a odkazem Jak získat multimediální soubory Správa digitálních práv Vkládáme flashovou animaci Vkládáme video ze serveru YouTube Video ve spojení s plátnem Spolupráce videa s formátem SVG Další zdroje
353 353 354 355 356 357 357 358 359 359 360 360
Online zdroje
360
Knihy
361
Kapitola 18
363
Tabulky
363
Uspořádání tabulek Rozpínání sloupců a řádků
363 367
Kapitola 19
369
Práce se skripty
369
Načítáme externí skript Vkládáme skript do stránky Události jazyka JavaScript
370 372 373
Kapitola 20
375
Testování a ladění webových stránek
375
Zkoušíme ladicí techniky Kontrolujeme jednoduché věci: Kontrolujeme jednoduché věci: HTML Kontrolujeme jednoduché věci: CSS Validujeme náš kód Testujeme naši stránku Když se obrázky nezobrazují Stále jste problém nevyřešili?
375 377 378 379 381 382 385 386
Kapitola 21
387
Publikování stránek na webu
387
Získání vlastního doménového jména Hledání hostitele webových stránek
387 388
13
Kniha K2036.indb 13
1.11.2012 12:34:36
Obsah Přenos souborů na server
389
Příloha A
393
Referenční příručka jazyka HTML
393
Příloha B
409
Vlastnosti a hodnoty jazyka CSS
409
Vlastnosti a hodnoty jazyka CSS Selektory jazyka CSS Hodnoty barev Barevné přechody Dotazy na médium Vkládání písem
Rejstřík
410 422 425 426 427 429
431
14
Kniha K2036.indb 14
1.11.2012 12:34:36
