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>
Prova il codice
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;
}
Prova il codice
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;
}
Prova il codice
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;
}
Prova il codice
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.