Cómo crear una línea horizontal en HTML

¿Estás aprendiendo HTML? ¿Quieres añadir una línea horizontal a tu página web? Una línea horizontal, también conocida como regla horizontal, se puede usar para separar bloques de texto u otro contenido en tu sitio web. Es muy fácil añadir una línea horizontal en HTML. También es posible darle estilo a la línea horizontal mediante CSS o atributos en línea de HTML. De esta forma, puedes cambiar el grosor, alineación o color de la línea. En este How.com.vn, aprenderás a añadir y darle estilo a una línea horizontal en HTML y CSS.^{[1]XFuente de investigación}

Método 1

Método 1 de 2:

Usar CSS

Descargar el PDF

1
Abre o crea un nuevo documento de HTML. Los documentos de HTML pueden editarse mediante un editor de texto como el Bloc de Notas. Asimismo, puedes usar un editor de código como Adobe Dreamweaver o Visual Studio Code. Sigue estos pasos para abrir un documento de HTML en el programa que elijas:
- Abre el Bloc de Notas o el editor de texto o de código que elijas.
- Haz clic en el menú Archivo.
- Haz clic en Abrir.
- Selecciona un archivo HTML.
- Haz clic en Abrir.
2
Añade un encabezado al documento HTML. Si tu documento HTML de por sí no tiene un encabezado, sigue estos pasos para añadir uno. El encabezado va después de la etiqueta "<html>" y antes de la etiqueta "<body>".
- Escribe <head> en la parte superior del documento.
- Presiona dos veces la tecla Entrar para añadir dos líneas nuevas.
- Escribe </head> para cerrar la sección del encabezado.
3
Escribe <style> en la sección del encabezado. La etiqueta de estilo va entre las etiquetas de apertura y de cierre del encabezado. Con esto se crea una sección en donde puedes ingresar código CSS para darle estilo a tu documento HTML.
- Como otra alternativa, puedes utilizar un archivo CSS externo para darle estilo a tu documento HTML.
4
Escribe hr {. Esta es la etiqueta de CSS para darle estilo a la línea horizontal. Añádela después de la etiqueta de estilo en el encabezado o en el archivo externo de CSS.
- Como otra alternativa, puedes definir un estilo de clase para crear distintos estilos para las líneas horizontales.
5
Añade estilos de CSS para la etiqueta "<hr>". Estos van después de la etiqueta "hr {". Puedes darle estilo a una línea horizontal de muchas formas. Estos son algunos ejemplos:
- Ancho: escribe width: ##px; para establecer el ancho de la línea. Reemplaza "##" por la cantidad de píxeles de ancho que tenga la línea. Asimismo, puedes usar un porcentaje (%) en lugar de píxeles (px).
- Altura: escribe height: ##px; para establecer el grosor de la línea. Reemplaza "##" por el número de píxeles de grosor que tenga la línea.
- Color: escribe background-color: ##; para establecer el color de la línea. Reemplaza "##" por el nombre de un color o añade un símbolo de numeral (#) seguido de un código hexadecimal de color.
- Margen derecho: escribe margin-right: ##px; para establecer la cantidad de píxeles desde el borde derecho. Reemplaza "##" por la cantidad de píxeles o "auto". Usar "auto" centrará la línea dentro de su ancho especificado. El espacio restante se dividirá de manera equitativa entre los márgenes izquierdo y derecho.
- Margen izquierdo: escribe margin-left: ##px; para establecer la cantidad de píxeles desde el margen izquierdo. Reemplaza "##" por la cantidad de píxeles o "auto". Usar "auto" centrará la línea dentro de su ancho especificado. El espacio restante se dividirá de manera equitativa entre los márgenes izquierdo y derecho.^{[2]XFuente de investigación}
- Margen superior: escribe margin-top: ##px; para establecer un margen superior para la línea. Reemplaza "##" por la cantidad de píxeles de grosor del margen.
- Margen inferior: escribe margin-bottom: ##px; para establecer el margen inferior. Reemplaza "##" por la cantidad de píxeles de grosor del margen.
- Borde: escribe border-width: ##px; para crear un borde alrededor de la línea (opcional). Reemplaza "##" por la cantidad de píxeles de grosor del borde.
- Color del borde: escribe border-color: ##; para establecer el color del borde (opcional). Reemplaza "##" por el nombre de un color o añade un símbolo de numeral (#) seguido de un código hexadecimal de color.
Con esto se cierra la configuración de estilo para la etiqueta <hr>.
Con esto se crea una línea nueva y luego se añade la etiqueta para cerrar la sección de estilo de tu documento HTML. La etiqueta "</style>" va después de haber añadido todos los elementos de estilo para tu documento HTML.
8
Escribe <hr> en cualquier parte del cuerpo de tu documento HTML. El cuerpo de la etiqueta HTML es el área entre las etiquetas "<body>" y "</body>". Con esto se añade una línea horizontal a tu documento de HTML. Tu configuración de estilo de CSS se aplicará cada vez que utilices la etiqueta "<hr>" en tu documento HTML.
- Si has definido un estilo de clase para la línea horizontal, escribe en cambio {{kbd|<div class="[class_name]"></div>}. Reemplaza "[class_name]" por el nombre de la clase que hayas definido.</li
9
Guarda tu archivo HTML. Para guardar un archivo de texto como un documento HTML, debes reemplazar la extensión del archivo (.txt, .docx) por ".html". Sigue estos pasos para guardar tu documento HTML:
- Haz clic en el menú Archivo.
- Haz clic en Guardar como si vas a empezar un nuevo archivo HTML. Haz clic en Guardar para guardar un archivo HTML existente.
- Escribe un nombre para el archivo junto a "Nombre de archivo".
- Borra la extensión del archivo al final (".txt," ".docx," etc.).
- Reemplaza la extensión del archivo por ".html".
- Haz clic en Guardar.
10
Pon a prueba el archivo HTML. Para poner a prueba el archivo HTML, haz clic derecho en el archivo y selecciona Abrir con. Luego, selecciona un navegador de internet. Debe aparecer una línea sólida en donde hayas colocado la etiqueta "<hr>". Tu código HTML debe verse algo así:
Anuncio

Método 2

Método 2 de 2:

Usar HTML en línea

Descargar el PDF

1
Abre o crea un nuevo documento de HTML. Los documentos de HTML pueden editarse usando un editor de texto como el Bloc de Notas. Asimismo, puedes usar un editor de código como Adobe Dreamweaver o Visual Studio Code. Sigue estos pasos para abrir un documento de HTML en el programa que elijas:
- Abre el Bloc de Notas o el editor de texto o de código que elijas.
- Haz clic en el menú Archivo.
- Haz clic en Abrir.
- Selecciona un archivo HTML.
- Haz clic en Abrir.
Puedes insertar una línea horizontal en la sección "<body>" de un documento HTML. Desplázate hacia abajo hasta encontrar el espacio encima de donde quieras insertar la línea. Luego, haz clic en el extremo izquierdo de la línea para colocar el cursor directamente antes del inicio de la línea.
Con esto se mueve hacia abajo el texto encima del cual quieres insertar la línea.
Tan solo haz clic o utiliza las teclas de flecha en el teclado para regresar el cursor a donde quieras colocar la línea.
La etiqueta "<hr>" es responsable por crear una línea horizontal a través de toda la página. Al usar esta etiqueta por sí sola se creará una línea horizontal básica.
Para este punto, la etiqueta <hr> debe estar en su propia línea sin ningún otro código a su izquierda o derecha.
Si quieres darle estilo a la línea horizontal, puedes hacerlo mediante el HTML en línea. Para darle estilo a la línea horizontal, escribe "style=" después de "hr" dentro de la etiqueta "<hr>" (es decir, <hr style=>).
8
Añade los atributos de estilo (opcional). Si quieres añadir atributos de estilo, hazlo después de "style=" entre comillas dentro de la etiqueta "<hr>". Los atributos de estilo son los mismos que los de CSS. Puedes incluir tantos atributos como desees. Separa cada atributo con un punto y coma (;) salvo el último. Estos son algunos atributos de estilo que puedes añadir:
- Ancho: escribe width: ##px para establecer el ancho de la línea. Reemplaza "##" por la cantidad de píxeles de ancho que tenga la línea. Asimismo, puedes usar un porcentaje (%) en lugar de píxeles (px).
- Altura: escribe height: ##px para establecer el grosor de la línea. Reemplaza "##" por el número de píxeles de ancho que tenga la línea.
- Color: escribe background-color: ##; para establecer el color de la línea. Reemplaza "##" por el nombre de un color o un símbolo de numeral (#) seguido de un código hexadecimal de color.
- Alineación: escribe text-align:## para establecer una alineación para la regla horizontal. Reemplaza "##" por "left" ("izquierda"), "right" ("derecha") or "center" ("centro").
- Margen derecho: escribe margin-right: ##px; para establecer la cantidad de píxeles desde el borde derecho. Reemplaza "##" por la cantidad de píxeles o "auto". Usar "auto" centrará la línea dentro de su ancho especificado. El espacio restante se dividirá de manera equitativa entre los márgenes izquierdo y derecho.
- Margen izquierdo: escribe margin-left: ##px; para establecer la cantidad de píxeles desde el margen izquierdo. Reemplaza "##" por la cantidad de píxeles o "auto". Usar "auto" centrará la línea dentro de su ancho especificado. El espacio restante se dividirá de manera equitativa entre los márgenes izquierdo y derecho.^{[3]XFuente de investigación}
- Margen superior: escribe margin-top: ##px; para establecer un margen superior para la línea. Reemplaza "##" por la cantidad de píxeles de grosor del margen.
- Margen inferior: escribe margin-bottom: ##px; para establecer un margen inferior para la línea. Reemplaza "##" por la cantidad de píxeles de grosor del margen.
- Escribe border-width: ##px para crear un borde alrededor de la línea. Reemplaza "##" por el número de píxeles de grosorg que tenga el borde.
- Escribe border-color: ## para establecer el color del borde. Reemplaza "##" por el nombre de un color o un símbolo de numeral (#) seguido de un código hexadecimal de color.
9
Guarda tu archivo HTML. Para guardar un archivo de texto como un documento de HTML, debes reemplazar la extensión del archivo (.txt, .docx) por ".html". Sigue estos pasos para guardar tu documento HTML:
- Haz clic en el menú Archivo.
- Haz clic en Guardar como si vas a empezar un nuevo archivo de HTML. Haz clic en Guardar para guardar un archivo HTML existente.
- Escribe un nombre para el archivo junto a "Nombre de archivo".
- Borra la extensión del archivo (".txt," ".docx," etc.).
- Reemplaza la extensión del archivo por ".html".
- Haz clic en Guardar.
10
Pon a prueba el archivo HTML. Para poner a prueba el archivo HTML, haz clic derecho en el archivo y selecciona Abrir con. Luego, selecciona un navegador de internet. Debe aparecer una línea sólida en donde hayas colocado la etiqueta "hr". Tu código HTML debe verse algo así:^{[4]XFuente de investigación}
Anuncio