# PB029: Oddělení formy od obsahu a jazyk (X)HTML

Jedním z nejběžnějších elektronických dokumentů jsou webové stránky. Představíme si základní principy jejich tvorby pomocí jazyka (X)HTML.

## Oddělení formy od obsahu

Jak jsme si již říkali na cvičení o značkování textu v LaTeXu, při tvorbě elektronických dokumentů je velmi užitečné striktně oddělovat samotný obsah (význam) dokumentu od jeho formy (vizuální reprezentace).

- Samotný obsah by měl být označen strukturně, tj. měl by být vyznačen význam jednotlivých částí dokumentu (tento text je hlavní nadpis, tato část je jméno autora, toto číslo je rok vydání apod.). Strukturně označkovaný obsah pak můžete bez potřeby jakýchkoliv dodatečných zásahů do dokumentu samotného snadno používat pro různé účely (jméno autora a název článku pro zobrazení na webu, všechny části pro tisk, jméno autora, název, rok vydání a další prvky pro vytvoření bibliografické citace atd.)
- Pokud máme kvalitně strukturně označkovaný dokument, je pak možné odděleně definovat vizuální reprezentaci všech jeho prvků. Je přitom jednoduché mít více odlišných definic určených pro různé použití (plnobarevný dokument pro zobrazení na webu, černobílou podobu dokumentu bez navigačních prvků pro tisk apod.).

Tip: Ve webovém prohlížeči si zobrazte náhled tisku této webové stránky. Uvidíte, že pro tisk na papíře je stránka zobrazena v podobě více vyhovující tomuto způsobu použití. Celá změna je přitom provedena výhradně změnou definice vizuálního značkování, nikoliv zásahem do strukturního značkování dokumentu.

V případě webových stránek je obsah zaznamenán v jazyce HyperText Markup Language (HTML), případně v XML reprezentaci jazyka HTML nazývané XHTML.

Tip: Zdrojový kód stránky si ve webovém prohlížeči obvykle můžete snadno zobrazit.

- Chrome: `Další nástroje → Zobrazit zdrojový kód (Ctrl+U)`
- Firefox: `Nástroje → Vývoj webu → Zdrojový kód stránky (Ctrl+U)`
- Internet Explorer: `Zobrazit → Zdroj (Ctrl+U)`

Jak můžete vidět na ukázce stránky využívající čistě strukturního XHTML značkování, strukturní značky jazyka XHTML umožňují do jisté míry popsat význam jednotlivých prvků dokumentu:

     1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
     2 <!DOCTYPE html>
     3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
     4 <head>
     5     <meta charset="UTF-8"/>
     6     <title>Předmět PB029</title>
     7 </head>
     8 <body>
     9     <header>
    10         <h1>
    11             <span id="code">PB029</span>
    12             <span id="title">Elektronická příprava dokumentů</span>
    13         </h1>
    14     </header>
    15     <main>
    16         <section id="extent">
    17             <h1>Rozsah</h1>
    18             <p>
    19                 2/1. 3 kr. (plus ukončení).
    20                 Doporučované ukončení: zk.
    21                 Jiná možná ukončení: k, z.
    22             </p>
    23         </section>
    24         <section id="teachers">
    25             <h1>Vyučující</h1>
    26             <ul>
    27                 <li>Petr Sojka <span class="role">(přednášející)</span></li>
    28                 <li>Michal Růžička <span class="role">(cvičící)</span></li>
    29                 <li>Vít Starý Novotný <span class="role">(cvičící)</span></li>
    30                 <li>Tereza Vrabcová <span class="role">(cvičící)</span></li>
    31                 <li>Marie Stará <span class="role">(cvičící)</span></li>
    32             </ul>
    33         </section>
    34         <section id="objectives">
    35             <p>
    36                 Po absolvování tohoto kursu bude student schopen aplikovat základní
    37                 principy, algoritmy a&#160;techniky tvorby dokumentů, využít je při
    38                 svém studiu a&#160;(týmové) publikační činnosti (příprava skript,
    39                 prezentačních materiálů, psaní bakalářské/diplomové/disertační
    40                 práce, dokumentace programu apod.). Student se bude schopen
    41                 orientovat v&#160;moderních publikačních technologiích
    42                 a&#160;formátech a&#160;prakticky pracovat se software pro tvorbu
    43                 elektronických dokumentů.
    44             </p>
    45         </section>
    46     </main>
    47 </body>
    48 </html>

I bez použití jakéhokoliv vizuálního značkování jsou význačné prvky stránky (např. nadpisy různých úrovní apod.) webovým prohlížečem jistým způsobem vizuálně odlišeny od běžného textu – webový prohlížeč na základě strukturního značkování zná jejich speciální význam a použije zabudovaná pravidla pro vhodnou vizualizaci této informace.

Pokud chceme sami definovat způsob zobrazení webové stránky, použijeme pro popis jejího vzhledu technologii Cascading Style Sheets (CSS), která umožňuje přiřadit vizuální reprezentaci jednotlivým prvkům dokumentu. Již nepoužíváme vizuální značky, které jsou z historických důvodů součástí (X)HTML standardu. Jednoduchý ukázkový stylopis může vypadat např. takto:

     1 h1 {
     2 	color: yellow;
     3 	background-color: #000000;
     4 }
     5
     6 section h1 {
     7 	color: white;
     8 	text-align: right;
     9 }
    10
    11 #objectives {
    12 	outline: 0.1em dotted black;
    13 }
    14
    15 .role {
    16 	outline: 0.1em dotted blue;
    17 }
    18
    19 #objectives p {
    20 	text-indent: 1.5em;
    21 }

Do naší ukázkové webové stránky pak stačí přidat pouze odkaz na daný stylopis, a výsledkem je odlišná vizuální reprezentace původního dokumentu, i když samotné XHTML značkování obsahu se nijak nezměnilo:

     1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
     2 <!DOCTYPE html>
     3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
     4 <head>
     5     <meta charset="UTF-8"/>
     6     <title>Předmět PB029</title>
     7     <link rel="stylesheet" type="text/css" href="sample-1.css"/>
     8 </head>
     9 <body>
    10     <header>
    11         <h1>
    12             <span id="code">PB029</span>
    13             <span id="title">Elektronická příprava dokumentů</span>
    14         </h1>
    15     </header>
    16     <main>
    17         <section id="extent">
    18             <h1>Rozsah</h1>
    19             <p>
    20                 2/1. 3 kr. (plus ukončení).
    21                 Doporučované ukončení: zk.
    22                 Jiná možná ukončení: k, z.
    23             </p>
    24         </section>
    25         <section id="teachers">
    26             <h1>Vyučující</h1>
    27             <ul>
    28                 <li>Petr Sojka <span class="role">(přednášející)</span></li>
    29                 <li>Michal Růžička <span class="role">(cvičící)</span></li>
    30                 <li>Vít Starý Novotný <span class="role">(cvičící)</span></li>
    31                 <li>Tereza Vrabcová <span class="role">(cvičící)</span></li>
    32                 <li>Marie Stará <span class="role">(cvičící)</span></li>
    33             </ul>
    34         </section>
    35         <section id="objectives">
    36             <p>
    37                 Po absolvování tohoto kursu bude student schopen aplikovat základní
    38                 principy, algoritmy a&#160;techniky tvorby dokumentů, využít je při
    39                 svém studiu a&#160;(týmové) publikační činnosti (příprava skript,
    40                 prezentačních materiálů, psaní bakalářské/diplomové/disertační
    41                 práce, dokumentace programu apod.). Student se bude schopen
    42                 orientovat v&#160;moderních publikačních technologiích
    43                 a&#160;formátech a&#160;prakticky pracovat se software pro tvorbu
    44                 elektronických dokumentů.
    45             </p>
    46         </section>
    47     </main>
    48 </body>
    49 </html>

Při změně odkazu na jiný stylopis se opět patřičně změní vizuální reprezentace dokumentu. Jak vidíte, je možné např. skrývat různé části obsahu, aniž by bylo nutné je fyzicky odstranit ze samotného XHTML dokumentu (vhodné např. pro skrytí navigačních menu v tiskové verzi webové stránky apod.).

     1 section h1, #extent, #objectives, .role {
     2 	display: none;
     3 }
     4
     5 #code {
     6 	display: block;
     7 	color: white;
     8 	background-color: #000000;
     9 }
    10
    11 #teachers ul {
    12 	margin: 0em;
    13 	padding: 0em;
    14 	font-size: 150%;
    15 }
    16
    17 #teachers li {
    18 	display: inline-block;
    19 }

Vyčlenění popisu vzhledu (X)HTML dokumentu do externích stylopisů umožňuje snadno změnit podobu celého webu bez nutnosti zásahu do obsahu. Velmi pokročilé ukázky CSS designu si můžete prohlédnou na webu CSS Zen Garden, kde je jedna a tatáž HTML stránka prezentována v mnoha vizuálně dramaticky odlišných podobách. Veškeré změny jsou však dosaženy pouze změnou CSS, nikoliv zásahem do samotného HTML značkování.

Tip: Důsledné oddělování obsahu a formy je nutné dodržovat i při pořizování dokumentů textovými procesory typu MS Office Word či LibreOffice Writer, v cloudových službách Google Docs a dalších nástrojích pro pořizování elektronických dokumentů.

Nikdy nedefinujeme vzhled přímo na obsahu dokumentu, k jednotlivým částem dokumentu pouze přiřazujeme pojmenovaný styl, který teprve nese definici vizuální podoby!

- LibreOffice Writer: `Formát → Styly a formátování (F11)`
- MS Office Word: `Domů → Styly (Ctrl+Alt+Shift+S)`

Povšimněte si, že styly je možné definovat hierarchicky, tzn. změna typu písma nastaveného v základním stylu dokumentu se automaticky projeví nejen v základním textu, ale i u všech nadpisů, pokud jsou tyto styly potomky základního stylu a typ písma v nich není explicitně přenastaven.

Důsledná aplikace stylů na jednotlivé prvky dokumentu (styl nadpisu na texty nadpisů všech úrovní, styl „příklad“ na všechny příklady v dokumentu atd.) je výhodná:

- Zajistí konzistentní vzhled dokumentu – v případě potřeby změny velikosti písma pro nadpisy druhé úrovně se změna provede pouze v definici stylu a automaticky se jednotně promítne v celém dokumentu. Není třeba ručně opravovat definici vzhledu u každého nadpisu, což je zdlouhavé a vede k chybám při opomenutí opravy u některého z nich.
- Zajistí konzistentní vzhled sady dokumentů (firemní design apod.) – jednou definovaný styl je možné použít pro více dokumentů. Každá změna se pak promítne ve všech z nich bez potřeby jakéhokoliv zásahu do samotného obsahu.
- Umožní využití pokročilých možností práce s dokumentem, např. vložení strojově generovaného obsahu (který automaticky vzniká z textů označených styly pro nadpisy jednotlivých úrovní), seznamů obrázků, tabulek a příkladů (které vznikají z objektů označených styly pro obrázky/tabulky/příklady) atd.

## (X)HTML

HyperText Markup Language (HTML) je značkovací jazyk používaný pro popis dokumentů pro World Wide Web. Historicky se vyvinul z univerzálního (a složitého) značkovacího jazyka SGML.

Pro HTML později vznikla i XML reprezentace tohoto jazyka nazývaná XHTML. XML reprezentace HTML respektuje striktní syntaktická pravidla XML, díky čemuž je možné používat pro zpracování XHTML dokumentů standardní nástroje pro práci s XML.

Tip: HTML (a zejména XHTML) je formálně definovaný jazyk s přesnými syntaktickými pravidly, jejichž dodržování je možné ověřit validací, např. pomocí on-line validační služby W3C pro (X)HTML. Často se však můžete setkat s (X)HTML dokumenty, které obsahují chyby. Pokud potřebujete takový dokument dále zpracovávat, můžete zkusit chyby automatizovaně opravit pomocí nástroje Tidy. Tidy umožňuje provádět i konverzi HTML do XHTML, či převod vizuálního značkování v HTML do CSS.

V současné době probíhá živelný vývoj celé řady pokročilých webových technologií zastřešených standardem HTML5. Protože je výhodné mít možnost používat pro zpracování webových stránek existující standardní XML nástroje, tak i v případě HTML5 existuje jeho XML reprezentace označovaná XHTML5.

Tip: S rostoucí složitostí a živelným vývojem webových standardů je třeba dávat pozor na jejich (ne)podporu v (používaných) webových prohlížečích. Pomoci vám může web Can I use … Support tables for HTML5, CSS3, etc., který shromažďuje informace o podpoře jednotlivých částí standardů v různých verzích webových prohlížečů. Je pak na autorovi webu, zda už je podpora dané vlastnosti dostatečně rozšířená v prohlížečích návštěvníků jeho stránky, aby ji bylo „bezpečné“ začít používat.

Na webu existuje obrovské množství výukových kurzů (X)HTML. Osvědčeným zdrojem informací o webových technologiích (včetně HTML) jsou školičky technologií W3C.

## Praktické úkoly k procvičení

- Vytvořte si webovou stránku v jazyce XHTML podle zadání.
- Webovou stránku validujte některou z on-line validačních služeb (např. W3C HTML validátorem) a případné chyby opravte.
- Stránku si vystavte na webu; k tomuto účelu můžete použít webový hosting FI MU, nebo jinou hostingovou službu. Věnujte přitom zvýšenou pozornost i správnému nastavení kódování textu.

  Tip: Volbu kódování textu pro zobrazení webové stránky zaslané serverem prohlížeč provádí:

  1. Primárně na základě existence znaku BOM na začátku souboru. Pakliže je přítomen, moderní prohlížeče ignorují veškeré dodatečné informace a předpokládají, že došlo k použití příslušného Unicode kódování.
  2. Dále na základě informace o kódování v HTTP hlavičce odpovědi na požadovanou webovou stránku. Tu si můžete zobrazit např. pomocí nástrojů pro vývojáře zabudovaných ve většině moderních webových prohlížečů.
     - Chrome: `Další nástroje → Nástroje pro vývojáře (Ctrl+Shift+I) → Network → Headers`
     - Firefox: `Nástroje → Vývoj webu → Síť (Ctrl+Shift+Q) → Hlavičky`
  3. Pokud informace o kódování v HTTP hlavičce chybí, je volba provedena na základě informace o kódování v hlavičce samotné HTML stránky.
  4. Pokud informace o kódování chybí i v hlavičce HTML stránky, je k jeho detekci použita heuristika, která vychází z deklarovaného jazyka dokumentu a dalších indicií.

  Pozor, je použita první nalezená informace o kódování. Pokud tedy webový server posílá chybnou informace o kódování v HTTP hlavičkách, situaci nezachrání správně uvedené kódování v hlavičce samotné HTML stránky. Přesto je vhodné kódování v samotné HTML stránce uvádět, použije se např. při zobrazení stránky přímo z disku počítače, kde chybí webový server, který by mohl informaci o kódování poskytnout. Vzorový postup prohlížeče popisuje specifikace HTML 5.