Už jsme vám ukázali, jak přiřadit pozadí vybranou barvu, ale pozadí stránky může mít také konkrétní vzor, orámování či libovolný podklad.
Protože budete pozadí nastavovat pro celou stránku, použijte příkaz BODY BACKGROUND a dosaďte název podobně jako u obrázků. Příkaz bude vypadat následovně:
<body background="název">
Mezi uvozovky vložíte název obrázku, který chcete použít jako pozadí. Ideální jsou velmi malé obrázky již k tomuto účelu vytvořené, ale lze použít libovolný obrázek s ohledem na obsah, přehlednost a čitelnost stránky. V našem příkladu bylo zvoleno tmavé pozadí se vzorem, jehož zdrojem je obrázek t40.gif.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>krok 8</title>
</head>
<body background="t40.gif">
<font face="Arial, sans-serif" size="4" color="#FFFFFF">
Test tmavého a vkusného pozadí, na které se hodí světlé, nejlépe bílé písmo.
</font>
</body>
</html>
Na adrese http://abc.planeta.cz/krok8.htm je výsledek.
Pozadí můžete využít i jinak. Často jsou na internetu k vidění stránky, které mají vlevo barevný pruh s navigací a vpravo bílou část s informacemi. Jistě vás napadne, že k takovému formátu stránky je zapotřebí rámů. Nemusí tomu tak být, stačí vhodně zkombinovat jednoduché pozadí a tabulku. Pozadí tvoří úzký proužek, který je v levé části barevný a v pravé bílý.
DVOUBAREVNÁ STRÁNKA
Tento podklad se opakuje tolikrát, aby vyplnil celou stránku. Použijte opět příkaz pro pozadí, mezi uvozovky vložte název proužku uloženého jako obrázek. Proužek snadno vyrobíte v libovolném grafickém programu, je třeba ale myslet na šířku barevné části, protože ta bude podkladem pro navigaci.
Samotnou stránku umístěte celou do tabulky, která bude mít v tomto případě jen dvě buňky. Do první vložíte obrázek a navigační odkazy, do druhé nadpis a vlastní text.
<body background="prouzek2.gif">
<table width=700>
<tr>
<!prvni sloupecbarevny>
<td width=200 valign=top>
<div align=center>
<img src="puntik2.gif">
<font face="Arial, sans-serif" size="3" color="#FFFFFF">
<p>O Andy .</font>
</div>
</td>
<!druhy sloupecbily>
<td width=500 valign=top>
<img src="Dalmatinka.gif">
<p>
.text.
</td>
</tr>
</table>
</body>
Musíte použít atribut WIDTH, abyste stanovili stejnou šířku buňky, jakou má barevná část proužku. Ve vašem případě je to 200 bodů, celá tabulka je široká 700, takže na pravý sloupec vychází 500 bodů. Do jednotlivých buněk tabulky vložíte obsah stránky, je-li potřeba, lze vnořit další tabulky. V příkladu je vlevo vložen obrázek a pod ním navigace (zatím bez odkazů, ty budou doplněny později) a vpravo je název stránky tvořený také obrázkem. Pak již vkládáte texty a další obsah.
Výsledná stránka je na adrese http://abc.planeta.cz/andy1.htm.
Pro zřetelnější oddělení jednotlivých částí HTML kódu se používají tzv. komentáře, což jsou poznámky, které se nijak neprojeví ve výsledném zobrazení stránky, ale pomohou například při orientaci.
Obecný tvar komentáře:
<!komentář>.
Stránky by měly být přehledné a jednoduché, aby se k nim uživatelé rádi vraceli. Jejich nedílnou součástí by měl být e-mailový kontakt, aby vám mohly být zasílány případné připomínky, doporučení a názory ostatních uživatelů internetu.
