Contenido

• Pasos
• Método 1 de 2: Trabajar en HTML 4.01
• Método 2 de 2: Trabajar en CSS / HTML5

Este artículo le mostrará cómo agregar una línea horizontal en HTML. La línea horizontal se puede utilizar para separar el contenido del sitio. El código para crear la línea es bastante simple. Sin embargo, en HTML 4.01, es posible cambiar el diseño de una línea usando comandos internos. En HTML5, tendrá que usar CSS para diseñar la línea.

Pasos

Método 1 de 2: Trabajar en HTML 4.01

1. 1 Abra un documento HTML existente o cree uno nuevo. Los documentos HTML se pueden editar con un editor de texto como el Bloc de notas o un editor de código especializado como Adobe Dreamweaver. Siga estos pasos para abrir un documento HTML en el programa de su elección:
   • Abra el Bloc de notas u otro editor de texto / código.
   • Abre el menú Archivo.
   • Haga clic en Abierto.
   • Seleccione el archivo HTML.
   • Haga clic en Abierto
2. 2 Seleccione la ubicación donde desea insertar la línea. Desplácese hacia abajo hasta encontrar la línea por encima de la cual debería aparecer la línea, y luego mueva el cursor directamente al principio de esa línea haciendo clic en el extremo izquierdo de esa línea.
3. 3 Agrega una línea vacía. Doble toque ↵ Entrarpara desplazarse hacia abajo en el texto antes del cual desea insertar una línea, y luego coloque el cursor en una línea vacía.
4. 4 Agregue la etiqueta hr>. Ingresar hora> al espacio en blanco al principio de la línea. Etiqueta hora> le permite dibujar una línea horizontal en toda la página.
5. 5 Mueva el cursor después de la etiqueta "hr" a una nueva línea presionando ↵ Entrar. Ahora la etiqueta hora> debe estar en una línea separada.
6. 6 Agrega atributos a la línea horizontal (opcional). Agregue atributos como longitud, grosor, color y alineación. Escríbalos entre llaves inmediatamente después de la "hr". Para agregar varios atributos, sepárelos con un espacio.
   • Ingresar hr size = "#">para cambiar el grosor de la línea. Reemplace "#" con un valor numérico de grosor (por ejemplo, tamaño = "10").
   • Ingresar hr ancho = "#">para cambiar el ancho de la línea. Reemplace "#" con el número de píxeles o un porcentaje del ancho de la página (por ejemplo, ancho = "200" o ancho = "75%").
   • Ingresar hr color = "#">para cambiar el color de la línea. Reemplaza "#" con el nombre del color o su código hexadecimal (por ejemplo, color = "rojo" o color = "# FF0000").
   • Ingresar hr align = "#">para alinear la línea. Reemplaza "#" por "derecha" (derecha), "izquierda" (izquierda) o "centro" (centro) (por ejemplo, hr width = "50%" align = "center">).
7. 7 Guarde el archivo HTML. Para guardar un archivo de texto como un documento HTML, debe cambiar la extensión del archivo (.txt, .docx) a ".html". Siga estos pasos para guardar su documento HTML:
   • Abre el menú Archivo.
   • Haga clic en Guardar como.
   • Introduzca un nombre para el archivo en el campo Nombre de archivo.
   • Agregar .html después del nombre del archivo.
   • Haga clic en Salvar.
8. 8 Verifique su documento HTML. Para verificar el archivo HTML, haga clic derecho sobre él y elija Abrir con. Luego seleccione su navegador web. Debería aparecer una línea continua donde insertó la etiqueta "hr". El código HTML se verá así:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Esta línea debe estar separada del encabezado por una línea . / P1> / cuerpo> / html>

Método 2 de 2: Trabajar en CSS / HTML5

1. 1 Abra un documento HTML existente o cree uno nuevo. Los documentos HTML se pueden editar con un editor de texto como el Bloc de notas o un editor de código especializado como Adobe Dreamweaver. Siga estos pasos para abrir un documento HTML en el programa de su elección:
   • Abra el Bloc de notas u otro editor de texto / código.
   • Abre el menú Archivo.
   • Haga clic en Abierto.
   • Seleccione el archivo HTML.
   • Haga clic en Abierto
2. 2 Agrega un título a tu documento HTML. Si su documento HTML aún no tiene un encabezado, siga estos pasos para agregar uno. El encabezado debe ir después de la etiqueta html> y antes de la etiqueta body>.
   • Ingresar cabeza> en la parte superior del documento.
   • Doble toque ↵ Entrarpara agregar dos nuevas líneas.
   • Ingresar / cabeza>para cerrar el título.
3. 3 Ingresar tipo de estilo = "texto / css"> dentro del encabezado. La etiqueta de estilo se coloca entre las dos etiquetas de encabezado para crear un lugar donde puede usar CSS para modificar el diseño HTML.
   • Alternativamente, puede utilizar una hoja de estilo externa. Leer el artículo "Cómo insertar un archivo CSS en HTML»Para aprender a vincular un archivo CSS externo a un archivo HTML.
4. 4 Ingresar hr {. Esta es la etiqueta CSS para diseñar la línea horizontal. Agréguelo después de la etiqueta "estilo" en su encabezado o archivo CSS externo.
5. 5 Agregue estilos CSS para la etiqueta hr>. Deben ir después de la etiqueta "hr {". Una línea horizontal se puede diseñar de varias formas. A continuación se muestran algunos de ellos.
   • Ingresar ancho: ## px;para ajustar el ancho de la línea. Reemplaza "##" con el ancho de línea en píxeles. En lugar de píxeles (px), puede utilizar un porcentaje (%).
   • Ingresar altura: ## px;para ajustar el grosor de la línea. Reemplaza "##" con el ancho de línea en píxeles.
   • Ingresar color de fondo: ##;para especificar el color de la línea. Reemplace “##” con un nombre de color o almohadilla (#) seguido de un código de color hexadecimal.
   • Ingresar margen derecho: ## px;para especificar el número de píxeles desde el borde derecho. Reemplace "##" con un número numérico de píxeles o el código "auto". Introduzca "auto" para alinear la línea a la izquierda o al centro.
   • Ingresar margen izquierdo: ## px;para especificar el número de píxeles desde el borde izquierdo. Reemplace "##" con un número numérico de píxeles o el código "auto". Introduzca "auto" para alinear la línea a la derecha o al centro.
   • Ingresar margen superior: ## px; para especificar el relleno superior de la línea. Reemplaza "##" con un número correspondiente al relleno en píxeles.
   • Ingresar margen inferior: ## px;para especificar el relleno inferior de la línea. Reemplace "##" con un número correspondiente al relleno en píxeles.
   • Ingresar ancho del borde: ## px;para dibujar un cuadro alrededor de la línea (opcional). Reemplaza "##" con un número correspondiente al ancho del borde en píxeles.
   • Ingresar color del borde: ##;para especificar el color del borde (opcional). Reemplace “##” con un nombre de color o almohadilla (#) seguido de un código de color hexadecimal.
6. 6 Ingresar } después de los atributos de estilo para completar el estilo de la etiqueta hr>.
7. 7 Ingresar hora> en cualquier parte del cuerpo del documento HTML para agregar una línea horizontal. La configuración de estilo CSS se aplicará cada vez que use la etiqueta hr> en su documento HTML. Tu código debería verse así:

   ! DOCTYPE html> html> encabezado> tipo de estilo = "texto / css"> hr {ancho: 50%; altura: 20px; color de fondo: rojo; margen derecho: automático; margen izquierdo: automático; margen superior: 5px; margen inferior: 5px; ancho del borde: 2px; color del borde: verde; } / style> / head> body> h1> Heading / h1> hr> p1> Esta línea debe estar separada del encabezado por una línea horizontal / p1> / body> / html>