Internetové publikování Doc. Ing. Petr Zámostný, Z Ph.D. místnost: A-72aA tel.: 4222, 4167 (sekretari( sekretariát ústavu 111) e-mail: petr.zamostny@vscht vscht.czcz
Internetové publikování XHTML elementy, atributy, entity
Grafika <body> <hr /> <img src="http://www.w3.org/icons/valid-xhtml10" alt="valid XHTML 1.0!" height="31" width="88" /> </body> http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p07.html
Grafika» img vložení obrázku» Atributy»src URL souboru s obrázkem»alt alternetivní textová reprezentace» Pro uživatele kteří nemohou/nechtějí zobrazovat obrázky»height, width výška a šířka obrázku»umožníprohlížeči rozvrhnout stránku ještě předtím než se načtou obrázky» Lze použít i ke změně velikosti obrázku..ale neexistuje rozumný důvod proč to dělat
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> <body>... </body> </html> Deklarace 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
Definice Typu Dokumentu» Transitional» <!DOCTYPE html» PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"» "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">»strict» <!DOCTYPE html» PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"» "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">»frameset» <!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> <body>... </body> </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
Deklarace 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 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-likódovánídokumentujiné 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ů
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
Prvky HTML jazyka» Znakové entity» Znaky které neumíme zadat z klávesnice» Znaky jejichž použití je vyhrazeno HTML»<, >, &»Příklad» &název_entity;» > >» < <» & &» "» Pevná mezera» &#číslo_unicode_znaku;»» Й Й
Prvky HTML jazyka» Entity definované XHTML» http://www.w3.org/tr/xhtml1/dtd/xhtml-lat1.ent» http://www.w3.org/tr/xhtml1/dtd/xhtml-symbol.ent» http://www.w3.org/tr/xhtml1/dtd/xhtml-special.ent» Entity zadané číslem znaku v tabulce UNICODE - http://en.wikipedia.org/wiki/unicode»seznam znaků» http://alanwood.net/unicode/» Tyto znaky se zobrazí správně pokud je podporuje prohlížeč a jsou dostupné v použitém fontu
Jak začít t tvořit první stránku» Spustíme textový editor (PSPad, poznámkový blok)» Vytvoříme nový soubor» Zapíšeme/zkopírujeme DTD» Zapíšeme/zkopírujeme povinné elementy» Vložíme obsah» Nastavíme kódování»uložíme soubor
Nastavení kódování» Specifikace použitého kódování v dokumentu» <meta http-equiv="content-type" content="text/html; charset=utf-8" />» Specifikace kódování před/při uložení souboru
Nastavení kódování» Kódování souboru»určuje fyzický způsob reprezentace znaků neobsažených v ASCII v souboru»označení kódování v dokumentu» Informuje prohlížeč a umožňuje mu automaticky zvolit správné zobrazení»obě kódování musí být nastavena stejně
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
Publikace stránky na WWW» Návod na publikaci na serveru VŠCHT» http://www.vscht.cz/homepage/vc/index/howto/h omeadresare
Tabulky <table summary="anotace tabulky" border="1"> <tr> <th>záhlaví sloupce 1</th> <th>záhlaví sloupce 2</th> </tr> <tr> <td>buňka 1</td> <td>buňka 2</td> </tr> <tr> <td>buňka 3</td> <td>buňka 4</td> </tr> </table>
Strukturování <table summary="anotace tabulky" border="1"> <caption>sklizeň ovoce</caption> <thead> <tr> <th></th> <th>hrušky</th> <th>jablka</th> </tr> </thead> <tfoot> <tr> <th>celkem</th> <td>25</td> <td>17</td> </tr> </tfoot> <tbody> <tr> <th>petr</th> <td>10</td> <td>10</td> </tr> <tr> <th>pavel</th> <td>15</td> <td>7</td> </tr> </tbody> </table>
Rozměry tabulky <table border="1"> <caption>implicitní chování</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="500"> <caption>pevná šířka</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="80%"> <caption>šířka v % okna</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table>
Ohraničen ení tabulky <table border="0"> <caption>bez okraje</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1"> <caption>s okrajem</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" frame="void"> <caption>vnější okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" rules="none"> <caption>vnitřní okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br />
Zarovnání tabulky <table border="1" width="100%"> <caption>vodorovné zarovnání</caption> <tr><td align="left">buňka zarovnaná vlevo </td></tr> <tr><td align="right">buňka zarovnaná vpravo </td></tr> <tr><td align="center">buňka zarovnaná na střed </td></tr> <tr><td align="justify">buňka zarovnaná do bloku </td></tr> </table> <br /> <table border="1" width="100%"> <caption>svislé zarovnání</caption> <tr height="50"><td valign="top">buňka zarovnaná nahoru </td></tr> <tr height="50"><td valign="middle">buňka zarovnaná na střed </td></tr> <tr height="50"><td valign="bottom">buňka zarovnaná dolů </td></tr> <tr height="50"><td valign="baseline">buňka zarovnaná na základní čáru</td></tr> </table> <br />
Sloučen ení buněk k tabulky <table border="1"> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td rowspan="2" colspan="2">expandovaná buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> </table><br />