CSS a XHTML není žádná věda (2.díl)

V čem psát XHTML a CSS kód

V minulém článku seriálu jsem se zmínil, že vás čeká podstatná změna způsobu tvorby webových stránek. Zavrhneme všechny "Covidíštodostaneš" editory (například FrontPage) a vrhneme se po hlavě do tajů manuální tvorby kódu. Důvody pro zmíněné rozhodnutí jsou dva. Především všechny vizuální editory neumí korektně zobrazovat spojení XHTML a CSS a jsou určeny především pro tvorbu tabulkového layoutu (a to se týká všech bez rozdílu včetně jinak dokonalého Dreamweaveru). Druhým důvodem je ten, že je vždy lepší mít kód stránky pod kontrolou , s čímž také souvisí jedna velmi příjemná vlastnost - pokud si totiž kód napíšete přehledně a správně si ho okomentujete, pokaždé a třeba i po delší době se v něm snadno vyznáte. Navíc, a to je rozhodující především pro návštěvníky vašeho webu, výsledný kód bude mnohem, mnohem menší než desatero porůznu vložených tabulek a tím pádem také rychlejší.

Ještě mi dovolte malou odbočku týkající se prohlížečů, protože právě ty pak zprostředkují návštěvníkům zážitek z vaší úspěšné tvorby. Je nemilým faktem, že každý z takzvané velké trojky prohlížečů (Internet Explorer, Mozilla, Opera) si vysvětluje normy CSS tak trochu po svém. Bohužel je také fakt, že právě prohlížeč z dílny Microsoftu je doslova prolezlý různými a leckdy velmi nepříjemnými chybami. Dobrou zprávou naopak je to, že o jeho chybách se ví a také existují způsoby, jak se jim vyhnout. Pro vás z toho vyplývá jedna nutnost - výsledný kód si testovat alespoň v těchto třech prohlížečích. Takže si je ve volné chvilce stáhněte a nainstalujte, budeme je v průběhu studia potřebovat (Opera, stačí bez Javy - www.opera.com, Mozilla v české verzi - (www.czilla.cz). V souvislosti s tvorbou se občas hodí vypnout si styly ve stránce, abyste viděli, jak web vypadá například na PDA. Mozilla i Opera jsou na to zařízeny a možnost vypnutí stylů naleznete v jejich menu. Pro Internet Explorer existuje velmi zajímavá utilitka nazvaná Accesibility Toolbar (volně přeloženo Nástroj ke kontrole přístupnosti,ke stažení zde ). Protože se na ní budu v průběhu seriálu odkazovat, stáhněte si ji a nainstalujte a v prohlížeči se vám zobrazí elegantní Toolbar, který vám umožní dělat kouzla s návrhem svých stránek (viz).

Ale vraťme se k tématu článku, který zní: v čem vlastně mám psát své XHTML kódy. Odpovědí je několik a závisí na tom, jak moc jste finančně zajištěni. Traduje se, že velkým profesionálům postačí obyčejný Poznámkový blok (neboli Notepad) přítomný ve standardní instalaci Windows a je tím pádem zdarma. Je to pravda a znám pár lidí kolem webdesignu, kteří na něj nedají dopustit. Bohužel tento editor zvládá pouze kódování Windows 1250, což vás v budoucnu může postavit před obtížně řešitelný problém (třeba s přechodem na kódovou stránku ISO 8859-2 nebo UTF 8 - o tom si povíme někdy příště). Navíc vám obyčejný Poznámkový blok práci nijak neulehčuje. Lepší volbou je editor pocházející z českých luhů a hájů PSPad (www.pspad.com), jenž je k dispozici zdarma a stále se vyvíjí. Pokud máte hluboko do kapsy, bude pro vás velmi dobrou volbou a vřele vám ho doporučuji. Další možností, bohužel již placenou, je můj oblíbený Dreamweaver (www.macromedia.com), který disponuje velmi slušným prostředím pro psaní kódu a všemožně se vám snaží ulehčit práci. Takže pokud ho vlastníte, zůstaňte u něj, jenom se z vizuálního návrhu přepněte do módu na psaní zdrojových kódů (Show Code View). Lze konstatovat, že pro psaní kódu vám postačí cokoliv, co umí uložit zpracovaný kód jako čistý neformátovaný text (zapomeňte na Word). Vyberte si sami pomocníka, který vám bude nejvíce vyhovovat.

Pro tvorbu CSS kódu můžete použít všechny tři jmenované editory, neboť celý CSS kód je v podstatě obyčejný text. Existuje i několik užitečných nástrojů, které vám s tvorbou kódu pomohou, ale upřímně řečeno, dávejte přednost psaní vlastními prsty. Jednak budete mít lepší přehled, co tvoříte, jednak ručně psaný kód bude přehlednější a v neposlední řadě, žádný, byť sebelepší editor vám nevyřeší několik nestandardních postupů, které budete muset díky chybám Internet Exploreru použít. Přesto se zmíním o velmi dobrém CSS editoru, kterým je Top style a najdete ho na slunečnici. Lite verze je zdarma.

Jaké používat fonty neboli písma
Web je prostředí, ve kterém si nikdy nemůžete být dopředu jisti, zda návštěvník vašich stránek vlastní font (písmo), které v kódu nadefinujete. Poskytované informace jsou také to, co návštěvníka webu nejvíce zajímá a bez smysluplného textu nevytvoříte slušně navštěvovaný web. Z řečeného tedy mimo jiné vyplývá základní omezení, s nímž se chtě nechtě musíte smířit. Budete mít totiž k dispozici jen několik málo písem, které lze bezpečně použít. Viděl jsem na některých stránkách použité dost exotické fonty a výsledkem byl v lepším případě zmatek, v horším případě naprostá nečitelnost celého webu. Setkal jsem se i s tím, že autor nabízel na svém webu použitý font ke stažení. Nedělejte to, nemá to smysl a málokdo si bude do svého počítače instalovat nová písma, nehledě na to, že někteří ani nemohou, protože jim to správce systému zakázal. Pokud chcete použít nějaké elegantní písmo, nezbývá vám nic jiného, než použít obrázek. Pak ovšem musíte zajistit, aby nadpisy (nebo navigace takto stvořená) byly dostupné i při vypnutých obrázcích nebo stylech a výsledný CSS kód se vám trochu zkomplikuje. Přesto lze vše vyřešit a důkazem budiž opět jeden z mých webů, kde jsem pro hlavní nadpisy použil elegantní psané písmo, vytvořené jako obrázek (ukázka). Pokud se týká použití fontů na stránce, platí zde otřepané pravidlo, že méně je někdy více. Není horšího prohřešku, než použít deset různých typů písem. Celá stránka vypadá pak přeplácaně a chaoticky. Přijměte tedy následující doporučení - při tvorbě webu používejte pro delší souvislé texty zásadně bezpatkové písmo, jehož typickým představitelem je Arial nebo Verdana. Patkové písmo, jako například Times New Roman se na monitoru špatně čte a je spíše určeno pro tiskovou verzi webu případně pro nadpisy. Existuje ještě několik druhů písem, které můžete bez obav použít. Následuje jejich výčet. Způsob, jak písmo pomocí CSS nadefinovat a vše s tím spojené, si probereme v příštích dílech seriálu.

Písma bezpatková:
Arial - bezpatkové písmo, je poměrně úzké, hodí se na weby, kde převažují textové informace
Verdana - také bezpatkové písmo, je širší než standardní Arial, velmi hojně využívané, dobře se čte
Trebuchet - bezpatkové písmo s trošku odlišným řezem od základní Verdany
Lucida - neproporcionální písmo (tj. všechny znaky jsou stejně široké), bezpatkové
Comic Sans MS - sympatické rozjásané písmo, vhodné spíše pro graficky ujeté weby
Impact - uzounké a tučné písmo, poměrně málo využívané, vhodné především pro nadpisy


Písma patková:
Courier New - neproporcionální patkové písmo (všechny znaky jsou stejně široké). Vypadá jako z psacího stroje. Používá se pravidelně na odborných webech pro ukázky zdrojových kódů a podobně. Pro hlavní text webu není příliš vhodné
Times New Roman / Times - určitě znáte, jedná se o základní patkové písmo přítomné v každé instalaci Windows. Využívá se pro tiskovou verzi webu, případně pro nadpisy, nehodí se pro delší souvislý text určený pro monitor
Georgia - celkem elegantní patkové písmo, spíše umělecké, jednu dobu bylo velmi módní

Jak vypadají jednotlivá písma v praxi si můžete prohlédnout zde.

Příště:
Kostra XHTML dokumentu - definice typu dokumentu (DTD), hlavička HEAD, kódování, připojení externího stylu
Autor: Plaváček