Texto eliminado en HTML

Introducción

La etiqueta HTML del se utiliza para indicar un texto eliminado en un documento. Al utilizar la etiqueta del, podemos mostrar el texto eliminado con una línea a través de él. Esta práctica te guiará sobre cómo utilizar la etiqueta HTML del para crear un texto tachado.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

Creando un texto tachado

Antes de comenzar, cree un archivo HTML llamado index.html. En este archivo, crearemos un texto tachado utilizando la etiqueta HTML del.

Para crear un texto tachado, siga estos pasos:

1. Abra el archivo index.html en su editor de código
2. Agregue la etiqueta HTML del (<del>) al texto que desea tachar

   <p>The <del>quick</del> brown fox jumps over the lazy dog.</p>

   En el ejemplo anterior, la palabra quick se mostrará tachada.
3. Guarde el archivo index.html y abrálo en el navegador.

Usando atributos de la etiqueta HTML del

La etiqueta HTML del tiene dos atributos importantes: 'cite' y 'datetime'. En este paso, veremos cómo utilizar estos atributos.

1. Agregar atributo Cite: Utilice el atributo Cite para proporcionar la URL de un documento que describa el texto eliminado.

   <p>
     <del cite="http://www.example.com/reason-for-deletion.html"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

2. Agregar atributo Datetime: Utilice el atributo Datetime para indicar la hora en que se eliminó el texto.

   <p>
     <del datetime="2022-09-03T17:12:02Z"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

Creando un texto tachado con texto insertado

Con frecuencia, cuando eliminamos algún texto de una página web, es posible que queramos insertar otro texto en su lugar. En este paso, veremos cómo utilizar la etiqueta ins para mostrar un texto insertado.

1. Abra el archivo index.html en su editor de código
2. Agregue la etiqueta HTML ins al texto insertado que reemplaza el texto eliminado.

   <p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>

   En el ejemplo anterior, la palabra ‘quick’ se mostrará tachada y la palabra ‘brown’ se mostrará como un texto insertado.

Agregando estilo CSS a la etiqueta HTML del

El estilo CSS predeterminado para la etiqueta HTML del es una línea a través del texto. Puedes modificar el estilo CSS según tus necesidades.

1. Agrega el siguiente código CSS a tu archivo HTML para cambiar el estilo predeterminado de la etiqueta del.

   <style>
     del {
       color: red;
       text-decoration: line-through;
     }
   </style>

En el ejemplo anterior, el color de la etiqueta del se ha cambiado a rojo.

Resumen

Crear un texto tachado utilizando la etiqueta HTML del es fácil. En este laboratorio, aprendiste cómo utilizar la etiqueta HTML del para crear un texto tachado, agregar atributos a la etiqueta del, utilizar la etiqueta ins para la inserción y modificar el estilo CSS de la etiqueta del.