# HTML, XHTML a CSS: Názorný průvodce tvorbou WWW stránek

Odkazy pro originál knihy (v angličtině): Novinky | O knize | Příklady | Navíc | Errata | Názory | Pomoc| Domů

Odkazy pro českou knihu: Internetový obchod Cpress | O knize | Ukázky z knihy | Poslat komentář | Příklady

Zde najdete příklady pro šesté vydání knihy Elizabeth Castro, kterou pro vás připravilo nakladatelství Computer Press.

Tyto příklady použijte, abyste lépe pochopili, jak čistý zdrojový kód (X)HTML funguje v prohlížeči. Posuňte se stránkou dolů na příslušnou kapitolu, nebo použijte levý panel s navigací. Každá kapitola obsahuje seznam souborů. Klepněte na příklad, abyste viděli, jak vypadá v prohlížeči. Pokud chcete vidět zdrojový kód (X)HTML, zvolte na otevřené stránce Zobrazit > Zdrojový kód nebo Zobrazit > Zdrojový kód stránky (případně jiný odpovídající příkaz dle vašeho prohlížeče). Více informací o možnosti prohlédnutí zdrojového kódu, najdete v knize v kapitole 2 v části Inspirace u jiných. (Níže podávám informace o možnosti stažení zdrojového kódu.)

Všechny příklady, stejně jako pomocné soubory (CSS, CGI, a soubory PHP) se otevřou do stejného okna.

Všechny části knihy mají své příklady. Pokud zde část knihy nevidíte, pak to znamená, že v ní žádné příklady nejsou. V takovém případě se obraťte na příslušnou část knihy, kde často najdete potřebné vysvětlení.

Některé části obsahují víc odkazů, než by se dalo čekat. Například se podívejte na Přílohy na spodu senznamu nalevo v navigaci. Najdete zde přímé odkazy na nástoje HTML a grafické nástoje a online verze tabulek v přílohách B-D. Existuje zde také online verze rejstříku a několik tabulek barev.

Ke stažení jsou k dispozici také příklady originální publikace v angličtině (pro Macintosh nebo Windows).

Pamatujte, že všechny soubory příkladů a obrázky jsou chráněny autorským právem: © 2006 Elizabeth Castro. Všechna práva vyhrazena.

Pokud budete mít jakékoli dotazy nebo komentáře k příkladům, pošlete mi je. Udělám co je v mých silách, abych vám pomohla. Své komentáře k českému vydání můžete poslat redakci nakladatelství Computer Press ze stránky knihy (nebo použijte odkaz Poslat komentář v horní liště).

Copyright 1998-2006 by Elizabeth Castro. Všechna práva vyhrazena.
Lokalizace: Martin Domes, Computer Press 2007.

## 1: Vytváříme části webové stránky Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 01_casti.
Zdrojový kód: Elementy, parametry a hodnoty | Obrázek 1.6: skalnicka_bez-css.html
Textový obsah stránky | Obrázek 1.10: skalnicka_bez-css.html
Odkazy, Obrázky a další netextový obsah | Obrázek 1.12: lilie_bez-css.html
HTML vs XHTML | XHTML: skalnicka_bez-css.html HTML: skalnicka_html.html
Verze a DOCTYPE | Základní verze DOCTYPE Obrázek 1.36, 1.37: skalnicka_nestaard_bez-doctype.html a skalnicka_nestaard.css Obrázek 1.38: skalnicka_nestaard_doctype.html a skalnicka_nestaard.css Obrázek 1.39: skalnicka.html a skalnicka.css
Výchozí zobrazování (X)HTML | Obrázek 1.40: skalnicka_bez-css.html

## 2: Pracujeme se soubory webové stránky Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 01_casti.
Inspirace u jiných | Obrázky 2.27-2.29: skalnicka.html s skalnicka.css

## 3: Základní struktura (X)HTML Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 03_zakladni.
Začínáme tvořit webovou stránku | Obrázek 3.1: doctype_html.html Obrázek 3.2: doctype.html Běžné typy DOCTYPE
Vytváříme základy stránky | Obrázek 3.3: hlavicka-telo.html
Deklarujeme kódování | Obrázek 3.5: kodovani.html
Vytváříme titulek stránky | Obrázek 3.6: titulek.html
Vytváříme nadpisy | Obrázek 3.10: nadpisy.html
Vytváříme odstavce | Obrázek 3.12: odstavce.html
Pojmenováváme elementy | Obrázek 3.14: id-trida.html
Zalamujeme stránku do bloků | Obrázek 3.16: div.html Všimněte si, že identifikátory a třídy jsou nyní jiné než na obrázku 3.14, ale jsou to ty stejné, které používáme ve zbytku kapitoly.
Vytváříme označené části řádku | Obrázek 3.18: span.html Zobrazit se styly: styly.html a gaudi-styly.css (soubor se styly je třeba uložit ve stejném kódování)
Zalamujeme řádek | Obrázek 3.20: br.html
Přidáváme komentáře | Obrázek 3.23: komentare.html
Popisujeme elementy na webové stránce | Obrázek 3.25: parametr-title.html

## 4: Základní formátování pomocí (X)HTML Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 04_html_format.
Zvýrazňujeme textu tučně nebo kurzívou | Obrázek 4.1: tucne-kurziva.html Obrázek 4.2: strongem.html
Měníme velikost textu | Obrázek 4.4: bigsmall.html
Používáme neproporcionální písmo | Obrázek 4.6: code.html
Používáme předformátovaný text | Obrázek 4.9: predformat-kod-cast.html Celý skript: predformat-kod.html
Vytváříme citovaný text | Obrázek 4.11: blockquote.html Obrázek 4.13: q.html
Vytváříme horní a dolní index | Obrázek 4.15: subsup.html S upravenou výškou řádku: subsup_velikost.html a subsup.css
Označujeme změněný text | Obrázek 4.17: insdel.html
Vysvětlujeme zkratky | Obrázek 4.19: abbr_acronym.html
Zarovnáváme elementy na střed stránky | Obrázek 4.22: center.html

## 5: Obrázky Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 05_obrazky.
About Images for the Web (p. 83) | Obrázek 5.3: arcadia_velky.html Obrázek 5.4: arcadia_maly.html
Vkládáme Obrázky na stránku | Obrázek 5.7: obrazek.html
Nabízíme alternativní text | Obrázek 5.9: alt.html
Specifikujeme velikost obrázku pro jeho rychlejší načtení | Obrázek 5.15: velikosti.html
Stupňování velikosti obrázku | Obrázek 5.17: velikost-pred.html Obrázek 5.18, 5.19: velikost-po.html
Zarovnání obrázků | Obrázek 5.22: plovouci-vpravo.html Obrázek 5.25: plovouci-vlevo.html Obrázek 5.26: plovouci-obestrany.html
Ukončujeme obtékání | Obrázek 5.28: konec-obtekani-zleva.html Obrázek 5.30: konec-obtekani-obestrany.html
Vytváříme mezery kolem obrázku | Obrázek 5.31: prostor-pred.html Obrázky 5.32, 5.33: prostor.html
Zarovnáváme Obrázky v textu | Obrázek 5.34: align.html
Přidáváme horizontální linku | Obrázek 5.36: hr-normalni.html Obrázek 5.38: hr.html
Přidáváme ikonu webovým stránkám | Obrázek 5.41: favicon.html

## 6: Odkazy Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 06_odkazy.
Vytváříme odkaz na jinou webovou stránku | Obrázek 6.2: jednoduchy-odkaz.html Obrázek 6.5: externi-odkaz.html
vytváříme jmenné odkazy (kotvy) | Obrázek 6.8: kotva.html
Odkazujeme na jmenný odkaz | Obrázky 6.9 a 6.10: kotva.html
Směřujeme odkaz do specifického okna prohlížeče | Obrázek 6.11: target.html
Nastavujeme výchozí cíl odkazů | Obrázek 6.14: target-vychozi.html
Vytváříme jiné typy odkazů | Obrázek 6.15: novy-odkaz-jiny.html
Vytváříme klávesové zkratky odkazů | Obrázek 6.17: klavesnice.html
Nastavujeme tabelační pořádek u odkazů | Obrázek 6.20: tabindex.html
Vytváříme navigační tlačítko | Obrázek 6.22: odkaz-tlacitko.html
Vytváříme odkazy s náhledy obrázků | Obrázek 6.24: nahledy.html
Vytváříme obrázkovou mapu na straně klienta | Obrázek 6.29: mapa.html

## 7: Jak fungují kaskádové styly Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 07_css.
Zapisujeme komentáře k pravidlům stylu | Obrázek 7.3: komentare.css Obrázek 7.4: komentare2.css
Kaskáda: Když se pravidla střetnou | Obrázek 7.5: skalnicka.css Obrázek 7.6: skalnicka.html Obrázek 7.8: specificita.css Obrázek 7.9: specificita.html
Hodnoty vlastností | Obrázek 7.16: 16 předdefinovaných barev

## 8: Pracujeme s šablonou kaskádových stylů Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 08_sablona_cs.
Připojujeme externí šablonu stylů | Obrázek 8.3: vychozi.css Obrázek 8.4: link.html Obrázek 8.6: link2.html a vychozi.css
Nabízíme alternativní styly | Obrázek 8.7: vychozi.css Obrázek 8.8: preferovana.css Obrázek 8.9: alternativni.css Obrázek 8.10: volba.html
Vytváříme interní šablonu stylů | Obrázek 8.12: interni.html
Importujeme externí šablonu stylů | Obrázek 8.15: link.html a vychozi.css Obrázek 8.15: import.html a ne_pro_Netscape4.css
Používáme šablonu stylů pro specifická média | Obrázek 8.17: media-link.html Obrázek 8.18: media-import.html
Přiřazujeme styly lokálně | Obrázek 8.19: lokalni.html
Důležitost umístění | Obrázek 8.21: konflikt.html a vychozi.css Obrázek 8.23: konflikt2.html a vychozi.css
Inspirace u jiných: CSS | Obrázek 8.25: volba.html Obrázek 8.28: vychozi.css

## 9: Vytváříme selektory Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 09_selektory. Všimněte si, soubory (X)HTMLjsou prakticky identické s výjimkou elementu `link`, jenž volá externí šablonu stylů.
Vybíráme selektory podle názvu | Obrázek 9.6: nazev.html Obrázek 9.7: nazev.css
Vybíráme elementy pomocí třídy nebo identifikátoru | Obrázek 9.9: trida-identifikator.html Obrázek 9.10: trida-identifikator.css
Vybíráme elementy podle kontextu | Obrázek 9.12: naslednik.html Obrázek 9.13: naslednik.css Obrázek 9:15: potomek.css Obrázek 9.16 a 9.17: potomek.html Obrázek 9.18: first-child.css Obrázek 9.19: first-child.html Obrázek 9.20: sourozenec.css Obrázek 9.21: sourozenec.html
Vybíráme část elementu | Obrázky 9.22 a 9.24: first-line.html Obrázek 9.23: first-line.css Obrázek 9.25: first-letter.css Obrázky 9.26: first-letter.html Obrázek 9.27: first-letter2.html
Vybíráme elementy na základě jejich stavu | Obrázek 9.28: stav.html Obrázek 9.29: stav.css
Vybíráme elementy podle jejich parametrů | Obrázek 9.35: parametr.html Obrázek 9.36: parametr.css
Specifikujeme skupinu elementů | Obrázek 9:38: skupina.html Obrázek 9:39: skupina.css

## 10: Formátujeme pomocí kaskádových stylů Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 10_css_format. Všimněte si v této kapitole, že každý po sobě jdoucí soubor CSS přidává něco k obsahu toho předešlého. Soubory (X)HTML jsou stejné s výjimkou elementu `link`, jenž volá nový soubor CSS.
Formátujeme pomocí kaskádových stylů | Obrázek 10.1: bez-stylu.html
Vybíráme typ písma | Obrázek 10.2: font-family.css Obrázky 10.3-4: font-family.html
Specifikujeme alternativní typ písma | Obrázek 10.5: font-family-alternativni.css Obrázky 10.6-7: font-family-alternativni.html
Vytváříme kurzívu | Obrázek 10.8: kurziva.css Obrázky 10.9-10: kurziva.html
Přiřazujeme tučnost | Obrázek 10.11: tucne.css Obrázky 10.12-3: tucne.html
Nastavujeme velikost písma | Obrázek 10.14: font-size.css Obrázek 10.15: font-size.html Obrázek 10.16: font-size-relativne.css Obrázek 10.18: font-size-relativne.html
Nastavujeme výšku řádku | Obrázek 10.19: line-height.css Obrázek 10.20: line-height.html
Nastavujeme všechny hodnoty písma najednou | Obrázek 10.21: font.css Obrázek 10.22: font.html
Nastavujeme barvu | Obrázek 10.23: color.css Obrázek 10.24: color.html
Měníme pozadí elementu | Obrázek 10.25: background.css Obrázek 10.26: background.html
Nastavujeme mezery mezi slovy a písmeny | Obrázek 10.27: letter-spacing.css Obrázek 10.28: letter-spacing.html
Přidáváme odsazení | Obrázek 10.29: odsazeni.css Obrázek 10.30: odsazeni.html
Upravujeme zobrazení prázdného prostoru | Obrázek 10.31: prazdny-prostor.css Obrázek 10.32: prazdny-prostor.html
Zarovnáváme text | Obrázek 10.33: text-align.css Obrázek 10.34: text-align.html
Měníme stav písmen | Obrázek 10.35: text-transform.css Obrázek 10.36: text-transform.html
Používáme kapitálky | Obrázek 10.37: kapitalky.css Obrázek 10.38: kapitalky.html
Využíváme dekorace textu | Obrázek 10.39: dekorace.css Obrázek 10.40: dekorace.html

## 11: Rozvržení stránky (layout) pomocí stylů Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 11_layout. Narozdíl od předchozích kapitol, každé nové styly CSS popisovaný v dané části se přidají k již existujícím stylům, a to vždy ve zvláštním souboru CSS pomocí elementu `link`. Výklad počítá s využitím základní šablony CSS s formátováním textu, které se použije v každém příkladu. Více se formátování textu věnuje kapitola 10.
Rozvržení stránky (layout) pomocí stylů | Obrázek 11.1: s-formatovanim.html with s-formatovanim.css
Vytváříme strukturu stránek | Obrázek 11.2: bez-formatovani.html S formátováním textu: textove-formatovani.html a text.css
Měníme pozadí | Obrázek 11.5: background-samostatne.css Obrázek 11.6: background.css Obrázek 11.7: background-samostatne.html nebo background.html Obrázek 11.8: background-obsah.css Obrázky 11.9-10: background-obsah.html
Nastavujeme výšku a šířku elementu | Obrázky 11.11, 11.13: width.css Obrázek 11.12: width.html Obrázek 11.14: width-test.html
Nastavujeme vnější okraj okolo elementu | Obrázky 11.16, 11.18:: margin.css Obrázky 11.17, 11.19: margin.html
Přidělujeme elementu vnitřní okraj | Obrázek 11.20: padding.css Obrázek 11.21: padding.html Obrázek 11.22: padding-obsah.css Obrázek 11.23: padding-obsah.html Obrázek 11.24: background-bila.html a background-bila.css
Posunujeme elementy z jejich původního umístění | Obrázky 11.26 a 11.28: relativni.css Obrázky 11.27 a 11.29: relativni.html
Umisťujeme elementy absolutně | Obrázek 11.31: absolutni.css Obrázek 11.32: absolutni.html
Připevňujeme element k oknu prohlížeče | Obrázek 11.33: fixni.css Obrázky 11.34 a 11.35: fixni.html a
Necháváme element plout | Obrázek 11.36: float.css Obrázek 11.37: float.html
Ukončujeme obtékání elementů | Obrázek 11.39: clear.css Obrázek 11.40: clear.html a
Umístění elementů v prostoru | Obrázek 11.42: z-index.css Obrázek 11.43: z-index.html
Nastavujeme rámeček | Obrázek 11.44: border.css Obrázky 11.45 a 11.46: border.html Obrázek 11.47: border-styly.html
Měníme kurzor | Obrázek 11.50: cursor.css Obrázek 11.51: cursor.html
Ovlivňujeme přetečení obsahu přes okraj elementu | Fiure 11.53: overflow.css Obrázky 11.54 a 11.55: overflow.html
Zarovnáváme elementy vertikálně | Obrázek 11.57: vertical-align.css Obrázek 11.58: vertical-align.html

## 12: Dynamické efekty pomocí kaskádových stylů Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 12_css_efekty.
Necháváme elementy zobrazit a zmizet | Obrázky 12.1 a 12.2: display-zobrazene.html Obrázky 12.3 a 12.4: display-skryt.html Obrázky 12.5 a 12.6: visibility.html
Vytváříme překreslující se tlačítka | Obrázky 12.7: tlacitka-prekresleni.html
Vytváříme efekt vysunutí | Obrázky 12.9 a 12.10: vysunuti.html
Vytváříme rozevírací nabídku pomocí seznamů | Obrázky 12.11, 12.13 a 12.14: rozeviraci-bez-formatovani.html Obrázek 12.12: rozeviraci-pouze.css Obrázek 12.15: rozeviraci-nabidka.html a rozeviraci-pouze.css a rozeviraci-formatovani.css
Nadpis nahrazujeme obrázkem | Obrázky 12.16: nahrazeni-obrazkem.css Obrázky 12.17 a 12.18: nahrazeni-obrazkem.html

## 13: Kaskádové styly pro mobilní zařízení Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 13_styly_mobil.
Mobilní vs. miniaturní | Obrázky 13.2 a 13.3 (na mobilním zařízení nebo jeho simulátoru): Google
Pohled na vaše webové stránky | Obrázky 13.4 a 13.5: s-formatovanim.html a s-formatovanim.css
Vytváříme šablonu stylů pro mobilní zařízení | Obrázek 13.6: mobil.html
Skrýváme nepotřebné elementy | Obrázek 13.8: skryti.css Obrázky 13.9 a 13.10: mobil-skryti.html
Vytváříme a používáme obrázkové nadpisy | Obrázky 13.12 a 13.15: mobil-logo.html Obrázek 13.13: s-formatovanim-bez-hlavicky.css Obrázek 13.14: logo.css
Vytváříme navíc odkazy na začátek stránky | Obrázek 13.16: odkazy-navic.html Obrázky 13.17: s-formatovanim-odkazy-navic.css
Ladíme stránky pro malé obrazovky | Obrázek 13.19: mobil.css Obrázek 13.20: mobil-vyladeni.html

## 14: Kaskádové styly pro tisk Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 14_styly_tisk.
Vytváříme šablonu stylů pro tisk | Obrázek 14.1: zakladni.html Obrázek 14.2: import-tisk-sablony.html
Jak se styly pro tisk liší | Obrázky 14.3 a 14.4: zakladni.html a obrazovka.css a tisk.css
Kontrolujeme zalomení stránek | Obrázek 14.5: zalomeni-stranky.css Obrázek 14.6: zalomeni-stranky.html (a poté zvolte Tisk nebo Náhled před tiskem)
Tiskneme adresu URL odkazu | Obrázek 14.7: tisk-url.css Obrázek 14.8: tisk-url.html (a poté zvolte Tisk nebo Náhled před tiskem)
Kontrolujeme řádky na začátku a konci stránky | Obrázek 14.10: orphans.css Obrázek 14.11: orphans.html

## 15: Seznamy Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 15_seznamy.
Vytváříme uspořádaný a neuspořádaný seznam | Obrázek 15.1: usporadany-seznam.html Obrázek 15.3: neusporadany-seznam.html
Volíme označení položek seznamu (odrážky) | Obrázek 15.5: oznaceni-polozek.html Obrázek 15.6: oznaceni-polozek.css
Vybíráme počátek označování položek seznamu | Obrázek 15.8: pocatecni-hodnota.html
Používáme vlastní označení položek seznamu | Obrázek 15.10: vlastni-oznaceni.html Obrázek 15.11: vlastni-oznaceni.css
Kontrolujeme umístění označení položek seznamu | Obrázek 15.13: umisteni-oznaceni.html Obrázek 15.14: umisteni-oznaceni.css
Nastavujeme hodnoty všech vlastností seznamu najednou | Obrázek 15.16: list-style.css Obrázky 15.17 a 15.18: list-style.html
Vytváříme definiční výčet | Obrázek 15.19: definicni-vycet.html Obrázek 15.20: definicni-vycet.css
Stylujeme vnořené seznamy | Obrázek 15.22: vnorene-seznamy.html Obrázek 15.23: nested.css

## 16: Tabulky Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 16_tabulky.
Tabulky | Obrázek 16.1: rowspan.html a colspan.css
Vytvářímě jednoduchou tabulku | Obrázek 16.3: jednoducha.html Obrázek 16.4: jednoducha.css
Přidáváme rámeček | Obrázky 16.7 a 16.8: ramecek-html.html a jednoducha.css Obrázek 16.9: ramecek.css Obrázek 16.10: ramecek-css.html a ramecek.css Obrázek 16.11: ramecek-css-bezhtml.html a ramecek.css Obrázek 16.12: bez-ramecku.css (a bez-ramecku.html)
Nastavujeme šířku | Obrázek 16.13: sirka.html Obrázek 16.14: sirka.css Obrázek 16.16: sirka-mala.css Obrázek 16.17: sirka-mala.html Obrázek 16.18: sirka-vetsi.css Obrázek 16.19: sirka-vetsi.html
Zarovnáváme tabulku na střed stránky | Obrázek 16.20: nastred-css.html Obrázek 16.21: nastred.css Pouze pomocí CSS: nastred-css-bezhtml.html a nastred.css Pouze pomocí XHTML: nastred-html.html a sirka.css
Zalamujeme text kolem tabulky | Obrázek 16:23 (pouze pomocí XHTML): zalomeni.html Obrázek 16.24: plovouci.css (Poznámka: Zde jsou přidány barvy. Více informací viz část Nastavujeme barvu. Obrázek 16.25: plovouci.html a plovouci.css
Kombinujeme tabulky | Obrázek 16.26: vnorene.html Obrázek 16.27: vnorene.html a vnorene.css Obrázky 16.28 a 16.30: vice-tabulek.html Obrázek 16.29: vice-tabulek.css Zde se používá průhledný obrázek GIF pro vytvoření mezery v levém sloupci, aby se vyhnul zhroucení ve chvíli, kdy je okno prohlížeče příliš úzké: vice-tabulek-mezera.html Průhledný obrázek GIF se používá v dalších příkladech ve zvytku kapitoly.
Zarovnáváme obsah buněk | Obrázek 16.31: zarovnani.html Obrázek 16.32: zarovnani.css Pouze pomocí CSS: zarovnani-css-bezhtml.html a zarovnani-css-bezhtml.css
Měníme pozadí | Obrázky 16.35 a 16.36 (Změna barvy pozadí pomocí XHTML a barvy popředí pomocí CSS): barva-pozadi-html.html a barva-pozadi-html.css Obrázky 16.37 a 16.38 (Změna jak barvy pozadí (včetně obrázku na pozadí), tak popředí pouze pomocí CSS: pozadi-css-bezhtml.html a pozadi.css
Ovlivňujeme mezery | Obrázky 16.40, 16.41, a 16.42: mezera-html.html a pozadi.css Obrázek 16.43 a 16.44, s pomocí XHTML a CSS: nove-mezery.html a nove-mezery.css Všimněte si, že mezera vyplněná průhledným obrázkem GIF, se zmenšila na 110 pixelů od tohoto příkladu dále, aby zbyl prostor pro vnitřní okraj.
Rozšiřujeme buňku přes více sloupců | Obrázek 16.45: colspan.html a colspan.css
Rozšiřujeme buňku přes více řádků | Obrázek 16.47: rowspan.html a colspan.css
Rozdělujeme tabulku na skupiny sloupců | Obrázek 16.49: colgroup.html Obrázek 16.50: colgroup.css Obrázek 16.52: col.html Obrázek 16.53: col.css
Rozdělujeme tabulku do horizontálních částí | Obrázek 16.55: tbody.html Obrázek 16.56: tbody.css
Vybíráme, které rámečky se zobrazí | Obrázek 16.58: frame.html Obrázek 16.59: frame.css Obrázky 16.61 a 16.62: rules-sloupce.html a frame.css Obrázky 16.63 a 16.64: rules-skupiny.html a frame.css
Ovlivňujeme zalomení řádku v buňce | Obrázek 16.65: bez-zalomeni-pred.html a frame.css Obrázky 16.66 a 16.67: bez-zalomeni.html a frame.css Poznámka: Zkuste zmenšit okno prohlížeče, aby bylo velmi úzké, takže uvidíte efekt, který vytváří parametr `nowrap`.
Urychlujeme vykreslení celé tabulky | Obrázek 16.68: vykresleni-tabulky.css a vykresleni-tabulky.html

## 17: Formuláře Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 17_formulare.
Vytváříme formulář | Obrázek 17.1: cely-formular.html Obrázek 17.2: hlavni-formular.css Obrázek 17.3: cely-formular.html a hlavni-formular.css
Zpracování formulářů | Obrázek 17.4: ukazat-formular.txt Poznámka: Příponu budete muset změnit na .php, aby skript fungoval.
Posíláme formulářová data e-mailem | Obrázek 17.6: emailform.php Poznámka: Příponu budete muset změnit na .php, aby skript fungoval. Obrázek 17.7: cely-formular-email.html
Organizujeme elementy formuláře | Obrázek 17.10: fieldset-legend.html Obrázek 17.11: fieldset.css Obrázek 17.13: popis-p.html Obrázek 17.11: popis-p.css
Vytváříme textová pole | Obrázek 17.16: textove-pole.html
Vytváříme pole pro heslo | Obrázek 17.18: heslo.html
Formální pojmenování částí formuláře | Obrázek 17.20: label.html Obrázek 17.21: label.css
Vytváříme přepínače | Obrázek 17.23: prepinac.html Obrázek 17.24: prepinac.css
Vytváříme nabídky | Obrázek 17.26: nabidka.html Obrázek 17.27: nabidka.css Obrázek 17.29: podnabidka.html a nabidka.css
Vytváříme zaškrtávací políčka | Obrázek 17.31: zaskrtavaci-pole.html, Obrázek 17.32: zaskrtavaci-pole.css
Vytváříme větší textová pole | Obrázek 17.34: textarea.html Obrázek 17.35: textarea.css
Umožňujeme uživatelům nahrát soubor | Obrázek 17.37: nahrat-soubor.html a nahrat-soubor.txt (změňte název na "nahrat-soubor.cgi", než skript použijete)
Vytváříme poztvrzovací tlačítko | Obrázek 17.40: potvrzeni.html Obrázek 17.41: potvrzeni.css Obrázek 17.43: tlacitko-potvrzeni.html Obrázek 17.44: tlacitko.css
Obnovujeme (mažeme) formulář | Obrázek 17.46: reset.html Obrázek 17.47: potvrzeni.css Obrázek 17.49: tlacitko-reset.html a tlacitko.css
Používáme obrázek k potvrzení dat | Obrázek 17.51: mapa-oblasti.html a mapa-oblasti.txt (Poznámka: Příponu budete muset změnit na .php, aby skript fungoval.)
Nastavujeme tabelační pořádek ve formuláři | Obrázek 17.54: tab-poradek.html
Přidáváme klávesové zkratky | Obrázek 17.56: klavesnice.html
Znepřístupňujeme elementy formuláře | Obrázek 17.58: znepristupneni.html
Předcházíme změně elementů formuláře | Obrázek 17.61: pouze-ke-cteni.html

## 18: Video, audio a další multimédia Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 18_multimedia.
Odkazujeme na multimediální soubory | Obrázek 18.5: Stránka blogu Obrázek 18.6: segadors.mov
Vkládáme video nahrávky programu QuickTime pro Windows | Obrázek 18.7: jen-pro-ie.html
Vkládáme nahrávky programu QuickTime pro jiné prohlížeče než IE | Obrázek 18.9: dle-standardu.html
Vkládáme nahrávky programu QuickTime pro všechny prohlížeče | Obrázek 18.12: pro-vsechny.html Obrázek 18.14: skryti-2-object.html
Spouštíme nahrávku pomocí JavaScriptu | Obrázek 18.16: nahravka-javascript.js Obrázek 18.17: nahravka-javascript-radkovani.js (Prohlédnětě si, jak funguje pomocí nahravka-javascript-radkovani.html) Obrázek 18.18: nahravka-javascript.html
Měníme velikost nahrávky aplikace QuickTime | Obrázek 18.20: zmena-velikosti.html
Měníme barvu pozadí nahrávky | Obrázek 18.22: barva-pozadi.html
Necháváme nahrávku aplikace QuickTime přehrávat opakovaně | Obrázek 18.24: opakovani.html
Nabízíme ukázku nahrávky | Obrázek 18.26: ukazka.html
Přidáváme parametry pro sekundární nahrávku | Obrázek 18.28: ukazka-opakovani.html
Nabízíme dodatek | Obrázek 18.30: dodatek.html
Vkládáme nahrávku MP3 do stránky | Obrázek 18.32: vlozeni-mp3.html
Vkládáme nahrávku Windows Media, část 1 | Obrázek 18.42: skryti-2-wmv.html
Vkládáme nahrávku Windows Media, část 2 | Obrázek 18.46: vlozeni-wmv.html
Vkládáme animace Flash | Obrázek 18.48: vlozeni-flash.html
Připojujeme Google a YouTube video | Obrázek 18.50: Vilaweb na Google Video Obrázek 18.51: google-video.html Obrázek 18.54: youtube-vlozeni.html
Vkládáme aplety jazyka Java | Obrázek 18.56: java-aplet.html
Vytváříme automatickou prezentaci | Obrázek 18.59: prezentace.html a prezentace.css prezentace2.html prezentace3.html

## 19: Skripty Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 19_skripty.
Přidáváme “automatický” skript | Obrázek 19.1: jednoduchy.html
Voláme externí automatické skripty | Obrázek 19.3: externi-skript.txt Obrázek 19.4: externi-skript.html
Necháváme skripty spouštět | Obrázek 19.7: udalosti.html
Vytváříme tlačítko spouštějící skript | Obrázek 19.10: tlacitko.html
Přidáváme alternativní informaci | Obrázek 19.13: noscript.html
Skrýváme skripty před staršími prohlížeči | Obrázek 19.17: skryti.html
Skrýváme skripty před XML parsery | Obrázek 19.19: cas.xml
Nastavujeme výchozí skriptovací jazyk | Obrázek 19.20: vychozi.html

## 20: Ochutnávka z JavaScriptu Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 20_javascript.
Vkládáme aktuální datum a čas | Obrázek 20.1: cas.js Obrázky 20.2 a 20.3: cas.html
Nastavujeme velikost nového okna prohlížeče | Obrázek 20.4: hawthorne.html
Změna obrázku, když na něj uživatel najede myší | Obrázek 20.7: prekresleni.html
Nahráváme obrázky do mezipaměti | Obrázek 20.11: nahrat-obrazky.js Obrázek 20.12: nahrat-obrazky.html

## 21: Symboly a znaky cizích znakových sad Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 21_znaky.
Symboly a znaky cizích znakových sad | Informace o Unicode od Alana Wooda Stránky Richarda Ishida na webu společnosti W3C
Něco málo o znakových sadách | Referenční přehled entit (X)HTML
Deklarujeme kódování znaků na stránce | Obrázek 21.6: jazyky.html Obrázek 21.7: jazyky-bez-kodovani.html
Deklarujeme kódování šablony kaskádových stylů | Obrázek 21.9: styly.css
Ukládáme stránku ve správném kódování | Běžná znaková kódování
Upravujeme stránku ve správném kódování | Obrázek 21.12: windowslatin1.html
Přidáváme znaky z jiné znakové sady | tabulka na Unicode.org Referenční přehled entit (X)HTML Obrázek 21.18: oznaceni-znaku.html
Určujeme jazyk stránky | Obrázek 21.20: lang_fr.html

## 22: Testování a ladění webových stránek Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 22_testovani.
Kontrolujeme zdrojový kód | W3C (X)HTML Validator W3C CSS Validator validace.html
Testujeme stránku | Obrázky 22.16 a 22.17: test-spatny.html a testovaci.css Obrázek 22.18: test-zpraveno.html with testovaci.css
Když prohlížeč zobrazuje kód | Obrázky 22.19 a 22.20: maryanna.html
Když se nezobrazují obrázky | Obrázek 22.21: bez-obrazku.html
Rozdílný vzhled v různých prohlížečích | Obrázek 22.24: test/zaskrtavaci-pole.html
Stále existuje problém? | Diskuzní fórum (anglicky)

## 23: Publikování webových stránek na Internetu
Získáváme vlastní doménu | CZ.NIC - Registrátoři
Přenášíme soubory na server | Ipswitch Fetch Softworks

## 24: Jak dát o stránkách vědět Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 24_publikovani
Jak dát o stránkách vědět | Search Engine Optimization -- FREE! od Paula Boutina Sending Search Engine Traffic to Your Site od Paula Boutina SearchEngineWatch
O klíčových slovech | Obrázek 24.1: barcelona-trziste.html
Uvádíme seznam klíčových slov | Obrázek 24.3: meta-keywords.html
Poskytujeme popis stránky | Obrázek 24.4: meta-description.html
Poskytujeme další informace | Obrázek 24.6: meta-dalsi-info.html
Odrazujeme vyhledávače od prohledání stránek | Obrázek 24.8: roboty-ne.html
Odrazujeme vyhledávače od archivování stránek | Obrázek 24.10: nearchivovat.html
Registrujeme stránky ve vyhledávači | Obrázek 24.15: Přidat odkaz do Googlu Jak přidat stránky do katalogu serveru Yahoo! Přidat stránku do fulltextu serveru Seznam Přidat odkaz do vyhledavače Jyxo

## 25: Publikování pomocí RSS a podcasting Všechny příklady v této kapitole (pokud není popsáno jinak) najdete ve složce 25_rss.
Začínáme tvořit zdroj RSS | Obrázek 25.4: start.xml Generátor zdrojů RSS: Feeder
Popisujeme webové stránky ve zdroji | Obrázek 25.5: channel.xml Specifikace RSS
Přidáváme položky zdroje RSS | Obrázek 25.6: item.xml RSS Media Module (používaný serverem Flickr pro zdroje fotek)
Přidáváme přílohu | Obrázek 25.9: enclosure.xml Typy MIME
Ověřujeme validitu zdroje | Obrázek 25.12: Feed Validator
Publikujeme zdroj RSS na webových stránkách | Obrázky 25.15: Liz Castro on HTML, XHTML, a CSS (Podívejte se na zdrojový kód odkazů na zdroje.)

## A: Elementy a parametry (X)HTML
Elementy a parametry (X)HTML | Elementy a parametry (X)HTML W3C - oficiální specifikace HTML 4.01 W3C - oficiální specifikace XHTML 1

## B: Vlastnosti a hodnoty CSS
Vlastnosti a hodnoty CSS | Vlastnosti a hodnoty CSS W3C - oficiální specifikace CSS 2 W3C - oficiální specifikace CSS 2.1

## C: Vnitřní události
Vnitřní události | events.html

## D: Symboly a znaky (X)HTML
Symboly a znaky (X)HTML | Znakové entity (X)HTML Unicode.org

## E: Hexadecimální hodnoty
Hexadecimální hodnoty | hexchart.html

## F: Nástroje (X)HTML
Editory (X)HTML | tools.html
Obrázky a grafika | tools.html
Grafické nástroje | tools.html