Dominando o Tachado em HTML: Guia Completo

Introdução

A tag HTML del é usada para indicar um texto excluído em um documento. Ao usar a tag del, podemos exibir o texto excluído com uma linha sobre ele (strike through). Este laboratório irá guiá-lo sobre como usar a tag HTML del para criar um texto com tachado.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criando um Texto com Tachado

Antes de começar, crie um arquivo HTML chamado index.html. Neste arquivo, criaremos um texto com tachado usando a tag HTML del.

Para criar um texto com tachado, siga estes passos:

Abra o arquivo index.html em seu editor de código.
Adicione a tag HTML del (<del>) ao texto que você deseja tachar.
```
<p>The <del>quick</del> brown fox jumps over the lazy dog.</p>
```
No exemplo acima, a palavra quick será exibida com tachado.
Salve o arquivo index.html e abra-o no navegador.

Usando Atributos da Tag HTML del

A tag HTML del possui dois atributos importantes: 'cite' e 'datetime'. Nesta etapa, veremos como usar esses atributos.

Adicionando o Atributo Cite - Use o atributo Cite para fornecer a URL de um documento que descreve o texto excluído.

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

Adicionando o Atributo Datetime - Use o atributo Datetime para indicar o momento em que o texto foi excluído.
```
<p>
  <del datetime="2022-09-03T17:12:02Z"
    >The quick brown fox jumps over the lazy dog.</del
  >
</p>
```

Criando Texto Tachado com Texto Inserido

Frequentemente, quando excluímos algum texto de uma página web, podemos querer inserir outro texto em seu lugar. Nesta etapa, veremos como usar a tag ins para mostrar um texto inserido.

Abra o arquivo index.html em seu editor de código.
Adicione a tag HTML ins ao texto inserido que substitui o texto excluído.
```
<p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>
```
No exemplo acima, a palavra 'quick' será exibida com tachado, e 'brown' será exibido como um texto inserido.

Adicionando Estilo CSS à Tag HTML del

O estilo CSS padrão para a tag HTML del é line-through (tachado). Você pode modificar o estilo CSS de acordo com suas necessidades.

Adicione o seguinte código CSS ao seu arquivo HTML para alterar o estilo padrão da tag del.
```
<style>
  del {
    color: red;
    text-decoration: line-through;
  }
</style>
```
No exemplo acima, a cor da tag del foi alterada para vermelho.

Resumo

Criar um texto com tachado usando a tag HTML del é fácil. Neste laboratório, você aprendeu como usar a tag HTML del para criar um texto com tachado, adicionar atributos à tag del, usar a tag ins para inserção e modificar o estilo CSS da tag del.

Texto Excluído em HTML