Sova v síti - 1/4 - vydáno 17.4.2001 Dobrý den, je zde Vaše Sova v síti, tentokrát výjimečně v úterý. OBSAH -- Jak kaskádují CSS -- TextPad - výborný editor i pro HTML -- Používáte správný typ HTML dokumentu -- Výměnné reklamní systémy -- Odpovídáme na dotazy čtenářů JAK KASKÁDUJÍ CSS V minulém čísle jsme si ukázali základy efektivního využívání CSS a dnes naše znalosti ještě dále rozšíříme. Přesný význam názvu "Cascading Style" je "kaskádující styl". Je tedy patrné, že jeho autoři přisuzovali veliký význam právě onomu "kaskádování", které si nyní předvedeme. Nejprve si ale vysvětlíme význam pojmu "třída". Již víme, že pomocí CSS můžeme přidělit určité formátovací vlastnosti jednotlivým prvkům (tagům) HTML. Lze tedy např. určit, že všechny prvky H2 se budou zobrazovat modře: h2 {color: #0000ff} Co ale v případě, že chceme ovlivnit jen některé nadpisy úrovně H2, nebo naopak chceme i běžné odstavce a další text zobrazovat modře? Pak právě lze s výhodou využít třídy. Zkusíme-li např. definovat toto pravidlo: h2.hezkynadpis {color: #0000ff} běžné prvky H2 tím nijak neovlivníme. Modré budou pouze ty nadpisy úrovně H2, které budou patřit do třídy "hezkynadpis". Zařadit prvek do třídy lze takto:

Toto je hezký nadpis

Dalším způsobem, jak zařadit prvek do třídy jsou tzv. kontextové selektory a tím se již dostáváme ke slíbenému kaskádování. Řekněme, že chceme definovat určité specifické formátovací vlastnosti pro celé bloky textu, např. výstražný rámeček. Lze to udělat takto:

Pozor, výstraha

Tento výstražný rámeček je vytvořen s pomocí CSS.

Zatím se samozřejmě nic zvláštního nestane, jakmile ale přidáme následující pravidla CSS: .vystraha {background:#cc0000 none;color:#ffffff} .vystraha h2 {text-align:center;font-size:14pt} .vystraha p {font-size:10pt} změní se barva pozadí i velikost písma v boxu. Všimněte si, že ačkoli prvky H2 a P nemají přímo přiřazenou třídu "vystraha", přesto do této třídy patří. Je tomu tak právě díky kontextovému selektoru ".vystraha h2", který definuje pravidlo pro všechny prvky H2, které jsou vnořeny (přímo i nepřímo) do prvku s třídou "vystraha". Kontextové selektory však fungují i bez tříd. Pravidlo definované selektorem "P EM" (např. p em {font-size:bigger}) se aplikuje pouze na ty prvky EM, které jsou vnořeny do prvku P. Na závěr si ukažme souvislý příklad, jehož výsledek a tedy i kompletní zdrojový kód naleznete na adrese http://www.sovavsiti.cz/samples/samp0104.html. Jedná se o typickou stránku se záhlavím, zápatím, levým navigačním pruhem a oblastí pro vlastní obsah stránky. Vytvořil jsem 4 třídy: "top" pro záhlaví, "navbar" pro svislý navigační pruh, "content" pro vlastní obsah a "bottom" pro zápatí. Každá třída definuje jednak sadu obecných vlastností a jednak specifické vlastnosti prvků uvnitř třídy. Zde je např. definice záhlaví: .top { height: 72px; background: #c9d7f2 none; color: #cc0000; font-family:arial,helvetica,sans-serif; border-bottom: 4px solid #000099; } .top h1 { color: #000066; font-size: 22px; margin-top: 6px; margin-bottom: 0; margin-left: 0em; line-height: 1.5; padding-left: 6em; } .top h1 small { color: #cc0000; font-size: 14px; } Vidíte tedy, že samotným selektorem ".top" je určena výška celého záhlaví, barva pozadí, barva i rodina písma a spodní rámeček. Pro každý nadpis úrovně H1 nacházející se uvnitř třídy "top" je pak dána barva a velikost písma, okraje a výška řádku. Poslední pravidlo určuje formátování prvků , uvnitř prvků H1, uvnitř třídy "top". Samotný HTML kód záhlaví pak vypadá takto:
Sova v síti

Jak kaskádují CSS
- příklad k číslu 4/1

Máte-li zájem o další podrobnosti, prostudujte si zdrojový kód na adrese http://www.sovavsiti.cz/samples/samp0104.html. Možná budete překvapeni, čeho lze dosáhnout s jedinou tabulkou o pouhých dvou buňkách a zcela bez formátovacích tagů. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TEXTPAD - VÝBORNÝ EDITOR I PRO HTML Pokud ještě nemáte svůj oblíbený editor pro HTML, nebo pokud dosud používáte vizuální nástroj typu FrontPage a chystáte se přejít na něco profesionálnějšího, vyzkoušejte TextPad. Jedná se o shareware, který je k dispozici na adrese http://www.textpad.com/ a jeho registrace stojí 30 USD. Recenzi v češtině naleznete např. na Živě v článku http://zive.cpress.cz/r-art.asp/id=18789/app=0x444282. A proč že vám ho doporučuji? Inu proto, protože to je editor, který nezdržuje od práce. Neumí toho sice tolik, jako třeba populární HomeSite, ovšem to co umí, umí bezvadně. A tak málo toho zase není. Namátkou: -- definovatelné zvýrazňování (obarvování) až pro 5 různých syntaxí v jednom typu souboru (např. HTML, JS a PHP), -- vyhledávání a nahrazování pomocí regulárních výrazů -- vyhledávání ve všech souborech v určité cestě na disku, nahrazování ve všech otevřených souborech naráz, -- porovnávání dvou souborů a zobrazení rozdílů -- jednoduchá makra -- vyvolání prohlížeče i libovolného jiného programu přímo z editoru -- neomezené undo/redo -- knihovna "výstřížků", tj. např. HTML tagů, nebo celých částí stránek (šablony) -- atd. POUŽÍVÁTE SPRÁVNÝ TYP HTML DOKUMENTU Snad víte, že každý HTML dokument by měl začínat deklarací svého typu. Je to ten řádek, který se vkládá ještě před značku "". Méně jasné ale možná je, co má vlastně obsahovat. Standardní DTD (Document Type Definition, deginice typu dokumentu) publikuje IETF, W3C a ISO/IEC. Těmi hlavními jsou: HTML 2.0 - první DTD definující HTML jako aplikaci SGML. Dnes již téměř nepoužívaný. HTML 3.0 - rozšířil HTML 2.0 např. o tabulky. Dnes se také již prakticky nepoužívá. HTML 3.2 - první norma, která dosáhla výrazného rozšíření počínaje rokem 1996. Zahrnuje dnes známé prezentační prvky původně zavedené Netscapem a převzaté i dalšími prohlížeči. Tento typ je stále vhodný, pokud chcete dosáhnout maximální kompatibility s nejrůznějšími prohlížeči. HTML 4.0 a 4.01 - tato norma má 3 samostatné typy dokumentů: -- Striktní, který zahrnuje jen strukturální prvky. -- Přechodný (transitional), který kvůli zpětné kompatibilitě starších kódů zahrnuje i prvky převzaté z HTML 3.2 -- Frameset je samostatný typ pro dokumenty, které používají rámce. Který typ používat? Dnes nejčastější a nejvíce univerzální je typ HTML 4.01 Transitional. V tom můžete použít vše, co je obsaženo v normě HTML 4.0, včetně odmítnutých (deprecated) prvků a atributů. Pokud chcete být na sebe přísnější a více se přiblížit duchu moderního HTML, můžete zkusit HTML 4.01 Strict. Pak ale musíte zapomenout na všechny odmítnuté prvky a atributy (např. FONT, B, I, atd.). Chcete-li dosáhnout maximální kompatibility s prohlížeči, můžete zvolit HTML 3.2, ovšem v tom případě nesmíte použít mnohá rozšíření HTML 4. Co je však nejdůležitější, nezapomeňte vždy na prvním řádku vašeho dokumentu jeho typ uvést. (Zdroj: Document Types and the WDG DTD, http://htmlhelp.org/design/dtd/) VÝMĚNNÉ REKLAMNÍ SYSTÉMY Pokud vám leží na srdci návštěvnost vašich stránek a nejedná se zrovna o stránky firemní, můžete vyzkoušet výměnné reklamní systémy. Jak tyto systémy fungují? Princip je u všech stejný. Na své stránky vložíte kód dodaný systémem, který zajistí zobrazování cizích reklamních bannerů (obvykle typických proužků, ale i čtverců, ikonek a jiných rozměrů). Váš banner se naopak bude zobrazovat na cizích stránkách. A protože se jedná o systémy výměnné, nemusíte nic platit (a nikdo nezaplatí nic vám ;-)). Počet zobrazení vašeho banneru bude přímo úměrný počtu cizích reklam, které zobrazíte na vašich stránkách (počtu shlédnutí vašich stránek s bannery) a výměnnému poměru. Výměnný poměr je u různých systémů různý a někdy kolísá i během jediného dne (plovoucí výměnný poměr). Většina systémů vám umožní nastavovat několik různých parametrů, spořit váš nárok na zobrazení bannerů, cílit zobrazení na určité servery, atd. Pokud výměnné reklamní systémy dosud nepoužíváte, vyzkoušejte je. Zde je pár adres, kde začít a příště si řekneme několik zásad správného vedení reklamní bannerové kampaně: http://www.billboard.cz/ - český systém Billboard http://linx.clark.cz/ - česky systém Mr.Lin(x) http://adnetwork.bcentral.com/ - mezinárodní systém LinkExchange ze stáje MS http://www.lupa.cz/clanek.phtml?show=1197 - porovnání systémů Billboard a Mr.Link(x) v článku na Lupě z konce loňského roku. ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ Minule jsem si posteskl, že posíláte málo dotazů a hned se jich sešlo tolik, že ani nestačím na všechny odpovědět. Pokud tedy odpověď na svůj dotaz nenaleznete v tomto čísle, určitě bude zařazena v tom příštím. Dotaz 1: Dá se v buňce tabulky (pozadí) opakovat obrázek, ale jen podsebe? Odpověď: Ano dá. Klasický způsob spočívá v tom, že se obrázek udělá tak široký, aby za každých okolností šířku buňky přesahoval. Druhý, čistší způsob je pomocí CSS takto: td.spozadim { background-image: url(images/pozadi.gif); background-repeat-y; } Pro úplnost dodejme, že pravidlo background-repeat-x; by naopak způsobilo horizontální opakování obrázku. Pozor, nefunguje v NN 4. Dotaz 2: Mám předělat stránky na CSS a chtěl jsem to vše udělat pomocí .styl1 { ...} .styl2 { ...} ... ... (názvy jsou jen ilustrativní). Je tato metoda vhodná nebo to mám udělat formátováním tagů TD, H... atd. Nevím jak se to bude do budoucna rozšiřovat a tak nechci formátovat např: TD. Odpověď: Ideální a nejefektivnější je kombinace tříd a strukturálních (významových) tagů, jako je např. H1 - H6, P, STRONG, EM, UL, OL, atd. Formátovat konkrétní tagy atributem "style" má smysl jen ve zcela výjimečných případech. Snad vám napoví dnešní hlavní článek. Pokud ne, ptejte se dále :-). Dotaz 3: Připojím-li popis stylu "styl.css" tak by se měl dokument zobrazovat až po načtení souboru se styly. Napíšu-li dek. stylů přímo do "index.htm", tak se to zobrazí hned??? (Asi ano). Odpověď: V případě definice stylů v externím souboru opravdu musí prohlížeč načíst 2 soubory místo jednoho. Ve skutečnosti je to ale většinou rychlejší, než umístění stylů přímo do HTML dokumentu tagem STYLE. Jde totiž o to, že prakticky všechny prohlížeče si uloží externí definici do cache a pro každou novou stránku ji tedy již nebudou znovu načítat. Základní pravidlo zní: u vícestránkových webů patří definice všech stylů společných všem stránkám do externího souboru. Styly specifické jen pro jednu stránku pak patří do tagu STYLE této stránky. Styl specifický pouze pro jeden výskyt určitého tagu patří do atributu "style" tohoto tagu. Ve stejném pořadí stoupá priorita definic, takže lze styly ve stránce předefinovat styly v externím souboru a styly v tagu předefinovat všechny ostatní. V určitých případech lze využít i import stylů příkazem @import. Pozor na jednu záludnost NN. Nenajde-li externí definici stylu, ohlásí chybu a nezobrazí nic! IE v takovém případě správně zobrazí HTML bez ovlivnění styly. Dotaz 4: Lze odstranit průhlednou linku tvořící se kolem kteréhokoliv odkazu ve chvíli kliknutí na něj? Odpověď: Domnívám se, že nelze. Rozhodně nevím jak a nevím ani, k čemu by to bylo dobré. Slabé orámování vybraného odkazu totiž mimo jiné slouží k pohybu po odkazech klávesnicí. Zkuste si někdy zasurfovat po webu bez myši - kupodivu to jde docela dobře ;-). Dotaz 5: Chtěl bych na svých stránkách (provozovaných na vlastní doméně) vytvořit bazar, který automaticky po vložení inzerátu jej uveřejní a zároveň zařadí do příslušné rubriky.Zároveň taky inzerát po určité době (kterou si nastavim) smaže. Umím dělat pouze v HTML, popř. vkládat již připravené skripty, ale přímo naprogramovat bazar bych asi jen tak nezvládl. Proto potřebuji poradit co dělat, jestli lze někde stáhnout již připravené bazary a upravit si jen nastavení barev, textů apod. a nebo jestli se budu muset naučit některý z jazyků, v kterém je lze vytvořit. Odpověď: K dosažení popsané funkčnosti potřebujete především databázi a pak nějaký jazyk/technologii pro zpracování na straně serveru. Klasické CGI se již skoro nepoužívá, takže zbývá u nás nejrozšířenější ASP nebo PHP, či méně rozšířené JSP či ColdFusion. Bez podrobnějších informací nelze nic víc poradit. Záleží na tom, co máte k dispozici na svém serveru, jaký výkon a spolehlivost od systému očekáváte, atd. Pokud však nemáte s programováním serverových databázových aplikací žádné zkušenosti, počítejte s tím, že získání potřebných znalostí a praxe vám nějaký ten rok zabere. Hotové, či skoro hotové aplikace samozřejmě existují pro všechny běžné platformy, ovšem buď jsou kvalitní a nevyžadují žádné úpravy, ale pak něco stojí, nebo jsou zdarma, ale pak se většinou bez větších či menších úprav neobejdou. Dotaz 6: ... pisete zde ze tzv. formatovaci prvky atd.. nemaji v HTML co delat, chtel bych se zeptat proc? Odpověď: Prostě proto, že jsou v aktuální normě HTML 4.01, resp. XHTML 1.0 odmítnuty (deprecated). Jako náhrada tradičních tagů B a I slouží obvykle významové tagy STRONG a EM v kombinaci s CSS. Pokud přesto chcete tyto odmítnuté prvky (a ještě více odmítnutých atributů) používat, nezapomeňte použít jako typ dokumentu HTML 4.0 Transitional (viz výše). Zároveň však počítejte s tím, že si později zkomplikujete cestu k modernějším typům dokumentů (XHTML, XML). Trend totiž jednoznačně směřuje k co nejdůslednějšímu oddělení obsahu od formy. Dotaz 7: Samozrejme souhlasim, ze CSS je velmi dobra vec ke zjednoduseni prace, ale co treba zobrazovani NN?? Ten pulku stranky, ktera pouziva CSS zobrazi tak jak ma a druhou pulku stranky jak se mu zlibi :-( Odpověď: Bohužel máte pravdu, že NN (zejména do verzí 4.xx) si s CSS poradí jen částečně. Na druhou stranu není většinou takový problém navrhnout stránku tak, aby se v IE s plnou podporou CSS zobrazila perfektně a v NN se slabou podporou CSS sice graficky hůře, ovšem stále ještě plně čitelně. Podíl uživatelů NN u většiny webů nepřekračuje 5%. Proč tedy "optimalizovat" pro NN a trestat tak zbývajících 95% méně efektivními a kvalitními stránkami. Dotaz 8: Můžete mi prosím poradit, jak nejjednodušeji stáhnout program, ve kterém vytvořím databázi mySQL a jak nejlépe dostat databázi z platformy Access na platformu mySQL...? Odpověď: Problematika databází (byť webových) přeci jenom přesahuje zaměření Sovy na spíše začínající webmastery. Poradím vám tedy něco jiného - přihlaste se do emailové konference Intervalu.cz na adrese http://www.interval.cz/help/. Uvidíte, kolik lidí ochotných poradit tam najdete. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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/