Toto rozhraní ve formě webové stránky doprovází knihu Tvorba WWW stránek pro úplné začátečníky (Computer Press, 2008). Obsahuje přehledně uspořádaný seznam příkladů a cvičení z knihy s odkazy, díky nimž budete mít zdrojový kód i ukázky okamžitě přístupné.
Seznam příkladů a cvičení je organizován v přehledné tabulce:
| Název části v knize | číslo obrázku | kód | ukázka (název souboru/složky) |
Orientace v tabulce:
Příklady a cvičení k této kapitole najdete ve složce Kapitola02.
| Odstavce textu a nadpisy | obrázek 2.4 | kód | ukázka (odstavce.html) |
| Odstavce textu a nadpisy | obrázek 2.5 | kód | ukázka (nadpisy.html) |
| Zvýraznění textu v odstavci | obrázek 2.6 | kód | ukázka (zvyrazneni.html) |
| Ukončení řádku | obrázek 2.7 | kód | ukázka (ukonceni_radku.html) |
| Neuspořádané (odrážkové) seznamy | obrázek 2.8 | kód | ukázka (seznam_neusporadany.html) |
| Uspořádané (číslované) seznamy | obrázek 2.9 | kód | ukázka (seznam_usporadany.html) |
| Víceúrovňové seznamy | obrázek 2.10 | kód | ukázka (seznam_viceurovnovy.html) |
| Víceúrovňové seznamy - kombinace | obrázek 2.11 | kód | ukázka (seznam_viceurovnovy_kombinace.html) |
| Tvoříme první odkazy | obrázek 2.12 | kód | ukázka (odkaz.html) |
| Tvoříme první odkazy | obrázek 2.13 | kód | ukázka (stranka1.html a stranka2.html) |
| E-mailová adresa jako odkaz | obrázek 2.14 | kód | ukázka (email.html) |
| Odkazujeme na jiné místo na stejné stránce | obrázek 2.15 | kód | ukázka (odkazy_jmenne.html) |
| Jak vložit obrázek do stránky | obrázek 2.17 | kód | ukázka (obrazek.html) |
| Popisek a titulek obrázku | obrázek 2.18 | kód | ukázka (obrazek_alt_title.html) |
| Náhledy fotografií jako odkazy na větší snímek | obrázek 2.25 | kód | ukázka (obrazky_fotogalerie.html) |
| Přísná (striktní) specifikace XHTML 1.0 | kód | ukázka (sablony/XHTML-prisna.html) | |
| Přechodová specifikace XHTML 1.0 | kód | ukázka (sablony/XHTML-prechodova.html) | |
| Přísná (striktní) specifikace HTML 4.01 | kód | ukázka (sablony/HTML-prisna.html) | |
| Přechodová specifikace HTML 4.01 | kód | ukázka (sablony/HTML-prechodova.html) | |
| Komentáře ve zdrojovém kódu | obrázek 2.28 | kód | ukázka (komentare.html) |
↑ Nahoru ↑
Příklady a cvičení k této kapitole najdete ve složce Kapitola03.
| Jak použít CSS pro změnu vzhledu prvků stránky | obrázek 3.1 | kód | ukázka (prvniCSS.html) |
| Jak na změnu typu písma | obrázek 3.3 | kód | ukázka (typ_pisma.html) |
| Rodiny písma | obrázek 3.4 | ukázka (rodina_pisma.html) | |
| Bezpečné určení písma pro WWW stránku | obrázek 3.5 | kód | ukázka (pismo_bezpecne.html) |
| Jak změnit velikost textů | obrázek 3.6 | kód | ukázka (velikost_textu.html) |
| Jak změnit velikost textů | obrázek 3.7 | ukázka (velikosti_textu-ruzne.html) | |
| Kurziva | obrázek 3.8 | kód | ukázka (kurziva.html) |
| Tučnost | obrázek 3.9 | kód | ukázka (tucnost.html) |
| Podtržení | obrázek 3.10 | kód | ukázka (podtrzeni.html) |
| Použití vlastnosti text-decoration | obrázek 3.11 | ukázka (dekorace_textu.html) | |
| Jak na změnu barvy textu | kód | ukázka (barva_textu.html) | |
| Jak na změnu barvy textu | kód | ukázka (barva_textu2.html) | |
| Jak změnit výšku řádku | obrázek 3.16 | kód | ukázka (radkovani.html) |
| Jak změnit výšku řádku | obrázek 3.17 | ukázka (radkovani2.html) | |
| Zarovnání nadpisů a odstavců na stránce | obrázek 3.18 | ukázka (zarovnani.html) | |
| Zarovnání nadpisů a odstavců na stránce | obrázek 3.19 | kód | ukázka (zarovnani2.html) |
| Odsazení prvního řádku odstavce | obrázek 3.20 | kód | ukázka (odsazeni.html) |
| Měníme odrážky neuspořádaných seznamů | obrázek 3.21 | kód | ukázka (odrazky.html) |
| Vlastní odrážky | obrázek 3.22 | kód | ukázka (odrazky-vlastni.html) |
| Měníme odrážky a číslování neuspořádaných seznamů | obrázek 3.23 | ukázka (razeni-usporadany_seznam.html) | |
| Víceúrovňový seznamu a selektor následníka | obrázek 3.26 | kód | ukázka (viceurovnovy-seznam.html) |
↑ Nahoru ↑
Příklady a cvičení k této kapitole najdete ve složce Kapitola04.
| Nastavujeme šířku a výšku elementu | obrázek 4.3 | kód | ukázka (sirka.html) |
| Nastavujeme rámeček elementu | obrázek 4.4 | kód | ukázka (ramecek.html) |
| Nastavujeme rámeček elementu - styly | obrázek 4.5 | kód | ukázka (ramecek-styly.html) |
| Nastavujeme rámeček elementu - barvy | ukázka (ramecek-barvy.html) | ||
| Nastavujeme rámeček elementu - strany | obrázek 4.6 | kód | ukázka (ramecek-strany.html) |
| Jak na vnitřní okraj | obrázek 4.7 | kód | ukázka (vnitrni_okraj.html) |
| Jak na vnitřní okraj | obrázek 4.8 | kód | ukázka (vnitrni_okraj2.html) |
| Jak na vnější okraj | obrázek 4.9 | kód | ukázka (vnejsi_okraj.html) |
| Jak na vnější okraj | obrázek 4.10 | kód | ukázka (vnejsi_okraj2.html) |
| Zarovnání stránky na střed obrazovky | obrázek 4.12 | kód | ukázka (centrovani.html) |
| Okraje u neuspořádaných seznamů | obrázek 4.15 | kód | ukázka (okraje-neusporadany_seznam.html) |
| Okraje u uspořádaných seznamů | obrázek 4.17 | kód | ukázka (okraje-usporadany_seznam.html) |
| Jak na jednobarevná pozadí | obrázek 4.18 | kód | ukázka (jednobarevne_pozadi.html) |
| Jak na obrázková pozadí | obrázek 4.21 | kód | ukázka (obrazkove_pozadi.html) |
| Vlastnosti obrázku na pozadí - opakování | obrázek 4.22 | kód | ukázka (obrazkove_pozadi2.html) |
| Vlastnosti obrázku na pozadí - pozice | obrázek 4.23 | kód | ukázka (obrazkove_pozadi3.html) |
| Povaha elementů - jaké máme elementy | obrázek 4.24 | ukázka (povaha_elementu.html) | |
| Měníme povahu elementů | obrázky 4.26, 4.27 | ukázka (povaha_elementu-zmena.html) | |
| Použití tříd CSS k přiřazení stylů | obrázek 4.29 | kód | ukázka (trida.html) |
| Použití identifikátorů CSS k přiřazení stylů | obrázek 4.31 | kód | ukázka (identifikator.html) |
| Praktické využití elementu span | obrázek 4.32 | kód | ukázka (span.html) |
| Praktické využití elementu div | obrázek 4.33 | kód | ukázka (div.html) |
| Specifičnost selektorů | obrázek 4.36 | kód | ukázka (specificnost.html) |
| Pořadí přiřazování stylů – kaskáda | obrázek 4.39 | kód | ukázka (kaskada.html) |
↑ Nahoru ↑
Příklady a cvičení k této kapitole najdete ve složce Kapitola05.
| Tvorba tabulky v několika krocích | obrázek 5.2 | kód | ukázka (tabulka-HTML.html) |
| Jak je to se sloupci tabulky | obrázek 5.3 | kód | ukázka (tabulka-sloupec.html) |
| Jak je to se sloupci tabulky | obrázek 5.4 | kód | ukázka (tabulka-skupina_sloupcu.html) |
| Prázdné buňky | obrázek 5.5 | kód | ukázka (tabulka-prazdne_bunky.html) |
| Záhlaví tabulky v několika krocích | obrázek 5.6 | kód | ukázka (tabulka-HTML-zahlavi.html) |
| Spojení více buněk do jediné - přes sloupce | obrázek 5.7 | kód | ukázka (tabulka-HTML-spojeni_bunek.html) |
| Spojení více buněk do jediné - přes řádky | obrázek 5.8 | kód | ukázka (tabulka-HTML-spojeni_bunek2.html) |
| Rozměry a okraje tabulky a buněk | obrázek 5.10 | kód | ukázka (tabulka-CSS-sirka.html) |
| Zarovnání obsahu buněk | obrázek 5.12 | kód | ukázka (tabulka-CSS-zarovnani.html) |
| Jak na barvy v tabulce | obrázek 5.14 | kód | ukázka (tabulka-CSS-barvy.html) |
| Upravujeme rámečky | obrázek 5.16 | kód | ukázka (tabulka-CSS-ramecky.html) |
↑ Nahoru ↑
Příklady a cvičení k této kapitole najdete ve složce Kapitola06.
| Relativní umístění | obrázek 6.10 | kód | ukázka (relativni_umisteni.html) |
| Relativní umístění - ukázka | obrázek 6.11 | ukázka (relativni_umisteni-ukazka.html) | |
| Absolutní umístění | obrázek 6.17 | kód | ukázka (absolutni_umisteni.html) |
| Absolutní umístění - ukázka | obrázek 6.18 | kód | ukázka (absolutni_umisteni-ukazka.html) |
| Jak umístit element do plovoucího umístění | obrázek 6.21 | kód | ukázka (plovouci_umisteni.html) |
| Jak zastavit obtékání | obrázek 6.22 | kód | ukázka (zastaveni_obtekani.html) |
| Základ pro tvorbu layoutu v dokumentu (X)HTML | kód | ukázka (layout-zaklad) | |
| Layout pomocí pevného a relativního umístění | obrázek 6.27 | kód | ukázka (layout-pevne_umisteni) |
| Dvousloupcový layout pomocí plovoucího umístění | obrázek 6.31 | kód | ukázka (layout-plovouci_umisteni) |
| Svislá navigační nabídka ve sloupci | obrázek 6.38 | kód | ukázka (navigace-svisla) |
| Vodorovná navigační nabídka | obrázek 6.43 | kód | ukázka (navigace-vodorovna) |
| Navigační nabídka jako záložky | obrázek 6.46 | kód | ukázka (navigace-zalozky) |
↑ Nahoru ↑
Příklady a cvičení k této kapitole najdete ve složce Kapitola07. V každé podsložce najdete startovací soubory index.html a styly.css, i soubory dokončené – v názvu obsahují „hotovo“.
| Písmo a texty | obrázek 7.2 | ukázka (nadpisy-typy_pisma.html) | |
| Vyladění stylů layoutu WWW stránek | obrázky 7.8, 7.9 | kód | ukázka (01_vyladeni_layoutu) |
| Grafika WWW stránek | obrázek 7.19 | kód | ukázka (02_grafika_stranek) |
| Grafická podoba navigační nabídky a efekt překreslení | obrázky 7.22-25 | kód | ukázka (03_navigace) |
| Označení odkazu v navigaci podle stránky, na níž se nacházíme | obrázek 7.26 | kód | ukázka (04_Kde-jsme) |
| Jak na obrázková tlačítka v navigační nabídce | obrázek 7.32 | kód | ukázka (05_Obrazkova_tlacitka) |
| Grafické ztvárnění záložkové navigace | obrázek 7.35 | kód | ukázka (06_Zalozky) |
| Jak na plastický vzhled záložek | obrázek 7.38 | kód | ukázka (07_Zalozky-plasticke) |
↑ Nahoru ↑