XHTML

2,142 views

Published on

Prezentace o XHTML pro kurz XHTML/CSS v centru Paraple.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,142
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

XHTML

  1. 1. Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
  2. 2. 5 úrovní tvorby webových stránek <ul><li>Čím profesionálněji, tím více podivných slov a zkratek :-) </li></ul><ul><li>1. Nadšenec: Používá vizuální editor či export z Wordu </li></ul><ul><li>2. Kutil: Učí se HTML jazyk </li></ul><ul><li>3. Kodér: Ovládá XHTML a CSS </li></ul><ul><li>4. Kodér a programátor: XHTML, CSS, JavaScript, PHP, MySQL, .NET … </li></ul><ul><li>5. Kodér, programátor, grafik, informační architekt, marketingový specialista (…a další) </li></ul>
  3. 3. Proč se učit XHTML a CSS? <ul><li>XHTML je kompatibilní i do budoucnosti </li></ul><ul><li>Spolehlivější zobrazení ve všech prohlížečích </li></ul><ul><li>Rychlejší načítání stránky </li></ul><ul><li>Lepší umístění ve vyhledávačích </li></ul><ul><li>Přístupné pro všechny zařízení i uživatele </li></ul><ul><li>HTML je dědeček, který tady dlouho nebude </li></ul>
  4. 4. XHTML a CSS – k čemu je co dobré? <ul><li>XHTML </li></ul><ul><li>Účel: Značkujeme význam prvků dokumentu </li></ul><ul><li>Např.: Text “Vzhůru dolů” bude nadpisem dokumentu. </li></ul><ul><li>CSS = kaskádové styly </li></ul><ul><li>Účel: Definujeme vzhled dokumentu. </li></ul><ul><li>Např.: Nadpis dokumentu bude modrý. </li></ul>
  5. 5. Naše první stránka – raz, dva, tři! <ul><li>XHTML: <h1>Vzhůru dolů</h1> </li></ul><ul><li>CSS: h1 { color: blue; } </li></ul><ul><li>Výsledek v prohlížeči: Vzhůru dolů </li></ul>
  6. 6. Naše první stránka – raz, dva, tři! <ul><li>Takhle se stránka se zobrazí v prohlížeči Opera </li></ul>
  7. 7. Kde se vzalo XHTML? <ul><li>Značkovací jazyk pro hypertextové dokumenty HTML je dnes již dědeček nad hrobem </li></ul><ul><li>Univerzální značkovací jazyk XML je jeho mladou a krásnou přítelkyní </li></ul><ul><li>Standardizační organizace W3C je kmotrem </li></ul><ul><li>V roce 2000 se narodilo XHTML, dítě, které má velkou budoucnost </li></ul>
  8. 8. XHTML je přísné… <ul><li>Vždy musíme nejdříve deklarovat XML a typ dokumentu <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li>Prvek <html> musí obsahovat jmenný prostor <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”cs” lang=”cs”> </li></ul><ul><li>Uvnitř prvku <html> musí být vnořeny prvky <head> a <body> </li></ul>
  9. 9. … x-krát přísnější než HTML <ul><li>Prvky se musí zakončovat Jak párové: <p>Vzhůru dolů</p> Tak nepárové: <img src=”obrazek.gif” /> </li></ul><ul><li>Nesmí se překrývat Špatně: <p>Text <strong>dokumentu</p></strong> Správně: <p>Text <strong>dokumentu.</strong></p> </li></ul><ul><li>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> </li></ul><ul><li>Hodnoty atributů v uvozovkách Špatně: <img src=obrazek.gif /> Správně: <img src=”obrazek.gif” /> </li></ul><ul><li>Speciální znaky jen jako entity Místo & pište &amp; Místo < piště &lt; </li></ul>
  10. 10. Náš první XHTML dokument <ul><li>XML deklarace: <?xml version=&quot;1.0&quot; encoding=&quot;windows-utf-8&quot;?> </li></ul><ul><li>Typ dokumentu: <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li>Jmenný prostor: <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;cs&quot; lang=&quot;cs&quot;> </li></ul><ul><li>Hlavička dokumentu: <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-utf-8&quot; /> <title>Název dokumentu</title> </head> </li></ul><ul><li>Tělo dokumentu: <body> <h1>Nadpis</h1> <p>První odstavec. <strong>Tučný text.</p> <p>Druhý odstavec.</p> </body> </html> </li></ul>
  11. 11. … ups! chybička se vloudila! <ul><li>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/ </li></ul>
  12. 12. Blokové… značky, nikoliv pokuty <ul><li>Blok je shluk textů. Prohlížeč před ním a za ním odřádkuje. </li></ul><ul><li>Nadpisy: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> </li></ul><ul><li>Odstavce: <p> </li></ul><ul><li>Seznamy: <ul> .. <li>, <ol> .. <li>, <dl> .. <dt> .. <dl> </li></ul><ul><li>Oddělovač: <hr /> </li></ul><ul><li>Tabulka: <table> .. <tr> .. <td> </li></ul><ul><li>Obrázek: <img src=”obrazek.gif” /> </li></ul><ul><li>Obecný blok: <div> </li></ul>
  13. 13. Blokové… značky, nikoliv pokuty <ul><li>Příklad s blokovými značkami: </li></ul><ul><li><h1>Účastníci zájezdu</h1> </li></ul><ul><li><p>Naše cestovní kancelář může být pyšná, že se zájezdu zúčastnili celkem 3 lidé.</p> </li></ul>
  14. 14. Textové značky <ul><li>Popisují vlastnosti textu, prohlížeč neodřádkuje. </li></ul><ul><li>Zvýraznění: <strong>, <em> </li></ul><ul><li>Odkaz na jinou stránku: <a href=”jina-stranka.html”> </li></ul><ul><li>Další: <cite>, <sup>, <sub>, <abbr>, <acronym>, ... </li></ul>
  15. 15. Textové značky <ul><li>Příklad: </li></ul><ul><li><strong>Nejpoužívanější vyhledávač</strong> v </li></ul><ul><li>České republice je </li></ul><ul><li><a href=”http://www.seznam.cz”>www.seznam.cz</a> </li></ul>
  16. 16. Tabulky <ul><li>Značky, které definují tabulky, jejich řádky, buňky, hlavičky </li></ul><ul><li><table> Začátek tabulky </li></ul><ul><li><tr> Řádek tabulky </li></ul><ul><li><th>Měsíc</th> Buňka hlavičky tabulky </li></ul><ul><li><th>Celkový obrat</th> </li></ul><ul><li></tr> Konec řádku tabulky </li></ul><ul><li><tr> </li></ul><ul><li><td>Leden</td> Buňka tabulky </li></ul><ul><li><td>250 000 Kč</td> </li></ul><ul><li></tr> </li></ul><ul><li>... </li></ul><ul><li></table> Konec tabulky </li></ul>
  17. 17. Formuláře <ul><li>Značky, které definují formuláře a jednotlivé formulářové prvky </li></ul><ul><li><form> Začátek tabulky </li></ul><ul><li><legend </li></ul><ul><li>... </li></ul><ul><li></form> Konec tabulky </li></ul>
  18. 18. Zakázané ovoce – značky a atributy, které se v XHTML nesmí používat <ul><li>Značky pro popis vzhledu <font size=”2”> <b> <i> <strike> <center> <iframe> … </li></ul><ul><li>Atributy pro popis vzhledu či chování <p align=”center”> <a target=”_blank”> <body background=”lightgrey”> … </li></ul>
  19. 19. V čem psát XHTML? <ul><li>Na vizuální úrovni </li></ul><ul><li>WYSIWIG editory: FrontPage, Dreamweaver, NVU </li></ul><ul><li>Na úrovni kódu </li></ul><ul><li>Jakýkoliv editor schopný ukládat čistý text: Poznámkový blok, PSPad </li></ul>
  20. 20. Jak publikovat XHTML dokument? <ul><li>Webové rozhraní (Sweb, Webzdarma atd.) </li></ul><ul><li>FTP přístup (placené hostingy) </li></ul><ul><li>FTP klienti: Filezilla, TotalCommander </li></ul>
  21. 21. Děkuji za pozornost www.vzhurudolu.cz/xhtml-css

×