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

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.

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!

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

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