Pokročilé formátovanie obsahu v HTML

V tejto časti HTML tutoriálu si predstavíme tagy na špeciálne označenie viet a slov: písanie citácií, sloganov, zdrojových kódov, výrazov a ďalšie. Ide o tagy, ktoré sa používajú menej, ale je dobré o ich existencii aspoň vedieť.

Čo už vieme o zvýrazňovaní v HTML

Na zvýrazňovanie a odlíšenie nejakej časti textu od zvyšku textu poznáme viacero tagov. V kapitole Základné elementy jazyka HTML sme si predstavili najpoužívanejšie spôsoby na zvýrazňovanie textu, pre zopakovanie krátka sumarizácia:

• tag u pre podčiarknutie textu

• tagy b alebo strong pre zväčšenie hrúbky

• tagy i alebo em pre použitie šikmého textu (kurzíva)

• tagy sup a sub ako horný a dolný index

• tagy big a small pre zväčšenie alebo zmenšenie textu

Teraz pozrime na ďalšie HTML tagy pre zvýrazňovanie slov a textu, ktoré majú špeciálny význam.

HTML tagy pre zvýrazňovanie textu

Písanie kódov jazyku HTML

Keď chceme do obsahu vložiť zdrojový kód, môžeme na to použiť tag code. Časť "textu" v tomto tagu sa vizuálne odlíši od okolia (typom písma). Ide o tzv. neproporcionálne písmo - kedy má každý znak abecedy vyhradenú rovnakú dĺžku. Výhoda je, že sú takto napísané texty pekne zarovnané:

Vzorec na sčítanie dvoch čísiel je:
<code>
<br> šírka = 5;
<br> dĺžka = 6;
<br> obsah = šírka + dĺžka;
</code>

Problematické je, keď chceme vkladať do takéhoto kódu nové riadky alebo medzery, preto sa zvykne používať v kombinácii s tagom pre. Tag pre slúži na "pred-formátovanie" textu tak, že sa výsledný text zobrazí presne ako je napísaný v HTML kóde (vrátane medzier a nových riadkov).

Vzorec na sčítanie dvoch čísiel je:
<code><pre>
šírka = 5;
dĺžka = 6;
obsah = šírka + dĺžka;
</pre></code>

Písanie citácií jazyku HTML

V jazyku HTML vieme použiť niekoľko tagov pre citácie:

• blockquote pre citát zarovnaný do bloku (blokový element)

• q pre citovanie v riadku, tzv. inline (vložený element)

• cite citácia (odkaz na zdroj citátu)

Na ukážke nižšie vidíme citát z našej databázy citátov a múdrostí, na ktorý sme aplikovali HTML tagy pre citovanie.

<blockquote>
  <h4 class="quote">Čím viac vedomostí a skúseností máme, tým jednoduchšie je vyhrať.</h4>
  <cite>Stuard Wilde</cite>
</blockquote>
<p>ďalšie citáty nájdete v sekcii <q><a target="_blank" href="https://www.eduself.sk/mudrosti">citátov a múdrostí</a></q></p>

Písanie adries v jazyku HTML

Pre adresu sa používa tag address, do ktorého vložíme adresu.

Moja adresa je <address>Pekná ulica v ešte krajšom meste, 800 00, Bratislava.</address> a moja webová adresa je <address>www.eduself.sk</address>

Pohyblivý text v HTML

V HTML existuje aj tag pre rozhýbanie textu. Niečo pre milovníkov efektov a animácii :) Jeho použitie je síce kontroverzné (mnohí vývojári preferujú, aby sa animácie na webe riešili inými metódami), ale pre začiatočníkov môže ísť o užitočný tag.

<marquee width="50%" direction="up" height="40px">Tento text sa bude posúvať automaticky, a vyzerá to ako platená reklama na nejaký web, možno na web www.eduself.sk a jeho tutoriál na tvorbu webu.</marquee>

Pri použití tagu marquee môžeme správanie upraviť niekoľkými atribútmi:

• atribúty width a height pre nastavenie rozmerov

• atribút scrollamount pre určenie rýchlosti posúvania (číslo od 1 do 100)

• atribút direction pre určenie smeru posúvania s hodnotami:

  • up - nahor
  • down - nadol
  • left - doľava
  • right - doprava
  
  

• atribút loop pre nastavenie počtu opakovaní (koľkokrát sa má celá správa zobraziť)

• atribút scrolldelay pre nastavenie oneskoreného začiatku (po akom čase sa má animácia spustiť)

• atribút behavior pre nastavenie správania s možnými hodnotami:

  • scroll
  • slide
  • alternate
  
  

Zmena smeru textu

HTML tag bdo (bidirectional override) sa používa vtedy, keď chceme zmeniť smer textu oproti bežnému používaniu (napr. sprava doľava). Na nastavenie smeru slúži jeho atribút dir (z angl. direction), ktorému môžeme určiť hodnotu:

• ltr zarovnanie zľava doprava
• rtl zarovnanie sprava doľava

<p>Toto je text s bežným zarovnaním. <bdo dir="rtl">A toto je text so zarovnaním sprava.</bdo></p>

HTML tagy pre zvýrazňovanie slov

Pre zvýraznenie samostatných slov, ktorým chceme pridať určité vlastnosti, môžeme ešte použiť tieto tagy:

• Tag strike pre prečiarknutý text

• Tagy acronym a abbr pre označenie skratky

• Tag var pre označenie premennej

• Tag dfn pre označenie definície (napr. odborný pojem, ktorý bude definovaný v obsahu)

• Tag mark pre označenie sekvencie slov (keď chceme v texte niečo označiť)

• Tag ins pre označenie sekvencie slov, ktoré sme pridali

• Tag del pre označenie sekvencie slov, ktoré sme odstránili

<p>Niektoré slova <strike>prečiarknime</strike></p>
<p>Akronym <acronym title="hypertext markup language">HTML</acronym> je označenie pre programovací <abbr title="jazyk">jazyk</abbr> na tvorbu webu.</p>
<p>Písmenkom <var>m</var> sa zvykne označovať vzdialenosť v metroch.</p>
<p>Slovo <dfn>CSS</dfn> môžeme definovať ako kaskádové štýly.</p>
<p>Pridali sme slovo <ins>tvorba</ins> a odstránili sme slovo <del>vývoj</del>.</p>

HTML pokročilé tagy pre štýlovanie a animovanie textu