XHTML – základní atributy, element head
V dalším díle našeho seriálu o XHTML si představíme základní atributy typické pro většinu elementů a také se začneme zabývat hlavičkou dokumentu, konkrétně elementem head.
Entita %coreattrs; – základní atributy
Do této entity řadíme několik atributů, které se dají použít u většiny elementů. V případě, že lze u elementu použít všechny čtyři, jsou zastupovány zmiňovanou entitou, jinak se vyskytují jednotlivě. Jsou to:
id ID #IMPLIED
- Pomocí tohoto atributu lze elementu přiřadit jméno, které musí být jedinečné pro celý dokument (tzn. jméno
mujElement
můžeme přiřadit v dokumentu pouze jednomu elementu). V hodnotě tohoto atributu nejsou rozpoznávány znakové entity, tzn. element se jménemmujΔElement
budete vždy používat jen jakomujΔElement
, ne jakomujΔElement
. Tomu, jak lze toto jméno využít, se věnujeme o něco níže. class CDATA #IMPLIED
- Pomocí tohoto atributu můžeme element přiřadit do jedné nebo více tříd. Jako hodnota je udáváno jméno třídy – pokud chceme element přiřadit do více než jedné třídy, musíme je od sebe oddělit bílými místy (mezera, zlom řádky, tabulátor) a na jejich pořadí nezáleží (tzn.
class="trida1 trida2"
je stejné jakoclass="trida2 trida1"
). Stejná třída může být přiřazena libovolnému počtu elementů. Tímto atributem se dnes také ještě budeme zabývat. style %StyleSheet; #IMPLIED
- Díky tomuto atributu můžete danému elementu nastavit vizuální, popřípadě hlasové vlastnosti pomocí nějakého stylového jazyka – dnes je jím v podstatě výhradně CSS, protože jiný současné prohlížeče neovládají. I tak ale, pokud chcete tento atribut využívat, musíte udat používaný stylový jazyk, a to pomocí elementu
meta
– ještě se tím budeme zabývat. V tomto atributu jsou rozpoznávány znakové entity. Citlivost na velikost písmen závisí na použitém stylovém jazyku, např. CSS citlivé na velikost písmen není. V případě použití CSS u tohoto atributu je syntaxevlastnost: hodnota
, přičemž jednotlivé vlastnosti jsou odděleny středníkem – nepoužívají se zde tedy selektory, složené závorky ({}) ani @-pravidla.Atribut
style
popírá jednu ze základních myšlenek XML a XHTML, tedy oddělení struktury (reprezentované XHTML) a vzhledu (reprezentovaného nějakým stylovým jazykem, např. zmiňovaným CSS) – proto je od něj dnes upouštěno a ani já vám jeho používání nedoporučuji. Daleko lepším řešením je odkazovat se v XHTML souboru na soubor s externí definicí stylů – o tom bude řeč v jednom z následujících dílů. title %Text; #IMPLIED
- Tento atribut specifikuje popis elementu, který může uživateli pomoct v orientaci na stránce. Většina vizuálních prohlížečů ho interpretuje jako tzv. tooltip – tedy informaci, která se zobrazí u kurzoru myši v momentě, kdy ji uživatel podrží nad daným elementem. Hlasové prohlížeče obsah tohoto atributu čtou, takže ani jejich uživatelé nebudou připraveni o vaše sdělení – naopak, tento popisek je pro podobné prohlížeče velmi důležitý – to z toho důvodu, že uživatel zde vaši stránku nevidí celou, a proto se na ní hůře orientuje.
Vřele vám tedy doporučuji tento atribut používat co možná nejčastěji, např. ke kontextové nápovědě, sdělení klávesové zkratky pro daný element (pokud element umožňuje její nastavení), popisu obsahu odkazů (to je obzvlášť důležité – u každého odkazu by mělo být jasné kam vede, i když je vytržen z kontextu stránky – tedy když uživatel vidí pouze jeho text a popisek).
Nejdříve se budeme věnovat atributu id
, který zajišťuje jedinečné pojmenování elementu. Tohoto pojmenování můžeme využít v mnoha situacích:
- K odkazování se na element v CSS pro přiřazení jedinečného stylu danému elementu.
- Jako cíl odkazu (pokud se chceme odkázat přesně na daný element), odkazy se ještě budeme zabývat.
- Pro odkazování se na element ve skriptech.
- K odkazování se na předdeklarovaný objekt (tímto se ještě také budeme zabývat).
- Pro účely případného přetransformování (např. do databázové tabulky, jiného formátu).
Využití tříd přiřazených elementu pomocí atributu class
je potom následující:
- K odkazování se na elementy z dané třídy v CSS.
- K odkazování se na danou skupinu elementů ve skriptech.
- Pro rozřazení elementů pro účely přetransformování.
Nyní se podívejme na příklad využití atributů id
a class
. Řekněme, že provozujeme internetový obchod s motorovými vozidly a chceme umístit na hlavní stránku stručný výčet naší nabídky. Kromě toho, že bychom měli uzavřít celý výčet do příslušných elementů (dl
, dt
a dd
– v jednom z příštích dílu si je ještě probereme), můžeme výrobky roztřídit do různých skupin tvořených třídami a navíc každý výrobek pojmenovat:
<dl>
<dt id=“skoda“ class=“osobni tuzemske“>Osobní automobily Škoda</dt>
<dd>Malý vůz s malou spotřebou.</dd>
<dt id=“karosa“ class=“hromadna-preprava tuzemske“>Autobusy Karosa</dt>
<dd>Mnoho autobusů přesně pro Vaši potřebu.</dd>
<dt id=“tatra“ class=“nakladni tuzemske“>Nákladní automobily Tatra</dt>
<dd>Nákladní automobily vhodné pro tuzemskou i mezinárodní dopravu.</dd>
<dt class=“osobni nakladni hromadna-preprava zahranicni“>Zahraniční vozidla</dt>
<dd>Pokud Vám nevyhovují tuzemské výrobky…</dd>
</dl>
V praxi většinou bývají zápisy tříd jednodušší, málokdy potřebujete složitější rozřazení. Nicméně tento zápis nám umožní provádět s výčtem celou řadu věcí, např. v CSS můžeme zahraniční výrobky vykreslit kurzívou, tuzemské tučně, osobní auta modře, autobusy zeleně, nákladní auta červeně, tuzemské nákladní větším písmem atd. Tímto vás samozřejmě nechci navádět k tomu, abyste ze svých stránek dělali cirkus. Jde pouze o to, abyste věděli, jaké možnosti díky správnému rozřazení do tříd máte. Podobné možnosti získáte i pokud chcete uložit informace ze svých stránek do databáze, pokud chcete integrovat na stránkách vlastní fulltextové vyhledávání aj.
Element head – hlavička dokumentu
Povolený obsah: (%head.misc;, ((title, %head.misc;, (base, %head.misc;)?) | (base, %head.misc;, (title, %head.misc;))))
Atributy:
%i18n;
- Tato parametrická entita obsahuje atributy internacionalizace, tedy
lang
,xml:lang
adir
. id ID #IMPLIED
- Obsahem tohoto atributu je jméno elementu.
profile %URI; #IMPLIED
- Tento atribut obsahuje URI souboru s profilem meta-dat. Tento profil se potom používá pro všechny elementy
meta
alink
uvnitř hlavičkové části. Pro interprety XHTML není povinné podporovat meta-data. Můžete použít i více URI oddělených bílým místem (mezera, zlom řádky, tabulátor), avšak interpreti XHTML pravděpodobně budou rozeznávat pouze první z nich.
URI zde uvedené může být bráno jako identifikátor nějakého obecně známého profilu, který je používán více webovými stránkami, a dokument tak může být interpretován na základě obecně známých konvencí tohoto profilu. Další možnost je, že interpret XHTML se podívá do profilu na uvedeném URI a na základě něj bude s dokumentem určitým způsobem pracovat.
Element head v XHTML 1.0 Strict DTD
Entita %head.misc; – elementy hlavičky dokumentu
Tato entita se poměrně hojně vyskytuje v deklaraci elementu head
výše:
Obsah entity: (script|style|meta|link|object)*
Parametrická entita %head.misc; v XHTML 1.0 Strict DTD
Element head
uzavírá celou hlavičkovou část dokumentu. Ta obsahuje informace o dokumentu (stručný popis, seznam klíčových slov, titulek dokumentu) a není vykreslena jako součást stránky, ale interpret XHTML ji může zpřístupnit uživateli jiným způsobem.
Možná jste se trochu zděsili při pohledu na úryvek z DTD reprezentující povolený obsah tohoto elementu – interpretace tohoto úryvku je přitom poměrně jednoduchá: obsahem mohou být elementy z entity %head.misc;
(script
, style
, meta
, link
a object
) v libovolném počtu (nemusí se ale vyskytovat vůbec), právě jeden element title
(ten je jako jediný povinný pro každý dokument) a nejvýše jeden element base
(nemusí se ale vyskytovat vůbec). Všechny uvedené elementy mohou následovat v libovolném pořadí.
Mohlo by vás také zajímat
-
4 tipy, jak na efektivní úsporu při rozjezdu podnikání
3. ledna 2023 -
Regulace digitálních služeb: Co přináší nové nařízení DSA?
20. února 2024 -
Webový správce souborů Filestash – dojmy a recenze
29. července 2024 -
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024