HTML    •    CSS

Introducción al HTML.
Estructura básica de una página web.
Meta tags básicos.
Etiqueta body.
Formateo de texto.
Párrafos y saltos de línea.
Comentarios.
Separadores. Etiqueta hr.
Encabezados.
Caracteres especiales.
Tablas.
Listas.
Imágenes.
Mapas de imágenes.
Enlaces.
Formularios I: introducción.
Formularios II: campos de texto.
Formularios III: listas de opciones.
Formularios IV: botones submit y reset.
Formularios V: otros campos.
Formularios VI: ejemplo de formulario.
Frames.
Iframes.
Marquee.
HTML 5
Fieldset y legend.
Más etiquetas.
Idioma
CSS.
Javascript.
Inicio > Curso de HTML > Separadores. Etiqueta hr.

Separadores. Etiqueta hr.

Separadores en html: La etiqueta <hr>

Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.

La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.

Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal

<hr size="20" />
<hr size="2"  />

Y el resultado sería el siguiente:




Otro parámetro que podemos definir es la anchura de la franja mediante el parámetro width . El parámetro será “width=x %”, siendo “x” el tanto por cien que queremos que ocupe nuestra fnarja.

En el caso de no escribir nada (como en los ejemplos anteriores), la franja será predeterminada del 100%. Si queremos que ocupe más o menos tendremos que escribirlo con el parámetro width.

A continuación vamos a escribir una franja de 75% de ancho:

<hr width=75%"/>


Que quedaría de la siguiente manera:



Muchos navegadores hacen esta franja con una sombra exterior que transforma la franja en tres dimensiones. Si quieres que la franja sea simple, sin sombrita deberás escribir el parámetro “noshade”.

También podemos predefinir el color que le queremos dar a la franja con el parametro "color". Es muy sencillo. Por ejemplo, si queremos que nuestra franja sea de color rojo sólo debemos ponerle la etiqueta: <hr color="#FF0000"/>.

Por último, puedes hacer que la franja quede alineada a un lado, a otro, o al centro del párrafo mediante el parámetro que ya vimos con anterioridad: “align”. “align = center” para el centro, “align = right” para la derecha y “align = left” para la izquierda.

Como ejemplos finales vamos a hacer dos franjas. La primera va a ser una franja de grosor 3, de un ancho del 50% y alineada al centro.

<hr size=3 width= 50% align=center/>

La siguiente va a ser una franja de grosor  2, de ancho 80%, sin sombra y alineada a la derecha.

<hr size=2 width=80% noshade=“noshade” align= right />

Si quieres ver ejemplos de las dos franjas pincha aquí:

Ver ejemplos de las franjas

<< Comentarios. Encabezados. >>

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.  


© HazUnaWeb.com. Tutoriales y manuales de programación y diseño de páginas web. :: Contacto :: Aviso legal
Queda absolutamente prohibida la copia o reproducción total o parcial de los contenidos de este página.