HaTMatiLka
Lekce 7
Lekce Vzhled stránky

Jestli bude stránka hezká (a často navštěvovaná), o tom rozhoduje především její celková úprava. Není nic platné, že autor dokonale ovládá jazyk HaTMatiLky, pokud má mizerný vkus a na stránku naplácá všechno, co se naučil či někde okoukal.

Vkusu nikoho nenaučím, ostatně, ode mne by se daly snadno pochytit všelijaké chyby. Je však důležité naučit se nejdříve přemýšlet, jak má stránka vypadat a teprve poté se pustit do její výroby.

Tabulky (viz minulá lekce) jsou poměrně mocným nástrojem v rukou toho, kdo s nimi umí zacházet, kdo má bohatou fantazii a kus papíru při ruce. Uvádím tu několik příkladů použití tabulek k formátování stránky.

Vložený článek Vložený článek

Pomocí tabulky je možné do dokumentu vkládat články, ukázky či poznámky. Tento postup je ostatně dobře známý z časopisů (papírových :-) a novin.

Princip je poměrně jednoduchý: na zvolené místo v textu se vloží tabulka, skládající se z jediného řádku a jediného sloupce; do ní se pak zapíše celý text vloženého článku.

Příklad
                    
Původní text.

<Table align="right">
<tr><td>

--- Vložený text. ---

</td></tr>
</table>

Pokračování původního textu.
vokaž

Při vkládání článků je zapotřebí si uvědomit dvě věci:

Za prvé — obtékání tabulek není zaručeno. Funguje jen tehdy, když uvedete parametr align="xxx", jinak ne. Pokud by však prohlížeč důsledně dodržoval normu HaTMatiLky, žádné obtékání textu by se nekonalo. (Naštěstí takový prohlížeč neznám.)

Za druhé — vložený článek musí být dostatečně krátký. Též je dobré parametrem width="nn" tagu <Table> upravit šířku tak, aby nebyla větší, než padesát procent. (Výjimky připouštím.) Pokud neodhadnete délku vloženého článku, snadno se stane, že „přeteče” pod hlavní text a nevzhledně tam čouhá. Bohužel, nikdo neví, co s tím udělá prohlížeč toho, kdo stránku čte.

Sloupce Sloupce

Především musím zdůraznit, že Internet nejsou noviny. Sloupce v novinách vznikly předenším proto, že příliš dlouhé řádky se špatně četly: když jste došli na konec, těžko jste hledali pokračování. Navíc se stávalo, že krátké odstavce ani celou šíři stránky nezaplnily. Podotýkám, že tenktát měly noviny plochu mnohem větší — zvlášť ve srovnání s monitorem.

Používání sloupců se tedy může zdát zbytečným. Přesto má své oprávnění. Například tehdy, když potřebujete uvést seznam odkazů na příbuzné stránky. Nejlepší je, aby byly pohromadě, například u pravého okraje. (Kdo nevíte o čem mluvím, podívejte se nahoru, na začátek této stránky.)

Tvorba sloupce je velmi podobná vkládání článku. Tentokrát jsou však v tabulce oba texty: hlavní i ten ve sloupečku. Je vhodné zadat šířku sloupce parametrem width="nn".

Příklad
                    
<Table align="right" width="100%">
<tr>
<td>

--- Hlavní text. ---
Dlouhý a zajímavý text.
První sloupec (levý).

</td>
<td width="10%">

Pravý sloupec.
Odkazy,
obsah…

</td>
</tr>
</table>
vokaž

Při používání sloupců je potřeba dát si pozor na délky textu. Typický sloupec, který „přetéká” ze spodní části jednoho slupce do horní části dalšího, aniž by se o to autor staral, neexistuje. Jak jsem řekl — Internet nejsou noviny.

Nadpisy a titulky Nadpisy a titulky

Již dříve jsem se zmiňoval o problému obrázků okolo titulku (jeden zprava, jeden zleva). Někdy prostě kousek spadnou a nejsou stejně vysoko.

Tento problém je snadno řešitelný pomocí tabulek. Prostě se vytvoří tabulka o jednom řádku a třech sloupcích — v prvním a třetím budou obrázky, prostřední zůstane vyhrazený titulku:

Příklad
                    
<Table width="100%"><tr>
 <td align="center"><img src="L-07-06.Gif"></td>
 <td align="center">
   <font size="+4" color="0000AA">
     Pohádka
   </font>
 </td>
 <td align="center"><img src="L-07-06.Gif"></td>
</tr></table>
vokaž

Všimněte si, že všude je uvedeno align="center", aby se obrázky v políčku zarovnaly. Pokud by to tu uvedeno nebylo, zůstaly by vlevo a celý titulek by byl „šejdrem”.

V některých případech je vhodné podbarvit text. Například zvýraznit nadpis další části dokumentu. I to se dá udělat pomocí tabulky.

Vlastně jde o stejný postup, jako u vloženého článku. Jen šířka tabulky bude 100%. A samozřejmě jest dobré změnit barvu pozadí a barvu písma — ať to stojí za to.

Příklad
                    
<Table width="100%"><tr><td bgcolor="0000AA">
<font size="+1" color="FFFF00">Poznámka</font>
</td></tr></table>
vokaž

Samozřejmě, že podbarvení lze použít nejen v titulku.

Obtékání obrázku Obtékání obrázku

HaTMatiLka normálně neumožňuje obtékat obrázek z obou stran. Trochu to chybí. Ale existuje cesta, jak to (alespoň částečně) nahradit. Samozřejmě — tabulka.

Text, do nějž chceme obrázek vložit, je potřeba rozdělit na několik částí. Předně je nutné odhadnout, jak velá část textu bude vedle obrázku. Vše, co je před touto částí nebo za touto částí, zůstane tak, jak je.

Blok, ve kterém má být obrázek vložen, rozdělíme na dvě poloviny. Vytvoříme tabulku o jednom řádku a třech sloupcích. Levý (první) sloupec bude obsahovat první část textu, v prostředním bude obrázek a v pravém zbytek.

Příklad
                    
První část textu.
<Table width="100%"><tr>
<td>

Pokračování v levém sloupci…

</td><td width="70">
 <img src="L-07-06.Gif" width="64" height="64">
</td><td>

Pokračování v pravém sloupci…

</td>
</tr></table>
Zbytek textu.
vokaž

Bohužel, toto „obtékání” je poněkud jiné, než na jaké jsme zvyklí. Pokud by někdo toužil po „klasickém” způsobu, kdy text přechází v každém řádku z  jedné strany obrázku na druhou, musel by vše sám ručně formátovat a doufat, že nějaký drzý browser jeho výtvor „nesestřelí”.
Ačkoliv: pokud tím obrázkem bude tenká svislá čára, vznikne typický novinový sloupec s linkou.

„Filmové” titulky „Filmové” titulky

Přiznám se, že využití tohoto efektu je dost samoúčelné. Jenže se mi strašně líbí titulky na konci filmů a tak jsem hleděl, jak něco takového vyrobit v HaTMatiLce.

Pokud se nad tím člověk zamyslí, zjistí, že jde o tabulku o dvou sloupcích a tolika řádcích, kolik je různých nadpisů (funkcí…). Levý sloupec je zarovnán doprava, pravý doleva. (Jasný?)

Příklad
                    
<Table width="100%">
 <tr>
  <td width="50%" align="right" valign="top">
Text
  </td>
  <td width="50%" align="left" valign="top">
Robert R. Šimek
  </td>
 </tr>
 <tr>
  <td width="50%" align="right" valign="top">
Obrázky
  </td>
  <td width="50%" align="left" valign="top">
Robert R. Šimek<br>
<i>Internet</i>
  </td>
 </tr>
</table>
vokaž

Přestože je tabulka 100% široká, doporučuji celou ji vycentrovat. Jinak se může docela snadno stát, že bude kousek posunutá. Též doporučuji v <Body> uvést parametr LeftMargin="0", aby se tabulka přirazila až k okraji — jinak bude skutečně „šejdrem”.
(Je lepší na prohlížeče nespoléhat.)


Neříkal jsem, že základem dobré stránky je dobře formátovaná tabulka?

Obsah  
Lekce 1
Lekce 2
Lekce 3
Lekce 4
Lekce 5
Lekce 6

vzhled stránky
vložený text
sloupec
nadpisy
obtékání
filmové titulky

Lekce 8
Lekce 9
Lekce 10
Lekce 11
Lekce 12

 Lekce 8
© Robert R. Šimek, 1997