Pouze tento týden sleva až 80 % na e-learning týkající se JavaScriptu
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Discount week - April - 30

Lekce 18 - Zastaralé tagy v HTML Nové

V minulé lekci, Ostatní tagy v HTML II. část, jsme si ukázali tagy <dialog>, <address>, <bdi>, <bdo>, <hr>, <meter>, <progress> a komentář, které se řadí mezi ty ostatní.

Následující tagy byly odebrány z HTML specifikace a neměli bychom je tedy používat. Naleznete zde jejich rejstřík a důvody, proč již nejsou součástí HTML. Některé tagy jsou z důvodu kompatibility se starými webovými stránkami prohlížeči stále podporovány. To že fungují ovšem vůbec neznamená, že jsou určené k tvorbě moderních webových stránek.

Stylovací tagy

Pro přehlednost a snazší hromadnou modifikovatelnost do HTML stránky vkládáme pouze obsah, který nese nějaký význam. Úprava vzhledu elementů (stylování) se vyčlenila do samostatného dokumentu CSS. Stylování tedy již do HTML dokumentu nepatří, více v lekci Úvod do CSS. Níže uvedené tagy budou vždy předvedeny v ukázce a poté nahrazeny validní CSS alternativou. V ukázce budu CSS vkládat do atributu style, např. pro výpis zelených hodin.

Ukázka

Špatně

Pro výpis zelených hodin jsme dříve psali tento kód:

<span style="color: green;">21:24</span>

To je však špatně. CSS patří do samostatného souboru. Špatně je i tato varianta:

<span class="zeleny">21:24</span>

Protože název třídy se nemá odvozovat od toho, jak se to má zobrazit, ale co se má zobrazit.

Správně
<span class="cas">21:24</span>

Do CSS dokumentu vložíme:

.cas {
   color: green;
}

Popř. třídu nazveme text-green. Takový framework Bootstrap například využívá třídy text-primary, text-secondary, text-danger apod.

Výsledek

Zobrazí se nám tedy čas, který má zelenou barvu:

Stylování
localhost

Zastaralé tagy

<big>

Tag vykreslil větší text než normální. Některé prohlížeče, kvůli zpětně kompatibilitě tag <big> stále podporují. V HTML 5 řešíme zvětšení textu pomocí CSS a tagu <span>.

Ukázka

Špatně
<big>Větší text</big>
Správně

Správné zvětšení textu pomocí CSS:

<span class="dulezite">Větší text</span>

A v CSS souboru budeme mít toto:

.dulezite {
   font-size: 1.2em;
}

Výsledek

Můžeme se přesvědčit, že náš text je větší:

Alternativa tagu big
localhost

<small>

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Podobně jako tag <big> se v HTML vyskytoval i tag <small>. Tento element byl ponechán a slouží k označení textu s nízkým významem. Tag <big> tedy používat nesmíme, tag <small> ano.

Ukázka

Využití zde nalezneme v případě, že máme použita velká písmena. Text tak z řádku tolik nevyčnívá:

<p>Tento text je normální, ale <small>TENTO TEXT UŽ JE MENŠÍ</small>.</p>

Výsledek

Text velkými písmeny z řádku opravdu nevyčnívá:

small
localhost

<strike>

Tag <strike> vykreslí text jako přeškrtnutý. Opět zde platí, že kvůli zpětné kompatibilitě ho některé prohlížeče stále podporují.

Alternativu zde můžeme najít pomocí tagu <s> nebo <del>.

Ukázka

Špatně
<strike>Přeškrtnutý text.</strike>
Správně

Kód v HTML:

<span class="neplatny-vyrok">Přeškrtnutý text.</span>

Kód v CSS:

.neplatny-vyrok {
   text-decoration: line-through;
}

Výsledek

Text máme opravdu přeškrtnutý:

Alternativa tagu strike
localhost

<basefont>

Tag <basefont> se dříve používal jako nadřazený element, který nastavil typ, velikost a barvu všem potomkům, tedy elementům, které byly pod ním. Pomocí tagu <font> jsme mohli jednotlivé elementy měnit. V HTML 5 se toto řeší jednoduše pomocí CSS a to tak, že elementu <html> nebo <body> přiřadíme námi zvolené písmo, velikost a barvu.

<font>

Umožňoval nastavit typ, velikost a barvu písma. Některými prohlížeči je stále podporován, nicméně bychom tento tag neměli dále používat.

Ukázka

Špatně
<font face="arial" color="green" size="2">Ostylovaný text.</font>
Správně

Opět dbáme na to, aby třída byla odvozena od toho co má zobrazovat:

<span class="uspech">Váš formulář byl úspěšně vyplněn.</span>
.uspech {
   font-family: arial;
   font-size: 1.2em;
   color: green;
}

Pokud má font v názvu mezery (např. Times New Roman), v CSS ho zapíšeme do apostrofů či uvozovek.

Výsledek

Text nám signalizuje, že naše operace byla úspěšná:

Alternativa tagu font
localhost

<center>

Tag sloužil k centrování elementů do něj vložených. S příchodem HTML 5 již centrování řešíme pomocí CSS. Kvůli zpětné kompatibilitě je tag <center> některými prohlížeči stále podporován.

Ukázka

Špatně
<center><img src="obrazek.png" alt="obrázek" />
<table>
   <tr>
      <td>tabulka</td>
   </tr>
</table>
</center>
Správně

V CSS již nemůžeme centrovat takovýmto způsobem, protože je jeho stylování chápáno jinak. K centrování textu a dalších řádkových elementů (např. obrázků) je jednoduše všechny vložíme do tagu <div> s následujícími parametry:

<div class="center">
   <img src="obrazek.png" alt="obrázek" />
</div>

CSS:

.center {
   text-align: center;
}

Tabulku takto ovšem nevycentrujeme, jelikož je blokovým elementem. Pro blokové elementy, které si přejeme vycentrovat, musíme nastavit horizontální margin na hodnotu auto a nesmíme zapomenout nastavit jejich šířku:

<div class="center">
   <img src="obrazek.png" alt="obrázek" />
   <table>
      <tr>
         <td>Tabulka</td>
      </tr>
   </table>
</div>

CSS:

.center {
   text-align: center;
}

table {
   margin: 0 auto;
   width: 640px;
}

Výsledek

Alternativa tagu center
localhost

<applet>

Tag <applet> byl využíván pro vložení appletu (plug-inu).

Alternativou pro tento zastaralý tag je párový tag <video>.

<acronym>

Tag <acronym> se využíval jako vysvětlivka zkratky.

Tento tag je zastaralý a nahradil ho tag <abbr>.

<command>

Tag <command> měl být původně využit pro vložení příkazu do kontextového menu, kde mohl mít podobu radiobuttonu, checkboxu nebo tlačítka. Měl se vkládat volně do stránky, kde by definoval klávesovou zkratku. Nicméně byl z HTML 5 odstraněn a není tedy prohlížeči podporován.

Rámce

Rámce se používaly k zobrazování podstránek a z HTML byly odebrány ze dvou důvodů. Prvním je, že s nimi měly problémy vyhledávače (např. Google). Druhý důvod je vlastně příčina těchto problémů - s rámci se totiž nemůžeme dostat na určitou stránku pomocí URL adresy, celý web má jedno URL a navigace probíhá pomocí rámců. Pozici na webu nelze nijak zaznamenat, vždy se musíme k dané podstránce znovu proklikat.

Rámce jsou určitě špatné, ale dle mého názoru je to dobrá cesta pro první web, kde začátečníci nemusí opisovat stále navigační menu do každé stránky nebo k tomu používat další jazyk. Jako jedinou alternativu rámců ve statickém HTML vidím tabulkový layout, kde rozdílné renderování tabulky řeší problém s výškou divu a výškou iframe.

<frameset>

Frameset obsahoval soubor rámů. Do HTML stránky se vkládal místo tagu <body> a rámce tedy zaplňovaly celý obsah dokumentu. V každém rámci se zobrazovala samostatná HTML stránka.

<frame>

Frame byl rámec, ve kterém se zobrazovala samostatná HTML stránka.

<noframes>

Do tagu <noframes> se vkládal obsah, který se zobrazil v případě, že daný prohlížeč rámce nepodporoval. Tag se vkládal do framesetu a obvykle obsahoval popis stránky a odkaz na alternativní navigaci. Někdy je do <noframes> nesprávně vkládána hláška: "Váš prohlížeč nepodporuje rámce". Tento text však indexují vyhledávače místo titulní stránky a měl by tedy obsahovat zejména klíčová slova a navigaci.

Ukázka

S příchodem HTML 5 nejsou tyto tagy validní, slouží pouze jako ukázka:

<frameset cols="200, *">
    <frame name="menu" src="menu.html" />
    <frame name="obsah" src="omne.html" />
    <noframes>Web o rybičkách a akvarijních živočiších. Můžete ručně přejít do <a href="menu.html">Menu</a>.</noframes>
</frameset>

Alternativou pro tyto tagy je párový tag <iframe>.


 

Předchozí článek
Ostatní tagy v HTML II. část
Všechny články v sekci
HTML5 od A do Z
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje vývoji automatizačních linek do výrobního průmyslu. Ve volném čase se věnuje JavaScriptu a vývoji webových stránek.
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!