K1257.qxd
29.5.2006
17:34
StrÆnka 5
Obsah Předmluva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Část 1
Úvod 1
Historické pozadí a vývoj . . . . . . . . . . . . . . . . . . . 25
1.1 1.2 1.3 1.4 1.5
Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie
2
Internetové prohlížeče a všechno okolo nich
2.1 2.2 2.3 2.4
Internetový prohlížeč z technické stránky Válka prohlížečů Svět prohlížečů Testovací prostředí
3
Základní kostra HTML
3.1 3.2
Struktura dokumentu HTML Několik důležitých faktů
4
Základy CSS
4.1 4.2 4.3 4.4 4.5
Základní pojmy Vkládání Přiřazení stylů Kaskádové styly – který styl platí? Jaké jednotky na webu používáme?
27 32 36 46 48
. . . . . . . 53 53 55 61 83
. . . . . . . . . . . . . . . . . . . . . 87 87 104
. . . . . . . . . . . . . . . . . . . . . . . . . . . 127 129 130 137 152 160
K1257.qxd
29.5.2006
17:34
StrÆnka 6
6
Obsah
5
Budoucnost . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
5.1 5.2 5.3
XHTML 2.0 CSS 3 Další technologie
169 170 171
Část 2
Řešení 6
Úprava textu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 6.10 6.11 6.12 6.13 6.14 6.15 6.16 6.17 6.18 6.19 6.20 6.21 6.22 6.23 6.24 6.25 6.26
Definování nadpisů Nastavení typu písma pomocí HTML Nastavení typu písma pomocí CSS Definování generické rodiny písma Použití stáhnutelných písem Nastavení barvy písma pomocí HTML Nastavení barvy písma pomocí CSS Nastavení velikosti písma pomocí HTML Vliv velikosti písma na vzdálenost mezi dvěma odstavci Nastavení velikosti písma pomocí CSS Nastavení kurzivy pomocí HTML Nastavení kurzivy pomocí CSS Nastavení tloušky písma pomocí HTML Nastavení tloušky písma pomocí CSS Nastavení neproporcionálního písma Nastavení šířky písma Nastavení stylů písma v CSS Nastavení výšky řádku Nastavení písma kombinací různých způsobů Uspořádání písma pro celou stránku pomocí HTML Uspořádání písma pro celou stránku pomocí CSS Nastavení parametrů písma pro několik stránek současně pomocí CSS Nastavení vzhledu pro nadpisy Nastavení podtrhávání a přeškrtávání slov v HTML Podtrhnutí, přeškrtnutí a mnoho dalšího pomocí CSS Stínování textu
177 178 179 180 183 185 188 190 193 194 197 199 200 201 202 203 204 204 205 207 208 209 210 211 212 214
K1257.qxd
29.5.2006
17:34
StrÆnka 7
Obsah
6.27 6.28 6.29 6.30 6.31 6.32 6.33 6.34 6.35 6.36 6.37 6.38
Převod malých písmen na velká a naopak Práce s běžícím textem Běžící text pomocí JavaScriptu Nastavení vzdálenosti mezi jednotlivými písmeny Nastavení vzdálenosti mezi slovy Horní a dolní index pomocí HTML Použití logických textových značek Označení adres Označení citátů Zvýraznění změn v textu Zarovnání textu pomocí HTML Zarovnání textu pomocí CSS
7
Odstavce
7.1 7.2 7.3 7.4 7.5 7.6 7.7
Vytvoření odstavce a zalomení řádku Použití značky pro vytvoření bloku Použití řádkového elementu span Povolení a zakázání automatického zalamování řádků Měkký spojovník Nedělitelná mezera Zakázání automatického zalamování řádků a předpřipravené možnosti zobrazení pomocí CSS Převzetí formátování ze zdrojového kódu pomocí HTML Odsazení prvního řádku textu Nastavení vnějších okrajů v HTML Nastavení vnějších okrajů pomocí CSS Nastavení vnitřních okrajů pomocí CSS Vytváření rámečků a jejich úprava Blokový model CSS a řešení známé chyby Internet Exploreru Vytvoření rámečku okolo internetové stránky Využití průhlednosti rámečků Vytváření a používání čar Použití svislých čar Úprava prvního řádku odstavce Nastavení vzhledu prvního písmena odstavce
7.8 7.9 7.10 7.11 7.12 7.13 7.14 7.15 7.16 7.17 7.18 7.19 7.20
7
215 217 218 219 220 222 224 226 227 228 229 230
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 233 234 236 236 240 241 241 243 244 244 247 252 254 257 263 264 265 267 268 271
K1257.qxd
29.5.2006
17:34
StrÆnka 8
8
Obsah
7.21 7.22 7.23 7.24 7.25
Vložení obsahu před speciální prvky a za ně Vložení znaku copyrightu s dalšími informacemi na konec stránky pomocí CSS Možnosti zvláštního nastavení podřízeného elementu Změna toku textu Použití šablon stylů pro zobrazení na různých médiích
8
Odkazy a záložky . . . . . . . . . . . . . . . . . . . . . . . . 281
8.1 8.2 8.3 8.4 8.4 8.5 8.6 8.7 8.8 8.9 8.10 8.11 8.12 8.13 8.14 8.15 8.16 8.17
Vložení záložky Vložení odkazu Odkazy na záložky v externích dokumentech Použití záložek podle specifikace XHTML Nastavení barvy odkazů pomocí HTML Nastavení popisu odkazů Vytvoření odkazů pomocí pseudotříd v CSS Nepodtržené odkazy Nastavení cílového okna pro zobrazení odkazu Otevření odkazu v okně pro vyhledávání Otevření odkazů v okně Média Nastavení výchozí adresy pro odkazy Možnost stažení souborů Otevření okna pro psaní zprávy elektronické pošty Ochrana e-mailových adres Otevření programu pro čtení diskusních příspěvků Odeslání zpráv přes programy AIM, ICQ nebo Yahoo! Messenger Změna ukazatele myši
9
Obrázky a pozadí stránky
9.1 9.2 9.3 9.4 9.5 9.6 9.7
Vložení obrázků Výběr správného formátu obrázků Příprava obrázků pro internetové stránky Používání animací ve formátu GIF Příprava alternativních a nápovědných textů Pojmenování obrázků Další popisy obrázků
273 274 276 277 278
281 282 285 285 286 287 288 289 292 294 295 295 296 298 299 300 301 302
. . . . . . . . . . . . . . . . . 305 305 307 313 314 316 317 318
K1257.qxd
29.5.2006
17:34
StrÆnka 9
Obsah
9.8 9.9 9.10 9.11 9.13 9.14 9.15 9.16 9.17 9.18 9.19 9.20 9.21
Nastavení výšky a šířky obrázku Nastavení zobrazení a odstranění rámečků okolo obrázků Vložení obrázků do nadpisů Zarovnání obrázků Vlastní ikona vaší stránky Nastavení barvy pozadí pro celý web pomocí jazyka HTML Nastavení barvy pozadí pro celý web pomocí CSS Nastavení obrázku na pozadí stránky pomocí jazyka HTML Nastavení obrázku na pozadí stránky pomocí CSS Vlastnosti CSS pro konfiguraci obrázků na pozadí Ozdobné podtržení textu Obrázkové odkazy Obrázková mapa – obrázek s více odkazy
10
Seznamy
10.1 10.2 10.3 10.4 10.5 10.6 10.7 10.8 10.9 10.10 10.11 10.12 10.13 10.14 10.15 10.16 10.17 10.18
Vytvoření neuspořádaného seznamu Přehled symbolů použitelných v neuspořádaných seznamech v HTML Přehled symbolů použitelných v neuspořádaných seznamech v CSS Vytvoření uspořádaného seznamu Různé možnosti řazení položek uspořádaného seznamu v HTML Různé možnosti číslování pro uspořádané seznamy v CSS Přeskočení několika položek seznamu Vytvoření definičního výčtu Vytvoření seznamu a definičního výčtu pomocí CSS Vytvoření položek menu a obsahu Pozice označení položky seznamu Kompaktnější zobrazení seznamů Vnořené seznamy a dědičnost vlastností Použití grafických symbolů k označení položek seznamu v jazyce HTML Použití obrázkových symbolů v seznamech pomocí CSS Úprava vzhledu seznamů pomocí vlastností CSS Automatické číslování pomocí CSS Upravování a vytváření struktury stránek pomocí CSS
9
318 320 322 323 326 329 329 330 331 332 337 338 339
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 343 344 345 346 348 349 351 352 353 355 355 357 357 360 361 363 363 372
K1257.qxd
29.5.2006
17:34
StrÆnka 10
10
Obsah
11
Tabulky
11.1 11.2 11.3 11.4 11.5 11.6 11.7 11.8 11.9 11.10 11.11 11.12 11.13 11.14 11.15 11.16 11.17 11.18 11.19 11.20 11.21 11.22 11.23 11.24 11.25 11.26 11.27 11.28
Základní kostra tabulky Rámeček kolem buněk a tabulky pomocí HTML Rámeček kolem buněk a tabulky pomocí CSS Formátování obsahu tabulky pomocí HTML Formátování obsahu tabulky pomocí CSS Nastavení pozadí tabulky a buněk pomocí HTML Vložení obrázku na pozadí do tabulky Nastavení pozadí tabulek pomocí CSS Popis tabulky Použití krátkých popisků tabulek nebo buněk tabulky Nastavení výšky a šířky tabulky Nastavení pro rychlejší vykreslování sloupců Úprava tabulek pomocí hromadného formátování sloupců Vytváření a formátování oblastí tabulky Sloučení buněk tabulky Nastavení vnitřních okrajů tabulky pomocí HTML Nastavení vnitřních okrajů pomocí CSS Vnoření tabulek Rámeček kolem prázdných buněk Zákaz zalomení řádku v buňkách Nastavení šířky tabulky nezávisle na obsahu tabulky Zobrazení nadměrně velkého obsahu buňky pomocí posuvníků Svislé a vodorovné zarovnání obsahu tabulek pomocí HTML a CSS Obrácení směru toku textu Modul tabulek v CSS – tvorba tabulek pomocí CSS v budoucnosti Vytváření tabulek pomocí CSS v současnosti Ozdobné rámečky u tabulek Seznámení s parametry pro přístupnost
12
Formuláře . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
12.1 12.2 12.3 12.4
Vložení formuláře na internetovou stránku Stanovení cíle pro odeslaná data Výběr metody použité k odeslání dat Vytvoření formulářů vyhovujících specifikaci XHTML Strict
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 375 376 379 382 384 387 389 391 392 396 397 399 402 405 407 409 410 412 414 416 418 419 422 424 426 427 430 432
435 436 437 440
K1257.qxd
29.5.2006
17:34
StrÆnka 11
Obsah
12.5 12.6 12.7 12.8 12.9 12.10 12.11 12.12 12.13 12.14 12.15 12.16 12.17 12.18 12.19
11
12.32
Vložení textového pole Vložení pole pro zadání hesla Vložení pole s více řádky Nastavení zalomení řádku u textových polí s více řádky Vložení zaškrtávacího políčka (checkbox) Vložení rozšířeného přepínače (Radio Button) Vložení prvku pro výběr ze seznamu Současný výběr několika položek ze seznamu Vložení skrytého pole formuláře Vložení tlačítka pro odeslání formuláře Vložení obrázkového tlačítka pro odeslání formuláře Vložení tlačítka pro návrat k výchozímu stavu Vložení tlačítka Vložení tlačítka u novějších verzí prohlížečů Odesílání dat formuláře pomocí e-mailu (a proč to není vždy to nejlepší řešení) Vložení prvku pro odeslání souboru Seskupování prvků Popis prvků Zablokování editace obsahu textového pole Deaktivování polí formuláře Ochrana před vícenásobným odesláním dat z formuláře Zarovnání obsahu textových polí vpravo Speciální formátování textového pole Přednastavení obsahu textového pole Odeslání formuláře klávesou Enter Změna pořadí prvků ve formuláři při používání klávesy t Rychlejší pohyb po internetových stránkách za použití prvku Option (výběr ze seznamu) Pohodlné prohlížení prvků formulářů obsažených v prohlížeči
13
Rámce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
13.1 13.2 13.3 13.4
Vytvoření základní kostry pro rámce Určení obsahu pro jednotlivé rámce Vnoření rámců do sebe Rozumné nastavení velikosti rámců
12.20 12.21 12.22 12.23 12.24 12.25 12.26 12.27 12.28 12.29 12.30 12.31
440 442 444 445 447 448 450 452 454 455 457 458 460 461 462 465 468 469 471 472 474 475 476 478 480 481 482 483
485 485 487 491
K1257.qxd
29.5.2006
17:34
StrÆnka 12
12
Obsah
13.5 13.6 13.7 13.8 13.9 13.10 13.11 13.12 13.13 13.14 13.15 13.16 13.17 13.19
Podpora prohlížečů, které nedokáží zobrazit rámce Úprava rámců pomocí HTML Úprava rámců pomocí CSS Nastavení zobrazení posuvníků Pevné nastavení velikosti rámce Nastavení vzdálenosti obsahu rámce od okraje rámce Umístění obsahu rámce přímo k okraji rámce Změna obsahu rámce pomocí odkazu Vytvoření navigační lišty pomocí rámců Současná změna obsahu dvou rámců Nastavení výchozího rámce Rezervované hodnoty pro parametr target a jejich použití Vytvoření plovoucího rámce v okně prohlížeče Možnost dynamické úpravy velikosti plovoucích rámců
14
Umístění elementů na stránce a její vzhled
14.1 14.2 14.3 14.4 14.5 14.6 14.7 14.8 14.9 14.10 14.11 14.12 14.13 14.14 14.15 14.16 14.17 14.18 14.19
Zarovnání textu a jednotlivých elementů pomocí HTML Zarovnání textu a jednotlivých elementů pomocí CSS Nastavení výšky a šířky elementů Nastavení minimální a maximální šířky a výšky prvků Nastavení minimální šířky a výšky pro (prakticky) všechny prohlížeče Přetečení obsahu přes okraj elementu Viditelnost elementů Nastavení plovoucího umístění elementů pomocí CSS Zrušení obtékání elementů Umístění, obtékání a zrušení obtékání elementů pomocí HTML Umístění elementů pomocí CSS Absolutní umístění elementů Pevné umístění elementů Relativní umístění elementů Současné použití relativního a absolutního umístění Ovlivňování překrývání vlastností z-index Umístění pomocí CSS v Netscape Navigatoru 4.x Nastavení viditelné oblasti Použití vlastnosti display
497 498 502 504 505 507 508 509 510 513 514 517 519 523
. . . . 529 529 531 532 535 537 538 540 542 544 546 547 549 552 553 557 558 561 562 563
K1257.qxd
29.5.2006
17:34
StrÆnka 13
Obsah
14.20 14.21 14.22 14.23 14.24
Umístění prvků stránky pomocí tabulek Prázdný prostor okolo obrázků a dalších elementů Několik základních rozvržení internetových stránek Rozložení stránek pomocí neviditelných tabulek Rozvržení stránky pomocí tabulek a zarovnané na střed okna prohlížeče 14.25 Rozvržení stránky pomocí CSS 14.26 Rozvržení stránky do dvou sloupců pomocí CSS a zarovnané na střed okna prohlížeče 14.27 Nápovědné texty ve spojení s umístěním prvků pomocí CSS a s využitím JavaScriptu
13
566 570 571 575 579 581 584 586
15
Pluginy a multimédia . . . . . . . . . . . . . . . . . . . . . 589
15.1 15.2
Integrace médií Poskytnutí alternativního textu pro uživatele bez nainstalovaného pluginu Doinstalování pluginu v případě potřeby Přehrávání hudby na pozadí Přehrávání hudby na popředí prohlížeče v Netscape Navigatoru Vložení animací ve formátu Flash Kontrola dostupnosti pluginu pro Flash Reklamní proužky překrývající obsah stránky Integrace animací typu Shockwave Kontrola přítomnosti pluginu pro formát Shockwave Integrace Windows Media Playeru Vytvoření metasouboru pro Windows Media Player Integrace Real Playeru Integrace přehrávače QuickTime Integrace apletů Java Integrace souborů SVG Integrace dokumentů MathML Integrace XML Vkládání internetových stránek Kontrola existence pluginu
15.3 15.4 15.5 15.6 15.7 15.8 15.9 15.10 15.11 15.12 15.13 15.14 15.15 15.16 15.17 15.18 15.19 15.20
592 594 595 595 597 598 601 604 607 610 612 614 616 618 619 622 626 629 632 634
K1257.qxd
29.5.2006
17:34
StrÆnka 14
14
Obsah
16
Internet Explorer
16.1 16.2 16.3 16.4 16.5 16.6 16.7 16.8 16.9 16.10 16.11 16.12 16.14 16.15 16.16 16.17 16.18 16.19
Šablona stylu pro zobrazení stránek konkrétním prohlížečem Zvětšení elementů na stránce Lupa Potlačení posuvníků Barevné posuvníky Zkrácení příliš dlouhých řádků Použití filtru Interaktivní použití filtrů Používání přechodových filtrů Přižazení skriptu reagujícího na událost pomocí CSS Vytvoření průhledných souborů PNG pomocí reakce na událost a filtrů Vlastnosti stylu určené výhradně pro Internet Explorer Vlastnosti stylů pouze pro Internet Explorer Vlastnosti stylů určené pouze pro některé verze Internet Exploreru Podmíněné komentáře pro odlišení jednotlivých verzí prohlížečů Otevření dokumentů v zóně Internet Přidání stránky do oblíbených položek Nastavení stránky jako domovské
17
Prohlížeče řady Mozilla
17.1 17.2 17.3 17.4 17.5 17.6
Šablona stylu pro každý prohlížeč a pro jeho vývoj Jazyk XUL pro úpravu prostředí prohlížeče Vlastnosti CSS použitelné pouze v Mozille Přizpůsobení stránek Netscape Navigatoru 4.x Skrytí stylů před Netscape Navigatorem 4.x Integrace kanálů RSS do Firefoxu
18
Ostatní prohlížeče
18.1 18.2 18.3 18.4 18.5
Uživatelem nadefinované šablony stylů v Konqueroru a Safari Uživatelem nadefinované šablony stylů v prohlížeči Opera Obarvení posuvníků v prohlížeči Opera Obarvení posuvníků v Konqueroru a Safari Použití vlastností CSS specifických pro Operu
. . . . . . . . . . . . . . . . . . . . . . . . 637 637 640 642 644 645 648 648 657 658 661 663 666 669 671 674 676 679 679
. . . . . . . . . . . . . . . . . . . 681 681 682 684 685 687 687
. . . . . . . . . . . . . . . . . . . . . . . 689 689 690 692 694 694
K1257.qxd
29.5.2006
17:34
StrÆnka 15
Obsah
15
18.6 18.7
Zobrazení stránky v Safari a Konqueroru ve Windows online Možnost výběru několika vlastních šablon stylů
19
Značka <meta> a internetové vyhledávače
19.1 19.2 19.3 19.4
19.18 19.19 19.20
Zadávání metainformací Automatické přesměrování Automatické přesměrování řešené pomocí JavaScriptu Automatické přesměrování řešené pomocí JavaScriptu, bez možnosti návratu zpět Automatické přesměrování s využitím prostředků pracujících na straně serveru Pravidelné nové načítání stránek Přidělení data vypršení platnosti pro internetovou stránku Zabránění využití mezipaměti Zákaz indexování stránek internetovými vyhledávači Doporučení pro internetové vyhledávače nesledovat odkazy Zamezení přístupu internetovým vyhledávačům do některých částí webu Integrace dalších informací pro internetové vyhledávače Integrování dalších informací o stránkách podle standardu DCMI Nová návštěva stránky prohlížečem Výchozí jazyk pro skriptování na internetové stránce Nastavení typu MIME a znakové sady pro internetovou stránku Zabudování ochrany nezletilých před nevhodným obsahem internetových stránek Umístění vlastních stránek do vyhledávačů Optimalizace stránek pro internetový vyhledávač Přidání odkazů na vaše stránky při vyhledávání pomocí Googlu
20
Přístupnost a použitelnost . . . . . . . . . . . . . . . . . 727
20.1 20.2 20.3 20.4 20.5 20.6
Směrnice pro přístupnost stránek Splnění požadavků podle priority 1 Splnění požadavků podle priority 2 Splnění požadavků podle priority 3 Otestování internetových stránek z hlediska splnění podmínek WCAG Otestování internetových stránek z hlediska přístupnosti a kvality
19.5 19.6 19.7 19.8 19.9 19.10 19.11 19.12 19.13 19.14 19.15 19.16 19.17
695 696
. . . 699 699 699 701 702 702 704 704 705 708 710 710 712 715 716 716 717 718 722 722 724
727 728 730 731 733 735
K1257.qxd
29.5.2006
17:34
StrÆnka 16
16
Obsah
20.7 20.8 20.9 20.10 20.11 20.12 20.13 20.14 20.15 20.16 20.17
Testování internetových stránek z hlediska přístupnosti pomocí seznamu nejdůležitějších charakteristik Prohlížení internetových stránek pomocí čtečky obrazovky Testování čtečky obrazovky na Internetu Prohlížení internetových stránek v textovém prohlížeči Nastavení klávesových zkratek Výběr správného kontrastu barev Optimalizace stránek pro barvoslepé Kontrola použitelnosti Vylepšení použitelnosti Použitelnost: nabídka různých stylů Předčítání obsahu internetových stránek
21
Pokročilejší techniky
21.1 21.2 21.3 21.4 21.5 21.6 21.7 21.8 21.9 21.10 21.11 21.12 21.13 21.14 21.15 21.16 21.17 21.18 21.19 21.20 21.21
Zasílání dat pomocí elektronické pošty Automatická kontrola formulářů Automatická kontrola formulářů (s podrobnějším hlášením chyb) Automatická kontrola formulářů (pouze povinných polí) Automatická kontrola formulářů pomocí ASP.NET Vytvoření dynamických otevíracích nabídek Ochrana kódu HTML Deaktivace pravého tlačítka myši Ochrana kódu psaného v JavaScriptu v Internet Exploreru Oprava kódu HTML Změna obsahu několika rámců současně Zajištění opakovaného načítání rámců Otevření nového okna Vytvoření mapy stránek Vytvoření automaticky se zavírajícího okna prohlížeče Zjištění aktivního blokování automaticky otevíraných oken Phishing Ochrana heslem s využitím JavaScriptu Ochrana heslem pomocí serveru Apache Ochrana heslem pomocí IIS Ochrana heslem pomocí PHP
735 737 737 737 738 740 740 741 744 747 749
. . . . . . . . . . . . . . . . . . . . . 753 753 758 762 765 767 770 779 780 782 783 784 788 790 793 794 796 797 799 800 802 803
K1257.qxd
29.5.2006
17:34
StrÆnka 17
Obsah
21.22 Ochrana heslem pomocí ASP.NET a funkce přihlašování uživatelů ve Windows 21.23 Spouštění webových služeb pomocí Internet Exploreru 21.24 Webové služby ve spojení s Mozillou, Netscapem a Firefoxem 21.25 Vlastní chybová hlášení webového serveru pomocí Apache 21.26 Vlastní chybová hlášení webového serveru pomocí IIS 21.27 Použití efektu překreslení 21.28 Efekt překreslení u odkazů 21.29 Načtení obrázků předem 21.30 Informace o jazyce textu internetových stránek
17
805 806 810 815 817 819 821 822 824
Část 3
Přílohy 22
Přehled pojmů . . . . . . . . . . . . . . . . . . . . . . . . . . 829
23
Tabulkové přehledy . . . . . . . . . . . . . . . . . . . . . . 845
23.1 23.2 23.3 23.4 23.5 23.6 23.7 23.8 23.9
Způsoby zadávání hodnot Časové údaje Zadávání barev Kódování znaků a speciálních znaků Seznam elementů jazyka HTML Seznam parametrů ke značkám HTML Seznam vlastností CSS Tabulka kompatibility CSS Stavové kódy protokolu HTTP
845 846 847 855 865 868 880 889 902
Rejstřík . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 905
