Internetové publikování

Rozměr: px

Začít zobrazení ze stránky:

Download "Internetové publikování"

Antonie Veronika Bartošová
před 7 lety
Počet zobrazení:

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

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

3 Grafika <body> <hr /> <img src=" alt="valid XHTML 1.0!" height="31" width="88" /> </body>

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" " <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"» " <!DOCTYPE html» PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"» " <!DOCTYPE html» PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"» "

8 Vlastní dokument element <html> <html xmlns=" <head>... </head> <body>... </body> </html>» Musí obsaovat deklaraci jmenného prostoru xmlns= Pokud se deklarace vynechá nedochází k problémům, jedná-li se o čisté XHTML

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

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

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;» > >» < <» & &» "» Pevná mezera» &#číslo_unicode_znaku;»» Й Й

14 Prvky HTML jazyka» Entity definované XHTML» Entity zadané číslem znaku v tabulce UNICODE - znaků» Tyto znaky se zobrazí správně pokud je podporuje prohlížeč a jsou dostupné v použitém fontu

15 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

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» 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» omeadresare

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

Podobné dokumenty

Základy (X)HTML. WWW stránka WWW stránka dokument (soubor) s informacemi a pokyny pro jejich zobrazení

Základy (X)HTML. WWW stránka WWW stránka dokument (soubor) s informacemi a pokyny pro jejich zobrazení 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