Elementy štýlov

Elementy fyzických štýlov

Elementy fyzických štýlov fungujú rovnako ako v hociktorom textovom editor ako napríklad MS Word. Písmo môžeme naformátovať na normálny, tučný, kurzívu, horný, dolný index a podčiarknutý text. Tieto elementy sú absolútne teda všetky prehliadače ich zobrazujú rovnako, naopak od logických štýlov, ktoré sa v každom prehliadači zobrazia inak alebo keď ich prehliadač nepozná tak formátovanie nezobrazí vôbec. Hociktorí z elementov sa vkladá do stránky veľmi jednoducho.

Do tela dokumentu(body) napíšeme otvárací tag elementu, ktorí chceme použiť, text a uzavierací tag elementu, pretože elementy fyzických štýlov sú kontajnerové elementy. Keby ste tag neuzavreli tak všetok text na stránke by sa tiež sformátoval.

Elementy fyzických štýlov poznáme:

Tučné písmo (bold)

<b>Ľubovolný text</b>

Príklad:Ľubovolný tučný text

Kurzíva (italic)

<i>Ľubovolný text </i>

Príklad: Ľubovolný šikmý text

Zväčši písmo

<big>Ľubovolný text </big>

Príklad: Ľubovolný väčší text

Zmenši písmo

<small> Ľubovolný text </small>

Príklad: Ľubovolný malý text

Strojové písmo

<tt> Ľubovolný text </tt>

Príklad: Ľubovolný strojový text

Podčiarknuté (underlined)

<u> Ľubovolný text </u>

Príklad: Ľubovolný prečiarknutý text

Dolní index (subscript)

_{Ľubovolný text}

Príklad: _{Ľubovolný text}

Horní index (superscript)

^{Ľubovolný text}

Príklad: ^{Ľubovolný text}

Elementy logických štýlov

Odstavcový element čiže logické štýl neurčujú naopak od logických štýlov pevnú veľkosť volného riadku a odstavcu. Tieto nastavenia nechávame na webový prehliadač či užívateľa. Keď si užívateľ nastaví v prehliadači, že chce mať všetok dôležitý text(em) vysvietený na červeno tak logické štýly mu to umožnia.
Doporučím vám radšej používať logické štýly ako fyzické aj keď tie sa jednoduchšie zapisujú. Logickými štýlmi sa vám podarí zväčšiť počet prehliadačov, pre ktoré bude vaša stránka dobre čitateľná.

Zdôraznenie (emphasis)

<em>Ľubovolný text</em>

Príklad:Ľubovolný text

Silné zdôraznenie (stronger)

<strong> Ľubovolný text </strong>

Príklad: Ľubovolný text

Citácia (citation)

<cite> Ľubovolný text </cite>

Príklad: Ľubovolný text

Počítačový kód (code)

<code> Ľubovolný text </code>

Príklad: Ľubovolný text

Definícia termínu (definiting)

<dfn> Ľubovolný text </dfn>

Príklad: Ľubovolný text

Vzor (sample)

<samp> Ľubovolný text </samp>

Príklad: Ľubovolný text

Text napísaný na klávesnici (keyboard)

<kbd> Ľubovolný text </kbd>

Príklad: Ľubovolný text

Premenná (variable)

<var> Ľubovolný text </var>

Príklad: Ľubovolný text

Priama reč

<q> Ľubovolný text </q>

Príklad: Ľubovolný text

Skratka (abbreviation)

<abbr title="Ľubovolný text"> LT </abbr>

Príklad: LT

Akronym (acronym)

<acronym title="Ľubovolný text">L. t.</acronym>

Príklad: L. t.

Posledné dva elementy(akronym, skratka) vyžadujú k správnej funkcii atribút title. Tento atribút spôsobí, že po nabehnutí kurzora myšky nad text vyskočí pop-up okno v ktorom sa zobrazí popis k textu. Obidva elementy sú skoro rovnaké iba každý prehliadač si ich zobrazí po svojom.

  Partneri:

Horoscope