<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> DOC 2 HTML </title>
    <meta name="keywords" content="stavebnice MLAB převod Word DOC HTML">
    <meta name="description" content="Projekt MLAB, Převod Word dokumentu na HTML">
    <!-- 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="StyleSheet" href="../../Web/CSS/MLAB_Print.css" type="text/css" media="print">
    <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">
        Převod DOC na HTML
      </p>
      <p class=Autor>
        Milan Horkel
      </p>
      <p class="Subtitle">
        Převod dokumentu z programu Word do HTML nelze plně zautomatizovat protože
        kvalita podkladu obvykle není dostatečná. Proces převodu lze však celkem
        úspěšně zjednodušit a na uživatele zbydou pouze drobné opravné práce.
        Podstatou převodu je odstranění všech formátovacích značek a vyčištění
        kódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádových
        stylů.
      </p>

      <p class="Remark">
        Stránka vzniká jak konvertuji další stránky do HTML.
      </p>

      <h1> Úvodem </h1>

      <p>
        Základním problémem převodu je to, že program Word umožňuje uživateli
        vkládat do textu spustu formátovacích povelů, které pak nejsou viditelné
        a v programu Word se tedy ani nedají odstranit. Bohužel nelze uživatele
        omezit pouze na elementy definované v šabloně dokumentu a ani nelze
        nadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly.
      </p>

      <p>
        Druhý problém vzniká tím, že uživatelé používají Word nejen jako editor
        ale i jako lámací program (protože potřebují aby se výsledek vytiskl dle
        jejich představ). Tak se do dokumentu dostávají různé fixní mezery,
        lámání stránek a podobné věci. Pokud není autor zvíře, bývá v dokumentu
        těchto speciálností jen pár a není problém je odstranit.
        Umístění obrázků we Wordu je kapitola sama pro sebe. V HTML se obvykle
        umísťují obrázky do samostatných odstavců. Příslušné úpravy nejsou
        obtížné.
      </p>

      <p>
        Základem úspěchu je použití jednoduché šablony, příliš neformátovat
        dokument explicitními nastaveními a už vůbec ne tabulkami (nebo dokonce
        tabulkami v tabulkách).
      </p>

      <h1> Export dat z programu Word </h1>

      <p>
        Cílem tohoto kroku je získat hrubá HTML data stránky.
      </p>

      <ul>
        <li> Otevřít dokument v programu Word </li>
        <li> Uložit jako zjednodušený HTML </li>
        <li> Zavřít Word </li>
      </ul>

      <p>
        Při ukládání doplníme příponu tak, aby byla ve tvaru XXX.lang.html
        (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> Do seznamu přidáme náš HTML soubor funkcí <i>Edit/Add</i> a vybereme ho </li>
        <li> Nastavíme šablonu MLAB funkcí <i>View/Optimisation</i> rozsvítme volbu <i>Optimisation</i> a zvolíme <i>Optimisation MLAB</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> ).
      </p>

      <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
        snadno zahodit. V tomto kroku přejme na kódování UTF-8.
      </p>

      <ul>
        <li> Spustíme editor PSPad a otevřeme soubor </li>
        <li> Převedeme formátování na styly funkcí <i>HTML/TiDy/TiDy Upgrade to CSS</i> </li>
        <li> Zarovnáme na šířku stránky funkcí <i>HTML/TiDy/TiDy clean Document - Wrap</i> </li>
        <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 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> Vyplníme popis stránky v položce <i>meta name="description"</i> </li>
        <li> Opravíme relativní cesty <i>../../</i>, celkem asi 7x </li>
        <li> Přendáme název stránky do značky <i>p class="Title"</i> </li>
        <li> Přendáme jméno autora do značky <i>p class=Autor</i> </li>
        <li> Přendáme anotaci do značky <i>p class="Subtitle"</i> </li>
        <li> Přendáme titulní obrázek do dalšího odstavce typu <i>p class="Subtitle"</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
        nesmazali) by měl taky fungovat.
      </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
        (například pokud byly schémata z důvodu rozvržení tisku umístěny na
        jiném místě než text, který se k nim vztahuje).
      </p>

      <h3> Opravy nadpisů <i>h</i> </h3>

      <p>
        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>. Toto dodatečné formátování by se mělo odstarnit.
      </p>

      <p>
        Tabulka by měla mít strukturu
      </p>

      <ul>
        <li> <i>table</i> tabulka </li>
        <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>
        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 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 -->
    <!-- ============== 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>