XHTML
- 1. Kurz XHTML aCSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
- 2. 5 úrovní tvorbywebový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čitXHTML 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: <h1>Vzhůru dolů</h1> 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 vzaloXHTML? 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 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Prvek <html> musí obsahovat jmenný prostor <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”cs” lang=”cs”> Uvnitř prvku <html> musí být vnořeny prvky <head> a <body>
- 9. … x-krát přísnějšínež HTML Prvky se musí zakončovat Jak párové: <p>Vzhůru dolů</p> Tak nepárové: <img src=”obrazek.gif” /> Nesmí se překrývat Špatně: <p>Text <strong>dokumentu</p></strong> Správně: <p>Text <strong>dokumentu.</strong></p> Názvy prvků a atributy malými písmeny Špatně: <P ID=”IDENTIFIKATOR”>Vzhůru dolů </p> Správně: <p id=”IDENTIFIKATOR”>Vzhůru dolů </p> Hodnoty atributů v uvozovkách Špatně: <img src=obrazek.gif /> Správně: <img src=”obrazek.gif” /> Speciální znaky jen jako entity Místo & pište & Místo < piště <
- 10. Náš první XHTMLdokument XML deklarace: <?xml version="1.0" encoding="windows-utf-8"?> Typ dokumentu: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Jmenný prostor: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> Hlavička dokumentu: <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-utf-8" /> <title>Název dokumentu</title> </head> Tělo dokumentu: <body> <h1>Nadpis</h1> <p>První odstavec. <strong>Tučný text.</p> <p>Druhý odstavec.</p> </body> </html>
- 11. … ups!chybička se vloudila! Kde je chyba? <p>Text dokumentu. <strong>Tučný text.</p> Validátor – šikula na špinavou práci. Když nemůžeme najít chybu: http://validator.w3.org/
- 12. Blokové… značky, nikolivpokuty Blok je shluk textů. Prohlížeč před ním a za ním odřádkuje. Nadpisy: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Odstavce: <p> Seznamy: <ul> .. <li>, <ol> .. <li>, <dl> .. <dt> .. <dl> Oddělovač: <hr /> Tabulka: <table> .. <tr> .. <td> Obrázek: <img src=”obrazek.gif” /> Obecný blok: <div>
- 13. Blokové… značky, nikolivpokuty Příklad s blokovými značkami: <h1>Účastníci zájezdu</h1> <p>Naše cestovní kancelář může být pyšná, že se zájezdu zúčastnili celkem 3 lidé.</p>
- 14. Textové značky Popisujívlastnosti textu, prohlížeč neodřádkuje. Zvýraznění: <strong>, <em> Odkaz na jinou stránku: <a href=”jina-stranka.html”> Další: <cite>, <sup>, <sub>, <abbr>, <acronym>, ...
- 15. Textové značky Příklad:<strong>Nejpoužívanější vyhledávač</strong> v České republice je <a href=”http://www.seznam.cz”>www.seznam.cz</a>
- 16. Tabulky Značky, kterédefinují tabulky, jejich řádky, buňky, hlavičky <table> Začátek tabulky <tr> Řádek tabulky <th>Měsíc</th> Buňka hlavičky tabulky <th>Celkový obrat</th> </tr> Konec řádku tabulky <tr> <td>Leden</td> Buňka tabulky <td>250 000 Kč</td> </tr> ... </table> Konec tabulky
- 17. Formuláře Značky, kterédefinují formuláře a jednotlivé formulářové prvky <form> Začátek tabulky <legend ... </form> Konec tabulky
- 18. Zakázané ovoce –značky a atributy, které se v XHTML nesmí používat Značky pro popis vzhledu <font size=”2”> <b> <i> <strike> <center> <iframe> … Atributy pro popis vzhledu či chování <p align=”center”> <a target=”_blank”> <body background=”lightgrey”> …
- 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 XHTMLdokument? Webové rozhraní (Sweb, Webzdarma atd.) FTP přístup (placené hostingy) FTP klienti: Filezilla, TotalCommander
- 21. Děkuji za pozornostwww.vzhurudolu.cz/xhtml-css