Izrada izbornika - (X)HTML

Kao što smo već spomenuli, za prikaz izbornika koristiti ćemo tehnologije koje preporučuje W3 konzorcij. Prikaz pomoću tablica nećemo koristiti jer kod koji se na taj način generira nije niti semantički ispravan niti se može smatrati ergonomski ispravan. Kad bismo strukturu izbornika radili pomoću tablica, gledanjem u kod ne bismo mogli jednostavno dobiti uvid u strukturu izbornika. Programi koji interpretiraju stranice i, primjerice, čitaju ih osobama koje imaju problema s vidom teško bi mogli protumačiti koje stavke su glavne, a koje su svojevrsni podizbornici.

Primjerice, neka imamo neki izbornik:

Voće 
	Jabuka 
	Breskva 
	Trešnja 

Pića 
	Fanta 
	Cocta 
	Gemišt 

Automobili 
	Mercedes 
		A klasa 
		C klasa 
		S klasa 
		M klasa 
	Opel 
	Renault

Napravimo li ovakav izbornik pomoću tablica dobit ćemo sljedeći kod:

<table width="246">
  <tr>
    <td width="238">Voće</td>
  </tr>
  <tr>
    <td align="right"><table width="161">
      <tr>
        <td width="153">Jabuka</td>
      </tr>
      <tr>
        <td>Breskva</td>
      </tr>
      <tr>
        <td>Trešnja</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>Pića</td>
  </tr>
  <tr>
    <td align="right"><table width="165">
      <tr>
        <td width="157">Fanta</td>
      </tr>
      <tr>
        <td>Cocta</td>
      </tr>
      <tr>
        <td>Gemišt</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>Automobili</td>
  </tr>
  <tr>
    <td align="right"><table width="167">
      <tr>
        <td width="159">Mercedes</td>
      </tr>
      <tr>
        <td align="right"><table width="100">
          <tr>
            <td>Mercedes</td>
          </tr>
          <tr>
            <td>Opel</td>
          </tr>
          <tr>
            <td>Renault</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td>Opel</td>
      </tr>
      <tr>
        <td>Renault</td>
      </tr>
    </table></td>
  </tr>
</table>

Odmah se vidi da zapravo ovakav kod nije ono što želimo raditi na predmetu koji se zove "Ergonomija" :-))

 

U (X)HTML standardu za takve stvari, znači za svojevrsne popise postoji posebni tagovi. To su:

(slova unutar znakova '<' i '>' pišem velikim slovima zbog lakšeg uočavanja unutar teksta, no XHTML standard zahtjeva da se tagovi pišu malim slovima).

 

Za izradu izbornika obično se koristi <UL> tag jer se stavke u izbornicima obično ne nabrajaju u smislu da imaju neki svoje redoslijed, nego jednostavno želimo popisati stavke.

Jedna lista se zatvara između tagova <UL> i </UL>, dok se pojedine stavke nabrajaju pomoći tagova <LI> i </LI> (List Item). Pogledajmo sada kako ćemo izbornik iz primjera napraviti bez tablica s razlikom u tome što ćemo pojedinim stavkama odmah dodati i linkove na stranice na koje vode: 

<ul>
  <li><a href="link.html">Voće</a>
    <ul>
      <li><a href="link.html">Jabuka</a></li>
      <li><a href="link.html">Breskva</a></li>
      <li><a href="link.html">Trešnja</a></li>
    </ul>  
  </li>

  <li><a href="link.html">Pića</a>
    <ul>
      <li><a href="link.html">Fanta</a></li>
      <li><a href="link.html">Cocta</a></li>
      <li><a href="link.html">Gemišt</a></li>
    </ul>
  </li>

  <li><a href="link.html">Automobili</a>
    <ul>

      <li><a href="link.html">Mercedes</a>
        <ul>
          <li><a href="link.html">A klasa</a></li>
          <li><a href="link.html">C klasa</a></li>
          <li><a href="link.html">S klasa</a></li>
          <li><a href="link.html">M klasa</a></li>
        </ul>	  
      </li>
      <li><a href="link.html">Opel</a></li>
      <li><a href="link.html">Renault</a></li>
    </ul>

  </li>

</ul>

Iz priloženog se vidi kako je drugi primjer puno čitljiviji i razumljiviji. Jednostavno se može shvatiti struktura izbornika i značenje pojedine stavke. Može se primijetiti i druga prednost praćenja standarda - manje zauzeće što povlači za sobom brže učitavanje kod posjetitelja stranica, a i time manji troškovi primjerice kod iznajmljivanja servera na kojeg ćemo postaviti stranice.