Formátovanie textu

Na formátovanie textu nám jazyk XHTML poskytuje dva mocné nástroje - fyzické a logické štýly. Aký je medzi nimi rozdiel a prečo je vhodné používať aj logické štýly? Dozviete sa v tomto článku.

S klasickými fyzickými štýlmi sa azda každý z vás už stretol. Ide o klasické formátovanie písma a základné štýly - tučné, podčiarknuté, kurzíva, horný index, dolný index, poznáte minimálne z editorov Microsoft Word alebo OpenOffice Writer.

Použitie logických štýlov je veľmi dôležité najmä z pohľadu prístupnosti webu pre handicapovaných užívateľov. Pre nevidiacich je možné logický štýl interpretovať pri hlasovom výstupe napr. zmenou tempa reči, intonácie.

Opäť platí: Použitie štýlov si vyskúšajte na tu uvedených príkladoch a aj na vlastných textoch.

Fyzické štýly

Fyzické formátovanie sa príchodom XHTML výrazne redukovalo.

Tučné písmo - značka b

<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam <b>urna malesuada</b> imperdiet.</p>

Kurzíva - značka i

<p>Lorem ipsum dolor sit amet, <i>consectetur adipiscing elit</i>. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam <i>urna malesuada</i> imperdiet.</p>

Horný index - značka sup

<p>Obsah štvorca so stranou <i>a</i> vypočítame: S = <i>a</i>².

Dolný index - značka sub

<p><b>Kyselina sírová:</b> H₂SO₄.

Logické štýly

K logickým štýlom patria samozrejme nadpisy <h1> až <h6>, o ktorých sme už hovorili.

Silné zdôraznenie - značka strong, text je zvyčajne prezentovaný prehliadačmi ako tučné písmo.

<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam <strong>urna malesuada</strong> imperdiet.</p>

Zdôraznenie - značka em, text je zvyčajne prezentovaný prehliadačmi ako kurzíva.

<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam <em>urna malesuada</em> imperdiet.</p>

Citácia - značka cite, text je zvyčajne prezentovaný prehliadačmi ako kurzíva.

<ul>
<li><cite>Podrobný sprievodca tvorbou a správou webov</cite>, Dan Rahmel, 2010</li>
<li><cite>Profesionální webdesign</cite>, Clint Eccher, 2010</li>
</ul>

Vstup z klávesnice - značka kbd, text je prezentovaný prehliadačmi neproporcionálnym písmom.

<p>Nakoniec zadajte <kbd>odhlásenie</kbd> a stlačte klávesu Enter.</p>

K ďalším logickým štýlom patria napr. <code>, <blockquote>, <pre>, <del>, <ins>, <address> a iné. Viac informácií o logických štýloch nájdete napr. na webe https://www.yourhtmlsource.com/accessibility/logicalstyle.html.

Úloha:

Vyberte si ľubovoľnú tému z oblasti prírodných, technických či ekonomických vied a spracujte ju s využitím najmä logických štýlov.

V ďalšom článku sa dozviete, ako správne vkladať do textu obrázky.