Část 1. Úvod. 1.1 Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie 48

Transkript

1 Předmluva Část 1 Úvod 1 Historické pozadí a vývoj Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie 48 2 Internetové prohlížeče a všechno okolo nich Internetový prohlížeč z technické stránky Válka prohlížečů Svět prohlížečů Testovací prostředí 83 3 Základní kostra HTML Struktura dokumentu HTML Několik důležitých faktů Základy CSS Základní pojmy Vkládání Přiřazení stylů Kaskádové styly který styl platí? Jaké jednotky na webu používáme? 160

2 6 Obsah 5 Budoucnost XHTML CSS Další technologie 171 Část 2 Řešení 6 Úprava textu 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 214

3 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 Odstavce 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 271

4 8 Obsah 7.21 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 Odkazy a záložky 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 ový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 Obrázky a pozadí stránky 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ů 318

5 9 9.8 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 Seznamy 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 372

6 10 Obsah 11 Tabulky 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 Formuláře 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 440

7 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í u (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 Rámce 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ů 491

8 12 Obsah 13.5 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ů Umístění elementů na stránce a její vzhled 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 563

9 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 Rozvržení stránky pomocí CSS Rozvržení stránky do dvou sloupců pomocí CSS a zarovnané na střed okna prohlížeče Nápovědné texty ve spojení s umístěním prvků pomocí CSS a s využitím JavaScriptu Pluginy a multimédia 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 634

10 14 Obsah 16 Internet Explorer Š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é Prohlížeče řady Mozilla Š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 Ostatní prohlížeče 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 694

11 Zobrazení stránky v Safari a Konqueroru ve Windows online Možnost výběru několika vlastních šablon stylů Značka <meta> a internetové vyhledávače 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 Přístupnost a použitelnost Směrnice pro přístupnost stránek Splnění požadavků podle priority Splnění požadavků podle priority Splnění požadavků podle priority 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 735

12 16 Obsah 20.7 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 Pokročilejší techniky 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 803

13 Ochrana heslem pomocí ASP.NET a funkce přihlašování uživatelů ve Windows Spouštění webových služeb pomocí Internet Exploreru Webové služby ve spojení s Mozillou, Netscapem a Firefoxem Vlastní chybová hlášení webového serveru pomocí Apache Vlastní chybová hlášení webového serveru pomocí IIS Použití efektu překreslení Efekt překreslení u odkazů Načtení obrázků předem Informace o jazyce textu internetových stránek 824 Část 3 Přílohy 22 Přehled pojmů Tabulkové přehledy 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 902 Rejstřík