Jak vytvářet www stránky - 9. díl

Pokud náš seriál sledujete od začátku, pak umíte tučné písmo, kurzívu, podtržené písmo a sedm dalších typů formátování. Jak ale například udělat barevný text, text určité velikosti, nebo text, který je napsán jiným než standardním písmem?
Ve čtvrtém díle jsme si pověděli něco málo o formátování písma v HTML dokumentech. Pokud náš seriál sledujete od začátku, pak umíte tučné písmo, kurzívu, podtržené písmo a sedm dalších typů formátování. Jak ale například udělat barevný text, text určité velikosti, nebo text, který je napsán jiným než standardním písmem? To umožňuje párový tag FONT, kterému věnujeme dnešní díl našeho seriálu.

Barva písma

Barvu písma určujeme parametrem COLOR, který může mít hodnotu v hexadecimálním tvaru (#rrggbb), nebo lze použít slovní označení. Barva se definuje stejně, jako barva pozadí stránky, což jsme si vysvětlovali ve třetím díle. Pro připomenutí si ale toto téma stručně zopakujeme:

Definování barvy názvem

Podporováno je následujících šestnáct barev:
PojmenováníHexadecimálněSlovemUkázka
Černá#000000BLACK 
Červená#FF0000RED 
Žlutozelená#00FF00LIME 
Žlutá#FFFF00YELLOW 
Modrá#0000FFBLUE 
Fuchsiová#FF00FFFUCHSIA 
Tyrkysová#00FFFFAQUA 
Bílá#FFFFFFWHITE 
Kaštanová#800000MAROON 
Zelená#008000GREEN 
Olivová#808000OLIVE 
Námořnická modrá#000080NAVY 
Tmavě fialová#800080PURPLE 
Šedozelená#008080TEAL 
Tmavě šedá#808080GRAY 
Stříbrná#C0C0C0SILVER 

Definování barvy hexadecimálně

Barvu definujeme pomocí hexadecimálního zápisu #rrggbb, který určuje poměr základních barev (červená-zelená-modrá). Pro každou barvu jsou určena dvě místa, takže celkem lze tímto způsobem definovat 16'581'375 barev.

Příklad:

Červený text tedy uvedeme tagem FONT s parametrem COLOR a hodnotou red, nebo #FF0000. V praxi to může vypadat následovně:

Toto je ukázka <FONT COLOR="red">červeného textu</FONT>

a zde vidíte výsledek

Toto je ukázka červeného textu

Nezapomínejte, že příliš mnoho barev písma na stránce návštěvníka rozptyluje, proto dávejte pozor, aby barev nebylo moc a aby se písmo dobře četlo. Berte ohled i na barvu pozadí - tmavě modré písmo se na černém pozadí nečte zrovna nejlépe...

Velikost písma

Dalším parametrem SIZE lze měnit velikost písma. Je možné použít několik způsobů, jak velikost písma definovat:

  1. Absolutní určení velikosti

    v tomto případě použijete jako hodnotu číslo mezi 1 a 7 (číslo 3 odpovídá standardní velikosti)

  2. Relativní určení velikosti

    velikost písma určujeme vzhledem k velikosti standardního textu. Znaménko + znamená, že písmo je větší než text standardní velikosti, znaménko - pak samozřejmě označuje písmo menší než standardní text. Použijeme-li například parametr SIZE=+1, bude text uvnitř tagu FONT o jeden stupeň větší, než základní písmo. Při relativním určení velikosti smí parametr SIZE nabývat hodnot od -7 do +7.
Příklad:

Toto je normální písmo a <FONT SIZE=5>toto je písmo o velikosti 5</FONT>

výsledek vypadá takto:

Toto je normální písmo a toto je písmo o velikosti 5

Pokud použijete relativní určení velikosti, bude vše vypadat podobně:

Toto je normální písmo a <FONT SIZE=+2>toto je písmo o dva stupně větší</FONT>

výsledek vypadá takto:

Toto je normální písmo a toto je písmo o dva stupně větší

Poznámka: Pojmem standardní velikost máme na mysli velikost běžného písma prohlížeče (obvykle 3 nebo 4). Chcete-li změnit tuto hodnotu, použijte tag <BASEFONT SIZE=standardni velikost>. V takovém případě se bude velikost písma určená relativně odvozovat od velikosti uvedené v BASEFONT.

Typ písma

Posledním parametrem tagu FONT je FACE, který určuje font, jímž bude text zobrazen. Hodnotou parametru je název písma, které má být použito (název písma musí být zcela přesný!). Nevýhodou je, že pokud návštěvník vašich stránek nemá příslušné písmo nainstalováno, zobrazí se text standardním fontem, což může v některých případech úplně změnit celé formátování stránky. Tato nežádoucí vlastnost se dá obejít uvedením alternativních písem, která mají být použita v případě, že první uvedené písmo návštěvník nemá (těchto písem je možné uvést neomezené množství, obvykle se uvádějí dvě až čtyři). Každopádně se doporučuje nepoužívat písma, která má nainstalována minoritní skupina uživatelů (např. písma Adobe Type). Pokuste se vystačit s písmy Arial, Times New Roman a Courier.

Příklad:

<FONT FACE="Courier New, Comic Sans MS">Tento text bude zobrazen písmem Courier New. V případě, že návštěvník nemá nainstalované písmo Courier New, bude pro zobrazení použito písmo Comic Sans MS </FONT>.

Výsledek:

Tento text bude zobrazen písmem Courier New. V případě, že návštěvník nemá nainstalované písmo Courier New, bude pro zobrazení použito písmo Comic Sans MS

Tag FONT lze kombinovat s dalšími tagy pro formátování písma, proto můžete například udělat tučné červené písmo.

<B><FONT COLOR="red">Tučné červené písmo</FONT></B>

ukázka:

Tučné červené písmo

Dávejte ale pozor na správné uzavírání tagů (to platí nejen pro tag FONT, ale obecně pro všechny tagy podporující vnořování). Například <B><FONT COLOR="red">Tučné červené písmo</B></FONT> zobrazí sice MS Internet Explorer správně, jedná se však o syntakticky chybný zápis, který mohou jiné prohlížeče interpretovat odlišným způsobem.

Pro dnešek to, myslím, stačilo. V příští lekci se podíváme na velice zajímavé téma - tabulky. Možná se budete sami divit, k čemu se dá tento útvar využít. Do té doby si můžete procvičovat formátování písma.

Diskuze (3) Další článek: Premio P910: první velké P

Témata článku: Software, Prohlížeče, Programování, Internet Explorer, Fuchsia, Díl, Velikost, Červené písmo, Přesný tvar, Aqua, Purple, Barevný text, Olive, Stráň, Nainstalované písmo, Str, Slovní označení, Jak


Určitě si přečtěte

Archivovat data do cloudu, na HDD, SSD, DVD, nebo Blu-ray? Co je nejvýhodnější?

Archivovat data do cloudu, na HDD, SSD, DVD, nebo Blu-ray? Co je nejvýhodnější?

** Kam doma natrvalo uložit data? Vyplatí se ještě optická média? ** Jaké kapacity disků a médií má smysl koupit? ** Cenovou výhodnost si ukážeme na příkladech s 2TB úložištěm

Lukáš Václavík | 118

Lukáš Václavík
ZálohováníÚložištěPevné disky
CZ.NIC bezplatně naděluje USB/NFC klíče. Jak jej získat?
Lukáš Václavík
CZ.NICeGovernment
Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

** V nových mobilech se začíná objevovat tajemná zkratka UWB ** Jde o další technologii, jak navzájem propojit různá zařízení ** Oproti Wi-Fi a Bluetooth má řadu výhod

Lukáš Václavík | 36

Lukáš Václavík
UWBIoTTechnologie
Vodafonu se zhroutila kabelovka. Síť bývalého UPC má výpadky
Lukáš Václavík
VodafoneUPC
Lidl buduje chytrou domácnost, propojí všechno se vším
Lukáš Václavík
LidlChytrá domácnostIoT

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5