Esistono diverse tecniche per inserire linee all’interno di pagine HTML. Per prima cosa bisogna distinguere tra linee orizzontali e linee verticali.
Inserire una linea di separazione orizzontale in HTML
La tecnica più semplice per l’inserimento di una linea di separazione orizzontale all’interno di una pagina web, consiste nell’utilizzo del tag <hr> (horizontal rule). Il suo utilizzo è semplicissimo, basta inserire il tag tra i due elementi che si desidera separare con una linea orizzontale, ad esempio:
<p>... primo blocco di testo ...</p>
<hr>
<p>... secondo blocco di testo ...</p>Una seconda tecnica consiste nell’applicare (mediante CSS) un bordo inferiore all’elemento superiore (oppure un bordo superiore all’elemento inferiore). Ad esempio, si supponga di avere un codice HTMl di questo tipo:
<p class="primo">... primo blocco di testo ...</p>
<p>... secondo blocco di testo ...</p>Per applicare una linea di separazione utilizzeremo questa semplice regola di stile:
p.primo {
border-bottom: 1px solid #000;
}Così facendo otterremo il risultato voluto ma per renderlo più gradevole potrebbe essere utile aggiungere un po’ di spaziatura equidistante prima e dopo il bordo, per farlo possiamo modificare lo stile come segue:
p.primo {
border-bottom: 1px solid #000;
padding-bottom: 20px;
margin-bottom: 20px;
}Inserire una linea di separazione verticale in HTML
L’inserimento di una linea verticale all’interno di una pagina HTML non è così semplice come l’inserimento di una linea orizzontale. Non esiste un tag HTML specifico per la creazione di una linea verticale. Per crearne una, pertanto, dovremo utilizzare la tecnica dei bordi (similmente a come visto sopra), applicandone uno laterale tra due elementi affiancati.
Il primo problema da risolvere, se si desidera separare due elementi HTML con una linea verticale, è imparare a gestire elementi affiancati.
Per gestire questo tipo di elementi esistono diverse tecniche. La più vecchia (e obsoleta) prevede l’utilizzo delle tabelle HTML. Vediamo un esempio di codice HTML:
<table>
<tr>
<td class="sinistra">... elemento di sinistra ...</td>
<td class="destra">... elemento di destra ...</td>
</tr>
</table>Per applicare una linea verticale di separazione possiamo utilizzare la seguente regola di stile:
td {
width: 50%
box-sizing: border-box;
}
td.sinistra {
border-right: 1px solid #000;
}Valgono le stesse osservazioni viste nell’esempio precedente. Per raffinare l’aspetto del nostro esempio, pertanto, aggiungiamo un po’ di spaziatura a sinistra ed a destra della nostra linea verticale agendo su entrambe le celle della nostra tabella:
td {
width: 50%
box-sizing: border-box;
}
td.sinistra {
border-right: 1px solid #000;
padding-right: 20px;
}
td.destra {
padding-left: 20px;
}
Come detto, la tecnica che prevede l’utilizzo di tabelle è obsoleta. Un modo più corretto per gestire l’affiancamento di due (o più) elementi in una pagina HTML prevede l’utilizzo dei CSS mediante, ad esempio, la tecnica dei DIV flottanti. Vediamo un esempio:
<div>
<div class="sinistra">... elemento di sinistra ...</div>
<div class="destra">... elemento di destra ...</div>
</div>Per creare l’efetto desiderato applichiamo la seguente stilizzazione:
div.sinistra, div.destra {
float: left;
width: 50%
box-sizing: border-box;
}
div.sinistra {
border-right: 1px solid #000;
padding-right: 20px;
}
div.destra {
padding-left: 20px;
}Oltre a quelle menzionate ci sono diversi altri modi per creare una linea verticale ma, è bene ripeterlo, questo elemento non può essere gestito con una tag HTML specifico. Per creare una linea verticale è necessario giocare coi tag HTML e gli stili CSS.
