HTML & CSS za začetnike

HTML & CSS za začetnike (Del 05): Polepšajmo besedila

Vsi videoposnetki vadnice HTML in CSS za začetnike.

Posebne besede ali celotni odseki se lahko zelo enostavno prikažejo poševno in odebeljeno. Najprej k odebeljeni različici. Za to so na voljo osnovno dve HTML oznaki, b in strong.

Dobrodošli na <b>PSD-Tutorials.de</b>!
<br />
Dobrodošli na <strong>PSD-Tutorials.de</strong>!

Pogled na rezultat v brskalniku pokaže naslednjo sliko:

HTML & CSS za začetnike (del 05): Polepšajte besedila

Očitno oba elementa poskrbita za enako prikazovanje. Zakaj pa obstajata dve različni oznaki? Dejansko obstajajo za spletne strani še druge oblike prikazovanja kot pri znanih standardnih brskalnikih. Na primer pri različicah za slepe ljudi ali na mobilnih napravah. S pomočjo HTML oznak, ki jih ponuja W3C, je podprta semantika. Tako oznaka b dejansko ne pomeni več, da naj bo nekaj odebeljeno prikazano. Črka b zdaj pomeni opazen poudarjen tekst, ki nima povečane pomembnosti. Lahko gre na primer za imena izdelkov ali ključne besede v dokumentih.

Oznaka strong je doslej pomenila močnejši poudarek. Oznaka em pa je bila uporabljena za poudarjen, pomemben tekst (emfatičen). strong je v prejšnjih različicah HTML bil stopnjevanje em. Obema oznakama je v HTML5 dodeljen drugačen pomen.

Najprej besedilo z običajnim poudarkom.

<p>
   Mačke so prikupne živali.
</p>



Zdaj isto besedilo, tokrat pa s poudarkom na prvem besedu.

<p>
   <em>Mačke</em>
   so prikupne živali.
</p>



Z uporabo em je poudarek na besedi Mačke. To bi si bilo mogoče zamisliti v razpravi, kjer gre za to, ali so psi ali mačke slajše.

Zdaj pa bi v tem primeru lahko uporabili oznako em tudi na besedi so.

<p>
   Mačke
   <em> so </em>
   prikupne živali.
</p>



To bi lahko bilo odgovor v razpravi, kjer kdo trdi, da mačke sploh niso sladke.

Dejansko so odseki, označeni z em, v brskalniku prikazani poševno. Enak optični učinek dosežemo s pomočjo oznake i.

Po delovnem osnutku HTML5 oznaka i zdaj ne predstavlja več pojma poševnosti.

<p>
   Dobrodošli pri
   <i>PSD-Tutorials.de</i>
</p>



Zdaj to oznako predstavlja, da želimo posredovati drugačno vzdušje. Oznaka i je na primer zanimiva za označevanje tehničnih izrazov ali taksonomskih imenovanj.

Vse je zelo teoretično, to vem. Načeloma bi morali poskušati upoštevati smernice HTML5. Po drugi strani vam seveda nihče ne bo odtrgal glave, če uporabljate oznako strong namesto b.

<p>
 <em>Vrstica z em</em><br />
 <i>Vrstica z i</i><br />
 <strong>Vrstica z strong</strong><br />
 <b>Vrstica z b</b>
</p>



Najbrž tukaj morajo ukrepati ponudniki brskalnikov.

HTML in CSS za začetnike (del 05): Polepšajte besedila



Za dejansko oblikovanje besedil, opremljenih z navedenimi oznakami, je v končni fazi odgovoren CSS.

Akronimi s abbr

Za označevanje akronimov se uporablja ista oznaka, ki je bila doslej namenjena kraticam, in sicer abbr.

Deutsch-Österreichische Büro des
<abbr title="World Wide Web Consortium">W3C</abbr>
hat seit April 2009 seinen Sitz an der Fachhochschule Potsdam.



Bralniki, ki pravilno interpretirajo oznako abbr, prikažejo tekst znotraj oznake abbr podčrtan.

HTML in CSS za začetnike (del 05): Polepšajmo besedila

Poleg tega bi bilo koristno oznaki abbr dodeliti atribut title. Tam običajno zapišemo celoten izraz za akronim. Ko obiskovalec premakne miško nad akronim, se izraz prikaže v oknu namigov.

Navedbe naslovov s address

Z uporabo elementa address lahko označimo informacije o naslovu.

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



Bralniki običajno prikazujejo vsebino elementa address poševno.

HTML & CSS za začetnike (Del 05): Polepšanje besedil

Označevanje programske kode z elementom code

Element code se uporablja za označevanje programske kode. V tem smislu se v primerjavi s prejšnjimi različicami HTML nič ni spremenilo. Še vedno se element code uporablja za ta namen.

<pre>
To je glava HTML:
  <code>
    <html>
     <head>
     <title&ampgt;</title>
     </head>
  </code>
</pre>



Običajno se element code kombinira z elementom pre, da se ohrani zamike, uporabljene v programski kodi.

Specifikacija HTML5 priporoča uporabo atributa class v povezavi z elementom code. Temu atributu lahko dodelimo jezik, ki se uporablja znotraj elementa code. Tukaj je nekaj tipičnih primerov, kako takšne oznake lahko izgledajo:

language-html

language-css

language-javascript

language-php

language-pascal

Tako kot pri browserjih ni določeno, ali in kako bodo te napotitve izvajali.

<pre>
  To je glava HTML:
  <code class="language-html">
    <html>
      <head>
        <title></title>
      </head>
  </code>
</pre>



Za zdaj atribut class v brskalniku nima vidnih učinkov. Kljub temu lahko človeški opazovalci na ta način prepoznajo jezik programske kode, ko pogledajo v kodo strani.

Označevanje z elementom small

Element small je bil prvotno namenjen prikazu besedila manjšega kot običajno. V HTML5 je element small izrecno namenjen za prikaz malih tiskanih besedil. Ta mala besedila bi lahko na primer bila:

• Informacije o avtorskih pravicah

• Omejitve odgovornosti

• Licenčne določbe

• Splošni pogoji poslovanja

W3C izrecno opozarja, da elementa small ne bi smeli uporabljati za dolga besedilna besedila.

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

Podčrtavanje besedil

Besede lahko podčrtamo z uporabo elementa u. Tukaj je primer:

<p>Dobrodošli na strani <u>PSD-Tutorials.de</u></p>

Rezultat se v brskalniku prikaže takole:

HTML in CSS za začetnike (Del 05): Polepšajte besedila



Če si ogledamo rezultat, je to dejansko želeni učinek. Vendar pa to prinaša nekaj težav. Na spletu podčrtana besedila ponavadi označujejo povezave. Če besedilo ali besedo podčrtate, bodo obiskovalci morda mislili, da gre za povezavo. Poskus klikanja nanjo seveda ne bo uspel. Zato bi morali izogibati se podčrtavanju.