Převod DOC na HTML

Milan Horkel

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

Stránka vzniká jak konvertuji další stránky do HTML.

Úvodem

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.

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

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

Export dat z programu Word

Cílem tohoto kroku je získat hrubá HTML data stránky.

• Otevřít dokument v programu Word
• Uložit jako zjednodušený HTML
• Zavřít Word

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.

Automatická filtrace značek

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.

• Spustíme HTML Compress
• Založíme si v něm seznam souborů funkcní File/New
• Do seznamu přidáme náš HTML soubor funkcí Edit/Add a vybereme ho
• Nastavíme šablonu MLAB funkcí View/Optimisation rozsvítme volbu Optimisation a zvolíme Optimisation MLAB
• Provedeme filtraci funkcí Files/Compress (nebo F9, nebo ikonou s bleskem)
• Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili

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ři instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle bydlí v adresáři "C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce". Soubor MLAB.hce leží zde MLAB.hce.

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

Manuální úklid kódu

Formátování kódu

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.

• Spustíme editor PSPad a otevřeme soubor
• Převedeme formátování na styly funkcí HTML/TiDy/TiDy Upgrade to CSS
• Zarovnáme na šířku stránky funkcí HTML/TiDy/TiDy clean Document - Wrap
• Nastavíme kódování na UTF-8 funkcní Formát/UTF-8
• Uložíme funkcí Soubor/Uložit

Použití šablony stránky

Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy například soubor Template.cs.html a provedeme následující úpravy:

• Vyplníme název stránky v položce title
• Vyplníme klíčová slova v položce meta name="keywords"
• Vyplníme popis stránky v položce meta name="description"
• Opravíme relativní cesty ../../, celkem asi 7x
• Přendáme název stránky do značky p class="Title"
• Přendáme jméno autora do značky p class=Autor
• Přendáme anotaci do značky p class="Subtitle"
• Přendáme titulní obrázek do dalšího odstavce typu p class="Subtitle"
• Opravíme odkaz na PDF verzi dokumentu
• Vezmem text dokumentu od značky h1 a nahradíme jím vnitřek vzoru

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.

Mauální úpravy

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

Opravy nadpisů h

Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou samostatně na řádce.

<h1> Nadpis </h1>

Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do samostatného odstavce p.

Opravy odstavců p

Občas se stane, že se nějaký text ocitne mimo značku p. 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, em, b. Značka u není dovolená.

<p> Běžný text odstavce se <i>zvýrazněným textem</i> uvnitř. </p>

Vyčištění tabulek table

Z tabulek je třeba odstranit nadbytečné značky p a významné buňky tabulky (například záhlaví) převést na buňky typu th místo buněk typu td. Významné buňky obvykle mají buď atributy ve své značce p nebo jsou ohraničené některou zvýrazňující značkou, typicky b. Toto dodatečné formátování by se mělo odstarnit.

Tabulka by měla mít strukturu

• table tabulka
• tr řádka tabulky
• th buňka významná nebo td buňka obyčejná

<table> <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>

Popisek 1	Popisek 2
Buňka 1	Buňka 2
Spojená buňka 3 a 4

Uvnitř buňek se dá použít br ale v obyčejných tabulkách není potřeba značka p.

Pro změnu chování se dají použít příslušné atributy class, například class="Center". Viz návod k použití kaskádového stylu.

Vyčištění seznamu součástí table class="Soupiska"

U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme class="Soupiska" a pokd je tabulka v tabulce tak vnější tabulku odstraníme.

Podnadpisy v seznamu součástek (typicky texty jako odpory a podobně) označíme také značkou th. Tyto texty by měly být v buňce vzniklé spojením 2 buněk colspan="2".

Pokud není první řádka seznamu součástek opatřena popisy Reference a Hodnota doplníme celou řádku s těmito popisy.

<table class="Soupiska"> <tr> <th> Reference </th> <th> Hodnota </th> </tr> <tr> <th colspan="2"> Odpory </th> </tr> <tr> <td> R1 </td> <td> 10k </td> </tr> </table>

Reference	Hodnota
Odpory
R1	10k

Oprava obrázků img

Nejprve přejemenujeme adresář s obrázky na jméno Pictures. Původní název je totožný se jménem stránky a bývá velmi dlouhý.

Obrázek musí mít tyto atributy:

• width určuje šířku obrázku (v pixelech)
• height určuje výšku obrázku (v pixelech)
• src určuje cestu k obrázku
• alt určuje alternativní text k obrázku (povinné!)

Například:

<img width=228 height=160 src="Pictures/image002.jpg" alt="Alternativní popis">

Obrázky s popiskami

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.

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

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:

<style type="text/css"> img.Pic1 {position:absolute;margin-left:230px;margin-top:10px; } img.Pic2 {position:absolute;margin-left:322px;margin-top:160px; } </style>

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> <!-- Vektorová grafika --> <img class="Pic1" width="331" height="123" src="Pictures/image001.gif" alt="Vektorový popisek 1"> <img class="Pic2" width="243" height="101" src="Pictures/image002.gif" alt="Vektorový popisek 2"> <!-- Podkladový obrázek --> <img width="605" height="454" src="Pictures/MainPicture.jpg" alt="Obrázek s popiskami"> </p>