Sova v síti - číslo 1/3 - vydáno 9.4.2001 Dobré ráno! Je zde pondělí a s ním vaše Sova v síti :-) OBSAH -- Jak co nejlépe využít CSS -- Označujte povinná pole formulářů -- Pozor na kódování češtiny -- Publikujte zprávy o úspěchu svých zákazníků -- Odpovídáme na dotazy čtenářů -- Články a odkazy pro webmastery jinde na webu JAK CO NEJLÉPE VYUŽÍT CSS V posledních dvou číslech Sovy jsme se dost věnovali kaskádovým stylům, neboli CSS. Jenže jsem se soustředili spíše na jednotlivé příklady konkrétního formátování a vůbec jsme se nezabývali těmi nejpodstatnějšími výhodami, které CSS webmastrovi nabízí. Dnes se to pokusím napravit. Především je třeba si uvědomit, že CSS je výsledkem snahy tvůrců norem oddělit význam od formátování HTML dokumentů. Prvky (tagy) HTML by měly nést pouze význam. H1 je tedy nadpis první úrovně, text uzavřený do je silně zdůrazněný, text v je zdůrazněný méně. Všechny tzv. formátovací prvky (např. B, I, FONT) nemají dle normotvůrců (a já s nimi souhlasím) z mnoha důvodů v HTML co dělat. Jak ovšem formátovat bez formátovacích prvků? K tomu slouží právě CSS. A slouží k tomu mnohem lépe, než tradiční prvky HTML. CSS totiž nenabízí jenom mnohem větší formátovací možnosti. Nabízí též mnohem větší efektivitu. Dokument využívající CSS tedy může být mnohem bohatěji formátován, může současně zabírat menší objem a lze přitom vytvořit snáze, než při použití samotného HTML. Když se podíváme na příklady z minulých čísel, formátovací možnosti CSS jsou jistě patrné. Ale efektivita? Konstrukce typu o přílišné efektivitě nesvědčí. Je tomu tak ale proto, že jsem použil ten nejméně efektivní a také nejméně častý způsob aplikace CSS, tzv. řádkový (inline) styl. Jedná se o styl, který je vložen do jediného konkrétního prvku HTML a pouze tento prvek také ovlivňuje. Občas se to hodí (právě když chcete ovlivnit jen jediný prvek celého webu), avšak pravá síla CSS je v něčem jiném. Hned si ukážeme v čem. Kromě řádkových stylů existují ještě tři další možnosti, jak provázat CSS s HTML stránkou. Začneme hned tou nejsilnější, kterou je externí definice stylů (style sheet). Jedná se o samostatný soubor, jehož obsah může vypadat např. takto: body { background: #ffffff none; color: #000000; font-family: Verdana, Arial, sans-serif; margin: 2em 1em 2em 70px } h1 { text-align: left; font-size: 18pt; } Pokud tento soubor nazveme např. style.css, pak ho připojíme ke konkrétnímu HTML dokumentu tímto tagem: Tag ovšem musí být umístěn v hlavičce dokumentu, tj. mezi a . Jakmile to učiníme, dojde ke stejnému efektu, jako bychom styl uvedený za BODY v externí definici přiřadili pomocí atributu style přímo prvku BODY daného dokumentu a styl uvedený za H1 v externí definici přiřadili všem prvkům H1 v daném dokumentu. Vzhledem k tomu, že BODY je na každé stránce jen jednou a totéž by mělo platit i o prvku H1, moc velkého efektu jsme zatím nedosáhli. Jakmile si ale uvědomíme, že v externí definici mohou být uvedeny styly pro jakékoli prvky HTML, začne to být zajímavější. Uvedu příklad. Tento týden jsem pro zákazníka dělal obsáhlou dokumentaci webové aplikace, kterou pro něj vyvíjíme. Dokumentace se skládala z několika stránek, každá stránka byla členěna do tří úrovní nadpisů a obsahoval několik desítek tabulek. Implicitní formátování HTML působilo značně syrově. Vyrobil jsem tedy externí definici stylů, která vypadala nějak takto: body { font-family:Verdana,Arial,sans-serif; font-size:x-small; } table { border:1px solid #000000; background:#999999 none; } td { font-family:Verdana,Arial,sans-serif; font-size:x-small; background:#ffffff none; } th { font-family:Verdana,Arial,sans-serif; font-size:x-small; background:#dddddd none; border-bottom:1px solid #000000; } h2 { background:#ccccff none; } A ejhle. Jakmile jsem externí definici připojil ke všem stránkám výše popsaným způsobem, stal se zázrak. Písmo se všude zmenšilo a změnilo na Verdanu, všechny tabulky dostaly elegantní rámečky, hlavičky tabulek (tagy TH) se zdůraznily šedavým pozadím a obdobně i všechny nadpisy druhé úrovně. Celá úprava trvala asi 5 minut a každá stránka se zvětšila o necelých 67 bytů nezbytných k připojení externí definice stylů. V tom je to pravé kouzlo CSS. Příště si povíme něco o dalších způsobech provázání stylů a HTML, o kaskádování a dědičnosti. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ OZNAČUJTE POVINNÁ POLE FORMULÁŘŮ Také se vám již někdy stalo, že jste vyplňovali nějaký webový formulář a poté, co jste zmáčkli tlačítko submit, vás chybové hlášení přinutilo vyplnit další povinné údaje. Já vyplňuji formuláře nerad, většinu políček přeskočím, takže se mi to stává často. Někdy jsem dokonce dost naštvaný, protože po dlouhém vyplňování toho, co jsem se vyplnit odhodlal, po mně po požadují údaje, které jim dát nechci. Stačí přitom málo. Důsledně označovat povinná pole formulářů. Uživatel tak má předem jasno, co zadat musí a co ne. Tradičně se k označení povinných polí používá hvězdička, stejně tak ale poslouží tučný titulek, či cokoli jiného. Jenom vždy na začátek každého formuláře napište, která pole jsou povinná, nebo jak je uživatel pozná. Pokud to neuděláte, riskujete, že se někteří raději ani nepokusí váš formulář vyplnit. A to by byla škoda. POZOR NA KÓDOVÁNÍ ČEŠTINY Jistě jste se již setkali s tím, že si v prohlížeči otevřete určitou stránku s chybnou diakritikou. Přitom stačí v prohlížeči změnit implicitní kódování češtiny a je vše v pořádku. Proč k tomu dochází? Proč prohlížeč sám nepozná, které kódování zvolit, jak je jinak obvyklé? Je to tím, že mu stránka své kódování "neřekla". Každá česká stránka totiž musí mít v hlavičce (mezi tagy a ) uveden tento tag: Pokud ovšem kódujete své stránky v normě ISO 8859-2, bude charset místo "windows-1250" právě "ISO 8859-2". Nezapomínejte na to! PUBLIKUJTE ZPRÁVY O ÚSPĚCHU SVÝCH ZÁKAZNÍKŮ Chcete stránkami propagovat zboží či služby své firmy? A je vaše produkce především určena jiným firmám? Pokud ano, můžete využít následující tip. Firmy se na svých stránkách často chlubí, jaký má jejich zboží či služby úspěch, kolik už se toho prodalo, kolik mají zákazníků, atd. Už je to tak obehrané, že tomu málokdo věnuje pozornost. Zkuste to jinak! Jestliže prodáváte především firmám, uveďte konkrétní příklady, jak jsou vaši zákazníci úspěšní. Dokonce ani nemusíte zdůrazňovat, že jsou úspěšní díky vaším výrobkům. To by byla spíš chyba. Nechejte návštěvníka stránek, ať si sám podvědomě spojí, že používání vašich výrobků vede k úspěchu. Mimochodem, pevně věřím, že ze čtenářů Sovy v síti se velmi brzy stanou nejúspěšnější čeští webmasteři. Pokud jimi už ovšem nejsou ;-). ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ Musím říci, že tentokrát jste mne trochu zklamali. Za celý týden dorazil jediný dotaz od čtenáře z Pardubic, který se ptá na programy pro tvorbu PHP a prosí o odkazy k tomuto tématu. Tedy, PHP je, podobně jako ASP, JSP, či ColdFusion, jazyk či platforma pro tvorbu skriptů běžících na straně serveru. Tyto typy skriptů se používají ke generování stránek v reálném čase (tj. v okamžiku, kdy o ně klient požádá) a nahrazují dnes již poněkud zastaralé CGI skripty. Zatímco otázka serverových skriptovacích jazyků a platforem je dosti složitá a přesahuje tematický rámec Sovy v síti, odpověď na to, na co se ptá čtenář je jednoduchá. Z hlediska tvorby je to s PHP stejné, jako s HTML. Stačí vám libovolný textový editor, třeba i obyčejný Notepad z Windows (já však mám nejraději skvělý editor TextPad). Kromě editoru na psaní skriptů však potřebujete i server, na kterém ty skripty poběží. Pro PHP je domovskou platformou Linux (i jiný Unix) a webový server Apache. Existují ale i verze pro Windows. Co se týče odkazů, vhodné jsou právě stránky pro příznivci Linuxu, např. root.cz, nebo reboot.cz. ČLÁNKY A ODKAZY PRO WEBMASTERY JINDE NA WEBU Computer Revue - nový internetový magazín Poměrně nový internetový magazín Computer Revue naleznete na adrese http://crevue.zpravy.cz/. Webmastery bude asi nejvíce zajímat rubriky Internet. Ve srovnání se zavedenějšími magazíny je sice ještě poněkud prázdná, avšak doufejme, že se bude rychle plnit. Kromě rubriky Internet zde naleznete i krátké aktuality ze světa internetu a počítačů, rubriku Software a několik rubrik věnovaných hrám. Mimochodem, redakce serveru se rozhodla přetiskovat vybrané články ze Sovy. Pokud si tedy budete chtít přečíst např. náš hlavní článek minulého čísla ve webové verzi, navštivte Computer Revue. Serál článků o CSS na Interval.cz Na serveru Interval.cz vycházel začátkem loňského roku výborný seriál o CSS Miloslava Ponkráce. Pokud se chcete pustit do studia CSS opravdu od podlahy, vřele vám ho doporučuji. Seznam článků naleznete na adrese http://www.interval.cz/r-category.asp?idctg=67. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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/