HTML - Layout
Un layout di pagina web è molto importante per dare un aspetto migliore al tuo sito web. Ci vuole molto tempo per progettare il layout di un sito Web con un aspetto e un tocco eccezionali.
Oggigiorno, tutti i siti Web moderni utilizzano un framework basato su CSS e JavaScript per creare siti Web reattivi e dinamici, ma è possibile creare un buon layout utilizzando semplici tabelle HTML o tag di divisione in combinazione con altri tag di formattazione. Questo capitolo ti fornirà alcuni esempi su come creare un layout semplice ma funzionante per la tua pagina web utilizzando HTML puro e i suoi attributi.
Layout HTML: utilizzo di tabelle
Il modo più semplice e popolare per creare layout è utilizzare il tag HTML <table>. Queste tabelle sono disposte in colonne e righe, quindi puoi utilizzare queste righe e colonne nel modo che preferisci.
Esempio
Ad esempio, il seguente esempio di layout HTML si ottiene utilizzando una tabella con 3 righe e 2 colonne ma la colonna di intestazione e piè di pagina si estende su 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>Questo produrrà il seguente risultato:
Layout a più colonne - Utilizzo di tabelle
Puoi progettare la tua pagina web per inserire i tuoi contenuti web in più pagine. Puoi mantenere i tuoi contenuti nella colonna centrale e puoi usare la colonna sinistra per usare il menu e la colonna destra può essere usata per mettere pubblicità o altre cose. Questo layout sarà molto simile a quello che abbiamo sul nostro sito web tutorialspoint.com.
Esempio
Ecco un esempio per creare un layout a tre 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>Questo produrrà il seguente risultato:
Layout HTML - Utilizzo DIV, SPAN
L'elemento <div> è un elemento a livello di blocco utilizzato per raggruppare elementi HTML. Sebbene il tag <div> sia un elemento a livello di blocco, l'elemento HTML <span> viene utilizzato per raggruppare elementi a livello inline.
Sebbene possiamo ottenere layout piuttosto belli con le tabelle HTML, ma le tabelle non sono state progettate come uno strumento di layout. Le tabelle sono più adatte a presentare dati tabulari.
Note - Questo esempio fa uso di Cascading Style Sheet (CSS), quindi prima di comprendere questo esempio è necessario avere una migliore comprensione di come funzionano i CSS.
Esempio
Qui proveremo a ottenere lo stesso risultato usando il tag <div> insieme ai CSS, qualunque cosa tu abbia ottenuto usando il tag <table> nell'esempio precedente.
<!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>Questo produrrà il seguente risultato:
Puoi creare un layout migliore usando DIV, SPAN e CSS. Per ulteriori informazioni sui CSS, fare riferimento al tutorial CSS.