Tipy – triky při tvorbě HTML stránek 3.

Třetí pokračování nepravidelného seriálu o tipech při tvorbě WWW stránek. Seriál je určen především pro začínající tvůrce www, ale na své si zde můžou přijít i zkušení webmasteři. Dnes celkem pět zajímavých tipů.

Nulové okraje stránek v Opeře

Mnoho tvůrců www stránek používá pro nastavení nulových okrajů stránek parametry LEFTMARGIN a TOPMARGIN, které používá pouze Internet Explorer a MARGINWIDTH a MARGINHEIGHT, které naopak fungují pouze v Netscape Navigatoru. Tyto parametry ovšem nenastaví nulové okraje v Opeře, která se snaží držet standardu jazyka HTML, kde není uvedena ani jedna věta o výše jmenovaných čtyřech parametrech. Nulové okraje se tak pro Operu (fungují i v Internet Exploreru) musí definovat následujícím stylem:

BODY { margin-bottom : 0; margin-left : 0; margin-right : 0; margin-top : 0; }

Chyba v Netscape Navigatoru

Pokud tvoříte náročnější webové stránky, potřebujete používat tabulky. Někdy se ale stane, že v Nescape Navigatoru nesedí velikosti jednotlivých tabulek či tabulky na sebe nenavazují tak, jak bychom si přáli. Chybou může být chybějící parametr BORDER, kterým se nastavuje orámování tabulky.

Pokud totiž Netscape nenajde v definici tabulky parametr BORDER=“0″ (používá se v případě, když nechcete mít tabulku orámovanou), sám a zcela svévolně proti definici HTML vytvoří kolem tabulky neviditelné orámování o velikosti jednoho pixelu. Nenechte se ukolébat faktem, že Internet Explorer při neuvedení BORDER správně nastaví nulový okraj kolem tabulky, což ovšem v Nestscape Navigatoru funguje přesně naopak a proto vždy uvádějte tagu <TABLE> parametr BORDER.

Zabránění indexování určitých adresářů

Pokud chcete zabránit indexovacím robotům v prohledávání určitých adresářů na vašem serveru, umístněte do rootu vašeho webu krátký textový soubor, který pojmenujte jako robots.txt a do kterého vložte následující obsah:

User-agent: * Disallow: /adresar1/podadresar1 Disallow: /adresar2 Disallow: /adresar3

Příkaz User-agent definuje přímo konkrétního indexovacího robota, který by neměl indexovat adresáře uvedené v robots.txt. Místo konkrétného jména robota je v našem příkladu doplněna *, čímž říkáme, že zákaz indexování uvedených adresářů platí pro všechny roboty.

Příkaz Disallow specifikuje adresáře, které by neměli roboti indexovat. Více o problematice indexovacích robotů naleznete na této adrese: http://info.webcrawler.com/mak/projects/robots/robots.html

Barevné orámování tabulky

Pokud ve svých stránkách používáte tabulky, určitě jste je již někdy potřebovali barevně orámovat. Pokud totiž zadáte u tabulky pouze parametr BORDER=“1″, dočkáte se jednopixelového šedého orámování, jak je vidět v následujícím příkladě, což je vzhledově nic moc:

Alfa	Beta
Gama	Delta

Internet Explorer ovšem další parametry pro definici orámování tabulky. Nám bude stačit parametr BORDERCOLOR=“barva“, který nastaví orámování na vámi požadovanou barvu – třeba na černou:

Alfa	Beta
Gama	Delta

Barevné orámování tabulky příliš nefunguje v Netscape Navigatoru, ten totiž do orámování tabulky tvrdošíjně doplňuje stín a není možné se ho zbavit, takže nikdy například nedosáhnete čistě černé barvy. Pokud tedy chcete mít tabulky na vašem webu barevně orámovány a nebude vám vadit, že používáte parametr, který není uveden ve specifikaci HTML 4.0 a který funguje pouze v Internet Exploreru, použijte u <TABLE> parametr BORDERCOLOR=“barva“.

Rychlejší zobrazení dlouhých stránek.

Pokud máte příliš dlouhý text v tabulce, příliš dlouho trvá, než se tento text zobrazí případnému čtenáři. Tip pro rychlejší zobraztení je velmi jednoduchý – rozdělte tento text do více samotatných tabulek. Moderní prohlížeče totiž umí zobrazovat celé tabulky, když další obsah stránky není ještě načten, ale rozhodně neumí zobrazit nedokončenou (=nenačtenou) tabulku. Pokud tedy máte v jediné tabulce opravdu dlouhý text, počítejte s faktem, že čtenář nebude čekat deset minut, až se mu celá stránka načte a teprve poté zobrazí, radši vložte text do více samostatných tabulek, které se budou postupně zobrazovat:

Špatný postup

<TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“0″> <TR><TD>První část textu. Druhá část textu…</TD></TR> </TABLE>

Dobrý postup:

<TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“0″> <TR><TD>První část textu</TD></TR> </TABLE> <TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“0″> <TR><TD>Druhá část textu</TD></TR> </TABLE>

Upozornění – tento způsob nefunguje v případě, že máte tabulky s textem vnořeny do jiné, nadřazené tabulky. Jednotlivé tabulky s částmi textu můžou být v takovém případě už dávno načteny, nicméně se stále nezobrazují, protože hlavní (nadřazená) tabulka, ve které jsou umístněny tyto jednotlivé tabulky není stále ukončena a její obsah se tak zobrazí až po načtení všech dat.