HTML in CSS za začetnike (del 21): Semantika spleta (4)

Tudi tukaj naj na začetku vadnice ponovno opozorim, da ne pričakujete čudežev od predstavljenih elementov. Vizualno ne izgledajo preveč impresivno. Vendar so zanimivi glede na dejstvo, da lahko z njimi logično in semantično strukturirate svoje dokumente.

Območja navigacije

Z uporabo elementa nav se lahko semantično označijo navigacijske vrstice ali druga območja za dodatne elemente. Ta element je zasnovan predvsem za označevanje hiperpovezav na druge strani ali dopolnilne informacije.

Primer:

<nav>
   <a href="index.html">Domov</a>
   <a href="html5.html">Učenje HTML5</a>
   <a href="css.html">CSS</a>
   <a href="cms.html">Joomla!</a>
   <a href="wordpress.html">Wordpress</a>
</nav>

V elementu nav lahko uporabite poljubne elemente. Navigacijo še vedno lahko definirate z uporabo seznamov. Drugi elementi se lahko enostavno uporabijo tudi znotraj elementa nav. nav lahko v dokumentu nastopi večkrat.

Podrobnosti navajanja

Še en zanimiv element je details. S tem se lahko – kot že ime elementa nakazuje – dodatno navede informacije o vsebini. Upoštevajte, da je element details zares zanimiv šele v povezavi z elementom summary. Več o tem elementu sledi pozneje.

Najprej primer uporabe elementa details:

<article>
  <details>
    <summary>Povezave do članka...</summary>
    <ul>
      <li><a href="povezava1.html">Povezava 1</a></li>
      <li><a href="povezava2.html">Povezava 2</a></li>
      <li><a href="povezava3.html">Povezava 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Viri članka ...</summary>
    <ul>
      <li><a href="vir1.html">Povezava 4</a></li>
      <li><a href="vir2.html">Povezava 5</a></li>
      <li><a href="vir3.html"">Povezava 6</a></li>
    </ul>
  </details>
</article>

Vsebina elementa details je skrita pred obiskovalcem, dokler ta ne klikne na element summary znotraj elementa details.

Zanimivo bi lahko bilo, na primer v povezavi s predvajalnikom videoposnetkov. Tudi za to je tukaj primer:

<video id="film" width="320" height="180" autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>
<details open>
  <summary>Skrivanje/prikaz kontrole videoposnetka</summary>
  <p>
    <button id="start" onClick="start()">Začni/prenehaj</button>
    <button id="stumm" onClick="stumm()">Izklopi zvok</button>
    <button id="lauter" onClick="lauter()">Glasneje</button>
    <button id="leiser" onClick="leiser()">Tišje</button>
  </p>
</details>

Ko je stran prvič naložena, je najprej vidno samo okno predvajalnika.

Če obiskovalec klikne na povezavo za prikaz/skrivanje, se prikažejo vsebine, določene znotraj elementa summary.

Po specifikaciji naj brskalniki, kadar elementa summary ni mogoče najti, prikažejo privzeto vsebino.

Zanimivo je tudi atribut open za elemente details.

<details open>
…
</details>

Ko je ta atribut nastavljen, je vsebina elementa summary ob naložitvi strani takoj vidna.

Povzetki

Sedaj si poglejmo malo podrobneje element summary.

<article>
  <details>
    <summary>Povezave do članka...</summary>
    <ul>
      <li><a href="povezava1.html">Povezava 1</a></li>
      <li><a href="povezava2.html">Povezava 2</a></li>
      <li><a href="povezava3.html">Povezava 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Viri članka ...</summary>
    <ul>
      <li><a href="vir1.html">Povezava 4</a></li>
      <li><a href="vir2.html">Povezava 5</a></li>
      <li><a href="vir3.html"">Povezava 6</a></li>
    </ul>
  </details>
</article>

V okviru summary se tako definira vsebina, ki še ni odprta v povezavi z details. Zahvaljujoč summary je tako mogoče vključiti dodatne informacije, ki se prikažejo samo po potrebi.

Priznam, da bi narečno odpiralno in zapiralno območje lahko enostavno realizirali tudi s pomočjo JavaScripta. Če pa je JavaScript izklopljen v brskalniku, aplikacija ne bo delovala. Zato je široka podpora za details in summary zaželena.

Robna območja in obrobja

Dodatne informacije, obrobe, prečne reference ipd. se lahko označijo v HTML5 s pomočjo elementa aside. S tem označen vsebina sicer obstaja v kontekstu celotnega dokumenta, vendar mu ni neposredno pripadajoča.

Opomba, da v specifikaciji HTML5 ni določeno, kakšne dimenzije naj veljajo za območje, označeno z aside. Skratka, vsebina ob strani se lahko prikaže kot obroba ali pa kot stranska vrstica.

Naslednji primer prikazuje definicijo območja aside.

<body>
  <header>
   <h1>PSD-Tutorials.de</h1>
  </header>
 <article>
  <h2>Ustvarjanje spletnih aplikacij (del 10): jQuery mobilno (2)</h2>
    <p>V tem vadnici bo ustvarjena prva prava jQM stran. Pogoji so osnovna HTML struktura, ki ste jo že spoznali.</p>
    <aside>
     <h3>Dodatno branje</h3>
      <ul>
       <li><a href="#/fn1">Dodatne informacije so na voljo...</a></li>
      </ul>
     </aside>
    </article>
    <aside>
     <nav>
      <h2>Navigacija</h2>
      <ul>
       <li><a href="#">Domov</a></li>
       <li><a href="# ">Kontakt</a></li>
     </ul>
     </nav>
   </aside>
  </body>

Dodajanje časovnih navedb

Časovne navedbe lahko posebej označimo s pomočjo novega elementa time. Posebnost tega elementa je, da so časovne navedbe berljive tako za ljudi kot za stroje.

Za ljudi se časovne navedbe zapišejo v element time. Da brskalniki dobijo možnost, da lahko tudi samodejno preberejo časovne informacije, se uporablja atribut datetime elementa time.

<p>Se vidimo 
<time datetime="2014-04-15 19:00">15. aprila ob 19. uri</time>.
</p>

Na tem mestu še enkrat opozarjam, da to v trenutnih brskalnikih na začetku nima vizualnih učinkov, ampak je izključno namenjeno temu, da postanejo časovne navedbe berljive za stroje.

Poudarjanje besedil

Z elementom mark imamo možnost, da besede ali celotna besedilna območja vizualno poudarimo. V specifikaciji HTML5 je izrecno poudarjeno, da je element treba uporabiti samo v povezavi s besedilnimi vsebinami. Poleg tega mora biti v določenem odnosu do konteksta.

Primer:

<p>V tej vadnici bo ustvarjena prva prava jQM stran. Pogoji so <mark>osnovna HTML struktura</mark>, ki ste jo že spoznali.</p>

Kako bodo brskalniki izvajali poudarjanje, ni določeno.





Google Chrome in Firefox pa oba uporabita rumen ozadje.

Označevanje pogovorov

V HTML5 je bilo prav tako poskrbljeno za posebno označevanje pogovorov. Za to obstaja element dialog. Trenutno pa elementa dialog podpirata le Safari in Google Canary, torej razvijalska različica brskalnika.

Tukaj je še en primer:

<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>To je vsebina polja.</p>
<button id="hide">Zapri</button>
</dialog>
<button id="show">Pokaži vsebino</button>
</div>
<script type="text/JavaScript">
(function() {  
    var dialog = document.getElementById('dialog');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('hide').onclick = function() {  
        dialog.close();  
    };  
})(); 
</script>

Ko kliknemo gumb, postane dialog viden. Da deluje vse skupaj, se v prejšnjem primeru uporabi kombinacija HTML5, CSS in JavaScript.