Základy (X)HTML Internetové publikování 1 WWW stránka WWW stránka dokument (soubor) s informacemi a pokyny pro jejich zobrazení Určena pro WWW prohlížeč interpret WWW dokumentu Standardizace W3C World Wide Web Consortium http://www.w3.org/ 1
Problémy s WWW Historické Prolínání obsahu a formy v HTML Problémy se strukturou dokumentu Nekompatibilita prohlížečů Současné Vyhledávání a indexace obsahu Sémantický web RDF Mikroformáty Web se zpětnou vazbou XHTML extensible HyperText Markup Language Upravená verze HTML 4.01 Vyhovuje standardu XML Nevyžaduje podporu XML na straně prohlížeče Striktnější 2
HTML5 Specifikace i podpora se vyvíjejí Rozsáhlý standard zahrnující Markup Javascriptová API Canvas (kreslení v prohlížeči) Offline aplikace Podpora v prohlížečích http://www.findmebyip.com/litmus/#html5-web-applications 5 První WWW stránka http://www.vscht.cz/kot/resources/studijni-materialy/ips-001/p01.html Tato stránka obsahuje nějaký text, který se zobrazí Obsahuje formátovací instrukce, které mohou fungovat Ignoruje standardy a pravidla tvorby, takže funkčnost není zaručena 3
První správná WWW stránka http://www.vscht.cz/kot/resources/studijni-materialy/ips-001/p02.html Stránka vyhovuje standardu, takže bude fungovat ve všech prohlížečích, které jej podporují Online zdoje informací Specifikace XHTML 1.0 http://www.w3.org/tr/xhtml1/ http://www.zralog.cz/translate/tr/rec-xhtml1-20020801/overview.html Tutorial, příklady, příručka http://www.jakpsatweb.cz/html/ http://www.w3schools.com/xhtml/default.asp 4
Základní komponenty HTML jazyka Element <p>příklad elementu</p> Počáteční tag Obsah elementu Ukončovací tag Nepárové bezobsahové elementy HTML 4.01: nemusí být ukončeny <br> XHTML: všechny elementy ukončené <br /> Obsahem elementu mohou být další elementy Well-formed dokumenty Typy elementů Blokové <p> <h1> <h6> <pre> <div> <hr> <dl> <ul> <ol> <table> <form> Inline <a> <img> <map> <br> <script> <sub> <sup> <span> <em> <strong> <code> <cite> <dfn> <samp> <kbd> <var> <abbr> <i> <b> 5
Základní komponenty HTML jazyka Atribut Odkaz <a href="nekam.html">jinam</a> Podrobnější specifikace elementu Zapisuje se za počáteční tag Přiřazuje se mu hodnota vymezená "" U jednoho tagu více atributů Na pořadí atributů nezáleží Zjednodušená struktura stránky (Je skutečně zjednodušená) <html> <head> <title>...</title> </head>... </html> 6
Obsah elementu head <head> <title>příklad 2</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="html, XHTML, tvorba stránek" /> <meta name="authors" content="petr Zámostný" /> </head> <title> Název stránky v titulkovém pruhu okna prohlížeče <meta> Metadata dokumentu Většinou se neinterpretují se prohlížečem, např. pro vyhledávače S výjimkou informace o typu a kódování dokumentu <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Obsah elementu body text elementy Interpretace a zápis textu Implicitní chování Mezery, tabelátory, konce řádku se interpretují jako jedna mezera Blokové a řádkové (inline) elementy 7
Elementy pro členění textu div oddíl p odstavec span inline blok br zalomení řádky (bezobsahový <br />) Členění textu <div id= cast1"> <p>toto je 1. odstavec textu</p> <p>toto je 2. odstavec textu</p> </div> <div id= cast2"> <p>toto je 3. odstavec textu</p> <p>toto je 4. odstavec textu<br /> ručně zalomený na 2 řádky</p> </div> http://www.vscht.cz/kot/resources/ studijni-materialy/ip-s-001/p03.html 8
Nadpisy <h1>nadpis 1</h1> <h2>nadpis 2</h2> <h3>nadpis 3</h3> <h4>nadpis 4</h4> <h5>nadpis 5</h5> <h6>nadpis 6</h6> http://www.vscht.cz/kot/resources/studijni -materialy/ip-s-001/p04.html Formátování <p><em>zdůrazněný text</em></p> <p><strong>silně tištěný text</strong></p> <p><b>tučný text</b></p> <p><i>kurzíva</i></p> <p>text<sub>dolní index</sub></p> <p>text<sup>horní index</sup></p> <p><code>zdrojové texty se zobrazují neproporcionálním písmem</code></p> <pre> Obsah se zobrazí neproporcionálním písmem přesně tak, jak je v dokumentu zapsán, včetně formátovacích znaků A B C 1 2 3 4 5 6 </pre> http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p05.html 9
Rozdělení formátovacích elementů Elementy strong a em vyjadřují logický formát, vyjadřují, že obsah je důležitý Elementy b a i (implicitně vypadají stejně jako ty předchozí) definují vzhled bez logického významu Seznamy <h1>nečíslovaný seznam</h1> <ul> <li type="disc">kolečko</li> <li type="circle">kroužek</li> <li type="square">čtvereček</li> </ul> <h1>číslovaný seznam</h1> <ol type="a"> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ol> <h1>definiční seznam</h1> <dl> <dt>html</dt><dd>hypertext Markup Language</dd> <dt>xml</dt><dd>extensible Markup Language</dd> </dl> http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p06.html 10
Grafika <hr /> <img src="http://www.w3.org/icons/valid-xhtml10" alt="valid XHTML 1.0!" height="31" width="88" /> http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p07.html Odkazy <p><a href="http://www.google.com">absolutní odkaz na jinou stránku</a></p> <p><a href="priklad02-07.html">relativní odkaz na předchozí příklad</a></p> <p><a href="#navesti1">odkaz na návěští v tomto dokumentu</a></p> <p><a href="priklad02-08.html#navesti1">odkaz na návěští v tomto dokumentu</a></p> <p><a name="navesti1" />Příklad definice návěští</p> 11
Struktura XHTML stránky <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title>...</title> </head>... </html> Prolog XML Definice typu dokumentu použitý standard Vlastní dokument Definice Typu Dokumentu Určuje standard podle kterého je dokument psán Vymezuje elementy, které se mohou použít Určuje pravidla vnoření elementů 12
Definice Typu Dokumentu Transitional (volnější) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Strict (přísnější, nepovoluje HTML formátování ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Frameset (rámce http://www.vscht.cz/kot/cz/ip/frameset.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> Vlastní dokument element <html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>... </head>... </html> Musí obsaovat deklaraci jmenného prostoru xmlns=http://www.w3.org/1999/xhtml Pokud se deklarace vynechá nedochází k problémům, jedná-li se o čisté XHTML 13
Prolog XML <?xml version="1.0" encoding="utf-8"?> Určuje verzi XML a kódování pro programy které by dokument zpracovával jako XML Není povinná, ale některé editory (PSPad) ji vkládají Může působit problémy na některých instalacích MSIE Doporučení: neuvádět/smazat v kombinaci s UTF-8 Deklarace XML není vyžadována ve všech XML dokumentech; nicméně doporučujeme všem XHTML autorům používat XML deklaraci ve všech svých dokumentech. Takováto deklarace je potřebná, je-li kódování dokumentu jiné než UTF-8 nebo UTF-16 a nadřazeným protokolem nebylo určeno jiné. Toto je ukázka XHTML dokumentu, obsahujícího XML deklaraci. Standardní atributy Lze je použít pro všechny elementy s výjimkou base, head, html, meta, param, script, style a title Zjednodušeně: lze je použít u všech viditelných elementů 14
Standardní atributy class definuje třídu (skupinu) elementů do které element patří id přiřazuje elementu unikátní identifikátor ( pojmenovává jej ) style umožňuje přímo vepsat styl elementu Výše uvedené atributy mají význam pro aplikaci stylů (vzhledu, umístění) a nastavení dynamického chování title definuje popisek elementu, který se zobrazí v bublině, ukáže-li se na element myší Jazykové atributy Lze je použít pro všechny elementy s výjimkou base, br, frame, frameset, hr, iframe, param a script dir nabývá hodnot ltr rtl a určuje směr toku textu zleva doprava nebo zprava doleva lang identifikuje jazyk ve kterém je psán obsah elementu 15
Tvořte validní kód Zvykněte si u každé stránky,kterou vytvoříte ověřit její validitu http://validator.w3.org/ Validace uploadem souboru nemusí fungovat správně při použití MSIE Tabulky <table summary="anotace tabulky" border="1"> <th>záhlaví sloupce 1</th> <th>záhlaví sloupce 2</th> <td>buňka 1</td> <td>buňka 2</td> <td>buňka 3</td> <td>buňka 4</td> </table> 16
Strukturování <table summary="anotace tabulky" border="1"> <caption>sklizeň ovoce</caption> <thead> <th></th> <th>hrušky</th> <th>jablka</th> </thead> <tfoot> <th>celkem</th> <td>25</td> <td>17</td> </tfoot> <tbody> <th>petr</th> <td>10</td> <td>10</td> <th>pavel</th> <td>15</td> <td>7</td> </tbody> </table> Rozměry tabulky <table border="1"> <caption>implicitní chování</caption> <td>1. buňka</td> <td>2. trochu větší buňka</td> </table> <table border="1" width="500"> <caption>pevná šířka</caption> <td>1. buňka</td> <td>2. trochu větší buňka</td> </table> <table border="1" width="80%"> <caption>šířka v % okna</caption> <td>1. buňka</td> <td>2. trochu větší buňka</td> </table> 17
Ohraničení tabulky <table border="0"> <caption>bez okraje</caption> <td>1. buňka</td><td>2. buňka</td> <td>3. buňka</td><td>4. buňka</td> </table> <br /> <table border="1"> <caption>s okrajem</caption> <td>1. buňka</td><td>2. buňka</td> <td>3. buňka</td><td>4. buňka</td> </table> <br /> <table border="1" frame="void"> <caption>vnější okraj tabulky</caption> <td>1. buňka</td><td>2. buňka</td> <td>3. buňka</td><td>4. buňka</td> </table> <br /> <table border="1" rules="none"> <caption>vnitřní okraj tabulky</caption> <td>1. buňka</td><td>2. buňka</td> <td>3. buňka</td><td>4. buňka</td> </table> <br /> Zarovnání tabulky <table border="1" width="100%"> <caption>vodorovné zarovnání</caption> <td align="left">buňka zarovnaná vlevo </td> <td align="right">buňka zarovnaná vpravo </td> <td align="center">buňka zarovnaná na střed </td> <td align="justify">buňka zarovnaná do bloku </td> </table> <br /> <table border="1" width="100%"> <caption>svislé zarovnání</caption> <tr height="50"><td valign="top">buňka zarovnaná nahoru </td> <tr height="50"><td valign="middle">buňka zarovnaná na střed </td> <tr height="50"><td valign="bottom">buňka zarovnaná dolů </td> <tr height="50"><td valign="baseline">buňka zarovnaná na základní čáru</td> </table> <br /> 18
Sloučení buněk tabulky <table border="1"> <td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td> <td>buňka</td><td rowspan="2" colspan="2">expandovaná buňka</td><td>buňka</td> <td>buňka</td><td>buňka</td> <td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td> </table><br /> 19