Maîtriser la représentation du temps en HTML

Introduction

HTML fournit une balise time qui permet aux développeurs de représenter des dates ou des heures lisibles par l'homme, qui peuvent également être lues par les moteurs de recherche au format lisible par machine. Dans ce laboratoire, nous allons apprendre à utiliser la balise time en HTML pour créer une empreinte de date et d'heure.

Note : Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page 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{{"Représentation du temps en HTML"}} html/head_elems -.-> lab-70868{{"Représentation du temps en HTML"}} html/charset -.-> lab-70868{{"Représentation du temps en HTML"}} html/lang_decl -.-> lab-70868{{"Représentation du temps en HTML"}} html/inter_elems -.-> lab-70868{{"Représentation du temps en HTML"}} html/custom_attr -.-> lab-70868{{"Représentation du temps en HTML"}} end

Ajoutez le gabarit HTML

Pour créer un fichier HTML, nous devons commencer par un gabarit HTML. Copiez et collez le code suivant dans le fichier index.html.

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

Définir une date et une heure

Pour définir une date et une heure, nous devons utiliser la balise time avec un attribut datetime. L'attribut datetime spécifie la date et l'heure au format lisible par machine. Ajoutez le code suivant à l'intérieur de la balise body pour définir la date et l'heure :

<p>
  La date et l'heure actuelles sont
  <time datetime="2022-07-23T18:30-05:00">23 juillet 2022, 18:30</time>.
</p>

Ajoutez une durée de temps valide

La balise time peut également être utilisée pour représenter une durée de temps valide. Nous pouvons ajouter une durée de temps valide à la balise time en utilisant l'attribut datetime. Ajoutez le code suivant à l'intérieur de la balise body pour définir la durée de temps :

<p>
  La durée totale du projet a été
  <time datetime="PT10M">10 minutes</time>.
</p>

Enregistrez le fichier index.html et ouvrez-le dans un navigateur web pour afficher l'empreinte de date et d'heure créée à l'aide de la balise time.

Récapitulatif

Dans ce laboratoire, nous avons appris à utiliser la balise time en HTML pour créer une empreinte de date et d'heure. Nous avons également vu comment définir une durée de temps valide en utilisant la même balise. La balise time est un outil puissant que les développeurs peuvent utiliser pour créer des représentations de date et d'heure lisibles par l'homme et la machine.