(X)HTML Internetové publikování

1

Prohlížeč  

Obsluhuje přenos a interpretuje obsah Hlavní prohlížeče     

Microsoft Internet Explorer Firefox Opera Safari …

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/

Co obsahuje WWW stránka ? 

HyperText Markup Language – HTML  

Text Značky (tagy)  



Pokyny pro interpretaci dokumentu Informace o struktuře dokumentu

Odkazy na další (binární) data

This is my first homepage. This text is bold

Vývoj HTML 

Značkovací jazyk založený na SGML 

 

2.0 – první verze s formální specifikací 3.0 – neimplementovaný návrh 

 

Příliš složitá specifikace

3.2 – standard na základě podmnožiny nestandardních řešení různých výrobců 4.0, 4.01 – poslední verze   



Standard Generalized Markup Language ISO 8879:1986

Kaskádové styly CSS … …

HTML5

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

XML     

eXtensible Markup Language SGML „light“ Orientace na informační hodnotu dokumentu Možnost definovat další jazyky založené na XML Striktnější syntaxe

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





9

http://www.findmebyip.com/litmus/#html5-web-applications

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

 

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

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>





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

...

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ů

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



Standard vs Quirk mód 

Standard(s) 



Quirks 



prohlížeč interpretuje data v souladu se standardy které podporuje Režim zpětné kompatibility

Almost standards 

Jako standards, kromě obrázků v tabulkách (kvůli starým tabulkovým návrhům) 

31

https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Myster ious_Gaps

Standards vs. Quirks – čím se liší  

MSIE box model (do 5.5) Zarovnání inline elementů   

32

Quirks: často ke spodnímu okraji boxu Standards: k základní čáře Dědičnost velikosti fontů v tabulkách

Kdy se použije jaký mód 



„Starší standardy“ a „nedokonale specifikované standardy“ mají tendenci přepínat starší prohlížeče do Quirks módu Podrobná tabulka 



http://en.wikipedia.org/wiki/Quirks_mode

Zjištění módu  

33

PageInfo (Mozilla, Opera) Vlastnost DOM document.compatMode

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

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ů

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

Kódování znaků 

Počítače přirozeně pracují pouze s čísly



Zprostředkování práce se znaky   



definice párování číslo ~ znak soubor definic = kódová stránka, kódování počet znaků které může kódování obsahovat = 2bity

Původní kódování – ASCII 

7 bitové, 128 znaků

Kódování znaků 

Osmibitová rozšíření – 256 znaků 



různá kódování pro různé jazyky podle různých standardů

Různá kódování češtiny 

CP852 



ISO 8859-2 



osmibitové kódování češtiny v systému MS-DOS osmibitové kódování češtiny v UNIXových systémech

Windows-1250 

osmibitové kódování češtiny používané v systémech Microsoft Windows

Kódování znaků 

Nelze použít více kódování najednou



Vícebytová kódování (vícekrát 8 bit na 1 znak) 

utf-8  



utf-16  



proměnná délka jednotky, min 8 bitů kompatibilní s ASCII proměnná délka jednotky, min 16 bitů nekompatibilní s ASCII, varianty

další, např. kódování čínštiny

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



<meta http-equiv="Content-Type" content="text/html; charset=windows1250"> <meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-2"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Obě kódování musí být nastavena stejně

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

Přehlednější v češtině (písmenné)  

http://www.jakpsatweb.cz/html/entity.html http://www.jakpsatweb.cz/html/entity-vsechny.html

Prvky HTML jazyka 

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

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

Tabulky

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



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



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




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




Publikace dat na webserver 

Většinou použití FTP protokolu (nebo modernějších variant) 



Lokální síť 



klient – např. WinSCP http://winscp.net např. uživatelské stránky na VŠCHT

WWW formuláře 

omezený přístup – většinou u služeb zdarma

Správa webové prezentace 

Webová prezentace se skládá ze 2 částí 

layout (rozložení)  



šablona, která určuje vzhled, způsob prezentace fixní část stránek, která je společná celému webu (hlavička, logo, navigace)

obsah 

vlastní informace, typicky jiné na různých stránkách

Správa webové prezentace 

Systém samostatných stránek    

každá stránka je sama sobě svou šablonou tvoří se typicky tak, že se vytvoří jedna stránka jako šablona, ostatní stránky se vytvoří ručně jako kopie a přepíše se obsah funkční, ale pracné při údržbě nemá další požadavky na vybavení serveru

Správa webové prezentace 

Off-line generování obsahu 

obsah je tvořen odděleně od šablony  

  

HTML fragmenty data v jiném formátu

program (skript), který dávkově zpracuje HTML fragmenty a vytvoří systém samostatných stránek automaticky nutná znalost / vytvoření skládacího programu dávkové generování po každé aktualizaci

Definice rozdělení <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <noframes>

Prohlížeè nepodporuje rámy.



Element 

Definován pouze v 





Atributy  

cols počet rámců vedle sebe rows počet rámců nad sebou  

cols="25%, 75%" cols="250, *, 20%"

Element  

Opět pouze ve FRAMESET DTD Atributy     

frameborder ="0|1" zobrazovat ohraničení marginwidth, marginheight velikost okraje noresize="noresize" zákaz změny velikosti name="jméno_rámu" scrolling="yes|no|auto" režim rolování

Vícenásobné dělení <noframes>

Prohlížeè nepodporuje rámy. Zde je obsah stránek.



Odkazy v rámech   

text Atribut target určuje ve kterém rámci/okně se otevře odkazované URL target=     

_top _self _blank _parent Jméno_rámce

Správa webové prezentace 

iFrame 

Vložení html z jiného souboru



<iframe src =„navigace.html" width="100%" height="300">

Your browser does not support iframes.



 

Správa webové prezentace 

Skriptování na serveru 

nutné aby server podporoval skriptování   



SSI ASP PHP

možno složit stránku na serveru z více kousků 

v PHP a ASP ale i řadu dalších věcí

Správa webové prezentace 

Redakční systém 

pokročilé skriptování na serveru + databáze    

Wordpress Drupal Joomla …