Maîtriser les informations de contact HTML

Introduction

En développement web, la balise <address> est utilisée pour afficher des informations de contact sur une page web. Elle est utilisée pour indiquer les détails de l'auteur, de l'organisation ou de l'entreprise qui publie la page web, le document ou l'article.

Dans ce laboratoire, nous allons créer une page web simple et utiliser la balise <address> pour afficher des informations de contact en bas de la page.

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.

Créer un modèle HTML de base

Créez un fichier HTML nommé index.html et ouvrez-le dans un éditeur de code.

Ajoutez le code du modèle HTML de base au fichier :

<!doctype html>
<html>
  <head>
    <title>Contact Information</title>
  </head>
  <body></body>
</html>

Ajouter un titre et un paragraphe

Ajoutez un titre et un paragraphe pour donner une brève introduction ou un résumé de la page.

<h1>Contact Information</h1>
<p>Welcome to my webpage. This webpage contains contact information.</p>

Ajouter des informations de contact

Créez une section pour les informations de contact et placez la balise <address> à l'intérieur de la section. Ajoutez les informations de contact pertinentes entre les balises <address> d'ouverture et de fermeture. Par exemple :

<section>
  <h2>Contact Details</h2>
  <address>
    <p>John Doe</p>
    <p>
      123 Main Street <br />
      Anytown, USA 12345
    </p>
    <p><a href="mailto:john@example.com">john@example.com</a></p>
    <p><a href="tel:123-456-7890">123-456-7890</a></p>
  </address>
</section>

Dans l'exemple ci-dessus, nous avons ajouté une section avec le titre "Contact Details", et à l'intérieur de cette section, nous avons créé une balise <address> pour afficher les informations de contact. Nous avons ajouté le nom, l'adresse, l'adresse e-mail et le numéro de téléphone à l'intérieur de la balise <address>.

Ajouter un style CSS

Ajoutez quelques styles CSS à la balise <address> pour lui donner un formatage. Par défaut, la balise <address> est stylisée pour être de niveau de bloc et en italique. Nous allons la modifier pour la centrer et la mettre en gras.

<style>
  address {
    display: block;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>

Enregistrez le fichier index.html et ouvrez-le dans un navigateur web pour voir la page web finale avec les informations de contact.

Résumé

La balise <address> est un élément HTML utile qui est utilisé pour afficher des informations de contact sur une page web. Dans ce laboratoire, nous avons appris comment utiliser la balise <address> pour créer une section pour afficher des informations de contact sur une page web. Nous avons également appris comment ajouter un certain style CSS à la balise <address> de manière à ce qu'elle soit formatée visuellement de manière meilleure.

Informations de contact HTML