             (lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTML
             příslušného projektu/modulu.
           </p>
           <h1> Automatická filtrace značek </h1>
           <p>
             Cílem tohoto kroku je automaticky odfiltrovat co nejvíce nesmyslů
             ale moc to nepokazit. Objem stránky klesne asi na 1/3. Odtraní se
             skoro všechny formátovací značky a styl.
           </p>
           <ul>
             <li> Spustíme HTML Compress </li>
             <li> Založíme si v něm seznam souborů funkcní <i>File/New</i> </li>
-...
             <li> Provedeme filtraci funkcí <i>Files/Compress</i> (nebo F9, nebo ikonou s bleskem) </li>
             <li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li>
           </ul>
           <p>
             Program nemusíme ukončovat pokud ho budeme potřebovat vícekrát. Pozor je
             třeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor.
             Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze
             dokumentu (pokud jste si to v programu nevypnuli).
           </p>
           <p>
             Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle
             bydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>.
             Soubor <i>MLAB.hce</i> leží zde
             <a href="../../Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce">Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce</a>.
           </p>
           <p>
             Program mi nechtěl fungovat pod omezeným účtem obyčejného uživatele.
             Dá se ale pustit pod výkonějším uživatelem (funkce <i>spustit jako...</i> ).
-...
           <h1> Manuální úklid kódu </h1>
           <h2> Formátování kódu </h2>
           <p>
             Cílem toho kroku je sformátovat kód aby se s ním dobře pracovalo.
             Současně se automaticky vytvoří pomocné lokální styly, které pak půjdou
-...
             <li> Nastavíme kódování na UTF-8 funkcní <i>Formát/UTF-8</i> </li>
             <li> Uložíme funkcí <i>Soubor/Uložit</i> </li>
           </ul>
           <h2> Použití šablony </h2>
           <h2> Použití šablony stránky </h2>
           <p>
             Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy
             například soubor <i>Template.cs.html</i> a provedeme následující úpravy:
           </p>
           <ul>
             <li> Vyplníme název stránky v položce <i>title</i> </li>
             <li> Vyplníme klíčová slova v položce <i>meta name="keywords"</i> </li>
-...
             <li> Opravíme odkaz na PDF verzi dokumentu </li>
             <li> Vezmem text dokumentu od značky <i>h1</i> a nahradíme jím vnitřek vzoru </li>
           </ul>
           <p>
             Po těchto úpravách by měla stránka v zásadě fungovat. Měla by mít hlavičku,
             patičku, menu, ikonu a případný odkaz na PDF verzi stránky (pokud jsme jej
-...
           </p>
           <h2> Mauální úpravy </h2>
           <p>
             Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se
             čte zdroják. Někdy je vhodné přesunout některé bloky na jiné místo
-...
             Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou
             samostatně na řádce.
           </p>
     <samp class="Block">&lt;h1&gt; Nadpis &lt;/h1&gt;</samp>
           <p>
             Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do
             samostatného odstavce <i>p</i>.
           </p>
           <h3> Opravy odstavců <i>p</i> </h3>
           <p>
             Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro
             něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud
             ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>,
             <i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená.
           </p>
     <samp class="Block">&lt;p&gt;
       Běžný text odstavce se &lt;i&gt;<i>zvýrazněným textem</i>&lt;/i&gt; uvnitř.
     &lt;/p&gt;</samp>
           <h3> Vyčištění tabulek <i>table</i> </h3>
           <p>
             Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné
             buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo
             buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své
             značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou,
             typicky <i>b</i>. Veškeré formátování by se mělo odstarnit.
             typicky <i>b</i>. Toto dodatečné formátování by se mělo odstarnit.
           </p>
           <p>
             Tabulka by měla mít strukturu
           </p>
-...
             <li> <i>tr</i> řádka tabulky </li>
             <li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li>
           </ul>
     <samp class="Block">&lt;table&gt;
       &lt;tr&gt;
         &lt;th&gt; <i>Popisek 1</i> &lt;/th&gt;
         &lt;th&gt; <i>Popisek 2</i> &lt;/th&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td&gt; Buňka 1 &lt;/td&gt;
         &lt;td&gt; Buňka 2 &lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td colspan="2"&gt; Spojená buňka 3 a 4 &lt;/td&gt;
       &lt;/tr&gt;
     &lt;/table&gt;</samp>
     <table class="Samp">
       <tr>
         <th> Popisek 1 </th>
         <th> Popisek 2 </th>
       </tr>
       <tr>
         <td> Buňka 1 </td>
         <td> Buňka 2 </td>
       </tr>
       <tr>
         <td colspan="2"> Spojená buňka 3 a 4 </td>
       </tr>
     </table>
           <p>
             Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není
             potřeba značka <i>p</i>.
           </p>
           <p>
             Pro změnu chování se dají použít příslušné atributy <i>class</i>,
             například <i>class="Center"</i>. Viz návod k použití kaskádového stylu.
           </p>
           <h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3>
           <p>
             U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme
             <i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku
             odstraníme.
           </p>
           <p>
             Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a
             podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce
             vzniklé spojením 2 buněk <i>colspan="2"</i>.
           </p>
           <p>
             Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i>
             a <i>Hodnota</i> doplníme celou řádku s těmito popisy.
           </p>
     <samp class="Block">&lt;table class="Soupiska"&gt;
       &lt;tr&gt;
         &lt;th&gt; <i>Reference</i> &lt;/th&gt;
         &lt;th&gt; <i>Hodnota</i> &lt;/th&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th colspan="2"&gt; Odpory &lt;/th&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td&gt; R1 &lt;/td&gt;
         &lt;td&gt; 10k &lt;/td&gt;
       &lt;/tr&gt;
     &lt;/table&gt;</samp>
     <table class="Soupiska Samp">
       <tr>
         <th> Reference </th>
         <th> Hodnota </th>
       </tr>
       <tr>
         <th colspan="2"> Odpory </th>
       </tr>
       <tr>
         <td> R1 </td>
         <td> 10k </td>
       </tr>
     </table>
           <h3> Oprava obrázků <i>img</i> </h3>
           <p>
       Přejmenovat adresář s obrázky.
             Nejprve přejemenujeme adresář s obrázky na jméno <i>Pictures</i>.
             Původní název je totožný se jménem stránky a bývá velmi dlouhý.
           </p>
           <p>
             Obrázek musí mít tyto atributy:
           </p>
           <ul>
             <li> <i>width</i> určuje šířku obrázku (v pixelech) </li>
             <li> <i>height</i> určuje výšku obrázku (v pixelech) </li>
             <li> <i>src</i> určuje cestu k obrázku </li>
             <li> <i>alt</i> určuje alternativní text k obrázku (povinné!) </li>
           </ul>
           <p>
             Například:
           </p>
     <samp class="Block">&lt;img width=228 height=160 src="Pictures/image002.jpg"
     alt="Alternativní popis"&gt;</samp>
           <p>
           <h4> Obrázky s popiskami </h4>
           <p>
     Obrázky s popiskami generují
             Obrázky s popiskami vnikají tak, že se v editoru (Word) vloží obrázek
             a ten se opatří textovými poli s ukazateli. Výsledný HTML kód pak
             obsahuje obrázek a přes něj tabulku s přesně danými rozměry a v této
             tabulce jsou umístěny (jen v některých buňkách) dílčí obrázky.
           </p>
           <p>
             Princip položení vektorové grafiky přes JPG obrázek není v zásadě
             chybný ale nežádoucí je to, že jsou dílčí obrázky umístěny v tabulce.
             Řešení spočívá v tom, že se odstraní tabulka a ponechají se jen obrázky
             a do dokumentu (těsně před značku <i>/head</i>) se doplní styl pro
             individuální umístění jednotlivých dílčích vetorových obrázků.
             Souřadnice se sice dají spočítat ale je snazší doladit je dle
             zobrazeného výsledku.
           </p>
           <p>
             Takhle bude vypadat příslušný kousek lokálního stylu. Zvýrazněné jsou
             posunutí dílčích obrázků proti hlavnímu obrázku:
           </p>
     <samp class="Block">&lt;style type="text/css"&gt;
     img.<i>Pic1</i>  {position:absolute;margin-left:<i>230px</i>;margin-top:<i>10px</i>; }
     img.<i>Pic2</i>  {position:absolute;margin-left:<i>322px</i>;margin-top:<i>160px</i>; }
     &lt;/style&gt;</samp>
           <p>
             A takhle pak bude v textu umístěn obrázek se dvěma vektorovými obrázky
             umístěnými nad ním:
           </p>
     <samp class="Block">&lt;p&gt;
       &lt;!-- Vektorová grafika --&gt;
       &lt;img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif"
        alt="Vektorový popisek 1"&gt;
       &lt;img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif"
        alt="Vektorový popisek 2"&gt;
       &lt;!-- Podkladový obrázek --&gt;
       &lt;img width="605" height="454" src="Pictures/MainPicture.jpg"
        alt="Obrázek s popiskami"&gt;
     &lt;/p&gt;</samp>
         </div>
         <!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE -->

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
     <html>
       <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title> Nástroje </title>
         <meta name="keywords" content="stavebnice MLAB používané nástroje">
         <meta name="description" content="Projekt MLAB, Používané nástroje">
         <!-- AUTOINCLUDE START "Page/Head.cs.ihtml" DO NOT REMOVE -->
         <link rel="StyleSheet" href="../../Web/CSS/MLAB.css" type="text/css" title="MLAB základní styl">
         <link rel="shortcut icon" type="image/x-icon" href="../../Web/PIC/MLAB.ico">
         <script type="text/javascript" src="../../Web/JS/MLAB_Menu.js"></script>
         <!-- AUTOINCLUDE END -->
       </head>
       <body lang="cs">
         <!-- AUTOINCLUDE START "Page/Header.cs.ihtml" DO NOT REMOVE -->
         <!-- ============== HLAVICKA ============== -->
         <div class="Header">
           <script type="text/javascript">
           <!--
             SetRelativePath("../../");
             DrawHeader();
           // -->
           </script>
           <noscript>
             <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
           </noscript>
         </div>
         <!-- AUTOINCLUDE END -->
         <!-- AUTOINCLUDE START "Page/Menu.cs.ihtml" DO NOT REMOVE -->
         <!-- ============== MENU ============== -->
         <div class="Menu">
           <script type="text/javascript">
           <!--
             SetRelativePath("../../");
             DrawMenu();
           // -->
           </script>
           <noscript>
             <p><b> Pro zobrazení (vložení) menu je potřeba JavaScript </b></p>
           </noscript>
         </div>
         <!-- AUTOINCLUDE END -->
         <!-- ============== TEXT ============== -->
         <div class="Text">
           <p class="Title">
             Používané nástroje
           </p>
           <p class=Autor>
             Milan Horkel
           </p>
           <p class="Subtitle">
             Zde jsou na jednom místě uvedeny nástroje, které při své práci
             používáme.
           </p>
           <h1> Nástroje pro HTML </h1>
           <h2> HTML Compress</h2>
           <p>
             <a href="http://www.freesoft.fsnet.co.uk/html01.htm">http://www.freesoft.fsnet.co.uk/html01.htm</a>
           </p>
           <p>
             <i> Freeware. </i>
             Nástroj souží pro čištění HTML kódu. Umožňuje definici vlastních
             předpisů pro filtrování HTML značek. Momentálně používáme verzi 5.5.
             Jak se používá pro vyčištění kódu z programu MS Word je napsáno
             v článku o převodu <a href="DOC2HTML.cs.html">DOC na HTML</a>.
           </p>
           <h2> PSPad </h2>
           <p>
             <a href="http://www.pspad.com">http://www.pspad.com</a>
           </p>
           <p>
             <i> Freeware. </i>
             Univerzální programátorský editor se silnou podporou práce s HTML
             (čištění a formátování kódu).
           </p>
         </div>
         <!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE -->
         <!-- ============== PATIČKA ============== -->
         <div class="Footer">
           <script type="text/javascript">
           <!--
             SetRelativePath("../../");
             DrawFooter();
           // -->
           </script>
           <noscript>
             <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
           </noscript>
         </div>
         <!-- AUTOINCLUDE END -->
       </body>
     </html>

         img.Pic11 {position:absolute;margin-left:10px;margin-top:125px; }
         img.Pic12 {position:absolute;margin-left:128px;margin-top:5px; }
         </style>
       </head>
       <body lang="cs">
-...
             <img class="Pic4" width="323" height="234" src="Pictures/image004.gif"
              alt="Čárový popisek 2: Procesor a IR přijímač">
             <!-- Podkladový obrázek -->
             <img class="Pic0" width="605" height="454" src="Pictures/image005.jpg"
             <img width="605" height="454" src="Pictures/image005.jpg"
              alt="Obrázek robota">
           </p>

     /*
     Pro tisk se nesmí použít pozicování fixed protože to by vedlo k překrývání
     textu hlavičkou a patičkou na dalších stránkách.
     (možná řešitelné pomocí z-order)
     Pro tisk je vhodné vypnout menu.
     připojení:
-...
       background:      lightgrey;         /* zvýraznění barvou pozadí */
+    }
     samp.Block {                          /* pro ukázky souvislých bloků kódu */
       display:             table;         /* je to blok široký dle obsahu */
       _display:            block;         /* IE6 blok ale široký přes celou stránku */
       white-space:           pre;         /* dodrž formátování */
       margin-left:           2em;         /* odsazení bloku*/
       padding:             0.5ex;         /* vnitřní okraj */
+    }
     .Samp {                               /* k odlišení příkladů HTML objektů */
       margin-left:           2em;         /* odsazení bloku jako u samp*/
+    }
     /* První slovo má první písmeno zvýrazněné */
     .FirstWord:first-letter {
       color:           red;               /* zvýraznné první písmeno */

Web/Articles.cs.html
62	62	Automatické generování přehledu ještě není napsané. Tak je tady jen statický seznam jako návnada.
63	63	</p>
64	64	<p>
	65	<a href="../Articles/HowTo/Tools.cs.html">Používané nástroje</a><br>
65	66	<a href="../Articles/HowTo/DOC2HTML.cs.html">Návod pro převod DOC na HTML</a><br>
66	67	</p>
67	68	<p>