Créer un pied de page de base avec HTML

Introduction

La balise <footer> peut être utilisée pour créer le pied de page d'un site web. Dans ce laboratoire, vous allez apprendre à créer un pied de page de base à l'aide de la balise HTML footer.

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 93%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Configure la structure de base de la page web

Créez un nouveau fichier avec l'extension .html et nommez-le index.html. C'est là que nous allons ajouter le code HTML pour créer un pied de page.

Dans cette étape, nous allons créer la structure de base de la page web. Voici le code :

<!doctype html>
<html>
  <head>
    <title>Ma page web</title>
  </head>
  <body>
    <!-- Le header sera ici -->
    <main>
      <!-- Le contenu principal sera ici -->
    </main>
    <!-- Le footer sera ici -->
  </body>
</html>

Ajoutez le code du pied de page

Ajoutez le code suivant après la balise main pour créer un pied de page de base :

<footer>
  <p>Copyright © 2021 Ma page web. Tous droits réservés.</p>
</footer>

Dans cet exemple, nous avons ajouté une simple balise de paragraphe au pied de page avec du texte. Vous pouvez personnaliser le pied de page pour ajouter des liens, des informations sur l'auteur, une plan du site et autres contenus.

Enregistrez le fichier index.html et ouvrez-le dans votre navigateur web. Vous devriez voir une page web de base avec un pied de page en bas.

Personnaliser le pied de page

Dans cette étape, nous allons personnaliser le pied de page en ajoutant plus d'informations. Voici un exemple :

<footer>
  <p>Contactez-nous :</p>
  <ul>
    <li>Email : info@example.com</li>
    <li>Téléphone : 123-456-7890</li>
  </ul>
  <p>Suivez-nous :</p>
  <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
</footer>

Dans cet exemple, nous avons ajouté deux paragraphes et deux listes non ordonnées. La première liste contient les informations de contact du site web, et la seconde contient des liens vers les profils de médias sociaux.

Enregistrez le fichier index.html et ouvrez-le dans votre navigateur web. Vous devriez voir votre pied de page personnalisé en bas de la page web.

Résumé

Dans ce laboratoire, nous avons appris à créer un pied de page de base à l'aide de la balise HTML footer. La balise footer est utilisée pour définir le pied de page d'un site web et peut être utilisée pour contenir diverses informations telles que des liens et des données de copyright liées au site web. Nous avons également appris à personnaliser le pied de page pour inclure des informations de contact et des liens vers les médias sociaux.

Document HTML/Secteur du pied de page

Introduction

Configure la structure de base de la page web

Ajoutez le code du pied de page

Personnaliser le pied de page

Résumé