Vytváříme webové stránky – Texty a barvy (část 2.)

Formátování textu

Minule jsme vytvořili svojí první webovou stránku a naučili jsme se tagy <b>, <u>, <i>, <h1>, <h2>, .. <h7>, <br>, <hr>. Nyní bychom se měli věnovat formátování textu a různým zápisům barev v HTML.

[ad code=1 align=center]

Pro výběr písma, velikosti a barvy se V klasickém HTML se používal zápis:

<font face="Arial" size="20" color="Red">Nějaký text</font>

<p><font face="Arial" size="20" color="Red">Nějaký text</font></p>

P je značení pro odstavec (paragraph). Vždy je v textu oddělen, je na samostatném řádku. Namísto Arial můžeme použít třeba Courier New, Times New Roman, Verdana, apod. Ale měli bychom používat standardní nejrozšířenější písma.

Je výhodnější naučit se rovnou modernější zápis, který by se měl spíše používat:

<span style="font-family: Arial; font-size: 20px; color: red;">Nějaký text</span>

<div style="font-family: Arial; font-size: 20px; color: red;">Nějaký text</div>

Co do zobrazení, měly by být oba způsoby ekvivalentní. Druhý způsob je nejjednodušším zápisem s využitím kaskádových stylů (CSS). Ty oddělují obsah stránky od formátování (vzledu), mají více možností a načítání stránek s nimi by mělo být rychlejší. Více o CSS později.

Další formátovací značky pro text, příklady nejpoužívanějších
<sup>horní index</sup>
<sub>dolní index</sub>
<big>zvětšené písmo</big>
<small>zmenšené písmo</small>
<s>přeškrtnutý text</s> – <strike>totéž</strike>
<code>psané neproporciálně (strojopis)</code> – <tt>totéž</tt>
<strong>tučně zvýrazněný text</strong>
<blockquote>Citace a obsazení</blockquote>
<center>Vycetrovaný text – funguje na všechny plošné objekty</center>

Neproporciálně znamená, že každý znak má stejnou šířku. Většinou se používá Courier New.

Entity v HTML

Jak zapsat HTML kód ve zdrojovém kódu HTML stránky? I toto řeší HTML entity. Obecné pravidlo zní, že jakmile lze entitu použít, použijte ji. Dají se zapisovat i číslicemi podle čísla v ASCII tabulce, lze přidávat i diakritiku (&auml; = ä, &ecirc; =  ê). Standardní zápis vybraných entit (je jich ještě více) je zde:

&nbsp;      pevná nedělitelná mezera

&shy;        rozdělovník i spojovník

&copy;      ©

&reg;        ®

&trade;     ™

&quot;       “

&amp;       &

&lt;           <

&gt;           >

&laquo;      «

&raquo;      »

&bdquo;     „

&ldquo;      “

&larr;         ←

&rarr;         →

&sect;         §

&para;        ¶

&plusmn;     ±

&times;       ×

&circ;          ˆ

&tilde;         ˜

&micro;       µ

&Delta;        Δ

&pi;             π

&deg;          °

&permil;      ‰

&brvbar;      ¦

&dagger;      †

&euro;          €

&pound;        £

@bull;           •

Barvíme text
Existuje několik zápisů barev v HTML. Nemusí se barvit jen text, ale také pozadí prvků, ohraničení, apod. (o tom později). Zde je jejich přehled a ke každému příklad.
1. Pojmenované barvy: příklad red
2. Desítkový zápis (též decimální):  obecně RGB(rrr,ggg,bbb), příklad RGB(0,128,255),
3. Procentuální desítkový zápis: RGB(0%,50%,100%), obecně RGB(rrr%,ggg%,bbb%)
4. Šestnáctkový zápis (též hexadecimální): #0080FF, obecně #rrggbb

Barvy se míchají podle složek červené (r), zelené (g) a modré (b). V destíkovém zápisu pro každou složku použijte čísla od 0 do 255, v procentuálním 0% až 100% a v šestnáctkovém 00-99 a dále pak od A0 do FF.
Já osobně doporučuji používat hexadecimální zápis a jde-li to, nahradit ho pojmenovanými barvami.
Pojmenovaných barev je asi 140, ale většinou se uvádí základních 16:
black (černá), grey (šedivá), silver (stříbrná), white (bílá),
red (červená), maroon (rudá), lime (světle zelená), green (zelená), aqua = cyan (tyrkisová), blue (modrá),
pink (růžová), gold (zlatá), yellow (žlutá), olive (tmavě žlutá), fuchsia = magenta (fialová), purple (tmavě fialová)

Desítkový zápis zjistíte jednoduše, jde to i v programu Malování.
Šestnáctkový zápis můžete zjistit ve většině grafických editorů (třeba GIMP).
Ale budete-li šikovní, dá se převést hexadecimální z decimálního zápisu převést,
třeba pomocí programu Kalkulačka (vědecká). Nezapomínejte na znak # (CTRL+ALT+X).

Takže nyní můžete za color psát tyto zápisy barev a barvit si tak text podle Vašich předtav.
Příště jsem plánoval článek o vkládání obrázků a odkazů, ale nakonec jsem se rozhodl ještě navrhnout několik „zlepšováků“, než se pustíme dál.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.