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ánkyVš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ánkyVš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)HTMLVš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)HTMLVš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ázkyVš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: OdkazyVš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é stylyVš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 selektoryVš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 | |
| 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 | |
| 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 | |
| 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 tiskVš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: SeznamyVš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: TabulkyVš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ářeVš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édiaVš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: SkriptyVš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 JavaScriptuVš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 sadVš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ánekVš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ětVš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 podcastingVš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 |