Sova v síti - 1/29 - vydáno 5.11.2001

Dobrý den, končí pondělí a je zde vaše Sova v síti :-)


OBSAH

-- Tabulky v HTML 4
-- EyeDropper a Ruler, dvě užitečné utility pro webmastery
-- Nové stránky Pavla Šimka
-- Novinky u Petra Kocny
-- Odpovídáme na dotazy čtenářů


TABULKY V HTML 4

Přestože již od uvedení normy HTML 4 uplynulo několik let
a prohlížeče se jí více méně přizpůsobily, pro konstrukci tabulek
se stále převážně využívají jenom tradiční značky <table>, <tr>
a <td>. HTML 4 ale nabízí mnohem víc.

Podívejme se nejprve, jaké značky jsou pro tabulky k dispozici
a co znamenají:

<table> ... ohraničuje celou tabulku
<caption> ... určuje popisek tabulky (buď nad, nebo pod tabulkou)
<colgroup> ... definuje skupiny sloupců a jejich vlastnosti
<col> ... definuje vlastnosti sloupce
<thead> ... vymezuje řádky tvořící záhlaví tabulky
<tbody> ... definuje skupiny řádků
<tfoot> ... vymezuje řádky tvořící zápatí tabulky
<tr> ... vymezuje jednotlivé řádky tabulky
<th> ... vymezuje jednotlivé buňky v rámci záhlaví tabulky
<td> ... vymezuje jednotlivé buňky

Než se pustím do jednotlivých prvků a jejich atributů, podívejte
se, jak jsou navzájem provázané a jak do sebe zapadají. Názorně
to ukazuje toto schéma:

<table>
  <caption>...</caption>
  <colgroup span="3" />
  <colgroup>
    <col />
    <col />
  </colgroup>
  <col>
  <thead>
    <tr><th>...</th></tr>
  </thead>
  <tfoot>
    <tr><td>...</td></tr>
  </tfoot>
  <tbody>
    <tr><td>...</td></tr>
  </tbody>
</table>

Aby bylo schéma jednoznačné, musím ještě doplnit tyto pravidla:

-- Nepárové značky jsou pro přehlednost doplněny koncovým
lomítkem, které je v praxi (v případě HTML 4) nadbytečné.

-- Není-li řečeno jinak, jsou všechny prvky uvnitř tabulky
nepovinné.

-- Je-li v tabulce <caption>, musí být *prvním* prvkem přímo
uvnitř <table>.

-- Prvky <colgroup> musí být umístěny za nepovinným <caption>
a před nepovinným <thead>.

-- Prvek <col> může být umístěn uvnitř <colgroup> nebo na stejném
místě jako <colgroup>.

-- Prvek <thead> může být v tabulce pouze jednou a je-li použit,
musí být za nepovinnými <caption>, <colgroup> a <col> a před
<tbody>. <thead> musí obsahovat alespoň jeden prvek <tr>.

-- Prvek <tbody> může být v tabulce víckrát, vždy však mezi
nepovinnými <thead> a <tfoot>. Pokud tabulka neobsahuje prvky
<thead> a <tfoot>, je značka <tbody> nepovinná. <tbody> musí
obsahovat alespoň jeden prvek <tr>.

-- Prvek <tfoot> může být v tabulce pouze jednou a je-li použit,
musí být za nepovinným <thead> a před <tbody>. <tfoot> musí
obsahovat alespoň jeden prvek <tr>.

A nyní již k jednotlivým prvkům a jejich atributům. Prvky
<table>, <tr> a <td> se zabývat nebudu, ty jsou vám již jistě
notoricky známé. Také nebudu vyjmenovávat všechny atributy, ale
pouze ty, které mají praktický význam a nejsou zavrženy
(deprecated).

<caption>....</caption>

Prvek Caption by měl obsahovat popisek, nebo nadpis celé tabulky.
Může obsahovat pouze text a řádkové prvky.

<col>

Značkou <col> lze definovat atributy společné celému sloupci
(sloupcům).  Kromě obecných (style, class, id, atd.), jsou
k dispozici tyto atributy:

+ span -- určuje počet sloupců, které sdílejí ostatní dané
atributy, ke sloučení sloupců tím ale nedochází a pro logické
seskupení sloupců je správné použít <colgroup>

+ width -- určuje šířku sloupce buď počtem pixelů (width="40"),
nebo procentem z celkové šířky tabulky (width="20%"), nebo
relativně vzhledem k ostatním sloupců (width="3*").

+ align -- definuje vodorovné zarovnání obsahu buněk sloupce.
Možnosti jsou "left" (vlevo), "center" (na střed), "right"
(vpravo), "jusitfy" (do bloku) a "char". Hodnota "char" umožňuje
v kombinaci s atributem charoff dosáhnout zarovnání např. podle
desetinné čárky. Příklad: char="," charoff="50%" vystředí obsah
buněk sloupce podle první čárky.

+ valign -- určuje svislé zarovnání obsahu buněk sloupce. Možné
hodnoty jsou "top" (nahoru), "middle" (na střed), "bottom" (dolů)
a "baseline".

<colgroup>....</colgroup>

Definuje skupinu sloupců v rámci tabulky. Na rozdíl od značky
<col>, která určuje pouze společné, většinou prezentační
atributy, má <colgroup> význam strukturální. Sloupce takto
sdružené by tedy měly mít něco významově společného. Atributy
jsou stejné jako u <col>.

<thead>....</thead>

Vymezuje řádky tvořící záhlaví tabulky. Musí obsahovat alespoň
jeden řádek (prvek <tr>), který dále obsahuje alespoň jednu buňku
(nejčastěji <th>, ale i <td>). V tabulce může být maximálně jeden
prvek <thead> a pokud v tabulce je, stává se značka <tbody>
povinnou.

<tfoot>....</tfoot>

Vymezuje řádky tvořící zápatí tabulky. Musí obsahovat alespoň
jeden řádek (prvek <tr>), který dále obsahuje alespoň jednu buňku
(prvek <td>). V tabulce může být maximálně jeden prvek <tfoot>
a pokud v tabulce je, stává se značka <tbody> povinnou.

Zásadní nevýhodou značky <tfoot> je, že je-li uvedena, musí se
nacházet *před* tělem tabulky <tbody>. Proto se ve starších
prohlížečích, které HTML 4 nepodporují dostatečně, zobrazí
na začátku, a nikoli na konci tabulky.

<th>....</th>

Tento prvek vymezuje obsah buňky v případě, že se jedná
o záhlaví. Jedná se tedy o strukturální prvek, který napomáhá
jak logickému formátování tabulek pomocí CSS, tak správné
interpretaci tabulek hlasovými zařízeními.

Z tohoto pohledu je zejména zajímavý atribut scope, který udává
působnost záhlaví buď na sloupec (scope="col"), řádek
(scope="row"), skupinu sloupců (scope="colgroup"), nebo skupinu
řádků (scope="rowgroup"). Kromě toho existují ještě další,
poměrně složitě využitelné atributy a pak atributy shodné se
značkou <td> (rowspan, colspan, align, valign).

<tbody>....</tbody>

Vymezuje skupinu řádků uvnitř tabulky. Tabulka může obsahovat víc
prvků <tbody>. Naopak, pokud tabulka neobsahuje ani <thead>, ani
<tfoot>, nemusíte použít ani <tbody>.

Na závěr článku ještě uvedu pár rad a tipů pro tvorbu tabulek:

-- Snažte se tabulky používat především pro *tabelování dat*.
Pokud používáte tabulky pro layout, snažte se o co nejjednodušší
strukturu a nepoužívejte značky se zvláštním významem (<thead>,
<tfoot>, <th>).

-- Čím jednodušší tabulka, tím lépe. Pokud zobrazovaná data
nejsou složitá, i v HTML 4 si vystačíte s jednoduchou tabulkou
obsahující pouze prvky <tr>, <td> a <th>.

-- Značky <col>, <colgroup>, <thead> a další lze s výhodou použít
jako selektory v definici CSS. Velmi elegantně tím můžete
sjednotit vzhled všech tabulek celého webu.

-- Pozor na kompatibilitu prohlížečů. Nepočítejte s tím, že se
vám ve starších prohlížečích podaří např. formátovat sloupce
pomocí <col> a <colgroup>. To by vám však nemělo bránit tyto
standardní prvky použít tam, kde mají svůj strukturální význam.

Chcete-li si vyzkoušet, co váš prohlížeč zvládne, podívejte se
na vzorovou stránku http://www.sovavsiti.cz/samples/tabulky.html


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Starší čísla naleznete na http://www.sovavsiti.cz/archiv.html
Více odkazů pro webmastery na http://www.sovavsiti.cz/odkazy.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


EYEDROPPER A RULER, DVĚ UŽITEČNÉ UTILITY PRO WEBMASTERY

Nejen textový, či HTML editor a grafický program patří do výbavy
webmastera. Občas se hodí i další nástroje. Dnes vás seznámím se
dvěma sice drobnými, ale o to užitečnějšími prográmky. Oba jsou
určeny pro platformu Windows 95 a vyšší.

--> EyeDropper

Už jste někdy uvažovali, copak to je za barvu na stránkách, které
si právě prohlížíte? Nebo jste potřebovali rychle najít kód barvy
obsažené v nějakém obrázku? Tak přesně k tomu je určen program
EyDropper.

Po spuštění se uhnízdí v liště Windows vedle hodin v podobě
malého kapátka. Jakmile ho pravým tlačítkem myší aktivujete,
objeví se za kursorem myši malé okénko, vněm zvětšený výřez
obrazovky 6x6 pixelů (lze nastavit), nad kterým se kursor právě
nachází a barevný kód právě přejížděného obrazového bodu.

Kromě zobrazení kódu barvy je navíc program schopen uložit tento
kód do schránky Windows, sejmout výřez obrazovky a převést barvu
na stupně šedi, nebo na bezpečnou webovou paletu.

V programu lze nastavit mnoho parametrů, např. velikost
zobrazovaného výřezu obrazovky, způsob zobrazení kódu barvy
(hexa, decimální, RGB, CMYK, atd.), horké klávesy pro aktivaci
a sejmutí obrazovky a některé další.

Bližší informace a samotný program jsou k dispozici
na http://eyedropper.inetia.com/HTML/eng/default.asp

--> Screen Ruler

Nejedná se o nic jiného než o pravítko, které zůstává
na obrazovce vždy na vrchu a jde snadno myší přesouvat, měnit
jeho směr, atd. Přes maximální jednoduchost je program velmi
užitečný, neboť vám kdykoli umožní přesné změření délky či šířky
jakéhokoli objektu na obrazovce.

Bezplatná verze umí měřit pouze v pixelech (což většinou stačí).
Za 15 USD lze získat verzi, která dokáže i několik dalších
délkových jednotek.

Program je k dispozici na http://www.microfox.com/


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Doporučte sovu v síti vašim přátelům. Přepošlete jim toto číslo,
nebo použijte formulář na http://www.sovavsiti.cz/recommend.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


NOVÉ STRÁNKY PAVLA ŠIMKA

Přední český webdesignér a jeden z externích autorů Sovy v síti
právě dokončil zásadní redesign svých vlastních stránek na adrese
http://www.nestor.cz/pas/

Kromě zdařilého grafického vzhledu a nápaditého pojetí navigace
stojí za zmínku zejména to, že stránky plně respektují platné
standardy (validace na XHTML 1 Strict!) a důsledně (na vysoké
technické úrovni) využívají CSS a DOM. Návštěvu stránek
doporučujeme všem, kteří dosud s aplikací těchto standardů váhají
a hledají důkaz, že to opravdu jde.


NOVINKY U PETRA KOCNY K 4.11.2001

... v katalgu katalogů http://www.lf1.cuni.cz/~kocna/kam-www.htm
a vyhledávačů http://www.lf1.cuni.cz/~kocna/roboti.htm

Přidán další nový odkaz - celkem již 174.

Oceány.Sk-Zoznam -- nový slovenský portál + seznam, akceptuje
i české stránky, není přiděleno žádné ID, heslo, žádná editace,
zaměření obecné, prohledávání funguje špatně, není žádné
potvrzení přidání/odmítnutí odkazu, URL je
http://www.ocean.sk/zoznam/index.php, pro přidání stránky je URL:
http://www.ocean.sk/zoznam/index.php?addurl=form

Spectrum -- změna URL formuláře pro vkládání odkazů:
http://verejne.nazory.cz/add.html, počet odkazů se zdvojnásobil,
je jich cca 300.

SrovnejteCZ -- změnila se struktura serveru, zaměření je
finanční, je již jen 6 kategorií odkazů, stránky se zaměřením
internetu, WWW již nelze nabízet, dříve zařazené odkazy zmizely.

Bird.Sk -- slovenský rozcestník, přidána ikonka + URL
http://www.birdz.sk/katalog/novinky.php, kde jsou zveřejňovány
novinky na serveru.

Boskowan -- vznikl zcela nový seznam odkazů, stará odkazovna
ještě existuje, ale nové odkazy jsou zařazeny do seznamu, resp.
zařazení správci slibují do 10 dnů, zatím čekám. Změna URL
hlavního odkazu na http://www.boskovan.cz/

Immanuel -- změna URL formuláře pro přidávání odkazů:
http://immanuel.d2.cz/links.php?op=AddLink

IT Net.Cz -- zrušen, URL více než 6 měsíců nedostupné.


ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ

Dotaz:

Vasa stranka ma zaujala, je tam vela uzitocnych veci. Skusal som
ten Atomz. Je mozne to vyuzit aj ako vyhladac napr.: pre viac
internetovych portalov? Ja som si na Atomz zaindexoval svoju
indexovu stranku a pod to este www.zoznam.sk, www.szm.sk,
www.naj.sk a pod. Ale tak to nefungovalo. Da sa to nejako
nastavit? Alebo ako by sa dal urobit vyhladavac slovenskych web
stranok?

Odpověď:

Ano, to vám opravdu nemohl fungovat. Atomz je totiž určen
výhradně pro vaše vlastní stránky (tj. v rámci jedné domény).
Navíc jeho bezplatná verze umí indexovat maximálně 500 stránek.
Za větší počet byste už musel platit.

Chcete-li mít na vašich stránkách vyhledávač pro celou národní
doménu, doporučuji Google (http://www.google.com), který toto
umožňuje. Nevím jak na Slovensku, ale pro doménu CZ lze obdobně
využít i vyhledávač Atlasu, Seznamu a některých dalších portálů.

Nepočítejte však s tím, že si budete moci podle svého upravit
stráku výsledků. To sice v případě Googlu také jde, ovšem za
cenu, která je nad možnosti běžných firem, natožpak jednotlivců.


Dotaz:

Jak (nebo jestli vubec) mi pobezi ASP na webserveru Apache? Ma
tento webserver podporu pro ASP skripty? Mam hotovy web a jak to
vypada, budu ho muset premistit z IIS na Apache. Ted by me
zajimalo, jestli budu muset ASP stranky prepisovat, nebo jestli
mi pobezi i na serveru Apache?

Odpověď:

Pro unix a Apache existuje podpora ASP od společnosti ChilliSoft.
Pokud je mi ale známo, není zadarmo. Možná naleznete i další
produkty. Otázka však je spolehlivost těchto řešení. Doporučoval
bych ponechat ASP na IIS.


A to je pro dnešek vše, těšíme se na shledanou opět v pondělí,
kdy v čísle 30 naleznete:

-- Psychologie Webu -- inspirativní i praktický úvod nového
autora Sovy v síti, Miroslava Hlavičky, do psychologických zákonů
webdesignu.

-- Jak na pozadí prvků v NN 4.x pomocí CSS -- vybarvuje se vám
pozadí prvků v NN 4.x jen pod textem a ne po celé ploše prvku? 
I na to existuje trik.

-- Odpovědi na vaše dotazy, zajímavé odkazy, novinky v katalogu
katalogů a vyhledávačů Petra Kocny, atd.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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/