Definice: zapomenuté tagy
Seznam definic - Compact
- Další možnosti stylování - Jde
to tabulkami
Seznam definic
Snad už v první verzi jazyka HTML existovaly značky na vymezení definic.
Protože www se mělo stát hlavně vědeckým prostorem, bylo zavedení definic
pochopitelné. Takže vznikly tři HTML tagy: <dl>, <dt> a <dd>,
které se udržely dodnes.
- <DL>
- Anglicky Definition List, tedy seznam definic. Uvnitř tohoto párového
tagu se mají vyskytovat párové značky <dt> a <dd>
- <DT>
- Definovaný termín. Zobrazuje se normálně vlevo. Anglicky Defined Term.
V dalším textu vnitřek tagu <dt> nazývám "termín".
- <DD>
- Definice příslušící k předchozímu termínu. Zobrazuje se o řádek
níž a je asi o palec odsazená od levého okraje. Tag <dd> nazývám
"definicí".
- Syntaxe
- Správně by měl zdrojový kód seznamu definic vypadat takto:
<dl>
<dt>První termín</dt>
<dd>Výklad prvního termínu</dd>
<dt>Druhý termín</dt>
<dd>Výklad druhého termínu</dd>
</dl>
Teoreticky se nemusí psát uzavírací tagy </dt> a </dd>, já
je raději píšu, protože se tím nic nezkazí.
- Použití a zneužití
- Protože Internet už dávno není čistě vědecké médium, lze těchto
tagů zneužívat pro formátovací účely. Pokud je ale náhodou někdy
potřeba vysvětlit větší množství termnínů, neexistuje lepší a přehlednější
nástroj. Já sám rád užívám definic pro seznam
změn svých stránek, kdy na místě termínu píšu datum a v definici
popisuji ty změny. Příklad:
- 31. července 2000
- Píšu tuhle stránku
- 1. srpna
- Asi ji raději smažu :-)
Compact
- Tag compact
- Použití atributu "compact" u tagu <dl compact> umožňuje
defincicím (tag dd), aby se zobrazovaly vedle definovaného termínu, tedy
pokud se tam vejdou. Když se compact nepoužije, (tedy v normálním případě)
definice se zobrazí až na dalším řádku.
- Nestandardní!
- Musím zmínit, že tento atribut je považován za nestandardní, takže
by se neměl používat. Podle mých zkušeností je ale podporován v IE i
NN, takže se hodí, třebaže má některé chybky, které popisuji níže.
- Délka termínu
- Někdy je ale definovaný termín příliš dlouhý, takže se vedle něj
definice prostě nevejde. Naštěstí se dá nastavit levý okraj definic
tak velký, aby se do něj vešly i relativně dlouhé termíny. Levý okraj
se nastavuje CSS stylem:
dd {margin-left:
150px} třeba. (Stejně tak je možno použít i padding.)
- Příliš dlouhý termín, tak dlouhý, že se to vedle něj nemůže vejít
- Pokud vedle termínu prostě není místo, definice začíná odsazená na
novém řádku, tak jako by atributu "compact" nebylo. Pokud ale náhodou
termín kousek přeteče na další řádku, definice se zobrazí vedle toho
kousku.
- Netscape
- Netscape verze 4 podporuje atribut compact, ale neumožňuje nastavení
velikosti odsazení pomocí CSS. Ba co víc, dokonce potom neodsadí
definici vůbec! To není dobré. Naštěstí se dá Netscape oblafnout, aby definici odsadil alespoň
defaultně: do závorky stylu stačí přidat nějaký nesmysl, třeba
dd
{margin-left: 100px; nesmysl}. Pak bude Netscape ignorovat celou tu
složenou závorku, takže to zobrazí alespoň normálně o palec odsazené.
- Nepříjemnost v IE 5
- Určité tagy na začátku definice způsobují, že Inetrnet
Explorer 5 ignoruje atribut compact u <dl>! Zjistil jsem to u odkazů,
obrázků a tagů <b> a <span>, takže předpokládám, že to dělají
skoro všechny tagy. Ale třeba <object> to nezpůsobí. Jediné
trochu schůdné řešení je dávat na začátek písmeno nebo alespoň
pevnou mezeru , to ale kazí dojem.
- IE 4 je v pohodě a žádný tag na začátku definice mu nevadí.
- Skotačení IE 4
- Internet Explorer 4 se chová naprosto neuvěřitelně, pokud se na
prvním řádku compact definice s udaným margin-left objeví odkaz.
Kliknutím na něj celý text definice poskočí doprava, jakoby to nebyl
margin, ale zároveň i text-indent. Na odkaz se potom musí kliknout znova.
- Minulé tři odstavečky jsou jasným důkazem nepodporovanosti atributu
compact.
- Závaznost syntaxe
- Je nutné dávat atribut compact do tabu <dl>, jinde prostě
nefunguje (ani v dd, ani v dt).
- Compact v CSS
- K velké lítosti mnohých "stylařů" se musí tag compact
vpisovat přímo do tagu <dl>. V návrhu CSS2 sice existuje nová
hodnota vlastnosti display: compact, která zatím ale není nikde podporována.
Až bude, tak se to bude zapisovat do stylopisu: dl {display: compact}, zatím
to ale nemá smysl.
- FrontPage 98
- Dejte si pozor na tenhle Microsoftí editor: namísto
<dl compact>
zapisuje do kódu <dl codebase="true">. V
editoru to vypadá jako compact, ale v žádném prohlížeči to tak
nefunguje.
Další možnosti stylování
- Odsazení první řádky
- Dokonalý špek představuje compact a odsazení první řádky.
Dělá se to taktéž pomocí CSS stylů, vlastností text-indent:
dd
{text-indent: 200px}. Lze to použít namísto odsazení celé
definice vlastností margin. Potom to vypadá, jako by v textu byl tabulátor.
- Kombinované
- Je možno použít i obou odsazení najednou (margin i
indent), což může přinést opravdu hezkou úpravu. Mimochodem, Netscape
úplně vlastnost text-indent u tagu <dd> ignoruje, takže se není třeba
obávat, že by to vypadalo špatně.
- Tučný termín
- V tomto textu schválně ztučňuji všechny termíny. Normálně se tučně
nezobrazují. Stačí napsat do stylopisu deklaraci
dt {font-weight:
bold}, čímž se podle zásad CSS ztuční všechny definované termíny.
Samozřejmě lze použít jakýkoliv jiný myslitelný formát. Výhodou
tohoto formátování je fakt, že funguje i v Netscapu. A je hezké.
- Zarovnání doprava
- Text definice se dá zarovnávat doprava pouze pomocí CSS stylů:
dd
{text-align: right; IE} -- zkusil jsem <dd
align="right"> a nefungovalo to. Představte si, co všechno
se s tím dá udělat. Třeba nadpis a datum na jednom řádku. Žel,
Netscape to nechápe a zarovnává doprava termín. Takže přichází ke
slovu opět nesmysl v deklaraci stylu (to je to IE).
- Nadpis
- datum: 31. července 2000
- Zanořené definice
- Další seznam definic (<dl compact>) uvnitř jedné definice (<dd>)
- první termín
- definice 1. termínu
- druhý termín
- definice druhého
Jde to tabulkami
Všechno, co jsem popisoval v tomto textu, se dá spolehlivěji udělat i pomocí tabulek, třebaže ne tak elegantně. Mimochodem
právě existence tabulek je podle mě důvodem, proč se dnes seznamy definic
skoro vůbec nepoužívají.
Vizte též: Tabulky, Přehled hodnot CSS, Úvod do
CSS, Základy HTML, Okraje objektů - margin a padding
