1 / 25

Internetové publikování

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222 , 4167 ( sekretari át ústavu 111) e-mail: petr.zamostny @ vscht.cz. Internetové publikování XHTML – elementy, atributy, entity. Grafika. <body> <hr /> <img src="http://www.w3.org/Icons/valid-xhtml10"

preston-donovan
Download Presentation

Internetové publikování

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D.místnost: A-72atel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz

  2. Internetové publikováníXHTML – elementy, atributy, entity

  3. 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

  4. 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

  5. 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

  6. Definice Typu Dokumentu • Určuje standard podle kterého je dokument psán • Vymezuje elementy, které se mohou použít

  7. 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">

  8. Vlastní dokument – element <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 <html xmlns="http://www.w3.org/1999/xhtml"> <head> ... </head> <body> ... </body> </html>

  9. Deklarace XML • 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 <?xml version="1.0" encoding="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.“

  10. 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ů

  11. 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ší

  12. Jazykové atributy • Lze je použít pro všechny elementy s výjimkou base, br, frame, frameset, hr, iframe, param ascript • 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

  13. 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; • > &gt; • < &lt; • & &amp; • “ &quot; • Pevná mezera &nbsp; • &#číslo_unicode_znaku; • ←&#8592; • Й &#1049;

  14. 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

  15. Jak začí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

  16. 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

  17. …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ě

  18. 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

  19. Publikace stránky na WWW • Návod na publikaci na serveru VŠCHT • http://www.vscht.cz/homepage/vc/index/howto/homeadresare

  20. 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>

  21. 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>

  22. 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>

  23. Ohranič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 />

  24. 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 />

  25. Sloučení buně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 />

More Related