Actualizado el 14-01-2007
versión para imprimir
Barras separadoras
Bueno, no es una etiqueta que a mi me vuelva loco; pero es por su sencillez
uno de los recursos mas utilizados: la barra separadora.
Realmente, no hay
mucho que decir. Una barra separadora es esto:
¿como se hace? con una etiqueta vacía: <hr >. Como ya sabemos "etiqueta vacía es aquella que va sola, no emparejada. Ah, se trata de una etiqueta "formateadora", es decir, inserta una linea en blanco antes y despues.
La etiqueta hr admitía unos pocos atributos para variarla un poco, muchos de ellos ahora en desuso. Por
defecto, la longitud de la barra será la de la página, de lado a lado. Podiamos especificar la longitud con el atributo width="" [en desuso]
Ahora se recomienda el uso de estilos:
<hr style="width:80%"> <hr style="width:60%"> <hr style="width:40%"> <hr style="width:20%">
El atributo align="" [en desuso] permitía alinear la imagen. Ahora se recomienda usar CSS, pudiendo alinear las barras igual que haciamos con las imagenes, usando float. Veamoslo:
En fin, si queremos podemos especificar el grosor de la línea, con el atributo size="", que le dá una especie de "relieve":
<hr style="width:80%;float:left;> <hr style="width:80%;margin-left:auto;margin-right:auto;height:5px;"/> <hr style="width:80%; float:right;height:10px;>
Y para rematar podemos especificar que ese grosor sea una línea de color
sólido, mediante el atributo noshade, sin valor [en desuso]
Como el efecto noshade se limitaba a eliminar el 'efecto relieve' que la etiqueta hr intenta 'por defecto' es fácil conseguir el mismo efecto con la propiedad de estilo color:
<hr style="width:80%;float:left;height:1px;background-color:#aca899;"> <hr style="width:80%;margin-left:auto;margin-right:auto;height:5px;background-color:#aca899;"> <hr style="width:80%;float:right;height:10px;background-color:#aca899;">
Lineas con truco
Ya que sabes casi todo lo que hace falta saber sobre líneas, ahora aprenderás una forma totalmente distinta, y nada ortodoxa, de hacerlas. Observa la siguiente línea
Esta linea requiere algunos conocimientos que ya tenemos. Se trata simplemente de insertar una imagen, pero reduciendo (o alargando) el espacio reservado para su visualización al tamaño deseado:
<p style="text-align:center"> <img src="imagenes/bkgnd2.gif" width="300" height="5"alt=" ">
Jugando con estos atributos podemos obtener las lineas que deseemos. ¿utilidad? lineas coloristas ...