1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.

2 5 úrovní tvorby webových stránek Čím profesionálněji, tím více podivných slov a zkratek :-) 1. Nadšenec: Používá vizuální editor či export z Wordu 2. Kutil: Učí se HTML jazyk 3. Kodér: Ovládá XHTML a CSS 4. Kodér a programátor: XHTML, CSS, JavaScript, PHP, MySQL,.NET … 5. Kodér, programátor, grafik, informační architekt, marketingový specialista (…a další)

3 Proč se učit XHTML a CSS?  XHTML je kompatibilní i do budoucnosti  Spolehlivější zobrazení ve všech prohlížečích  Rychlejší načítání stránky  Lepší umístění ve vyhledávačích  Přístupné pro všechny zařízení i uživatele  HTML je dědeček, který tady dlouho nebude

4 XHTML a CSS – k čemu je co dobré? XHTML Účel: Značkujeme význam prvků dokumentu Např.: Text “Vzhůru dolů” bude nadpisem dokumentu. CSS = kaskádové styly Účel: Definujeme vzhled dokumentu. Např.: Nadpis dokumentu bude modrý.

5 Naše první stránka – raz, dva, tři!  XHTML: Vzhůru dolů  CSS: h1 { color: blue; }  Výsledek v prohlížeči: Vzhůru dolů

6 Naše první stránka – raz, dva, tři! Takhle se stránka se zobrazí v prohlížeči Opera

7 Kde se vzalo XHTML?  Značkovací jazyk pro hypertextové dokumenty HTML je dnes již dědeček nad hrobem  Univerzální značkovací jazyk XML je jeho mladou a krásnou přítelkyní  Standardizační organizace W3C je kmotrem  V roce 2000 se narodilo XHTML, dítě, které má velkou budoucnost

8 XHTML je přísné…  Vždy musíme nejdříve deklarovat XML a typ dokumentu  Prvek musí obsahovat jmenný prostor  Uvnitř prvku musí být vnořeny prvky a

9 …x-krát přísnější než HTML  Prvky se musí zakončovat Jak párové: Vzhůru dolů Tak nepárové:  Nesmí se překrývat Špatně: Text dokumentu Správně: Text dokumentu.  Názvy prvků a atributy malými písmeny Špatně: Vzhůru dolů Správně: Vzhůru dolů  Hodnoty atributů v uvozovkách Špatně: Správně: Speciální znaky jen jako entity Místo & pište & Místo < piště <

10 Náš první XHTML dokument XML deklarace: Typ dokumentu: Jmenný prostor: Hlavička dokumentu: Název dokumentu Tělo dokumentu: Nadpis První odstavec. Tučný text. Druhý odstavec.

11 … ups! chybička se vloudila! Kde je chyba? Text dokumentu. Tučný text. Validátor – šikula na špinavou práci. Když nemůžeme najít chybu:

12 Blokové… značky, nikoliv pokuty Blok je shluk textů. Prohlížeč před ním a za ním odřádkuje. Nadpisy:,,,,, Odstavce: Seznamy:..,..,.... Oddělovač: Tabulka:.... Obrázek: Obecný blok:

13 Blokové… značky, nikoliv pokuty Příklad s blokovými značkami: Účastníci zájezdu Naše cestovní kancelář může být pyšná, že se zájezdu zúčastnili celkem 3 lidé.

14 Textové značky Popisují vlastnosti textu, prohlížeč neodřádkuje. Zvýraznění:, Odkaz na jinou stránku: Další:,,,,,...

15 Textové značky Příklad: Nejpoužívanější vyhledávač v České republice je

16 Tabulky Značky, které definují tabulky, jejich řádky, buňky, hlavičky Začátek tabulky Řádek tabulky Měsíc Buňka hlavičky tabulky Celkový obrat Konec řádku tabulky Leden Buňka tabulky Kč... Konec tabulky

17 Formuláře Značky, které definují formuláře a jednotlivé formulářové prvky Začátek tabulky <legend... Konec tabulky

18 Zakázané ovoce – značky a atributy, které se v XHTML nesmí používat Značky pro popis vzhledu … Atributy pro popis vzhledu či chování …

19 V čem psát XHTML? Na vizuální úrovni WYSIWIG editory: FrontPage, Dreamweaver, NVU Na úrovni kódu Jakýkoliv editor schopný ukládat čistý text: Poznámkový blok, PSPad

20 Jak publikovat XHTML dokument? Webové rozhraní (Sweb, Webzdarma atd.) FTP přístup (placené hostingy) FTP klienti: Filezilla, TotalCommander

21 Děkuji za pozornost