Inserire linee di separazione, usiamo il tag HR

In questo tutorial vediamo come creare delle linee di separazione con un semplice tag HTML, senza dover ricorrere alla creazione di un'immagine. Il tag in questione è l'<HR>. Per creare la linea basterebbe inserire nel codice sorgente il solo tag <HR> ed avremo la creazione di una linea con colorazione grigia, di uno spessore standard e larga quanto permesso da un'eventuale tabella in cui è contenuta o dalla risoluzione.
E' possibile però personalizzare la nostra linea di separazione ed in particolare impostare i valori di lunghezza, spessore/altezza, colore.

Codice dello script

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

 

Come vedete abbiamo impostato una larghezza del 100%, una altezza di 4 pixel ed abbiamo scelto come colorazione il nero.


 

 

Attributi del TAG <HR>

Precedentemente abbiamo visto come inserire delle linee di separazione con tag HR, ma non abbiamo approfondito l'argomento specificando quali sono i possibili attributi di tale tag.

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


Spiegazioni:
Sostanzialmente gli attributi sono i soliti che possiamo dare anche ad un'immagine, in ogni caso width si riferisce alla lunghezza della barra di seprazione, size alla larghezza/spessore, color naturalmente al colore, align all'allineamento rispetto al resto della pagina o tabella.

Possiamo avere un effetto simile creando un'immagine di pixels 1*1 del colore che vogliamo, dopodichè ne specifichiamo altezza e lunghezza ed otterremo un'immagine/linea di separazione dal peso molto ridotto che svolge la stessa funzione del tag HR.

 

Tag hr in verticale

  




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

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 del tag <hr>
size="" dimensione (lunghezza) del tag <hr> accetta misure in pixel o in percentuale.
noshade se vogliamo il tag <hr> senza ombreggiatura.

A differenza di un normale tag <hr> le proprietà 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?