Sova v síti - číslo 1/1 - vydáno 26.3.2001 Dobré ráno! Je zde pondělí a s ním vaše Sova v síti :-) OBSAH -- Úvodník -- Styly pro vaše formuláře -- Validace HTML -- Pozor na chyby v NN -- Výměnou odkazů k vyšší návštěvnosti -- Články a odkazy pro webmastery jinde na webu ÚVODNÍK Milí přátelé, dostává se vám do rukou (či spíše na obrazovku) první číslo ezinu Sova v síti. Dovolím si vás tedy obtěžovat velmi krátkým úvodníkem. Nápad vydávat ezin pro začínající a méně zkušené tvůrce webových stránek jsem dostal přibližně před 14 dny. Od toho okamžiku jsem napřel všechny své zkušenosti a většinu svého času na jeho uskutečnění. Zatím se ukazuje, že to bylo dobře. Protože to není zdaleka první podobný projekt, do kterého jsem se pustil, nebál jsem se vlastní realizace. Přesto jsem však od začátku strach měl. Strach o to, jakou naleznu odezvu. Ještě před týdnem, kdy jsem zveřejnil webovou stránku Sovy, mne pronásledovaly noční můry, že první číslo budu psát pro 10-20 čtenářů. Hned první den po zveřejnění mne však z obav vyvedl a celý minulý týden nakonec předčil všechna očekávání. Na stránku totiž zatím přišlo přes 600 návštěvníků a ještě potěšitelnější je, že více než každý čtvrtý si odběr Sovy zaregistroval. Teď, když píši tyto řádky (sobota), je vás už skoro 180 a váš počet neustále stoupá. Děkuji vám za vaši důvěru, děkuji vám za to, že jste mi dali tu nejlepší motivaci, jakou mohu pro psaní Sovy mít, děkuji vám za váš zájem. Doufám, že se své zodpovědnosti zhostím se ctí a že vám Sova v síti opravdu přinese to, co od ní očekáváte. Příjemný a užitečně strávený týden vám přeje Marek Prokop STYLY PRO VAŠE FORMULÁŘE Kaskádové styly (CSS) jsou především určeny k formátování obsahu webových stránek, jako náhrada za formátovací tagy, které jsou z poslední verze HTML vyřazeny (resp. nejsou doporučeny). CSS představují též mimořádně efektivní nástroj k udržení vizuální konzistence i velmi rozsáhlých webů. Na druhou stranu mohou být styly použity i vysloveně příležitostně a lze s nimi dosáhnout mnoha zajímavých efektů, na které klasické HTML formátování nestačí. Jednou z takových oblastí nasazení jsou formuláře. Podívejme se nejprve na několik praktických příkladů a pak si teprve provedeme teoretickou rekapitulaci. Doporučuji vám, si uvedené příklady hned zkoušet. Stačí si je uložit jako HTML soubor a prohlédnout v prohlížeči. Můžete se též podívat na stránku http://www.sovavsiti.cz/samples/samp0101.html, kde jsou všechny příklady zobrazeny. Dlužno dodat, že většina příkladů vám nebude fungovat v NN verze 4.xx a nižší a ve starších verzích IE. V podstatě to ale nevadí, protože i v těchto prohlížečích zůstane vše dobře čitelné. To je ostatně hlavní výhoda CSS, jsou-li správně aplikovány - v prohlížečích s dobrou podporou CSS bude vaše stránka perfektní a v ostatních zůstane dobře čitelná. Jak obarvit a orámovat celý formulář Podívejte se na následující výchozí příklad. V tagu FORM je použit atribut STYLE, který obsahuje definici kaskádových stylů pro daný formulář. V tomto případě zajistí, že celé pozadí formuláře bude šedé, formulář bude široký jen 17 em (tj. 17 výšek řádku) a bude orámován dvoupixelovým, trojrozměrně vyhlížejícím rámečkem.
Vstupní pole:
Seznam:
Přepínač: Volba 1 Volba 2
Jak ze zbavit prázdného místa pod formulářem Všimněte si, že pod formulářem je v MSIE implicitně dosti veliká mezera, která někdy může vadit. Pomocí CSS se jí přitom lze zbavit velmi snadno. Stačí do tagu FORM přidat tento styl:
V tomto případě dokonce ani nevadí, že NN formátovat formuláře pomocí CSS neumí. NN totiž implicitní mezeru pod formulářem nevykresluje. Jak formátovat prvky formuláře Podívejme se na pár dalších příkladů, jak lze formátovat jednotlivé prvky formuláře. Jak vidíte, můžete pomocí CSS ovlivňovat nejen barvu prvků, ale i jejich velikost. Často např. chcete vizuálně zarovnat všechny prvky typu INPUT, SELECT a TEXTAREA. Jejich běžnými atributy je to ale úmorná práce, protože např. atribut COLS tagu TEXTAREA a atribut SIZE tagu INPUT si navzájem skutečnou velikostí vůbec neodpovídají. S pomocí vlastnosti WIDTH kaskádových stylů je to ovšem hračka. K vlastnosti WIDTH aplikované na tag INPUT se pojí ještě jeden osvědčený trik. Možná jste si všimli, že NN vykresluje tagy INPUT o něco širší než IE. Co když ale potřebujete, aby šířka byla zaručeně stejná v obou hlavních prohlížečích? Zkuste následující příklad, který je použit na domovské stránky Sovy v síti: NN si z toho vezme size="10", zatímco IE upřednostní style="width:135". Výsledkem je stejná skutečná šířka v obou prohlížečích. Referenční informace Podívejme se teď na jednotlivé vlastnosti (property) CSS použité v příkladech. BACKGROUND - určuje barvu a obrázek pozadí. Místo odkazu na obrázek, je v příkladech hodnota "none", čili žádný obrázek. Pokud použijete vlastnost background, nezapomeňte uvést i vlastnost color. Jinak se vám může díky nastavení implicitních barev v prohlížeči podařit např. šedá barva na šedém pozadí. Dále je vhodné se držet tzv. bezpečných barev. Nevíte co to je? Tak si o nich povíme v příštím vydání Sovy. COLOR - určuje barvu písma. O kombinaci s vlastností background a bezpečných barvách - viz výše. FONT-FAMILY - určuje font. Při použití této vlastnosti buďte opatrní a myslete na to, že zdaleka ne každý uživatel má na svém počítači stejné fonty jako vy. Z toho důvodu je možné a vhodné uvádět hned celý seznam fontů, ze kterých si pak prohlížeč vybírá v pořadí zleva doprava. Bezpečné kombinace jsou např. "arial, helvetica, sans-serif" pro bezpatkové písmo a "times, serif" pro patkové písmo. FONT-SIZE - v příkladu není, neboť ani v IE nefunguje, je-li ve formuláři použita tabulka. Jinak ale slouží pro určení velikosti písma a podrobněji si její správné použití vysvětlíme v příštím vydání Sovy. Není to totiž zdaleka tak jednoduché, jak to vypadá. WIDTH - určuje šířku prvku, na který se aplikuje. Šířka se nejčastěji udává v px (pixelech), lze však použít i další délkové jednotky, které CSS zná (em - výška písma, mm - milimetry, atd.). BORDER - určuje šířku, styl a barvu čáry rámečku okolo prvku. Šířka se nejčastěji udává v px. V případě stylu čáry můžete zkusit experimentovat s těmito hodnotami: none, dotted, dashed, solid, double, groove, ridge, inset a outset. Pozor, ne všechny fungují a některé závisí na šířce čáry (nemají smysl pro šířku 1px). MARGIN-BOTTOM - určuje velikost (výšku) spodního okraje. Nejčastěji se udává opět v px. Pro úplnost dodejme, že lze řídit i další okraje pomocí margin-top, margin-left a margin-right, případně pomocí samotného margin s uvedením velikosti okrajů v pořadí horní, pravý, dolní a levý. Příklad: margin: 4px 2px 3px 0px. Na závěr tohoto článku ještě jednu důležitou radu. Bohaté formátovací možnosti CSS nejsou určeny k matení vašich návštěvníků a dokonce ani k tomu, abyste předváděli, co všechno již umíte. Používejte je účelně, promyšleně a s mírou. Pamatujte, že cílem je dělat stránky přehlednější a čitelnější a že méně je často více. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VALIDACE HTML Jazyk HTML má svá poměrně přísná pravidla. Některé prohlížeče se sice snaží nejčastější chyby tolerovat, nicméně jiné netolerují nic. Některé chyby mohou být navíc velmi zrádné ve spojení s CSS. A protože chybovati je lidské, každá stránka by před zveřejněním měla být zkontrolována validátorem HTML. Existují validátory on-line i off-line. Mezi těmi druhými patří k nejznámějším HTML Tidy, který lze zdarma stáhnout ze stránek konsorcia W3C (http://www.w3c.org/). My se dnes nicméně podíváme blíže na jeden vynikající on-line validátor. S validátory je obecně jedna potíž. Málokterý respektuje češtinu. Před časem ji však začal respektovat skvělý validátor WDG (Web Design Group), který naleznete na adrese http://htmlhelp.org/tools/validator/. Aby vám však čeština opravdu fungovala, nesmíte zapomenout na příslušný metatag, který by měl vypadat nějak takto: respektive takto: pokud používáte kódování ISO. Celkem mimořádnou vlastností validátoru WDG je i to, že vám umožní naráz zkontrolovat nejenom jednotlivé stránky, ale i celý váš web. Opravdu vřele doporučuji! POZOR NA CHYBY V NN Mnoho začínajících tvůrců stránek si neuvědomuje, že to, co vidí u sebe na obrazovce, nemusí být vůbec to, co uvidí někdo jiný. Ačkoli je příčin více, nejčastější je kompatibilita, či spíše nekompatibilita prohlížečů a zejména rozdíly mezi dvěma nejčastějšími, Internet Explorerem (IE) a Netscape Navigatorem (NN). Zatímco IE je od verze 4.xx již velmi dobrým prohlížečem a respektuje většinu norem a doporučení, NN v dosud nejčastějších verzích 4.xx za ním dost zaostává. Nechci zde rozebírat všechny jeho chyby, jak by snad napovídal titulek. Jde mi jen o to, upozornit na nutnost pečlivé kontroly všech vašich výtvorů nejen v IE, ale i v NN. Přes 90% uživatelů již sice používá IE, ale i tak je škoda publikovat stránky, které oněch cca. 5% uživatelů NN (v případě konkrétních stránek to může být i více) nebude třeba moci vůbec přečíst. Na stránkách Netscapu jsou k dispozici ke stažení i starší verze NN. Pokud tedy zatím nemáte alespoň NN v některé z verzí 4.xx, co nejdříve si ho nainstalujte a začněte používat pro vizuální kontrolu všech vašich stránek. Pokud jste to dosud nedělali, budete výsledkem možná dost překvapeni. VÝMĚNOU ODKAZŮ K VYŠŠÍ NÁVŠTĚVNOSTI Kterého webmastera by nezajímala návštěvnost jeho stránek. Způsobů jak zvyšovat návštěvnost je sice dost, na druhou stranu jich však nikdy není málo. Jedním z osvědčených a zároveň levných (dokonce zdarma) je výměna odkazů. Zde je pro vás několik rad a tipů, jak tuto metodu využít. -- Pro výměnu odkazů si vybírejte ty servery, které mají podobné zaměření jako je vaše, avšak nejsou k vám v konkurenčním postavení. -- Vhodné kandidáty na výměnu odkazů naleznete snadno následující metodou: pomocí libovolného vyhledávače či katalogu vyhledejte nejprve své úspěšné konkurenty. Uschovejte si URL jejich stránek a pak použijte vyhledávání zpětných odkazů, které nabízí např. Google, nebo Atlas. Podrobný postup naleznete v ukázkovém vydání Sovy v síti na adrese http://www.sovavsiti.cz/sample.html#konkurence. -- Nevíte, jak oslovit webmastera vyhlédnutého webu? Začněte tím, že odkaz na něj přidáte na své stránky. Teprve pak webmasterovi napište, že jste odkaz publikovali a nezapomeňte uvést URL, kde je odkaz umístěn. Zároveň navrhněte, že vzhledem k podobnému zaměření vašich stránek by bylo fajn, kdyby on na ty své přidal odkaz na vaše. Po čase si zkontrolujte, zda tak učinil a pokud ne, odkaz na něj ze svých stránek zrušte. -- Největší účinnost má osobní doporučení. Dohodněte se s webmasterem partnerského webu, že u svých odkazů navzájem uvedete i krátkou anotaci a doporučení. -- Snažte se dostat odkaz na vás na co nejvíce stránek v jiných doménách druhé úrovně. Mnoho vyhledávačů dnes počítá relevanci podle tzv. indexu popularity, což je právě počet externích odkazů na vaše stránky. Čím více jich je, tím výše se umístíte ve výpisu např. Googlu, ale i dalších vyhledávacích služeb. -- Nebojte se, že vám budou návštěvníci přes odkazy na spřátelené weby utíkat. Pokud je návštěvnost vašich partnerů přibližně stejná jako vaše, nemůžete nic ztratit. Toto riziko navíc eliminujete tím, že všechny externí odkazy umístíte na samostatnou stránku, zřetelně označenou "Odkazy". Na tu pak stejně vleze jen ten, kdo hledá cestu z vašeho webu pryč. -- Pravidelně si kontrolujte, zda je váš odkaz na partnerských webech stále umístěn a zda se z vás mezitím nestali konkurenti. Výhodou této metody je to, že jde aplikovat ihned a nic vás nestojí. Proto neváhejte a vyzkoušejte. Možná budete příjemně překvapeni. ČLÁNKY A ODKAZY PRO WEBMASTERY JINDE NA WEBU Třináct zajímavých tipů a triků pro tvorbu HTML kódu V loňském roce vyšlo na Intervalu.cz několik skvělých tipů a triků na HTML. Nedávno je jejich autor Miroslav Kučera zastřešil samostatným článkem, který naleznete na adrese http://www.interval.cz/r-article.asp?id=534. Vřele doporučuji jak začínajícím, tak pokročilým tvůrcům. Začínáme s ASP ASP je serverová skriptovací technologie, která sice nepatří do obvyklého repertoáru začínajících tvůrců webových stránek, věřím však, že se mezi čtenáři Sovy najdou tací, kteří se nenechají odradit a ocení nový seriál o ASP Jaroslava Lhotáka na Živě. URL prvního dílu je http://www.zive.cz/r-art.asp/app=0x3701513/id=29033. A když už budete na Živě, nezapomeňte se tam podívat i na moje vlastní články ;-). Všechny pěkně pohromadě je naleznete na adrese http://www.zive.cz/autor.asp/id=444. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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/