Abych se přiznal, tuto kapitolu jsem vlastně nechtěl přidávat, ale protože jsem dostal pár dopisů, kde byla tato kapitola žádaná, raději jsem něco napsal. Pokud vás zajímá opravdu složitější formátování, musíte si počkat na část příručky, kterou jednou dopíši, zatím musí stačit tato.
Pomocí atributů elementu FONT můžete měnit (mimo jiné) velikost písma. Atribut pro změnu písma je SIZE a jeho hodnotou je absolutní, nebo relativní velikost písma.
Absolutní velikost písma je od jedné do sedmi a větší velikost odpovídá většímu číslu (opačně od číslování nadpisů). Zdrojový kód jedné takové stránky (asi jste již něco podobného viděli tisíckrát, ale nic nového mě nenapadlo, ale hlavně jsem to dělal jako skript v PHP):
<P><FONT SIZE="1">Písmo velikosti 1</FONT></P> <P><FONT SIZE="2">Písmo velikosti 2</FONT></P> <P><FONT SIZE="3">Písmo velikosti 3</FONT></P> <P><FONT SIZE="4">Písmo velikosti 4</FONT></P> <P><FONT SIZE="5">Písmo velikosti 5</FONT></P> <P><FONT SIZE="6">Písmo velikosti 6</FONT></P> <P><FONT SIZE="7">Písmo velikosti 7</FONT></P>
Výstup:
| Písmo velikosti 1 Písmo velikosti 2 Písmo velikosti 3 Písmo velikosti 4 Písmo velikosti 5 Písmo velikosti 6 Písmo velikosti 7 |
Pokud chcete změnit velikost písma jen relativně (vzhledem k okolí), použijte jako hodnotu atributu SIZE znaménko + nebo - a číslo, které bude určovat, o kolik se změní velikost písma vzhledem k okolnímu. Třeba jako v tomto příkladu:
<P><FONT SIZE="2">Normální velikost.</FONT></P> <P><FONT SIZE="+2">Teď je text větší o dvě "jednotky".</FONT></P>
Výstup:
| Normální velikost Teď je text vetší o dvě "jednotky" |
Základní velikost písma je u každého prohlížeče jiná (většinou 2-3, můžete si to zkusit)
Pokud chcete změnit základní velikost písma prohlížeče, můžete použít tag <BASEFONT> a atribut SIZE. Hodnota atributu SIZE zde smí být pouze absolutní. Obecný zápis:
<BASEFONT SIZE="velikost_pisma">
Od velikosti nastavené pomocí BASEFONT se odvozuje výsledná velikost písma s relativním určením velikosti.
Někdy je potřeba změnit způsob zarovnávání textu v prohlížeči. To nám umožní atribut ALIGN. Ten může u textu (stejně jako téměř všude jinde) nabývat tří hodnot - LEFT, RIGHT a CENTER. Bystrý čtenář již dávno ví, co jednotlivé hodnoty znamenají:
LEFT - zarovnání vlevo RIGHT - zarovnání vpravo CENTER - zarovnání doprostřed
Již v předešlé kapitole jsem se zmínil o možnosti opticky rozdělit dokument pomocí čáry, kterou lze vytvořit pomocí tagu <HR>. Tento tag však smí mít několik atributů:
WIDTH - šířka čáry v pixelech / procentech ALIGN - zarovnání čáry NOSHADE - vypne stín SIZE - tloušťka čáry COLOR - barva
Abych byl více názorný, nějaké ty čáry vám ukáži, podívejte se na zdrojový kód příkladu:
<HR> <HR SIZE="1" COLOR="GREEN"> <HR WIDTH="100" ALIGN="LEFT"> <HR WIDTH="300" ALIGN="LEFT" NOSHADE> <HR WIDTH="100%" SIZE="10"> <HR WIDTH = "50%" SIZE="5" COLOR="RED">
Výstup:
V jedné z minulých kapitol jsem popsal, jak lze vytvářet seznamy pomocí elementů UL, OL. Pomocí atributů však můžete částečně ovlivnit vzhled seznamu. U elementu UL a OL je atribut TYPE, u každého elementu má však jiný význam.
Zde hodnotou atributu TYPE můžeme zvolit typ odrážky:
DISC - plné kolečko SQUARE - čtverec CIRCLE - kruh
Náš seznam pro vegetariány:
<UL TYPE=DISC> <LI>Jablka <LI>Hrušky <LI TYPE="CIRCLE">Česnek <LI TYPE="CIRCLE">Cibule <UL>
Výstup:
|
Hodnota atributu TYPE ovlivňuje způsob číslování:
1 - arabské číslice a - malá písmena A - velká písmena i - malé římské číslice I - velké římské číslice
U tagu <OL> lze použít i atribut START, který určuje hodnotu první odrážky.
<OL TYPE="I" START="3"> <LI>8051 <LI TYPE="A">PIC1648 <LI>Z80 <OL>
Výstup:
|
Pokud chcete stránku obohatit o hezké pozadí, můžete místo jednobarevného pozadí určit obrázek, který se použije jako podklad pro celou stránku.
URL obrázku se zapisuje pomocí atributu BACKGROUND elementu BODY.
Osobně nemám obrázky na pozadí příliš rád a pokud obrázek není zvolen opravdu dobře, vadí mi při čtení. Myslím, že nejlepší jsou šedá a nekontrastní pozadí.
<HTML> <HEAD> <TITLE>Stranka s peknym pozadim</TITLE> </HEAD> <BODY BACKGROUND="pozadi.gif"> <H1>Na této stránce je pozadí</H1> </BODY> </HTML>
O formátování by se toho dalo napsat hodně, to co jsem zde popsal jsou opravdové základy, další věci se dočtete na mých stránkách nebo prostě někde jinde.