Lekce 17 - Ostatní tagy v HTML II. část

V minulé lekci, Ostatní tagy v HTML, jsme si ukázali ostatní tagy, mezi které patří třeba <div>, <span>, <a> a <template>.

<dialog>

Tag <dialog> je používáno jako takzvané dialogové okno nebo podokno. Tento tag usnadňuje zobrazení vyskakovacích oken(pop-up) na webové stránce. Používá se například pro zobrazení vyskakovacího dotazníku nebo formuláře.

Atribut

• open - Pokud uvedeme tento atribut dialogové okno bude viditelné.

Ukázka

Uvedeme si jednoduchou ukázku:

<dialog open>
  <p>Dialogový box</p>
</dialog>

Nyní vidíme zobrazené dialogové okno:

<address>

Tag <address> poskytuje kontaktní informace k dokumentu nebo jeho části. Tag bývá velmi často špatně chápán a i přes svůj název neobsahuje adresu. Může se jednat např. o jména autorů dokumentu, jména lidí, kteří ho udržují, společnost, která web vytvořila apod. Nabízí se tedy do patičky webu.

Při výchozím nastavení se před adresu vloží odřádkování a je vykreslena kurzívou.

Ukázka

Náš kód by mohl vypadat následovně:

<footer>
    Webmaster: <address><a href="">tvorbawebu.cz</a></address>
</footer>

Výsledek by nás neměl ničím překvapit:

<bdi>

Tag <bdi> (jako Bi-Directional Isolation) označuje text, který může být psán jiným směrem textu, než text okolní. V našich končinách tag asi příliš nevyužijeme. Použití si můžeme představit např. v seznamu se jmény uživatelů, kde mají někteří uživatelé arabské jméno. To by za normálních okolností prohlížeč vyhodnotil jako text psaný zprava doleva a rozbil by okolní text. Proto jméno vložíme do elementu <bdi>.

Ukázka

Ukážeme si použití tagu <bdi> a bez něho:

<h2>S elementem bdi</h2>
<ul>
    <li>Uživatel <bdi>Suresh</bdi>: 15 bodů</li>
    <li>Uživatel <bdi>Daniel</bdi>: 11 bodů</li>
    <li>Uživatel <bdi>الرجل القوي إيان</bdi>: 10 bodů</li>
</ul>

<h2>Bez elementu bdi</h2>
<ul>
    <li>Uživatel <bdi>Suresh</bdi>: 15 bodů</li>
    <li>Uživatel <bdi>Daniel</bdi>: 11 bodů</li>
    <li>Uživatel الرجل القوي إيان: 10 bodů</li>
</ul>

Po odmazaní elementu <bdi> se nám text posune automaticky i v našem editoru:

<bdo>

Tag <bdo> (jako Bi-Directional Override) označuje přepsání aktuálního směru textu. Používá se ve chvíli, kdy chceme do dokumentu vložit text psaný jazykem, který se čte zprava doleva.

Atributy

Pro tento element existuje pouze jeden atribut:

• dir - Specifikuje směr použitého textu, z angličtiny direction = směr.

Ukázka

ukážeme si jednoduché použití:

<p>Tento text je psán zleva doprava.</p>
<p><bdo dir="rtl">Tento text je psán zprava doleva.</bdo></p>

Můžeme si zkontrolovat funkčnost našeho kódu:

<hr>

Tag <hr> v HTML stránce označuje konec nebo změnu tématu. Prohlížeče ho vykreslují jako horizontální (vodorovnou) oddělovací čáru.

Na rozdíl od předchozích verzí HTML má tag <hr> tedy i svůj význam a nepoužívá se jen k vykreslení čáry.

Ukázka

Náš kód by mohl vypadat následovně:

<h1>C#</h1>
<p>Jazyk C# využívá frameworku .NET a je vhodný k tvorbě většiny typů aplikací.</p>

<hr>

<h1>Java</h1>
<p>Jazyk Java je multiplatformní a zcela zdarma. To je také důvod, proč je tak rozšířená.</p>

Výsledek:

<meter>

Tag <meter> v HTML 5 označuje měřič, který zobrazuje určitou část z celku. Je funkčně podobný elementu <progress>, ale na rozdíl od něj se nepoužívá k zobrazení vykonané práce (pokroku). Používá se k zobrazení všeho ostatního, tedy např. volného místa ve složce uživatele nebo zbývajících dnů prémiového účtu.

Element je párový a obaluje alternativní obsah, který se zobrazí, pokud není prohlížečem podporován.

Atributy

Uvedeme si následující atributy:

• form - Určuje, do kterého formuláře element patří, hodnotou je id formuláře. Atribut není povinný, protože meter nemusí být ve formuláři.
• high - Určuje od kolika je hodnota považována jako vysoká.
• low - Určuje do kolika je hodnota považována jako nízká.
• max - Maximální hodnota.
• min - Minimální hodnota.
• optimum - Optimální hodnota.
• value - Současná hodnota měřiče.

Ukázka

Element můžeme vložit pouze zadáním atributu value:

Využité místo na uložišti:<br>
<meter value="500" min="0" max="1000">Využito 500GB z 1TB</meter>

Máme zaplněnou polovinu našeho uložiště:

<progress>

Tag <progress> slouží k vložení progressbaru. Využití si jistě dokážete představit zejména, když zapojíme jazyk JavaScript.

Významově by měl element reprezentovat vykonanou práci a není vhodný k použití jako měřič (např. volného místa na disku). K tomu slouží již zmíněný element <meter>.

Atributy

Má tyto dva atributy:

• max - Maximální hodnota (např. 16 úloh nebo 100 procent).
• value - Aktuální hodnota (např. hotovy 4 úlohy nebo 25 procent).

Tag opět obaluje alternativní obsah, který se zobrazí v prohlížečích, které ho nepodporují.

Ukázka

Uvedeme si následujicí ukázku:

<p>Rezervace letenky, krok 2 z 6. <progress value="2" max="6">2 z 6</progress></p>

Výsledek:

<!-- komentář -->

Tag <!-- ... --> označuje komentář ve zdrojovém kódu stránky. Tyto komentáře slouží pro autora stránky jako poznámky k lepší orientaci v kódu. Prohlížeč si komentářů nevšímá a nijak je na stránce nezobrazuje. Pokud máte však nějakou logiku stránky v tomto komentáři, může si jej uživatel ve zdroji stránky zobrazit!! Pokud máte tedy na stránce například PHP kód a chcete ho zakomentovat, je vhodnější to udělat pomocí víceřádkového PHP komentáře /**/ nebo řádkového //.

Často se používají k popisu složitých struktur, kdy je zanořeno několik tagů <div> do sebe apod.

Ukázka

Jednoduché vložení komentáře by mohlo vypadat takto:

<!-- Odstavec s popisem produktu -->
<p>
Výkonná grafická karta střední třídy s čipem GeForce GTX 1650, frekvence jádra 1860MHz, 4GB GDDR5 paměti na frekvenci 8000 Gbps, 128bit sběrnice, Shader Model 5.0, 2x mini DisplayPort, DVI-I, HDMI, PCIe x16 verze 3.0.
</p>

Komentář se nám na naší stránce samozřejmě nezobrazí, můžeme se přesvědčit:

To by bylo vše ohledně ostatních tagů v HTML

V další lekci, Zastaralé tagy v HTML, si ukážeme pro zajímavost zastaralé tagy a povíme si o jejich alternativách.