Internetové publikování

Internetové publikováníInternetové publikování

Doc. Doc. Ing. Petr Zámostný, Ph.D.Ing. Petr Zámostný, Ph.D.místnost: A-72amístnost: A-72atel.: 4222tel.: 4222, , 4167 (4167 (sekretarisekretariát ústavu át ústavu 111) 111) e-mail: petr.zamostnye-mail: petr.zamostny@@vscht.czvscht.cz

Internetové publikováníInternetové publikováníXHTMLXHTML – elementy, atributy, entity – elementy, atributy, entity

N111031 Internetové publikováníN111031 Internetové publikování33. . XHTML – atributy, dalXHTML – atributy, další elementy, entityší elementy, entity

GrafikaGrafika

<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


GrafikaGrafika

» 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ánkyStruktura 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 XMLDefinice typu dokumentu – použitý standardVlastní dokument


Definice Typu DokumentuDefinice Typu Dokumentu

»Určuje standard podle kterého je dokument psán

»Vymezuje elementy, které se mohou použít


Definice Typu DokumentuDefinice 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 Vlastní dokument – element <html><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>


Deklarace XMLDeklarace 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.“


Standardní atributStandardní atributyy

»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í atributStandardní atributyy

» 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é atributyJazykové 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 jazykaPrvky 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 jazykaPrvky 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 tvořit první stránkuJak 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


Nastavení kódování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í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ódTvoř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

http://validator.w3.org/


Publikace stránky na WWWPublikace stránky na WWW

»Návod na publikaci na serveru VŠCHT» http://www.vscht.cz/homepage/vc/index/

howto/homeadresare


TabulkyTabulky

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

http://www.vscht.cz/kot/cz/ip/priklad03-01.html


Strukturování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 tabulkyRozmě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í tabulkyOhranič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í tabulkyZarovná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 />



SlouSloučení buněk tabulkyč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 />


Documents

Internetové publikování