Separar bloques de texto tag <hr /> HTML

Separar bloques de texto tag <hr /> HTML
COMPÁRTELO:

Cuando en una página tenemos mucho texto es conveniente, de cara a la presentación, separar de forma clara y visible. Para ello, la solución más simple, aunque sumamente eficaz, es el uso de las líneas horizontales entre los distintos bloques de contenidos.

Para generar una línea empleamos el tag <hr>. Las letras hr son el acrónimo de horizontal rule (línea horizontal). Vamos a ver un código de ejemplo, que grabemos con el nombre líneas_1.htm.

<html>
                <head>
                               <title>
                               L&iacute;neas horizontales
                             </title>
                </head>
           <body>
               <p>
                              Esto es un p &aacute;rrafo de texto
                <p>
                <hr>
               <p>
                               Esto es otro p &aacuterrafo.
                </p>
                </body>
</html>

El código mostrará la página en la siguiente figura:

html

Como ve, hemos trazado una línea divisora entre ambos párrafos. Esta línea cubre todo el ancho del área de navegación, de lado a lado. (excepto los márgenes por defecto de los que hablamos antes en este mismo capítulo). Éste es el comportamiento por defecto de este tag, pero eso podemos modificarlo, si nos conviene. Este tag puede recibir el atributo width, que permite especificar la anchura que va a cubrir la línea. Esta anchura se puede especificar en un valor absoluto, dándole un número de pixeles, o en un valor relativo, indicando qué porcentaje del área de navegación cubrirá la línea.

Vamos a ver un ejemplo de ambos, para aclara este concepto. En primer lugar, teclee el código que aparece a continuación y grábelo como líneas_2.htm.

<html>
                <head>
                               <title>
                               L&iacute;neas horizontales
                            </title>
               </head>
             <body>
                <p>
                               Esto es un p &aacute;rrafo de texto
                <p>
                <hr width=400>
            <p>
                               Esto es otro p &aacute;rrafo.
             </p>
               </body>
</html>

Fíjese en el resultado de este código como se ve en la figura:

html

La línea tiene ahora 400 pixeles de largo (cubre una anchura de 400 pixeles). Observe que, si cambia el tiempo de ejecución el tamaño de la ventana del navegador, la línea no varía del tamaño: sigue teniendo 400 pixeles. Ahora mire esta variante del código, que grabaremos como líneas_3.htm.

<html>
                <head>
                               <title>
                               L&iacute;neas horizontale
                               </title>
               </head>
                            <body>
                             <p>
                                               Esto es un p &aacute;rrafo de texto 
                              <p>
                             <hr width=50%>
                          <p>
                                              Esto es otro p &aacute;rrafo.
                             </p>
         </body>
</html>

Observe que el resultado es parecido al caso anterior, pero en esta ocasión el tamaño es un porcentaje del ancho de la ventana, de forma que, si varía la anchura de la ventana durante la ejecución, también cambia el tamaño de la línea, para tener siempre el porcentaje indicado. A este respecto (y ya para que lo sepa en el futuro) le comento que si tiene en su monitor una resolución de 800 x 600 píxeles (resolución muy habitual hoy en día), el tamaño del área de navegación, con la ventana del navegador maximizada es de 760 x 420 píxeles. Si la resolución de su monitor es de 1024 x 768 el tamaño del área de navegación es de 955 x 600 píxeles.  Ahora, puede no parecer importante esto, pero cuando usemos otros elementos en nuestra página será vital tener en cuenta estos tamaños para lograr un buen diseño.

Fíjese en una cosa: así como el texto se alinea, por defecto, a la izquierda de la página, las líneas horizontales toman, por defecto la alineación centrada. Esto también podemos modificarlo, usando, para ello, el atributo align, que podrá recibir los valores “left", “center" (defectivo) o “right". Observe el siguiente código, que grabaremos como lineas_4.htm.

<html>
               <head>
                             <title>
                            L&iacute;neas horizontales
                            </title>
               </head>
            <body>
                              <p>
                                             Esto es un p &aacute;rrafo de texto
                              <p>
                          <hr width=50%  align="right">
                            <p>
                                          Esto es otro p &aacute;rrafo
                             </p>
             </body>
</html>

El resultado de éste código es similar a los anteriores, pero con la línea colocada a la derecha de la página, tal como muestra la figura:

html

Además de todo esto, también podemos controlar el espesor de la línea. Para ello, emplearemos el atributo size. Al contrario de lo que ocurriría con width, al atributo size, sólo puede recibir el valor absoluto, en píxeles, y no como un porcentaje de nada. Observe el siguiente código, que grabaremos como líneas_5.htm.

<html>
                <head>
                             <title>
                              L&iacute:neas horizontales
                             </title>
           </head>
           <body>
                          <p>
                                            Esto es un p &aacute;rrafo de texto
                             <p>
                           <hr width=50%  align="right" size=20>
                        <p>
                                             Esto es otro p &aacuterrafo.
                         </p>
       </body>
</html>

Este código genera una página como se muestra a continuación:

html

En ella, puede apreciar el efecto de transparencia de la barra horizontal. No se trata de un efecto muy ortodoxo (no era la idea cuando se creó este tag), pero puede resultar interesante en un momento dado. En seguida aprenderemos a dar color a la barra.

Cómo ve la línea tiene ahora un espesor de 20 píxeles. Además la línea es transparente, es decir, adopta el color de fondo; esto lo puede verificar cambiando el color de fondo. El valor máximo que le podemos pasar al atributo size es 100, es decir, para lograr una línea con un espesor de 100 píxeles (que ya está bien). Si no quiere que la línea sea transparente, sino opaca, añade el atributo noshade, con el valor “noshade". El código aparece a continuación, lo grabaremos como líneas_6.htm.

<html>
                <head>
                               <title>
                               L&iacute;neas horizontales
                               </title>
                </head>
         <body>
                               <p>
                                               Esto es un p&aacute;rrafo de texto
                               <p>
                               <hr width=50%  align="right"  size=10   noshade="noshade">
                               <p>
                                               Esto es otro p&aacute;rrafo.
                               </p>
                </body>
</html>

El resultado lo ve en la siguiente figura:

html

Como puede apreciar, lo que hemos hecho es que la línea aparezca sombreada en gris obscuro. El gris es un color al que se acostumbrará pronto, ya que es muy socorrido en muchos casos (textos de menor importancia, algunas líneas etc.).

Además podemos cambiar el color de la línea, mediante el atributo color. Este atributo puede recibir el valor que indique el color cualquiera de las dos formas que conocemos: mediante el nombre, en ingles, del color o mediante su código hexadecimal. Lo vemos en el siguiente código, que llamaremos lineas_7.hmt.

<html>
                <head>
                               <title>
                               L&iacuteneas horizontales
                              </title>
             </head>
               <body>
                              <p>
                                             Esto es un p&aacuterrafo de texto
                              <p>
                          <hr width=50%  align="right"  size=20 color="#FF0000">
                            <p>
                                         Esto es otro p&aacuterrafo.
                            </p>
              </body>
</html>

El resultado de este código es la página que puede ver en la figura siguiente:

html

Observe como la línea sale en color rojo. Cuando le damos a la línea un color, es indiferente que usemos el sombreado (noshade) o que no lo usemos. La línea es de ese color sin más.

Compártelo:

Profesor de la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo y Posicionamiento Web desde hace más de 10 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

ARTÍCULOS RELACIONADOS:

1 Comentarios

  1. Jose

    Cuando le damos a la lí­nea un color, es indiferente que usemos el sombreado (noshade) o que no lo usemos. La lí­nea es de ese color sin más.

 

Deja un Comentario

Recomendado para ti:

Cómo generar tráfico en mi página WebCómo generar tráfico en mi página Web

Hay que informar a los clientes de la existencia de la página Web e invitarlos a que la visiten para que cono...

Síguenos en Facebook