Dividere una pagina Web in blocchi

Div, p, span e style

Per creare pagine HTML sempre più complesse si utilizzano tag come div e p per dividere la pagina in blocchi, il div viene utilizzato per dividere la pagina in diverse parti mentre abbiamo già visto che la p viene utilizzata per creare dei paragrafi.


<div>
<h1>Blocco 1</h1>
<p>Questo è il primo blocco</p>
</div>
<div>
<h1>Blocco 2</h1>
<p>Questo è il secondo blocco</p>  
</div>

Come p, il tag span è utilizzato per contenere un testo ma è un tag che non crea un blocco o una parte diversa del documento ma viene inserito all’interno del blocco in cui si trova; viene spesso utilizzato, all’interno di un div o di un p, per scrivere il testo con un colore o un font diverso senza modificare lo stile dell’intero blocco.

Per modificare il colore o il font di un test si utilizza il tag <style> all’interno dell'head della pagina o si inserisce come attributo di un elemento.

Ad esempio:


<p>Questo testo è <span style="color:blue;">blue</span></p>

Questo testo è blue

Nell'esempio qui sopra il testo del p è nero mentre la parola blue compreso nel tag span è di colore blue perché tramite l'attributo style abbiamo definito lo stile "color: blue" del tag span.

Nel caso in cui volessimo cambiare il colore del p e quello dello span non inserendo l’attributo ad entrambi ma utilizzando il tag style, il codice sarebbe il seguente:


<!DOCTYPE html>
<html>
<head>
<title>Tag Style</title>
<meta charset="UTF-8" />
<style>
p{ color: red;}
span{color: blue;} 
</style>
<head>
<body>
<h1>Modificare il colore</h1>
<p>Questo testo è <span style=”color:blue;”>blue</span></p>
</body>

Se mandassi in esecuzione questo codice su questa pagina mi cambierebbe il colore del testo di tutti i paragrafi presenti in rosso. Come si può evitare una situazione simile? Utilizzando gli attributi id e class.

Id e Class

Come visto nel caso precedente potremo avere bisogno di cambiare solo un determinato p o un div e renderlo di un colore diverso rispetto a tutti gli altri. Inserendo l’elemento p nello style cambiamo infatti tutti i p presenti nella pagina.

In questo ci vengono d’aiuto id e class: id è un identificatore unico, si può utilizzare una sola volta e non è possibile riassegnare lo stesso valore a due elementi diversi, mentre l’attributo class può essere riutilizzato più volte.

Nel caso precedente potevamo usare un id “red” per rendere unico quel p rispetto a tutti gli altri, ma generalmente l’id viene usato per blocchi di codice per gestire ad esempio l’header, il footer o il contenuto principale mentre per gli stili si usa class perché può essere riutilizzata più volte.

In questo caso solo il p con quel testo sarebbe diventato rosso:


<!DOCTYPE html>
<html>
<head>
<title>Tag Style</title>
<meta charset=”UTF-8” />
<style>
.red{ color: red;}
span{color: blue;} 
</style>
<head>
<body>
<h1>Modificare il colore </h1>
<p class="red">Questo testo è  <span style="color:blue;">blue </span></p>
</body>
</html>

Tag Style

Modificare il colore

Questo testo è blue

Se ci avete caso nello style ho scritto .red per definire la classe red, il punto infatti viene utilizzato per le classi seguito dal nome della stessa, invece per quanto riguarda gli id si utilizza il #. Se invece di class red era id="red" nello style ci sarebbe stato #red.

Affronteremo questo argomento in seguito quando parleremo degli stili in maniera più approfondita nel corso CSS.

Table

Per creare una tabella in HTML si utilizza il tag <table>, questo elemento com' è facile immaginare ha righe e colonne, può essere divisa in thead(testata della tabella), tbody(corpo della tabella) e tfoot(piè di pagina della tabella) e può avere una caption (ovvero una descrizione) subito dopo il tag iniziale per descrivere che tipo di tabella sia.

Forse è più facile spiegare con un esempio pratico, ecco un esempio di tabella:


<!DOCTYPE html>
<html>
<head/>
<style>
table, th, td 
{
margin: 5px;    
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>  
<table>
<caption>Elenco di persone iscritte al sito</caption>
<colgroup>
<col style="background-color: green">
<col style="background-color: white">
<col style="background-color: red">
</colgroup>
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Anni</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vincenzo</td>
<td>Carlesimo</td>
<td>33</td>
</tr>
<tr>
<td>Mario</td>
<td>Rossi</td>
<td>54</td>
</tr>
<tr>
<td>Anna</td>
<td>Bianchi</td>
<td>23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Membri</td>
<td>3<td>
</tr> 
</tfoot>
</table>
</body>
</html>

Elenco di persone iscritte al sito
Nome	Cognome	Anni
Vincenzo	Carlesimo	33
Mario	Rossi	54
Anna	Bianchi	23
Membri	3


<table> è il tag iniziale di una tabella e viene chiuso alla fine con un </table>.

<caption> è la descrizione della tabella.   

<colgroup>definisce lo stile di un gruppo di colonne, ogni <col> al suo interno definisce lo stile di un'intera colonna. 

<thead> è la parte iniziale di una tabella (table head) ed è principalmente la prima riga, non sempre questo tag viene utilizzato ma per una migliore struttura del codice è consigliabile usarlo. Al suo interno troviamo i nomi delle colonne che definiscono il loro contenuto. 

<tr> è il tag che definisce una riga (table row), tra il tag <tr> e quello di chiusura </tr>troviamo le colonne e il loro contenuto che dispone la tabella e, solamente nella prima riga i nomi delle colonne.     

<th> è l'header (table header) dove al suo interno viene definito il nome di ogni colonna, si usa solamente ad inizio tabella all’interno del tag <thead> o in assenza di questo tag nella prima riga della tabella. Nell'esempio i nomi sono "Nome", "Cognome" e "Anni" e come potete verificare il contenuto del tag th è scritto in grassetto ed è posizionato al centro della colonna. 

<td> (Table Data/Table Cell), definisce una colonna, ogni colonna è racchiusa tra un <td> e un </td>. Come potete notare nell'esempio ogni riga ha più colonne, in questo caso ne abbiamo 3 e quindi per 3 volte apriamo e chiudiamo il tag <td>. All'interno di questo tag c’è l'elemento visibile a schermo. In questo caso il nome, il cognome e gli anni di 3 persone.

<tbody> è il corpo della tabella dove sono presenti gli elementi inseriti nella tabella.

<tfoot> è il footer della tabella, spesso viene usato per inserire il risultato in una tabella ad esempio di incassi e spese o in questo caso per vedere quante persone sono iscritte in un sito web. I nomi, a parte il mio, sono inventati.

Nell'esempio qui sopra rendiamo lo sfondo della prima colonna verde, la seconda bianca e la terza rossa.

Inserendo il bordo ai tag <table>, <th> e <td> in automatico l'HTML5 inserisce il valore del border-collapse su separate. In questo caso però utilizzo il valore collapse per aver un bordo unico per l'intera riga invece che un bordo per ogni singola colonna (separate); mentre il margin inserisce un margine superiore alla tabella, lasciando uno spazio bianco di 5px sopra di essa. Approfondiremo meglio gli stili quando parleremo dei CSS.

Si può cambiare lo stile solo di una colonna eliminando l'attributo style dalle altre 2, oppure rendere due colonne dello stesso colore utilizzando l'attributo span.

Ad esempio:


<!DOCTYPE html>
<html>
<head/>
<style>
table, th, td 
{
margin: 5px;    
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body> 
<table>  
<caption>Elenco di persone iscritte al sito</caption>
<colgroup>
<col> <!-- Questa colonna non cambia lo stile -->
<col span="2" style="background-color: gray"> <!--In questo modo la seconda e la terza colonna diventano entrambi grigie -->  
<thead>
<tr/></tr>
<th>Nome</th>
<th>Cognome</th>
<th>Anni</th/>
</tr>
</thead>
</table>
</body>
</html>

Elenco di persone iscritte al sito
Nome	Cognome	Anni

caption, colgroup, thead, tbody e tfoot non sono obbligatori ma vengono utilizzati per fare ordine e scrivere il codice in maniera "pulita", nulla vieta comunque di scrivere l’esempio di prima in questo modo:


<!DOCTYPE html>
<html>
<head/>
<style>
table, th, td 
{
margin: 5px;    
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body> 
<table>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Anni</th>
</tr>
<tr>
<td>Vincenzo</td>
<td>Carlesimo</td>
<td>33</td>
</tr>
<tr>
<td>Mario</td>
<td>Rossi</td>
<td>54</td>
</tr>
<tr>
<td>Anna</td>
<td>Bianchi</td>
<td>23</td></tr>
<tr>
<td>Membri</td>
<td>3</td>
</tr>
</table>
</body>
</html>

Nome	Cognome	Anni
Vincenzo	Carlesimo	33
Mario	Rossi	54
Anna	Bianchi	23
Membri	3

Prev 5/6 Next