Přejít na:

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.

Přejít: navigace | na začátek stránky | na konec stránky

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.

  • 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.
Přejít: navigace | na začátek stránky | na konec stránky

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

Přejít: navigace | na začátek stránky | na konec stránky

Praktické úkoly k procvičení

Přejít: navigace | na začátek stránky | na konec stránky