Guida Pagine Web - Sito

Nel precedente articolo della guida Xhtml abbiamo scoperto che esistono dei caratteri speciali da utilizzare nel testo quando utilizziamo l'XHTML In questo articolo scopriremo una nuova tecnica: il BOX MODEL.

BOX MODEL è quella tecnica che permette di creare una struttura (layout) fatta da rettangoli e/o quadrati, praticamente colonne e righe con o senza bordo, per poter raccogliere testi, immagini o qualsiasi altra cosa che potrebbe far parte di una pagina HTML.

es.
#box {
width: 350px;
height: 150px;
padding: 20px; 
border: 5px solid;
margin: 20px;
}

Testo di prova

• width ed height: larghezza e altezza dei contenuti;
• padding: spazio fra i contenuti e il bordo;
• border: spessore del bordo;
• margin: distanza del box dagli altri elementi.

Per non avere problemi di visualizzazione con i diversi browser il codice da usare, per la creazione di un box, è il seguente:

#box-esterno {
width: 400px;
height: 200px;
}
#box-interno{
padding: 20px; 
border: 5px solid;
margin: 20px;
}

Testo di prova

Nel prossimo articolo scopriremo quali sono le regole da seguire per posizionare corretamente un DIV.

Il menu della guida:

• Extensible hypertext markup language
• Struttura e doctype
• Differenza html e xhtml
• Caratteri speciali
• Box model
• Posizionamento box model
• Box liquido
• Div, id e class