Dominando a Representação de Tempo em HTML

Introdução

O HTML fornece a tag time que permite aos desenvolvedores representar tempo ou data legíveis por humanos, que também podem ser lidos por mecanismos de busca em formato legível por máquina. Neste laboratório, aprenderemos como usar a tag time em HTML para criar um carimbo de data e hora.

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.

Adicione o boilerplate HTML

Para criar um arquivo HTML, precisamos começar com um boilerplate HTML. Copie e cole o seguinte código no arquivo index.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Time Tag Lab</title>
  </head>
  <body></body>
</html>

Defina a data e hora

Para definir uma data e hora, precisamos usar a tag time com um atributo datetime. O atributo datetime especifica a data e hora em formato legível por máquina. Adicione o seguinte código dentro da tag body para definir a data e hora:

<p>
  A data e hora atuais são
  <time datetime="2022-07-23T18:30-05:00">23 July 2022, 6:30 PM</time>.
</p>

Adicione uma duração de tempo válida

A tag time também pode ser usada para representar uma duração de tempo válida. Podemos adicionar uma duração de tempo válida à tag time usando o atributo datetime. Adicione o seguinte código dentro da tag body para definir a duração do tempo:

<p>
  A duração total do projeto foi de
  <time datetime="PT10M">10 minutes</time>.
</p>

Salve o arquivo index.html e abra-o em um navegador web para visualizar o carimbo de data e hora criado usando a tag time.

Resumo

Neste laboratório, aprendemos como usar a tag time em HTML para criar um carimbo de data e hora. Também vimos como definir uma duração de tempo válida usando a mesma tag. A tag time é uma ferramenta poderosa que pode ser usada por desenvolvedores para criar representações de tempo e data legíveis por humanos e máquinas.