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:
, uvnitř prvků H1,
uvnitř třídy "top". Samotný HTML kód záhlaví pak vypadá takto:
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/
|