Kapitola 4

Úvod do tvorby www stránek
Tvorba www 2
Barvy
Teorie barev
https://www.lg.cvut.cz/Nvody/Teorie%20barev/index.html
https://www.lg.cvut.cz/Nvody/Teorie%20barev/index2.html
Barvy a psychika - jak působí barvy na člověka
http://www.zbynekmlcoch.cz/info/zdravotnicke/barvy_a_psychika_jak_pusobi_barvy_na_clo
veka.html
Působení barev v interiéru II – Vliv barev na člověka
http://www.teluria-barvy.cz/text/cs/pusobeni-barev-v-interieru-ii.aspx
Kódy barev
http://stazie.webz.cz/kody_barev.html
Kontrast barev
http://www.sovavsiti.cz/kontrast
Generátor barev
http://colorschemedesigner.com/
Font
Nastavení barvy, velikosti a fontu písma.
Atribut tagu <font> Význam
Hodnoty
Nahradit stylem
color
barva písma
barva
color
size
velikost, stupeň písma 1 až 7 | +1 | -1 (+-1 až 6))
face
font, druh písma
font-size
jména fontů oddělená čárkami font-family
Příklad
<font color="red" face="Arial, Helvetica"> červené písmo Arialem </font>
U face lze sice zadávat více fontů (pokud není prohlížečem rozpoznán první název, jde
k dalšímu), ale v praxi je nutno zůstat u Arialu (varianty Helvetica, Verdana, Sans-serif),
Timesu (serif) a Courieru (monotype), protože jen u nich je jistota, že budou na klientském
počítači zobrazeny správně a s češtinou. Doporučuje se i přidávání "CE" za název písma.
Je doporučováno: tag <font> nepoužívat (je zastaralý). Lze jej nahradit tagem <span>
s atributem style s definicí CSS stylu nebo s předem definovanou třídou.
Příklad
<span style="color: red; font-family: Arial, Helvetica"> červené písmo Arialem </span>
Size
Velikost písma se v HTML nenastavuje v bodech jako všechny ostatní rozměry, ale ve
stupních. Stupně jsou jakési imaginární jednotky vymyšlené pouze pro účel HTML. Stupňů
písma je sedm. Od vysloveně mrňavého stupně jedna, které se skoro nedá číst, až po velikost
7. Běžné písmo je stupeň číslo 3.
Přesné velikosti písem nejsou nijak konkrétně stanoveny. Uživatel si může písmo zvětšovat a
zmenšovat v prohlížeči. Dělá se to příkazem Zobrazit – Velikost textu. Přesné velikosti písma
lze dosáhnout pouze pomocí CSS.
Kromě přímého nastavení stupně písma se může použít relativní zápis „+“, „–“, např.
size="+1" znamená zvětšení písma o jeden stupeň.
V praxi doporučuji <font size = "..."> vůbec nepoužívat a velikost písma definovat pomocí
CSS stylu font-size.
Na tag <font> si dejte pozor. Nechová se zcela neutrálně (jako se chová <span>), takže když
použijete <font> i třeba bez parametrů, je možné, že písmo přece ovlivní (zejména se to stává
v Exploreru), většinou nějak záhadně.
Parametry tagu body
V tomto případě budou zmíněny pouze základní a nejběžněji používané parametry tagu
BODY. Kompletní výčet normy (x)html a tím i všech parametrů, včetně syntaxe, je možné
najít na www.w3c.org
• bgcolor – barva pozadí stránky,
• text – základní barva používaná pro text,
• link – barva nenavštíveného odkazu, linku,
• vlink (visited link) – barva již navštíveného odkazu, linku,
• alink (active link) – barva aktuálního odkazu, odkazu, jehož cíl je právě otevřen.
Nejsou-li hodnoty pro tyto parametry definovány, jsou použity hodnoty přednastavené ve
vlastnostech prohlížeče. Hodnoty výše zmíněných parametrů mohou být zapisovány
anglickým názvem barvy (základních 16 barev) nebo hexadecimálně. Hexadecimální zápis
umožňuje použití širší palety barev.
Příklad
bgcolor = „white“ nebo
bgcolor = „#FFFFFF“
V obou případech bude pozadí dokumentu nastaveno na bílou barvu.
Barva v PSPadu
Otevře dialog pro výběr barvy (Alt + C)
Panel nástrojů slouží pro výběr barvy.
2
Výběr barvy v paletě zobrazí v dolní části okna kód.
Poklepání na barvě – kód barvy je vložen do editoru na pozici kurzoru.
Procvičení a úkoly
• Vytvořte dokument HTML, který bude obsahovat základní strukturu a zajistí
zobrazení zeleného pozadí, žlutého textu, bílé odkazy aktivní, černé odkazy
navštívené. V titulku stránky bude zapsáno „Moje WWW stránka“.
• Pomocí HTML prostředků vytvořte dokument, ve kterém napíšete své jméno
několikrát pod sebe. Pokaždé použijte jinou velikost a barvu písma.
• Napište pomocí jazyka HTML výrazy pomocí horního a dolního indexu např.: H2SO4,
H2O, 15M3, 3x1 + 12x2, 1330 hod.
Příklad
Soutěž o blog roku na Emag.cz
http://www.info-koktejl.cz/zabava/souteze-a-pr/soutez-o-blog-roku-na-emagcz/
Úkol č. 1 (Moodle)
Vytvořte XHTML dokument. Obsahem bude text, ve kterém použijete různé způsoby
formátování textů, nadpisy několika úrovní, seznam s odrážkami, číslovaný seznam nebo
seznam víceúrovňový. Mezi odstavce vložte prázdné řádky, aby byl text dobře čitelný.
Jako text můžete vytvořit například svůj životopis, životopis známé osobnosti nebo jiný
vhodný text.
Dokument musí být validní dle normy XHTML Transitional.
3