% Začátek preambule.
\documentclass[a4paper]{article} % Mezi nejdůležitější třídy dokumentů patří article, 
                        % book a report. Třída dokumentů určuje např. to, že 
                        % článek (article) nemá (na rozdíl od knihy) příkazy pro 
                        % sazbu kapitol apod.
\usepackage[resetfonts]{cmap} % Při překladu pdfTeXem do PDF zajistí správné
                              % mapování znaků na Unicode sekvence a učiní tak
                              % text prohledávatelný a kopírovatelný do schránky.
\usepackage{lmodern} % Sázet se bude Latin Modern fonty, nikoli výchozími 
                     % EC fonty.
\usepackage[czech]{babel} % Nastavení použití českého prostředí pro LaTeX. 
                          % Dokument přeložíme příkazem 'latex <název souboru>' 
                          % či 'pdflatex <název souboru>'.
\usepackage[utf8]{inputenc} % Informace o tom, že tento zdrojový text je 
                            % uložen v kódování UTF-8.
\usepackage[T1]{fontenc} % Nastavení kódování fontu na formát T1.
\usepackage[protrusion]{microtype} % Při sazbě budou použita mkrotypografická
                                   % rozšíření pdfTeXu.
\usepackage{hyperref} % Odkazy a reference v PDF výstupu budou klikatelné.
\usepackage{paralist} % Můžeme používat kompaktní seznamy `compactitem`.
\usepackage{pagecolor} % Můžeme barvit pozadí stránek pomocí `\pagecolor`.
\title{Oddělení formy od obsahu a jazyk (\textsc{x})\textsc{html}}
\date{}
% Konec preambule.

% Začátek dokumentu.
\begin{document}
  \maketitle
  \begin{itemize}
    \item V jazyce \textsc{xhtml} vytvořte webovou stránku, která bude
          strukturně odpovídat druhé straně tohoto dokumentu.
          Stránka by měla obsahovat titulek (\texttt{<title>}), který bude
          odpovídat hlavnímu nadpisu (\texttt{<h1>}). Dále by měla stránka
          obsahovat nadpisy druhé úrovně, odstavce, číslované a nečíslované
          seznamy a hypertextové odkazy.
    \item Oddělte formu od obsahu a \emph{zaměřte se pouze na obsah}.
          Pokud je část textu zvláštně formátována, nesnažte se popsat vzhled,
          ale zkuste odhadnout, jaký koncept se sazeč snažil zachytit
          (zkratky, důraz, název programu, apod.). Použijte buďto existující
          značky (\texttt{<abbr>}) nebo si zaveďte značky vlastní
          (\texttt{<span class="zkratka"\kern0pt>}). \emph{Nepoužívejte jazyky
          \textsc{css} a JavaScript,} zaměříme se na ně v příštím týdnu.
    \item Prohlédněte si svou webovou stránku v prohlížeči a zkontrolujte,
          že nemáte v textu obsahové chyby. Je v pořádku, že stránka vypadá
          zatím stroze: V příštím týdnu se z ošklivého káčátka vyklube labuť!
    \item Zkontrolujte
          \href{https://sojka.pages.fi.muni.cz/PB029_web/practices/xml/\#validace}{nástrojem \texttt{xmllint}},
          že je vaše webová stránka dobře utvořený \textsc{xml} dokument.
  \end{itemize}

  \newpage
  \definecolor{saffron}{HTML}{FFB200}
  \hypersetup{
    pdfborderstyle={/S/U/W 1},
    urlbordercolor=saffron,
  }
  \definecolor{seashell}{HTML}{FFF3E0}
  \pagecolor{seashell}

  \section*{\mdseries PB029: \textsc{(x)html}, \textsc{css} a JavaScript}
  \subsection*{Úvod}
  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
  \href{http://www.fi.muni.cz/lemma/PB029/practices/html#html}{\textsc{(x)html}}.
  Zároveň si představíme jazyky
  \href{http://www.fi.muni.cz/lemma/PB029/practices/css-a-javascript#css}{\textsc{css}}
  a \href{http://www.fi.muni.cz/lemma/PB029/practices/css-a-javascript#javascript}{JavaScript},
  pomocí kterých můžeme popsat formu webové stránky a vytvářet interaktivní
  prvky. 

  \subsection*{Další informace}
  K zachycení struktury webových stránek můžeme použít jazyky
  \begin{itemize}
    \item \href{http://www.fi.muni.cz/lemma/PB029/practices/html#html}{\textsc{\texttt <x\texttt >html}} nebo
    \item \href{http://www.fi.muni.cz/lemma/PB029/practices/ruzne-podoby-texu#latex}{TeX}.
  \end{itemize}

  K popisu formy a interaktivních prvků stránek můžeme použít jazyky
  \begin{enumerate}
    \item \href{http://www.fi.muni.cz/lemma/PB029/practices/css-a-javascript#css}{\textsc{css}} nebo
    \item \href{http://www.fi.muni.cz/lemma/PB029/practices/css-a-javascript#javascript}{JavaScript}.
  \end{enumerate}
  
  Zmínka o TeXu \emph{není chyták}. Pomocí balíku
  \href{https://www.tug.org/tex4ht/}{\texttt{tex4ht}} lze vytvářet webové
  stránky a e-booky přímo z TeXových dokumentů. Zkuste si soubor
  \texttt{sample2e.tex} dostupný ve vaší TeXové distribuci zpracovat příkazem
  \texttt{htlatex}.

\end{document}
% Konec dokumentu.
