Časté formátovací chyby

Zde se pokusím zmínit některé chyby, jichž se internetoví autoři často dopouštějí. U některých položek se se mnou mnozí budou hádat, co je a co není špatně. Takže to berte jako můj názor.

Nevyzkoušené věci - Zvýrazňování - Příliš široké stránky - Hrátky s fonty - Nadpisy z obrázků

Nevyzkoušené věci

Existují různé verze prohlížečů, ve kterých se stejné stránky se zobrazjí různě. Mnoho lidí tento fakt překvapí. Neuvědomují si, že když jejich stránky vypadají pěkně v jednom prohlížeči, v jiném mohou vypadat docela jinak. Pravidlem by tedy mělo být odzkoušení stránek na většině prohlížečů.

Zvýrazňování

Chcete-li v textu něco zvýraznit, má se na to podle normy použít kurzíva. (V HTML kódu se na to má používat tag <em> (emphasis), což je zvýraznění logické, <i> je zvýraznění formátové.) Tučně se mají psát obzvláště důležité kusy textu (<strong> je logické, <b> formátové). Tato pravidla si dovolím dodefinovat speciálně pro Internet: kurzívu použiji k normálnímu zvýraznění, tučnost k zvýraznění, na které chci upoutat čtenářovu pozornost. Na webu se dají na upoutávání pozornosti používat i barvy (ale dejte pozor, ať si to čtenáři nepletou s odkazem). V tom případě je místo přímého barvení kusů textu lepší si pomocí CSS předefinovat tag <strong>: strong {color: red} Potom si tu barvu můžete třeba globálně měnit.

Je dobré zvýrazňováním šetřit, ne plácat jedno přes druhé. To čtenáře akorát zmate, takže nebude vědět, co je důležitější a co ne.

Příliš široké stránky

Často vídám stránky, které obsahují nějaký široký element s nastavenou šířkou tak velkou, že se to nevejde do okna prohlížeče. Potom se šířka stránky přizpůsobuje tomuto nejširšímu elementu a volný text není čitelný bez posouvání horizontální lištou. Na takových stránkách se většinou objevuje text "optimalizováno pro rozlišení monitoru 1024x800", někdy ani to ne. Autoři takových stránek buďto nestojí o čtenáře s menšími monitory (na kterých se takové rozlišení vůbec nedá nastavit), nebo si neuvědomují, že ve Windows existují nějaká okna (která mají zpravidla menší šířku), nebo že v prohlížeči někdo může používat panel "historie" nebo "oblíbené".

Řešení tohoto problému je nepoužívat objekty s pevnou šířkou větší než asi tak 500 bodů. Ještě lepší je uvádět šířku elementů v procentech šířky okna (ale to někdy nejde). Jiným častým (ale pracným) řešením je uzavření celého těla stránky do tabulky s šířkou něco kolem 700 bodů. Ta už se ve většině dnešních oken zobrazuje celá. Ale zase se zobrazuje pomalu, (vizte design pomocí tabulek).

Hrátky s fonty

Když autor formátuje stránky, chce je oživit použitím různých fontů. Všichni asi víte, že by se v jednom textu měly vyskytnout maximálně dva fonty, jinak dojde k přeplácanosti. Ale na webových stránkách nastupuje další záludnost -- nikdy nevím, jaké nainstalované fonty bude mít počítač u klienta, který bude stránky číst. Můžu mít štěstí a trefím se, ale jistotu zobrazení nemám. Problémy, které mohou nastat:

1. Pokud nastavíte font, který klient nezná, klient zobrazí text svým základním fontem (většinou Times). To není taková katastrofa. Nesmíte ovšem spoléhat na grafický dojem zvláštního písma.
2. Pokud nastavíte fonty, které nejsou vždy české, zobrazí se klientovi čtverečky a čaj typu îÇË. Na vašem počítači máte náhodou nainstalovanou českou verzi tohoto fontu, ale klient má anglickou. Česká písma mívají na konci názvu CE nebo EE, ale nemusí tomu tak být vždy.

   Poznámka: Zobrazení českých fontů nemá nic společného s použitým kódováním textu (u nás windows-1250 a ISO 8859-2), o tom pojednávám v kapitole o češtině.

3. Zadáte-li nějaký netradiční font, který má navíc nějaké jednoduché jméno, může se stát, že se zobrazí úplné šílenosti. Příkladem je font jménem "Chaucer". Existují nejméně dva fonty tohoto jména, přičemž jedno z nich obsahuje obrázky :-). To je pak počteníčko! Například toto.
4. Některá skoro-česká písma se pokoušejí české znaky nedokonale nahrazovat. Výsledkem potom může být něco divného.
5. Je možné používání přibližných názvů písem serif (patkové písmo) a sans-serif (bezpatkový grotesk), monospace (psací stroj), fantasy (ozdobné písmo), cursive (psací). Prostě necháte na uživateli, jak bude vypadat váš ozdobný text. Je to nádherný a elegantní způsob. Není v jádru chybný. Ale výsledné zobrazení těchto fontů závisí na nastavení prohlížeče (a většinou se to nedá přenastavit), takže není zaručebno nic, jak možná vidíte. Vizte detailní příklad.

Řešení

1. Pokud to není nutné, neměňte defaultní (přednastavený) font. Prostě font nikde nedeklarujte.
2. Chcete-li si být jisti, že se jiný font zobrazí správně, používejte písma Times New Roman CE, Arial CE a Courier. Ty jsou ve všech českých instalacích Windows.
3. Používejte vrstvené deklarace. Uveďte prostě seznam písem oddělený čárkami -- když prohlížeč v systému nenajde první font, hledá ten druhý. V HTML 3.2 se to dělá tagem <font face="Arial CE, Arial"> (například), v CSS se píše {font-family: Arial CE, Helvetica, Arial, sans-serif}. Obzvláště se to hodí, když myslíte kromě Windows i na Linux, Win 3.1 či Mac.
4. Při deklaraci jiných fontů zásadně používejte takové, které mají na konci "CE" nebo "EE".
5. Za pár let, až se prosadí prohlížeče podporující CSS2, budeme moci ke stránce připojovat link na použitý font, to je ale hudba budoucnosti. Alespoň myslím, že zatím to nejde. Ocením poznatky.
6. Záleží-li vám na přesném grafickém dojmu, nezbývá, než použít obrázek s nápisem.

Nadpisy z obrázků

Aby nedošlo k mýlce, to je také formátovací chyba (alespoň podle mého názoru). Mám pro to tato vysvětlení:

1. Obrázek se dlouho stahuje (objem dat + nový http protokol), takže čtenář kouká mnoho sekund na neidentifikovatelnou stránku. Řešením je přidat alespoň atribut alt, nebo přidat pod obrázek textovou kopii. Alt je neestetický, textová kopie rušivá.
2. Pokud si čtenář stránku uloží a zapomene si uložit i obrázek nadpisu, má smůlu.
3. Zásadní problém je spojen s vyhledávacími roboty typu Altavisty. Ty se normálně koukají na nadpisy (tagy <Hn>). Žádný robot zatím ale není tak geniální, aby si vzal obrázek a přečetl z něj text! (Hlavně mu to za to nestojí.)

Řešení problému je trojí: Jednak obrázkové nadpisy nepoužívat (:-), nebo použít pro IE 4 absolutní stylovou polohu, nebo použít skript. Vždy se přitom vloží normální nadpis, který se během stahování obrázku nahradí obrázkem.

Absolutní poloha

Funguje spolehlivě jenom v IE 4 a vyšším a je to řešení nestandardní. Udělejte nadpis normálně tagem H1 a raději jej vložte do tabulky. Před něj vložte obrázek (vlastně je lhostejno kam, ale tak, aby to vypadalo i v jiných prohlížečích logicky). Přiřaďte mu absolutní styl, třeba takto:
<img src="nadpis.gif" style="position: absolute; z-index: 1; top: 4px; left: 10px">
Posunutí top a left zvolte taková, aby obrázek překryl normální nadpis. Obrázek udělejte tak velký, aby překryl celý nadpis (nebo buňku jeho tabulky). Kladný z-index způsobuje překrytí.

Filosofie toho skriptu

Jiný, lepší způsob, fungující v prohlížečích MSIE 4 a 5. Text nadpisu dát normálně do tagu H1 a přidělit ID. Na konec stránky umístit obrázek nadpisu s šířkou a výškou 1 (takže se skoro nezobrazí, případně to ještě stylem zneviditelnit). Tagu body přidělit událost onload, která se spustí po natažení stránky, takže i obrázku. Událost bude objektu document.all.ID.InnerHtml přiřazovat obrázek v normální velikosti. To je všechno. Jasné, ne?

Vizte též: čeština na webu, rozdíly v prohlížečích, obsah/forma, uživatelská písma, proč nepoužívat rámy, design pomocí tabulek

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage Hledání