Dominando la Representación de Fecha y Hora en HTML

Introducción

HTML proporciona una etiqueta time que permite a los desarrolladores representar una hora o fecha legible para humanos, que también puede ser legible por los motores de búsqueda en formato legible para máquinas. En este laboratorio, aprenderemos cómo usar la etiqueta time en HTML para crear una marca de fecha y hora.

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

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70868{{"Representación de Fecha y Hora en HTML"}} html/head_elems -.-> lab-70868{{"Representación de Fecha y Hora en HTML"}} html/charset -.-> lab-70868{{"Representación de Fecha y Hora en HTML"}} html/lang_decl -.-> lab-70868{{"Representación de Fecha y Hora en HTML"}} html/inter_elems -.-> lab-70868{{"Representación de Fecha y Hora en HTML"}} html/custom_attr -.-> lab-70868{{"Representación de Fecha y Hora en HTML"}} end

Agregar el esqueleto HTML

Para crear un archivo HTML, necesitamos comenzar con un esqueleto HTML. Copie y pegue el siguiente código en el archivo index.html.

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

Definir fecha y hora

Para definir una fecha y hora, necesitamos usar la etiqueta time con un atributo datetime. El atributo datetime especifica la fecha y hora en el formato legible para máquinas. Agregue el siguiente código dentro de la etiqueta body para definir la fecha y hora:

<p>
  La fecha y hora actual es
  <time datetime="2022-07-23T18:30-05:00">23 de julio de 2022, 6:30 PM</time>.
</p>

Agregar una duración de tiempo válida

La etiqueta time también se puede utilizar para representar una duración de tiempo válida. Podemos agregar una duración de tiempo válida a la etiqueta time utilizando el atributo datetime. Agregue el siguiente código dentro de la etiqueta body para definir la duración de tiempo:

<p>
  La duración total del proyecto fue
  <time datetime="PT10M">10 minutos</time>.
</p>

Guarde el archivo index.html y abrálo en un navegador web para ver la marca de fecha y hora creada utilizando la etiqueta time.

Resumen

En este laboratorio, aprendimos cómo usar la etiqueta time en HTML para crear una marca de fecha y hora. También vimos cómo definir una duración de tiempo válida utilizando la misma etiqueta. La etiqueta time es una herramienta poderosa que los desarrolladores pueden utilizar para crear representaciones de fecha y hora legibles para humanos y máquinas.