Od HTML k XML snadno a rychle


Autor: Martin Kuba (makub@ics.muni.cz)

Obsah

Tento dokument vysvětluje použití XML pro psaní webových stránek na základě znalosti HTML. Pro sjednocení úrovně znalosti HTML čtenářů obsahuje popis vývoje HTML od začátku až do současnosti.

Podpora v prohlížečích

Dále uvedené příklady je možné testovat v prohlížečích, které umí příslušnou verzi HTML, resp. CSS a XML. Netscape 3 a MSIE 4 umí HTML 3.2. Netscape 4 a MSIE 5 umí HTML 4 avšak implementace CSS není korektní. Netscape 7, Mozilla 5a MSIE 6 umí HTML 4 s CSS, XML s CSS i XML s XSL.

Historický vývoj HTML

HTML 1.0

Původní definice první verze HTML (tehdy bez pořadového čísla, ale označme ji HTML 1.0) byla definována v červnu 1993 dokumentem http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt a její idea byla, že značky (tagy) jazyka budou označovat význam textu, tj. například značka <H1></H1> označí nadpis nejvyšší úrovně, nebo značka <EM></EM> označí zvýrazněnou část textu, a prohlížeč si sám určí, jak daný význam zobrazí, tj. jestli zvýrazněný text zobrazí kurzívou nebo tučněji nebo třeba červenou barvou.
Záměrem bylo umožnit zobrazení HTML stránek na co nejširším počtu zařízení, od textových terminálů přes malé černobílé grafické displeje po velké barevné obrazovky osobních počítačů.
Z tohoto důvodu HTML 1 neobsahovalo možnost určovat barvy nebo velikosti písma.
Typický dokument vypadal takto:
<HTML>
<HEAD>
<TITLE>HTML</TITLE>
</HEAD>
<BODY>

<H1>HTML</H1>
Text v odstavci se <EM>zvyraznenym</EM> slovem.<P>

</BODY>
</HTML>
HTML 1 neobsahovalo ani tabulky, takže bylo nemožné např. umístit dva texty vedle sebe.

HTML 3.2

Nedostatky prvního HTML vedly k rychlému vývoji novějších verzí, které však upustili od původního záměru a vydali se přesně opačným směrem. Designeři webových stránek byli především grafici zvyklí mít absolutní kontrolu nad vzhledem výsledného dokumentu a požadovali proto možnosti určování velikosti písma, umístění a barev v dokumentu.
Po několika letech se ustálilo používání HTML, které bylo kodifikováno jako verze 3.2 v lednu 1997 dokumentem http://www.w3.org/TR/REC-html32.html.
V této verzi se místo významu textu popisoval jeho vzhled, tj. např. místo značky <EM> pro zvýraznění se používaly značky <I></I> pro kurzívu, <B></B> pro tučné písmo nebo dokonce <FONT COLOR="red"></FONT> pro červené písmo.
Velkou změnou bylo zavedení tabulek (značka <table>) které umožnily rozmísťovat texty a obrázky po ploše dokumentu podle autorovy libosti.
Důsledkem možnosti určovat přesně vzhled dokumentu byl vznik stránek "optimalizovaných" pro konkrétní rozlišení obrazovky, například 800x600 pixelů, čímž se prohlížení webových stránek omezilo víceméně jen na obrazovky osobních počítačů s dostatečným rozlišením.

Dokument v HTML 3.2 proto mohl v extrémním případě vypadat i takhle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>HTML 3.2</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">

<FONT SIZE="+4" COLOR="BLUE" FACE="Arial"><B>HTML 3.2</B></FONT><BR>

<P ALIGN="JUSTIFY"><FONT SIZE="+0" COLOR="BLACK" FACE="Arial">
Text v odstavci se <I><FONT COLOR="red">zvyraznenym</FONT></I> slovem.
</FONT></P>

</BODY>
</HTML>

Všimněte si, že na rozdíl od příkladu k HTML 1 tento dokument jednak neponechává prohlížeči žádnou možnost ve výběru zobrazení (nadpis musí být modrým písmem velikosti 4) a druhak už neobsahuje žádnou informaci o významu textu, takže například najít v něm programově nadpisy je nemožné.

HTML 4

Směr vývoje načatý HTML 3.2 byl špatný, protože v dokumentech byl beznadějně smíchán vzhled a význam textu. Proto poslední verze HTML 4, definovaná v dubnu 1998 a revidovaná v prosinci 1999 dokumentem http://www.w3.org/TR/html401/ odděluje význam a vzhled v dokumentu pomocí tzv. CSS - Cascading Style Sheets.
O co jde - byly zrušeny značky jako <FONT>, značky v textu opět znamenají význam a jejich vzhled je definován ve stylesheetu. Nejlépe je to vidět na příkladu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<TITLE>HTML 4.01</TITLE>
<STYLE TYPE="text/css">
/* contextual selector */
body { background: white; color: black; font-family: Arial, sans-serif; }
p { text-indent: 3em; text-align: justify; }
h1 { font-size: x-large; color: blue; background: white; }
/* class selector */
.vyrazne { font-style: italic; color: white; background: red; }
/* ID selector */
#svp94O { text-indent: 2em; }
</STYLE>
<!-- external file -->
<LINK REL="stylesheet" TYPE="text/css" HREF="neutral.css">
</HEAD>
<BODY>

<H1>HTML4.01 a CSS</H1>

<P id="svp94O"> Text v odstavci se <span class="vyrazne">zvyraznenym</span> slovem. </P>
<P> Text v odstavci se <span class="vyrazne">zvyraznenym</span> slovem. </P>

</BODY>
</HTML>
Značky mají svuj předdefinovaný vzhled, např. nadpisy jsou větším písmem na samostatném řádku, je však možné tento vzhled dodatečně modifikovat ve stylesheetu (výjimkou jsou značky <span> a <div> které žádný předdefinovaný vzhled nemají a lze je použít jako univerzální značky).
Stylesheetů muže být i víc, uvnitř souboru nebo i v samostaném souboru. Možnost mít vzhled stránek definovaný v externím souboru umožnuje popsat vzhled všech stránek celého webserveru v jednom stylesheetu a tak tento vzhled snadno měnit změnou jednoho stylesheetu místo pracnou změnou všech stránek.

Dlužno řící, že špatná implementace HTML 4 s CSS v soudobých prohlížečích Netscape 4, MSIE 4 a MSIE 5 vedla k tomu, že reálně se pro tvorbu stránek používá hybrid HTML 3.2 a HTML 4, ve kterém se CSS používají pro efekty, které je možné oželet v případě že prohlížeč nepodporuje CSS, například změnu vzhledu linku z podtrženého textu na nepodtržený barevný.

XHTML 1.0

HTML verze 4 bylo přeformulováno do aplikace jazyka XML (XML je metajazyk, konkrétní jazyk definovaný pomocí DTD popisu jako podmnožina XML se nazývá aplikace jazyka XML) nazvané XHTML v lednu 2000 dokumentem http://www.w3.org/TR/xhtml1/, žádné nové rysy nebyly přidány, změnou se jen docílilo toho, že každý XHTML dokument je platným XML dokumentem a proto lze s ním pracovat pomocí nástrojů pro práci s XML.
V praxi je rozdíl mezi HTML 4 a XHTML 1.0 především v tom, že všechny tagy musí být uzavřené, správně vnořované, psané malými písmeny, hodnoty atributů musí být vždy v uvozovkách a atribut name používaný pro identifikaci značek byl přejmenován na id.
Například tag pro konec řádku v HTML 4 psaný jako <BR> je nutné v XHTML psát jako <br/>
<?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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML 1.0</title>
<link href="styl.css" />
</head>
<body>
<h1>XHTML 1.0</h1>
<p>Text v odstavci se <em>"vyraznenym"</em> slovem.</p>
<br />
</body>
</html>

Možnost nových značek - XML

Nepřekonatelné omezení HTML

HTML mělo jedno principiální omezení - množina značek byla jednou pro vždy dána a byla omezená. Existovaly značky pro nadpisy, zvýraznění textu, adresy, dokonce pro výpisy počítačového textu (<code>), ale nebylo možné přidat další.

V praxi toto omezení znamená, že stránky není možné zpracovávat strojově. Například, pokud stránka obsahuje popis nějakého výrobku, lze z HTML značek poznat co je nadpis a co je červené písmo, ale nelze poznat co je název výrobku, co jeho popis a co je cena. Stránka tedy musí být zobrazena živému člověku, aby rozhodl co je co, nelze to udělat programem.

Nebo praktičtější příklad - meteorologické služby zveřejnují na webu stav počasí, ale ze stránek lze pouze zjistit, že obsahují tabulku s několika sploupci, není už možné zjistit, že např. první sloupec je název města, druhý teplota , třetí tlak, atd.

Pokud se pokusíme takovou stránku zpracovat programem a napevno do něj zadáme významy sloupců tabulky, stačí změnit pořadí sloupců nebo nějaký přidat a program přestane fungovat.

Řešení - XML a stylesheety

Proto bylo vymyšleno XML (eXtensible Markup Language - rozšiřitelný značkovací jazyk), jehož dokumenty vypadají podobně jako HTML dokumenty, skládají se z textu a značek, ale značky je možné volit libovolně. XML bylo definováno v únoru 1998 a aktualizováno v říjnu 2000 v dokumentu http://www.w3.org/TR/REC-xml.
Pro označení názvu zboží je v XML možné použít např. značku <název>, pro označení ceny zboží značku <cena>, atd. Má to jeden háček - jak má prohlížeč vědět, co značky znamenají ?!

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE výrobek SYSTEM "vyrobky.dtd">
<!-- příklad -->
<výrobek>
<název>Bota</název>
<velikost>10</velikost>
<cena měna="CZK">999.90</cena>
</výrobek>
Tady je celý vtip XML - prohlížeč to neví, značky jen označují části textu. Předpokládá se, že pokud takovou stránku (např. popis výrobku) bude číst nějaký program, autor stránky a autor programu se dohodnou na nějaké konkrétní množině značek (např. <výrobek>,<název>,<cena>) zvané jazyk, tento jazyk se popíše pomocí souboru zvaného DTD (Document Type Definition) aby bylo možné kontrolovat že stránka je napsána správně, a ten kdo zná význam značek bude tedy program pro zpracování stránky.

Univerzální webový prohlížeč nepotřebuje význam značek znát. Ten naopak potřebuje znát jak je má zobrazit, tedy jejich vzhled. A v tomto místě přicházejí na pomoc stylesheety. Aby to nebylo tak jednoduché, existují dva druhy stylesheetů.

XML a CSS

CSS byly použité již v HTML 4. Zatímco v HTML 4 měly značky již předdefinovaný vzhled a bylo je možné upravovat (s výjimkou značek <span> a <div>), v XML značky nemají předem daný žádný vzhled a je nutné jim v CSS definovat všechny vlastnosti. Například následující stylesheet definuje zobrazení stránky výrobku tím že značce <výrobek> přisuzuje bílé pozadí, černé písmo velikosti dvacet bodů a šířku okrajů, značce <název> větší písmo a žluté pozadí:

výrobek {
display: block;
background-color: #ffffff;
width: 90%;
margin-top: 20pt;
margin-left: 20pt;
color: black;
font-size: 10pt;
}
název { background-color: yellow; font-size: large; }
velikost { }
cena {
display: block;
color: red;
margin-left: 20pt;
}

Seznam všech vlastností které lze nastavovat je v definici CSS2 http://www.w3.org/TR/REC-CSS2/.
Pokud do XML souboru dodáme odkaz na soubor se stylesheetem, prohlížeč bude schopný XML soubor zobrazit:

<?xml version="1.0" encoding="ISO-8859-2" ?>
<?xml-stylesheet type="text/css" href="xml1.css" ?>
<výrobek>
<název>Bota</název>
<velikost>10</velikost>
<cena mna="CZK">999.90</cena>
</výrobek>
CSS stylesheety mají však svá omezení. Nelze pomocí nich data obsažená v XML souboru např. zdvojovat nebo jim měnit pořadí, takže pokud například napíšeme knihu jako XML soubor, pomocí CSS nelze vygenerovat seznam kapitol na začátku knihy. Nebo v uvedeném příkladu, nelze zobrazit nejdřív cenu a pak velikost boty. Tyto problémy řeší druhý typ stylesheetu, zvaný XSL.

XML a XSL

XSL (eXtensible Stylesheet Language - rozšiřitelný stylový jazyk) se skládá ze dvou jazyků: XSLT (XSL Transformations) a XSL:FO (XSL Formating Objects).

XSLT

XSLT je jazyk pro transformaci libovolného XML dokumentu na jiný dokument, což muže být buď XHTML, nebo libovolné jiné XML, nebo speciálně XSL:FO, nebo dokonce jakýkoliv jiný typ dokumentu, třeba PDF nebo PostScript nebo třeba čistý text. Definován byl v listopadu 1999 dokumentem http://www.w3.org/TR/xslt.

V praxi se používá XSLT pro převedení XML dokumentu na XHTML dokument, který pak prohlížeč prostě zobrazí, protože XHTML jakožto forma HTML má předdefinovaný vzhled a význam.
Pro ukázku - XML soubor s odkazem na XSLT stylesheet
<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="boty.xsl" media="screen"?>
<výrobek>
<název>Bota</název>
<velikost>10</velikost>
<cena měna="CZK">999.90</cena>
</výrobek>
boty.xsl obsahující popis převodu na XHTML
<?xml version='1.0' encoding="ISO-8859-2"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml"
>
<xsl:output method="html"/>

<xsl:template match="/">
<html>
<head>
<title><xsl:value-of select="/výrobek/název"/></title>
</head>
<body bgcolor="white">
<xsl:apply-templates />
</body>
</html>
</xsl:template>

<xsl:template match="název">
<h2> <xsl:apply-templates /> </h2>
</xsl:template>

<xsl:template match="velikost">
<p align="justify"> Velikost: <xsl:apply-templates /> </p>
</xsl:template>

<xsl:template match="cena">
<p align="justify"> Cena: <xsl:apply-templates /> <xsl:value-of select="@měna"/></p>
</xsl:template>

</xsl:stylesheet>
Prohlížeč vnitřně aplikuje XSLT stylesheet na XML soubor a vznikne dokument
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bota</title>
</head>
<body bgcolor="white">
<h2>Bota</h2>
<p align="justify"> Velikost: 10</p>
<p align="justify"> Cena: 999.90CZK</p>
</body>
</html>
který už umí zobrazit. Všimněte si, že obsah značky <název>, tedy řetězec Bota, se ve výsledném dokumentu objevuje dvakrát, jednou v titulku stránky <title> a podruhé v nadpisu <h2>. Tohoto by nešlo docílit pomocí CSS styleheetu.
Podpora XML s XSLT stylesheety je přítomná v prohlížečích MSIE 6, Mozilla 5 a Netscape 7, lze je tedy začít používat okamžitě, pokud návštěvnící stránek budou mít tyto verze prohlížečů.

XSL:FO

XSL:FO je jazyk pro popis zobrazitelných objektů, jako jsou bloky textu, čáry, zlomy stránek, atd. s vlastnostmi shodnými s objekty používanými v CSS. Mužeme proto pomocí XSLT např. transformovat značku <název> na značky
<fo:block xmlns:fo="http://www.w3.org/1999/XSL/Format" 
font-size="16pt"
font-family="Arial"
space-after.optimum="15pt"
text-align="center"
break-before="page">
Bota
</fo:block>
jejíž obsah by měl být zobrazen na začátku stránky písmem Arial velikosti 16 bodů a vycentrován. Bohužel, v současné době žádný prohlížeč neumí XSL:FO zobrazovat a proto jsou XLS:FO pro psaní webových stránek nepoužitelné. Existují však prostředky (Apache FOP)), které umí ze souboru s XSL:FO objekty vygenerovat PDF soubor.

Kdy má smysl použít XML s XSLT ?

Zatím bude chvíli trvat, než návštěvnící stránek přestanou používat starší verze prohlížečů (Netscape 4, MSIE 5, MSIE 5.5) a do té doby bude nutné poskytovat stránky v HTML. Avšak i po té co všichni návštěvníci webových stránek budou používat prohlížeče podporující XML s XSLT, nebude vždy výhodné je použít.
Pro izolované jednostránkové dokumenty, například domovské stránky lidí, bude jednodušší použít přímo XHTML, protože se ušetří psaní dvou souborů.
Avšak pro komplikovanější weby, například zpravodajský server, bud mnohem jednodušší publikovat články jako čistá data v XML, se kterým se snadno manipuluje, a pro jednotné zobrazení všech článku použít jeden stylesheet.
Nebo pro weby, jejichž obsah přebírají jiní, např. předpovědi počasí, burzovní kurzy, ceníky firem, bude lepší publikovat stránky v XML, protože pak budou strojově zpracovatelné. Pokud se navíc několik takových míst dokáže dohodnout na jednotném jazyku, např. pro všechny ceníky by se použil jednotný jazyk, bylo by možné programově porovnávat informace z různých míst a například vybrat nejvýhodnější cenu.

Odkazy