HTML & CSS pre začiatočníkov

HTML a CSS pre začiatočníkov (časť 05): Vylepšovanie textov.

Všetky videá tutoriálu HTML & CSS pre začiatočníkov.

Jednotlivé slová alebo celé pasáže môžete veľmi jednoducho označiť kurzívou a tučným písmom. Najprv k tučnemu označeniu. Na to existujú v podstate dva dostupné prvky HTML s názvami b a strong.

Vitajte na <b>PSD-Tutorials.de</b>!
<br />
Vitajte na <strong>PSD-Tutorials.de</strong>!

Pohľad na výsledok v prehliadači nám poskytuje nasledujúci obrázok:

HTML & CSS pre začiatočníkov (Časť 05): Vylepšenie textov

Zrejme oba elementy zabezpečujú identické zobrazenie. Prečo potom existujú dva rôzne prvky? Skutočne existujú na webových stránkach aj iné formy zobrazenia než tie známe z bežných prehliadačov. Myslite napríklad na čítačky pre nevidiacich alebo na mobilné zariadenia. HTML prvky poskytované W3C majú podporovať sémantiku. Takže prvok b už neznamená, že text má byť tučne zobrazený. Skôr znamená b text, ktorý je vizuálne zvýraznený a nemá vyššiu dôležitosť. Môže ísť napríklad o názvy produktov alebo kľúčové slová v dokumentoch.

Prvek strong doteraz slúžil na silnejšie zdôraznenie. Naopak, prvok em bol používaný na dôležitý text (emfaticky) ktorý je zdôraznený. Strong v predchádzajúcich verziách HTML bol posilnením em. Obe prvky majú v HTML5 pridelený iný význam.

Najprv text s obyčajným zdôraznením.

<p>
   Mačky sú roztomilé zvieratá.
</p>



Teraz rovnaký text, tentoraz však s dôrazom na prvom slove.

<p>
   <em>Mačky</em>
   sú roztomilé zvieratá.
</p>



Zvýraznenie sa týmto spôsobom kládne na slovo Mačky. Môže to byť v diskusii, kde sa rozhoduje, či sú sladšie psy alebo mačky.

Teraz môžete v tomto príklade aplikovať prvok em aj na slovo .

<p>
   Mačky
   <em> sú </em>
   roztomilé zvieratá.
</p>



To by mohla byť odpoveď v diskusii s niekým, kto tvrdí, že mačky vôbec nie sú roztomilé.

V skutočnosti sú úseky označené prvkom em v prehliadači zobrazené kurzívou. Ten istý optický efekt je možné dosiahnuť pomocou prvku i.

<p>
   Srdečne vítajte na
   <i>PSD-Tutorials.de</i>
</p>



Tento prvok namiesto kurzívy aktuálne znamená, že sa chce preniesť iná nálada. Prvok i je zaujímavý napríklad pre označenie technických výrazov alebo taxonomických označení.

To je všetko hrozné teoretické, viem. V zásade by ste mali dodržiavať smernice HTML5. Na druhej strane, nikto vám samozrejme nelomí chrbát, ak namiesto b použijete strong.

<p>
 <em>Riadok s em</em><br />
 <i>Riadok s i</i><br />
 <strong>Riadok s strong</strong><br />
 <b>Riadok s b</b>
</p>



V konečnom dôsledku sa musia konať výrobcovia prehliadačov.

HTML & CSS pre začiatočníkov (časť 05): Vylepšovanie textov



Veľká časť úprav textov vybavených uvedenými prvkami je v konečnom dôsledku zodpovedná za CSS.

Akronymy s abbr

Na označenie akronymu sa používa ten istý prvok, ktorý sa doteraz používal na skratky, a to abbr.

Nemecko-Rakúsky úrad pre
<abbr title="World Wide Web Consortium">W3C</abbr>
má sídlo na Vysoká škola v Potsdame od apríla 2009.



Prehliadače, ktoré správne interpretujú prvok abbr, zobrazia text obklopený prvkom abbr podčiarknutý.

HTML a CSS pre začiatočníkov (časť 05): Vylepšenie textu

Dačšie by ste mali priradiť prvku abbr atribút title. Tam sa zvyčajne zaznamenáva úplný výraz pre akronym. Keď navštíviť pohne nad akronymom myšou, v okne s nástrojovými tipmi uvidíte výraz.

Adresné údaje s address

Pomocou elementu address je možné označiť informácie o adrese.

<address>
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck<br />
</address>



Prehliadače obvykle zobrazujú obsah elementu address kurzívne.

HTML & CSS pre začiatočníkov (časť 05): Vylepšovanie textov

Označenie programového kódu pomocou code

Element code sa používa na označenie programového kódu. V tomto zmysle sa oproti predchádzajúcim verziám HTML nič nezmenilo. Stále sa code používa na túto účel.

<pre>
Toto je HTML hlavička:
  <code>
    <html>
     <head>
     <title></title>
     </head>
  </code>
</pre>



Obvykle sa element code kombinuje s elementom pre s cieľom zachovať odsadenia použité v programovom kóde.

Špecifikácia HTML5 odporúča pri použití elementu code použitie atribútu class. Tento atribút môže byť priradený kódu jazyka použitému v rámci elementu code. Tu je niekoľko typických príkladov, ako môžu tieto označenia vyzerať:

language-html

language-css

language-javascript

language-php

language-pascal

To, ako prehliadače tieto inštrukcie uplatňujú, nie je stanovené W3C.

<pre>
  Toto je HTML hlavička:
  <code class="language-html">
    <html>
      <head>
        <title></title>
      </head>
  </code>
</pre>



Aktuálne nemá atribút class žiadne viditeľné účinky v prehliadači. Avšak ľudia si môžu všimnúť, v akej jazykovej forme je programový kód, keď sa pozru do zdrojového kódu stránky.

Malé písmená pomocou small

Element small bol pôvodne určený na zobrazenie textu menšieho ako bežné. V HTML5 je small explicitne určené pre drobný text. Tento drobný text by mohol byť napríklad:

• Informácie o autorských právach

• Vylúčenie zodpovednosti

• Licenčné podmienky

• Všeobecné obchodné podmienky

W3C výslovne upozorňuje, že element small by sa nemal používať na dlhé textové pasáže.

<small>
  Copyright by PSD-Tutorials.de<br />
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck
</small>

Podčiarkovanie textu

Slovo môžete zvýrazniť podčiarknutím pomocou elementu u. Tu je príklad:

<p>Vitajte na stránke <u>PSD-Tutorials.de</u></p>

Výsledok vyzerá vo webovom prehliadači nasledovne:

HTML a CSS pre začiatočníkov (časť 05): Vylepšovanie textov



Pokiaľ sa pozriete na výsledok, je to presne očakávaný efekt. Avšak v tomto prípade existuje jeden háčik. Na internete sa podčiarknuté texty bežne používajú pre odkazy. Ak teraz zvýrazníte text alebo slovo podčiarknutím, návštevníci by mohli myslieť, že ide o odkaz. Pokus o kliknutie naň samozrejme zlyhá. Preto by ste mali na podčiarknutie textu radšej upustiť.