Tag hr HTML Línea Horizontal - Atributos y estilos
La etiqueta hr nos permite generar una separación entre secciones de contenido. Se puede combinar con otros tags como encabezados h1- h6 y párrafos p.
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, así como lo hace la agencia Dónde Está Mi Web.
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 lineas_1.html
<html>
<head>
<title>
Líneas horizontales
</title>
</head>
<body>
<p>
Esto es un p árrafo de texto
<p>
<hr>
<p>
Esto es otro p árrafo.
</p>
</body>
</html>
El código mostrará la página en la siguiente figura:
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íneas horizontales
</title>
</head>
<body>
<p>
Esto es un p árrafo de texto
<p>
<hr width=400>
<p>
Esto es otro p árrafo.
</p>
</body>
</html>
Fíjese en el resultado de este código como se ve en la figura:
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íneas horizontale
</title>
</head>
<body>
<p>
Esto es un p árrafo de texto
<p>
<hr width=50%>
<p>
Esto es otro p á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íneas horizontales
</title>
</head>
<body>
<p>
Esto es un p árrafo de texto
<p>
<hr width=50% align="right">
<p>
Esto es otro p á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:
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í:neas horizontales
</title>
</head>
<body>
<p>
Esto es un p árrafo de texto
<p>
<hr width=50% align="right" size=20>
<p>
Esto es otro p árrafo.
</p>
</body>
</html>
Este código genera una página como se muestra a continuación:
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íneas horizontales
</title>
</head>
<body>
<p>
Esto es un párrafo de texto
<p>
<hr width=50% align="right" size=10 noshade="noshade">
<p>
Esto es otro párrafo.
</p>
</body>
</html>
El resultado lo ve en la siguiente figura:
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íneas horizontales
</title>
</head>
<body>
<p>
Esto es un párrafo de texto
<p>
<hr width=50% align="right" size=20 color="#FF0000">
<p>
Esto es otro párrafo.
</p>
</body>
</html>
El resultado de este código es la página que puede ver en la figura siguiente:
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.
Tag hr HTML Línea Horizontal - Atributos y estilos
ChatGPT Gratis
Realiza preguntas sobre cualquier tema
¡Participa!
¡Compártelo en tus Redes Sociales!CITAR ARTÍCULO
Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos
Referencia en Formato APA:
Delgado, Hugo. (2013).
Tag hr HTML Línea Horizontal - Atributos y estilos.
Recuperado 14 de abril, 2024, de
https://disenowebakus.net/domine-html-y-dhtml-separar-bloques-de-texto.php
CONTINÚA APRENDIENDO
TAMBIÉN MERECE LA PENA VISITAR:
El objetivo de HTML5 y de sus estándares relacionados es proporcionar un conjunto de potentes...
La maquetación web es el proceso de planificación, conceptualización y organización de contenido...
La Web surgió con navegadores básicos que sólo interpretaban texto, después apareció HTML...
Cómo poner un color de fondo en nuestra página y cómo modificar el texto, formatearlo, cambiar el...
¿Te gustaría aprender más sobre Diseño Web?
Conoce todos los cursos y tutoriales que tenemos para ti completamente gratis
Aprender Diseño Web¿Todavía no encuentras lo que necesitas?
Usa nuestro buscador interno para descubrir más informaciónContenido relacionado:
2 Comentarios en "Tag hr HTML Línea Horizontal - Atributos y estilos"
Deja tu Comentario
PATROCINADOR
Tu negocio también puede aparecer aquí. Más información
Muchas gracias, Me ha sido de mucha utilidad.
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.