Átlátható kétoszlopos elrendezés

Nézzük meg a korábban tárgyalt kétoszlopos HTML5 elrendezést külső CSS használata esetén.

A stílusdefiníciók nélkül már könnyen áttekinthető HTML kódhoz jutunk.

A stíluslapok használatának előnyei:

Több oldalas webhelyen csak egyszer kell megadni a stílusdefiníciókat.
A több oldalas webhely esetén csak egy helyen kell módosítani egy jellemző értékét, és a változás minden oldalon megjelenik. (Egyébként minden oldalon külön, külön kellene a módosítást végrehajtani.)
A CSS fájl cseréjével egy teljesen új külsőt adhatunk a webhely összes oldalának.

A style jellemzők elhagyásával a kétoszlopos HTML elrendezés is hasonló képen néz ki.

Példa:

Forráskód


<body>
  <div id="tarolo">        
    <header id="fejlec"> 
       Webáruház neve és lógója 
    </header>
    <nav id="menu"> 
       Termkek | Vásárlás | Kapcsolatok 
    </nav>
    <div id="balmenu">  
        <b>Kínálat</b><br>-PC<br>-Laptop<br>-Egér 
    </div>  
    <div id="tartalom"> 
        Az olda tarlama
    </div>
    <footer id="lablec"> 
        Céginfó, jogi információk
    </footer>
  </div>  
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_div4.html