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.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

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éfinissez la date et l'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ésumé

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.

Représentation du temps en HTML

Introduction

Ajoutez le gabarit HTML

Définissez la date et l'heure

Ajoutez une durée de temps valide

Résumé