<HTML>HTML 1 neobsahovalo ani tabulky, takže bylo nemožné např. umístit dva texty vedle sebe.
<HEAD>
<TITLE>HTML</TITLE>
</HEAD>
<BODY>
<H1>HTML</H1>
Text v odstavci se <EM>zvyraznenym</EM> slovem.<P>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">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>
<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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">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).
<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>
<?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>
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.
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" ?>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.
<!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>
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ů.
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" ?>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-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>
<?xml version="1.0" ?>boty.xsl obsahující popis převodu na XHTML
<?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>
<?xml version='1.0' encoding="ISO-8859-2"?>Prohlížeč vnitřně aplikuje XSLT stylesheet na XML soubor a vznikne dokument
<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>
<html xmlns="http://www.w3.org/1999/xhtml">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.
<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>
<fo:block xmlns:fo="http://www.w3.org/1999/XSL/Format"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.
font-size="16pt"
font-family="Arial"
space-after.optimum="15pt"
text-align="center"
break-before="page">
Bota
</fo:block>