Inserire linee di separazione, usiamo il tag HR

In questo tutorial vediamo come creare delle linee diseparazione con un semplice tag HTML, senza dover ricorrerealla creazione di un'immagine. Il tag in questioneè l'<HR>. Per creare la linea basterebbeinserire nel codice sorgente il solo tag <HR> ed avremola creazione di una linea con colorazione grigia, di unospessore standard e larga quanto permesso da un'eventualetabella in cui è contenuta o dalla risoluzione.
E' possibile però personalizzare la nostra lineadi separazione ed in particolare impostare i valori dilunghezza, spessore/altezza, colore.

Codice dello script

<hr width=100% size=4 color=000000>

 

Come vedete abbiamo impostato una larghezza del 100%, unaaltezza di 4 pixel ed abbiamo scelto come colorazione ilnero.


 

 

Attributi del TAG <HR>

Precedentemente abbiamo visto come inserire delle linee diseparazione con tag HR, ma non abbiamo approfonditol'argomento specificando quali sono i possibili attributidi tale tag.

<HR width="150" size="1" color="red" align="center">


Spiegazioni:
Sostanzialmente gli attributi sono i soliti che possiamodare anche ad un'immagine, in ogni caso width siriferisce alla lunghezza della barra di seprazione,size alla larghezza/spessore, colornaturalmente al colore, align all'allineamentorispetto al resto della pagina o tabella.

Possiamo avere uneffetto simile creando un'immagine di pixels 1*1 delcolore che vogliamo, dopodichè ne specifichiamoaltezza e lunghezza ed otterremo un'immagine/linea diseparazione dal peso molto ridotto che svolge la stessafunzione del tag HR.

 

Tag hr in verticale

  




La proprietà per inserire un tag <hr> inverticale è:

layout-flow:vertical-ideographic

Questo parametro deve essere inserito in uno style:

<hr style="layout-flow:vertical-ideographic">


Altri parametri per il tag <hr> sono:

align="" imposta l'allineamento del tag<hr> parametri: left, center e right,
se nessun parametro viene inserito di default e center
width="" imposta la larghezza in pixel deltag <hr>
size="" dimensione (lunghezza) del tag<hr> accetta misure in pixel o in percentuale.
noshade se vogliamo il tag <hr> senzaombreggiatura.

A differenza di un normale tag <hr> leproprietà width e size sono invertite:
size="" diventa la dimensione (lunghezza)del tag <hr>
width="" larghezza in Pixel

<hr style="layout-flow:vertical-ideographic;" color="#FF0000"width="2">



Ti potrebbe interessare anche

commenta la notizia

Ci sono 3 commenti
fabio8614

mi sono accorto che con google crome non va, con internet explorer si.

Non ce una soluzione compatibile con tutti i browser?