Programación Web » Aprender HTML » Unidad 3. Introducción a HTML:

Separar bloques de texto

hr

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.

Artículos de navegación

Acerca del Profesor

Adrián Delgado Rodríguez

Ingeniero en Computación, docente por convicción y apasionado por la programación Web.

Actualmente trabaja como Profesor para en el Centro Universitario de la Costa de la Universidad de Guadalajara y como Desarrollador Web.

Síguenos:

 

Ver el perfil completo de Hugo Adrián Delgado Rodríguez (akus.net).

Deja un comentario

avatar comentario
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.




Diseño de páginas Web en Puerto Vallarta y Bahía de Banderas akus.net
subir

Síguenos en Facebook

Artículo de la semana

Cómo iniciar una página WebMetodología para la creación de sitios

Comprende las fases de Análisis, Planificación, Contenido, Diseño. ¿Qué método utilizas?