4.10.2010

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

4.10.2010

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

4.10.2010

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

4.10.2010

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

4.10.2010

Základní komponenty HTML jazyka 

Element 



 

Příklad elementu



Počáteční tag



Obsah elementu



Ukončovací tag

Nepárové „bezobsahové elementy“ 

HTML 4.01: nemusí být ukončeny




XHTML: všechny elementy ukončené


Obsahem elementu mohou být další elementy Well-formed dokumenty

Typy elementů 



Blokové 

…

<pre>





---











Inline 

<map>
<script> <sub> <sup>



<span>



<em> <strong> <samp>





5

4.10.2010

Základní komponenty HTML jazyka 

Atribut 

Odkaz jinam     

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

...

6

4.10.2010

Obsah elementu head <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ý" />



...

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

4.10.2010

Definice Typu Dokumentu 

Transitional (volnější)   



Strict (přísnější, nepovoluje HTML formátování )   







Frameset (rámce http://www.vscht.cz/kot/cz/ip/frameset.html)   



Vlastní dokument – element ... ...

 

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

4.10.2010

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

4.10.2010

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

4.10.2010

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

záhlaví sloupce 1	záhlaví sloupce 2
buňka 1	buňka 2
buňka 3	buňka 4



16

4.10.2010

Strukturování



Sklizeň ovoce

	Hrušky	Jablka
Celkem	25	17
Petr	10	10
Pavel	15	7



Rozměry tabulky

Implicitní chování

1. buňka

2. trochu větší buňka

Pevná šířka

1. buňka

2. trochu větší buňka

Šířka v % okna

1. buňka

2. trochu větší buňka



17

4.10.2010

Ohraničení tabulky

Bez okraje

1. buňka	2. buňka
3. buňka	4. buňka




S okrajem

1. buňka	2. buňka
3. buňka	4. buňka




Vnější okraj tabulky

1. buňka	2. buňka
3. buňka	4. buňka




Vnitřní okraj tabulky

1. buňka	2. buňka
3. buňka	4. buňka




Zarovnání tabulky

Vodorovné zarovnání

buňka zarovnaná vlevo

buňka zarovnaná vpravo

buňka zarovnaná na střed

buňka zarovnaná do bloku




Svislé zarovnání

buňka zarovnaná nahoru

buňka zarovnaná na střed

buňka zarovnaná dolů

buňka zarovnaná na základní čáru




18

4.10.2010

Sloučení buněk tabulky

buňka	buňka	buňka	buňka
buňka	expandovaná buňka		buňka
buňka			buňka
buňka	buňka	buňka	buňka




19