Sova v síti - číslo 1/2 - vydáno 2.4.2001 Dobré ráno! Je zde pondělí a s ním vaše Sova v síti :-) OBSAH -- CSS a velikost písma -- Bezpečné barvy -- Pozor na
 v NN
-- Přidejte na své stránky FAQ
-- Odpovídáme na dotazy čtenářů
-- Články a odkazy pro webmastery jinde na webu


CSS A VELIKOST PÍSMA

Každý tvůrce webových stránek čas od času potřebuje ovlivnit
velikost písma. Jak to však udělat správně? To je problém, se
kterým někdy bojují i zkušení webmasteři. V následujícím článku
se vám pokusím dát alespoň několik základních rad a doporučení.

Při psaní článku jsem hodně čerpal z diskuse, která asi před
měsíce proběhla v emailové konferenci Intervalu.cz. Chtěl bych
tedy hned v úvodu všem účastníkům této diskuse poděkovat za cenné
zkušenosti, náměty a postřehy. Vám ostatním pak tuto konferenci
vřele doporučuji jako skvělý zdroj informací a místo, kam se
kdykoli můžete uchýlit se svými problémy. Informace o konferenci
včetně návodu na přihlášení naleznete na adrese
http://www.interval.cz/konference.asp.

A teď již k vlastnímu tématu. Začneme stručnou rekapitulací
klasických způsobů ovlivňování velikosti písma v HTML.

(1) Nejprve tu máme universální formátovací tag . Ten je
ovšem v HTML 4 potlačen a neměl by tedy být nadále používán.
Pokud ho neznáte, buďte rádi a pokud ho znáte a používáte,
pokuste se ho zapomenout.

(2) Další možností jsou tagy  a . První z nich písmo
o něco zmenší, druhý o něco zvětší. Teoreticky lze oba tagy
vnořovat do sebe a dosáhnout tak víc velikostních stupňů než 3,
příliš se to ale nedoporučuje. O tom, o jak velkou změnu
velikosti se skutečně bude jednat, nerozhodujete totiž vy, ale
prohlížeč. Co se tedy může zdát hezké na vašem počítači, na jiném
může vypadat zcela jinak.

(3) Velikost písma ovlivňují i tagy pro nadpisy  až 
.
Nicméně ty jsou vyhrazeny opravdu jen pro nadpisy a pro samotnou
změnu velikosti písma nám tedy nepomohou. Dokonce nám naopak
problémy přidělají. Podle jednoho z pravidel dobrého stylu by
totiž každý HTML dokument měl obsahovat právě jeden nadpis úrovně
H1 a zpravidla i několik nadpisů úrovní H2 i nižších. Jenže
nadpis H1 je většinou prohlížečů vykreslen až příliš veliký a
často je tedy potřeba ho o něco zmenšit.

(4) Tím se dostáváme k poslednímu způsobu ovlivňování velikosti
písma, a tím jsou kaskádové styly, neboli CSS. Styly dávají
tvůrcům stránek nesrovnatelně větší možnosti než tagy  a
. Zároveň nejsou v kolizi z významovými tagy typu  a
mohou je dokonce vhodně doplňovat.

Jak tedy měnit velikost písma pomocí CSS. Začátek je překvapivě
jednoduchý. Stačí nám totiž jediná vlastnost (property) CSS, a to
font-size. Tím ale všechna jednoduchost končí. Vlastnost font-
size totiž může nabývat mnoha různých hodnot. Konkrétně se
jedná o:

-- absolutní velikost
-- relativní velikost
-- délku
-- procento

Absolutní velikost se udává jedním ze 7 klíčových slov
"xx-small", "x-small", "small", "medium", "large", "x-large" a
"xx-large", které představují 7 možných stupňů velikosti od
nejmenší po největší. Poněkud v rozporu s názvem tyto velikosti
až tak absolutní nejsou, neboť zcela závisí na prohlížeči.
Implicitní velikost písma MSIE např. odpovídá velikost "small"
(malá), ačkoli by člověk spíše očekával "medium" (střední).

Relativní velikost má jen dvě možné hodnoty - "smaller" a
"larger" a v podstatě odpovídá tagům  a .

Velikost lze udat i procentem a myslí se přitom procento z
rodičovského prvku. V CSS je rodičovský prvek ten, ve kterém je
daný tag vložen. V tomto příkladu

Odstavec s krátkým citátem.


je  rodičovským prvkem , 
 je rodičovským prvkem  a
 je rodičovským prvkem .

Jestliže tedy v definici CSS určíme:

body {font-size: medium}
q {font-size: 90%}
strong {font-size: 110%}

bude písmo mezi  a  o 10% menší než okolní a písmo mezi
a  naopak o 10% větší.

Háček je v tom, že IE3 implementoval tuto vlastnost špatně a
percentuální rozdíl chápal oproti _původní_ velikosti písma
daného prvku, nikoli dle prvku rodičovského. Definice

h1 {font-size: 200%}

pak způsobí, že je obsah tagů 
 dvakrát větší  než implicitní
 a nikoli dvakrát větší než běžné písmo body. Od IE4 a i v NN
je to však již v pořádku, takže např. na stránce Sovy v síti jsem
si troufl použít pro velikost písma pouze procenta, neboť u
webmasterů používání IE3 neočekávám.

Nakonec jsem si nechal délku, přesněji hodnotu vlastnosti font-
size udanou v délkových jednotkách. Až dosud měly všechny uvedené
způsoby jedno společné. O skutečné velikosti písma na obrazovce
uživatele rozhodoval výhradně prohlížeč, resp. sám uživatel.
Všechny tyto způsobu totiž v kombinaci s běžnými prohlížeči
umožňují, aby si uživatel nastavil velikost písma sám (IE i NN
nabízí pro toto nastavení 5 velikostí písma).

To, že si uživatel může sám nastavit velikost písma je většinou v
pořádku. Každý má jiný vkus a jinak silné či spíše slabé oči.
Skutečná velikost navíc silně závisí na vlastnostech
zobrazovacího média (např. rozlišení a velikost monitoru), a je
tedy žádoucí, aby si ji uživatel mohl sám doladit. Jsou však
případy, kdy z důvodů grafické úpravy kombinujete písmo s obrázky
a případně tabulkami takovým způsobem, že změna velikosti písma
by váš výtvor zcela rozházela. Pak je třeba použít délkových
jednotek.

CSS zná mnoho délkových jednotek a aby bylo zmatení pojmů
dokonalé, člení je na relativní a absolutní. Tyto pojmy však
nemají s absolutními a relativními velikostmi vlastnosti font-
size popsanými výše nic společného.

Relativní délkové jednotky jsou "em" (výška fontu daného prvku),
"ex" (výška písmene 'x') a "px" (pixel, obrazový bod).
Absolutními jednotkami pak jsou "in" (palce), "cm" (centimetry),
"mm" (milimetry), "pt" (typografické body) a "pc" (typografická
míra pica). Povšimněte si, že všechny absolutní jednotky jsou
navzájem převoditelné (1pc = 12pt, 1pt = 1/72in, 1cm = 10mm a
1in = 2,54cm). Z praktického hlediska tedy mají z absolutních
jednotek význam jen typografické body - "pt".

Relativní délkové jednotky "em" a "ex" se na velikost písma moc
nehodí, neboť jsou právě z velikosti písma odvozeny. O to víc se
však hodí na velikost různých mezer, okrajů, odrážek, atd.
Naproti tomu pixely ("px") jsou v určitých případech právě pro
určení velikosti písma velice praktické. V pixelech se totiž
zásadně udávají velikosti obrázků. A pokud chcete zachovat poměr
velikosti obrázků a písma, máte jedinou možnost - určit velikost
písma v "px".

Ještě dodejme, že ony absolutní jednotky (pt, mm, atd.) zase až
tak absolutní ve skutečnosti nejsou. Výsledná velikost písma
totiž silně závisí na vlastnostech výstupního média (monitoru,
papíru) a na tom, jak se prohlížeč snaží médiu přizpůsobit. IE ve
Windows tedy např. vesele zmenšuje s rostoucím rozlišením
monitoru i písmo, jehož velikost je udána v "pt" a tím stírá
rozdíl mezi "pt" a "px". Některé prohlížeče a operační systémy se
naopak snaží přizpůsobit skutečné velikosti a rozlišení monitoru.
Výsledkem je, že ani u absolutních jednotek nevíte, co vlastně
uživatel nakonec uvidí.

Na závěr si shrneme ty nejdůležitější informace a doporučení.

-- Pro určení velikosti písma nepoužívejte tag . Tagy 
až 
 používejte jen pro skutečné nadpisy.

-- Pokud vystačíte se třemi, nepříliš od sebe vzdálenými stupni
velikosti písma(nepočítaje nadpisy), použijte tag  pro
písmo menší než normální a tag  pro písmo větší než
normální. Chcete-li použít CSS, můžete místo  dát font-
size:smaller a místo  font-size:larger.

-- Potřebujete-li více stupňů velikosti, avšak chcete uživateli
ponechat možnost vlastního nastavení (doporučeno), použijte
vlastnost CSS font-size s absolutním určením velikosti, nebo
procentem. Příklady: h1 {font-size: large}, body {font-size:
small}, h2 {font-size: 150%}.

-- Jestliže nezbytně potřebujete zachovat poměr velikosti písma k
velikosti obrázků nebo tabulek, použijte vlastnost CSS font-size
s velikostí v pixelech. Příklad: h1 {font-size: 24px}.


BEZPEČNÉ BARVY

V minulém čísle jsme narazili na pojem "bezpečné barvy". O co se
vlastně jedná?

Většina webmasterů samozřejmě používá výkonné grafické karty a
kvalitní monitory, takže vidí své stránky s  velikou barevnou
hloubkou. To však nemusí platit pro všechny uživatele. Stále se
najdou tací, kterým jejich monitor zobrazuje jen 256 barev.
Historicky navíc některé prohlížeče uměly dokonce jen 216 barev a
vznikla tedy paleta tzv. bezpečných barev, tedy těch, které by se
měly zobrazit každému.

Které barvy to jsou? Kupodivu je to velmi jednoduché. Jistě víte,
že barvy je nejlépe definovat hexadecimálním trojčíslím RGB (red-
green-blue, červená-zelená-modrá). Například #ff0000 je čistá
červená, #00ff00 je čistá zelená, #ffffff je bílá (kombinace
všech barev v maximální sytosti) a žádné barvy, tedy #000000 je
černá. Nu a bezpečné barvy se skládají pouze z libovolných
kombinací hexadecimálních čísel 00, 33, 66, 99, cc a ff. Možné
příklady tedy jsou #0033ff, #cc6699, atd.

Kompletní paletu bezpečných barev naleznete např. v rubrice
nástrojů pro webmastery serveru Interval.cz na adrese
http://www.interval.cz/r-article.asp?id=373.

Mnozí možná namítnou: má ještě dnes smysl dodržovat bezpečné
barvy, když 256-ti barevné grafické karty používá málokdo? Myslím
si, že má, protože o tak málo uživatelů se zase nejedná. Mnohem
podstatnější je ale to, co stane, když použijete "nebezpečnou"
barvu a klientský počítač umí jen těch 256. Prohlížeč (resp. OS)
se pokusí nahradit vámi požadovanou barvu vzorkem složeným z
jiných barev. U obrázků to ještě tolik nevadí, u písma také ne,
ale problém nastane s pozadím. Bude-li totiž pozadí textu místo
jednolité barvy ve skutečnosti tvořit vícebarevný vzorek (rastr),
může být písmo na tomto pozadí naprosto nečitelné.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Pomozte nám rozmnožit počet čtenářů Sovy v síti! Forwardujte
tento email přátelům, známým či obchodním partnerům. Upozorněte
je na možnost přihlásit odběr Sovy pouhým odesláním prázdného
emailu na adresu subscribe@sovavsiti.cz. Díky!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


POZOR NA  V NN

Člověk se stále učí a není to dávno, kdy jsem narazil na další
zradu NN.

Tag  se využívá tehdy, chcete-li zachovat původní
formátování textu. Uvnitř tohoto tagu jsou konce řádku opravdu
konce řádku (není třeba vkládat 
 nebo používat odstavce),
několik meze za sebou se nespojí do jediné, atd. Toto vše funguje
i v NN.

Aby však měl tag  svůj pravý půvab, musí být jeho obsah
vykreslen neproporcionálním písmem. To je takové písmo, ve kterém
je znak i stejně široký jako X. Díky tomu můžete pomocí snadno vytvořit tabulku se zarovnanými sloupci, aniž byste
použili skutečnou HTML tabulku.

V IE vše funguje skvěle. Zdánlivě vše funguje skvěle i v NN.
Ovšem až do okamžiku, kdy tag  vložíte do buňky tabulky,
která má přiřazenu CSS třídu s definovaným proporcionálním
fontem. Tag  ho v tomto případě v NN na rozdíl od IE zdědí a
je zle.

Jak z toho ven? Celkem snadno. V definici stylů stačilo uvést pre
{font-family : "Courier New", Courier, monospace; white-space :
pre;} a bylo po starostech.


PŘIDEJTE NA SVÉ STRÁNKY FAQ

I když jsme dnes neustále měnili velikost písma, obarvovali,
formátovali, atd., neměli bychom zapomínat ani na obsah webu.
Kvůli němu tam konec konců návštěvníci chodí. Jednou z velmi
vděčných možností, jak oživit obsah skoro jakýchkoli stránek, je
rubrika často kladených otázek, neboli FAQ.

Klíčem k úspěchu stránek jsou návštěvníci, kteří se často
vracejí. Těžko se však bude někdo často vracet na stránky, na
kterých se nic nemění. Zároveň je dobré navázat s návštěvníky
určitou formu dialogu. Vždyť internet je mnohem víc právě o
komunikaci, než o statické prezentaci. Na oba tyto požadavky
představují FAQ skvělé řešení. Zde je pár tipů, jak na to:

-- Pokud ho ještě nemáte, začněte tím, že na své stránky přidáte
kontaktní formulář. Tím vám budou moci vaši návštěvníci posílat
dotazy, připomínky, atd. a všechny tyto dotazu se budou hezky
shromažďovat na jednom místě. Evidujte však i telefonické,
písemné a osobní dotazy zákazníků.

-- Založte stránku nazvanou Časté dotazy.

-- Jednou za týden, čtrnáct dní, či měsíc sepište nové dotazy
spolu s odpověďmi a svou stránku častých dotazů zaktualizujte.

-- Stránku FAQ formátujte tak, aby se dobře rozeznala otázka od
odpovědi. Otázka např. může být kursivou, nebo jinou barvou.

-- Bude-li po čase otázek a odpovědí mnoho, rozdělte je na více
stránek a opatřete obsahem složeným z otázek ve formě odkazů.

-- Máte-li stránku novinek, je vhodné na ní upozornit, že na
stránce častých dotazů přibyly nové otázky a odpovědi. Ještě lépe
je oznamovat nové přírůstky emailovým newsletterem.

Věřte, že si vaši návštěvníci či zákazníci na rubriku FAQ časem
zvyknou a pokud ji povedete pečlivě, stane se pro ně vítaným
zdrojem informací, ke kterému se budou často vracet.


ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ

Na úvod k této rubrice musím říci, že mně děláte vy, čtenáři, čím
dál větší radost. Nejenom, že váš počet neustále roste, ale po
prvním čísle jste navíc začali posílat své dotazy, připomínky a
dokonce i pochvaly a poděkování. Jen tak dál! Dokonce by těch
otázek mohlo být příště víc než pochval :-)

Dva dotazy přišly prostřednictvím formuláře na stránkách Sovy:

1) Jak se udělá odkaz nové pošty, už s předem vypsanou E-mailovou
adresou toho, komu chci e-mail poslat.

Odpověď je jednoduchá. Vložte do stránky odkaz ve tvaru:

Poslat zprávu

Jedná se tedy o zcela obyčejný tag pro odkaz (anchor), který má v
atributu href emailovou adresu příjemce uvozenou řetězcem "
mailto:", místo obvyklého "http:". Ovšem pozor! Tento odkaz sám o
sobě žádnou poštu nepošle. Po kliknutí na odkaz se pouze
prohlížeč pokusí otevřít poštovního klienta, vytvořit novou
zprávu a vložit do ní adresu příjemce. Pokud na daném počítači
poštovní klient není, nebo tento způsob nepodporuje (spíše
výjimečné), nebudu to fungovat.

Některé emailové programy (včetně těch nejrozšířenějších)
podporují naopak ještě další možnosti. Můžete např. zkusit
předvyplnit i předmět zprávy tak, že za adresu umístíte znak ? a
proměnnou "Subject", např. takto:
Poslat
zprávu

2) Jak se naprogramuje odesílání vyplněného formuláře (quiz) na
E-mail ?

Tady už je odpověď těžší. Na řešení tohoto úkoly jsou třeba
skripty na straně serveru, např. PHP, nebo ASP a jejich výklad
přesahuje rámec našeho ezinu. Existují nicméně možnosti použít
externí řešení.

V prvé řadě si zjistěte, zda tuto službu nenabízí váš
poskytovatel webhostingu. Většina těch slušných to opravdu
nabízí. Pokud tato možnost selže, existuje v ČR služba MailForm (
http://www.mailform.cz/), která posílání formulářů na email
zajišťuje. Osobní zkušenosti s ní nemám, ale určitě ji můžete
vyzkoušet.

Několik z vás mělo problémy s diakritikou a několik nových
čtenářů se shánělo po archivu starších čísel na webu.

Inu, archiv starších čísel (tedy zatím toho jednoho, prvního ;-))
na webu v HTML podobě z mnoha důvodů není a nebude. Stejně tak
zatím neumíme rozesílat Sovu ve více formátech či kódování. Oba
problémy jsme však vyřešili velmi jednoduše. Ode dneška bude
každé vydání (vč. minulého) k dispozici pro download jako textový
soubor kódovaný v CP1250. Adresář se soubory je
http://www.sovavsiti.cz/download/ a soubory se vždy budou
jmenovat sovaRRNN.txt, kde RR je ročník a NN číslo. Toto číslo
tedy naleznete na adrese
http://www.sovavsiti.cz/download/sova0102.txt, minulé číslo na
http://www.sovavsiti.cz/download/sova0101.txt.


ČLÁNKY A ODKAZY PRO WEBMASTERY JINDE NA WEBU

Tabulky jako v Excelu

Kombinací DHTML a CSS lze vyrobit i na WWW stránkách tabulky
(gridy) podobné těm například v Excelu nebo Accessu. Jak to
udělat si můžete přečíst v článku Michala "Altaira" Valáška na
http://www.asp.cz/art/clanek.asp?id=88


Co na vstupní stránku firemního webu?

Dovolím si vám touto cestou podstrčit můj nejnovější článek
publikovaný na http://www.interval.cz/r-article.asp?id=591.
Dozvíte se v něm něco o zásadách tvorby obsahu pro vstupní
stránku, neboli "homepage".


Nástroje pro webmastery na Interval.cz

V článku o bezpečných barvách jsme narazili na velmi zajímavou a
užitečnou rubriku nástrojů pro webmastery serveru Interval.cz.
Nejen paletu bezpečných barev, ale i HTML a CSS validátory a
další nástroje naleznete na
http://www.interval.cz/r-category.asp?idctg=92.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Nechcete, nebo naopak chcete dostávat Sovu v síti?
Odběr lze odhlásit odesláním zprávy na unsubscribe@sovavsiti.cz.
Přihlásit se lze odesláním zprávy na subscribe@sovavsiti.cz, nebo
formulářem na adrese http://www.sovavsiti.cz/.
Chcete nám cokoli sdělit? Uvítáme vaše náměty, připomínky,
kritiku, atd. na adrese mailto:redakce@sovavsiti.cz.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Není-li v konkrétním případě uvedeno jinak, je autorem všech
publikovaných článků Marek Prokop. Tento ezin, nebo jeho
libovolnou část můžete volně šířit dále, pokud současně uvedete
zdroj následujícím způsobem:
________________________________________________________________
Sova v síti -- (c) 2001 Marek Prokop -- http://www.sovavsiti.cz/