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, Červené písmo, Jak, Velikost, Slovní označení, Barevný text, Aqua, Olive, Purple, Str, Díl, RRGGBB, Stráň, Nainstalované písmo, Přesný tvar, Software na Heureka.cz



Konec českého poskytovatele internetu v přímém přenosu. Připomíná to krachující energetické firmy
Lukáš Václavík
CETINPoskytovatelé internetuPřipojení k internetu
Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

** Google umí kromě vyhledávání i spoustu dalších věcí ** Vybrali jsme více než 15 užitečných funkcí a schopností ** Stačí zadat do vyhledávače ta správná klíčová slova

Karel Kilián
TipyVyhledávačeGoogle
Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

** Dnešní telefony se předhánějí v tom, který z nich bude větší ** Malé telefony na trhu skoro vyhynuly... ** Čínská značka si připravila telefon do dlaně s třípalcovým displejem

Martin Chroust
InfraportKompaktní velikostSmartphony
Vyzkoušeli jsme levnou autodiagnostiku s Androidem. Servisy ohrnou nos, řidičům bude stačit

Vyzkoušeli jsme levnou autodiagnostiku s Androidem. Servisy ohrnou nos, řidičům bude stačit

** Smartphone s Androidem dnes využijete i pro autodiagnostiku ** Jednotku OBD-II dnes pořídíte za pár stovek ** Co se vše dokáže diagnostika s bezplatným SW v češtině?

Martin Chroust
DiagnostikaPro řidiče
Vědci zkoumali přesnost měření stavby těla u hodinek od Samsungu. Výsledky všechny překvapily

Vědci zkoumali přesnost měření stavby těla u hodinek od Samsungu. Výsledky všechny překvapily

** Chytré hodinky běžně bereme jako informativní měřidla ** Jak si však stojí ve srovnání s profesionálními měřiči ** Při měření stavby těla se na hodinky můžete spolehnout

Martin Chroust
Galaxy Watch4Měření
Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

** Bylo to jen otázkou času ** Už i WhatsApp nabízí prémiové předplatné ** Za poplatek dostanete funkci, která je u konkurence zadarmo

Martin Chroust
předplatnéWhatsAppMobilní aplikace
10 nejpovedenějších mobilů za posledních 10 let. Vzpomínáme na srdcovky, kterých jsme se nechtěli vzdát

10 nejpovedenějších mobilů za posledních 10 let. Vzpomínáme na srdcovky, kterých jsme se nechtěli vzdát

** Výrobci dnes na trh chrlí jeden telefon za druhým ** V nepřeberné šedi ale tu a tam vyčnívají mobilní perly ** Vzpomeňte s námi na telefony, které jste dlouho nechtěli odložit

Martin Chroust
LegendyHistorieSmartphony
Šedý trh s předplatným se vymyká kontrole. Spotify, Netflix nebo Disney+ můžete mít doslova za pár korun

Šedý trh s předplatným se vymyká kontrole. Spotify, Netflix nebo Disney+ můžete mít doslova za pár korun

** Sdílení účtů mezi kamarády je jen začátek ** Dnes letí nákupy předplatných v Indii nebo na Aliexpressu ** Superlevné „netflixy“ ale mohou nakonec spíš škodit

Lukáš Václavík
PředplatnéNetflixSpotify