HTML Layouts

Il layout di una pagina web è fondamentale per dare un design unico al tuo sito web. Tant'è che creare un layout accattivamente per i siti web è un operazione che necessita di una lasso di tempo notevole.

Ad oggi tutti i siti web moderni utilizzano framework basati su CSS e Javascript per costruire pagine web responsive e dinamiche, ma è possibile creare bei layout anche utilizzando delle semplici tabelle HTML o tag divisori (div) combinati ad alcuni tag di formattazione.

Layout HTML - Utilizzando le Tabelle

Il modo più semplice e diffuso per la creazione di layout consiste nell' utilizzare il tag HTML <table>. Le tabelle sono disposte in colonne e righe, in modo da poterle utilizzare in qualunque modo si desideri.

Esempio

Nell' esempio seguente il layout viene ottenuto utilizzando una tabella con 3 righe e 2 colonne, in cui i campi dell' header ed il footer vengono estesi per occupare entrambe le colonne utilizzando l'attributo colspan:

<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <h1>This is Web Page Main title</h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#aaa" width="50">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td bgcolor="#eee" width="100" height="200">
        Technical and Managerial Tutorials
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <center>
      Copyright © 2007 Tutorialspoint.com
      </center>
    </td>
  </tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

This is Web Page Main title
Main Menu
HTML
PHP
PERL... 		Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com

Layout a colonne multiple - Utilizzando le Tabelle

È possibile progettare la pagina web in modo da distribuire il contenuto in pagine diverse mantenendo una struttura comune. Possiamo ad esempio mantenere il contenuto della pagina nella colonna centrale ed utilizzare la colonna di sinistra per inserire un menu e la colonna di destra per mettere pubblicità o altro. Questo layout è molto simile a quello che abbiamo sul nostro sito web tutorialspoint.com.

Esempio

A seguire un esempio di layout a 3 colonne:

<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width="100%" border="0">
  <tr valign="top">
    <td bgcolor="#aaa" width="20%">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td bgcolor="#b5dcb3" height="200" width="60%">
        Technical and Managerial Tutorials
    </td>
    <td bgcolor="#aaa" width="20%">
      <b>Right Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
   </tr>
<table>
</body>
</html>

Produrrà il seguente risultato:

Main Menu
HTML
PHP
PERL... 		Technical and Managerial Tutorials Right Menu
HTML
PHP
PERL...

Layout HTML - Utilizzando DIV, SPAN

L'elemento <div> è un elemento che consente di raggruppare gli elementi HTML in blocco. A differenza del tag <div> che è un elemento a livello di blocco, l' elemento HTML <span> viene utilizzato per raggruppare gli elementi a livello di riga.

Anche se siamo in grado di ottenere dei bei layout con le tabelle HTML, esse in realtà non sono concepite come uno strumento per la creazione di layout, ma bensì sono più adatte per la rappresentazione dei dati.

Note: In questo esempio vengono utilizzati i Cascading Style Sheet (CSS), quindi per capire al meglio questo esempio è necessario conoscere come funzionano i CSS.

Esempio

Adesso cercheremo di ottenere lo stesso risultato realizzato con i tag <table> nell'esempio precedente, utilizzando i tag <div> ed i CSS.

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style="width:100%">
  <div style="background-color:#b5dcb3; width:100%">
      <h1>This is Web Page Main title</h1>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:left;">
      <div><b>Main Menu</b></div>
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#eee; height:200px;width:350px;float:left;">
    <p>Technical and Managerial Tutorials</p>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:right;">
      <div><b>Right Menu</b></div>
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#b5dcb3;clear:both">
  <center>
      Copyright © 2007 Tutorialspoint.com
  </center>
  </div>
</div>
</body>
</html>

Produrrà il seguente risultato:

This is Web Page Main title

Main Menu
HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu
HTML
PHP
PERL...
Copyright © 2007 Tutorialspoint.com

È possibile creare layout migliori utilizzando DIV, SPAN insieme con i CSS. Per maggiori informazioni su CSS, fare riferimento alla Guida ai CSS.

Advertisements