Návrh a tvorba WWW Přednáška 4 XML, XHTM

Extensible Markup Language Extenible Markup Language (rozšiřitelný značkovací jazyk) je značkovací jazyk, který slouží k tvorbě dokumentů s vlastními elementy a atributy, které je možné validovat oproti vlastnímu schématu. Je tedy možné vytvořit de facto vlastní jazyk. XML je zjednodušenou podmnožinu jazyka SGML. První verze jazyka byla publikována v roce Windscreen Wiper The Windscreen wiper automatically removes rain from your windscreen, if it should happen to splash there. It has a rubber blade which can be ordered separately if you need to replace it.

HTML VS. XML HTML –byl navrhnut pro zobrazování dat (zaměřuje se na to, jak data vypadají) –přikazuje interpretu, co má kde zobrazit –má předdefinované tagy (např.,,, …) –nelze definovat své vlastní tagy XML –byl navrhnut pro popis, uchovávání a přenos dat –nic nepřikazuje (protože to není programovací jazyk) –nemá předdefinované tagy –lze definovat své vlastní tagy (např.,, …)

Syntaxe XML –XML dokument má pouze jeden kořenový element –každý element musí mít počáteční a koncovou značku ( … ), nebo musí jít o prázdný element ( ) –není povoleno křížení elementů –název elementů a atributů může začínat pouze písmenem, podtržítkem nebo dvojtečkou –zápis vyhrazených znaků pomocí zástupných entit (&entita;) –komentáře nemůžou být vnořené a nesmí obsahovat --

Kontrola struktury dokumentu Pomocí XML můžeme vytvářet vlastní jazyky, které budou používat syntaxi XML. V našem jazyku odvozeném od XML si můžeme definovat, které elementy a atributy budou k dispozici a jak je půjde navzájem kombinovat. –Document Type Definition definice typu dokumentu, schématu dokumentu pocházející ještě z jazyka SGML –XML Schema Definition definují typy, které musí dokument obsahovat, od W3C, v současné době nejpoužívanější –Relax NG standardizován OASIS, vytváříme gramatiku jazyka –Schematron definuje sadu podmínek, které musí být pro dokument splněny

Příklad XML Schéma Jan Novák

Stylové jazyky XML důsledně odděluje obsahu dokumentu od jeho vzhledu. Dokumenty lze stylovat pomocí stylových jazyků: –CSS (Cascading Style Sheets ) –XSL (eXtensible Stylesheet Language) –DSSSL (Document Style Semantics and Specification) –FOSI (Formatted Output Specification Instance) –…

XSL (eXtensible Stylesheet Language) XSL se skládá z: –XSLT (XSL Transformations) - sloužící k transformaci dokumentů –XSL FO (formátovací objekty) - slouží k přesnému popisu vzhledu dokumentu

XML a webový prohlížeč –zobrazování XML dokumentu podle pravidel definovaných v připojeném stylu Podpora CSS XSL –podpora grafických a multimediálních formátů Gif, Jpeg, VSG, … Zobrazování jazyků založených na XML (MathML, CML,…) –navigace v dokumentu a kontextové vyhledávání Generování např. stromu struktury Vyhledávání textu pouze v určitém elementu

Použití XML –„Inteligentní“ webové stránky formátování obsahu dle výstupního zařízení (PC, mobilní telefony, webTV, organizéry nebo třeba herní konzole ) –Elektronické publikování generovaní např. PDF, Windows Help, … –Univerzální datový formát elektronické obchodování, výměnný formát heterogenních aplikací, … –…

Konkrétní aplikace XML –XHTML – nástupce jazyka HTML –RSS – Rich Site Summary je jazyk sloužící k syndikaci obsahu webových stránek –SMIL – Synchronized Multimedia Integration Language popisuje multimedia pomocí XML –MathML – Mathematical Markup Language je značkovací jazyk pro popis matematických vzorců a symbolů pro použití na webu –CML - Chemical Markup Language je značkovací jazyk pro popis chemických vzorců –SVG – Scalable Vector Graphics je jazyk pro popis dvourozměrné vektorové grafiky, statické i dynamické (animace) –DocBook – Sada definic dokumentů a stylů pro publikační činnost –SOAP, WSDL, BPEL, …

Jmenné prostory (namespaces) Jmenný prostor vytváří množinu jmen daného významu. Jmenné prostory umožňují používat nezávisle na sobě několik druhů značek. Můžeme tak vytvářet dokumenty, ve kterých jsou použité značky stejného jména a jiného významu. Výchozí jmenný prostor –deklarujeme pomocí speciálního atributu xmlns, hodnotou tohoto atributu je nejčastěji URL Prefix jmenného prostoru –kombinujeme-li více jmenných prostorů v dokumentu, oddělujeme je deklarovanou předponou čímž začleňujeme použité elementy do daného jmenného prostoru

Extensible HyperText Markup Language XHTML je nástupce HTML založený na XML. Rozlišujeme 3 druhy XHTML: –XHTML 1.0 Strict čistě strukturální značkování, neobsahuje žádné značky spojené s formátováním vzhledu –XHTML 1.0 Transitional povoluje atributy pro formátování textu a odkazů v elementu body a některé další atributy –XHTML 1.0 Frameset používa se při použití rámců pro rozdělení okna prohlížeče na dvě nebo více částí

Struktura XHTML dokumentu Deklarace XML Deklarace DTD Kořenový element html obsahuje atribut xmlns Element html vždy obsahuje dva elementy, head (hlavičku) a body (tělo dokumentu). Hlavička musí obsahovat element title a měla by obsahovat i metatag pro kódování (kvůli starším prohlížečům).

Zásady XHTML –všechny elementy a atributy musí být malými písmeny, XHTML je case-sensitive –všechny hodnoty atributů musí být v XHTML v uvozovkách –všechny XHTML tagy musí být párové (prázdné tagy se musí ukončit lomítkem, např. ) –tagy se nesmí nikdy křížit –striktní XHTML neobsahuje žádné atributy sloužící k formátování (oproti HTML jsou z XHTML vypuštěny formátovací tagy, např. font, b, i). –vkládané skripty na straně klienta (např. javascript) by měly být vloženy do sekce CDATA (starší prohlížeče CDATA nepodporují) –znak & musí být převeden na html entitu i pokud je součástí URL.

Jmenné prostory v XHTML Jmenný prostor musí být deklarován pomocí předpony u elementu html. Vlastní element můžete použít v XHTML dokumentu spolu s deklarovanou předponou běžný odstavec element p spadá do jiným namespace a proto se nejedná o odstavec

Jmenné prostory v XHTML Jméno elementu lze použít jako selektoru v kaskádovém stylu, musí však být uvedeno včetně předpony jmenného prostoru. Dvojtečka musí mít před sebou zpětné lomítko wnd\:wspd, wnd\:wdir { display: block; font-weight: bold; border: 1px solid red; margin: 5px; padding: 5px; } wnd\:p { display: block; background-color: yellow; }