HTML and Web Development Practical Tutorial

Ce TP vous guide dans la création progressive d’un site web simple en HTML. Vous apprendrez à structurer une page avec des balises HTML de base, insérer des images, créer des liens internes et externes, et construire un menu de navigation. Pour réaliser ce TP, vous aurez besoin d’un éditeur de texte (comme Bloc-notes, Notepad++, Sublime Text ou Geany) et d’un navigateur web pour visualiser vos pages.

Objectifs

• Comprendre la structure d’une page HTML et ses principales balises.
• Créer une page web avec des blocs structurés (header, aside, article, footer).
• Insérer des images avec la balise <img> et utiliser l’attribut alt.
• Créer des liens internes, externes, relatifs et absolus.
• Construire un menu de navigation avec la balise <nav> et des listes imbriquées.
• Rédiger une page secondaire (cv.htm) et lier cette page à la page d’accueil.

Prérequis et configuration

• Un éditeur de texte simple ou avancé (Bloc-notes, Notepad++, Sublime Text, Geany, etc.).
• Un navigateur web pour tester vos pages (Chrome, Firefox, Edge, etc.).
• Connaissances de base en informatique et manipulation de fichiers.
• Le dossier "MesImages" contenant les images nécessaires, téléchargeable à l’adresse : http://www.mediafire.com/download/ndzd4ulh6yvax6n/MesImages.rar (ou fourni par l’enseignant).

Création de la structure de base de la page HTML

Commencez par créer un fichier texte nommé index.htm avec l’extension .html. Ce fichier contiendra la structure de base d’une page HTML. Cette étape est essentielle pour comprendre comment organiser un document HTML.

Voici la structure minimale à insérer dans votre fichier :

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="author" content="Votre Nom"/>
  <meta name="keywords" content="exemple, html, site web"/>
  <meta name="description" content="Page d'accueil de mon site"/>
  <title>Titre de ma page</title>
  <link rel="stylesheet" type="text/css" href="monstyle.css" media="all" />
</head>

<body>

</body>
</html>

Le contenu visible de la page sera placé entre les balises <body> et </body>.

Création des blocs principaux de la page

Dans cette étape, vous allez créer cinq blocs correspondant aux sections principales de la page : header, <div id="content">, aside, article et footer. Ces blocs permettent d’organiser le contenu et facilitent la mise en page.

Insérez dans votre fichier index.htm le code suivant à l’intérieur de la balise <body> :

<header>
  <h1>Titre principal de la page</h1>
</header>

<div id="content">

  <aside>
    <p>Contenu de la barre latérale</p>
  </aside>

  <article>
    <p>Contenu principal de l'article</p>
  </article>

</div>

<footer>
  <p>Pied de page - informations de contact ou copyright</p>
</footer>

Cette organisation respecte la structure recommandée et facilite l’ajout futur de styles CSS.

Insertion d’images et création de liens

Pour enrichir votre page, vous allez insérer des images et créer différents types de liens. Assurez-vous que le dossier MesImages est placé dans le même répertoire que votre fichier HTML.

Pour insérer une image, utilisez la balise <img> avec les attributs src (chemin relatif vers l’image) et alt (texte alternatif décrivant l’image). Exemple :

<img src="MesImages/maphoto.jpg" alt="Ma Photo" />

Pour créer un lien cliquable, utilisez la balise <a> avec l’attribut href pointant vers la cible. Exemple de lien sur un texte :

<a href="index.html">Accueil</a>

Exemple de lien sur une image :

<a href="http://www.example.com"><img src="MesImages/globe.gif" alt="Globe" /></a>

Utilisez des adresses relatives pour que les liens fonctionnent quel que soit l’emplacement du site.

Création d’un menu de navigation

Le menu permet de naviguer facilement entre les différentes pages ou sections du site. En HTML5, la balise <nav> est dédiée à cet usage. Vous allez créer un menu simple au début du bloc content.

Insérez ce code dans votre fichier index.htm, juste après l’ouverture de la balise <div id="content"> :

<nav>
  <ul>
    <li><a href="pageDuMenu1.html">Menu1</a></li>
    <li>Menu2
      <ul>
        <li><a href="pageSM1.html">Sous-Menu2.1</a></li>
        <li><a href="pageSM2.html">Sous-Menu2.2</a></li>
        <li><a href="pageSM3.html">Sous-Menu2.3</a></li>
      </ul>
    </li>
    <li><a href="pageDuMenu3.html">Menu3</a></li>
  </ul>
</nav>

Ce menu comprend un sous-menu imbriqué sous "Menu2". Chaque élément est un lien vers une autre page HTML.

Création d’une page secondaire « cv.htm »

Vous devez créer une nouvelle page HTML nommée cv.htm qui contiendra votre curriculum vitae. Cette page doit respecter une structure similaire à index.htm avec les blocs suivants :

• Header contenant l’état civil (nom, prénom, nationalité, date et lieu de naissance).
• Article listant vos diplômes et stages.
• Footer pour les informations complémentaires.

Exemple de contenu à insérer dans la balise <body> de cv.htm :

<header>
  <h1>Curriculum Vitae</h1>
  <section>
    <h2>État civil</h2>
    <p>Nom : VotreNom</p>
    <p>Prénom : VotrePrénom</p>
    <p>Nationalité : VotreNationalité</p>
    <p>Date et lieu de naissance : JJ/MM/AAAA, Ville</p>
  </section>
</header>

<article>
  <h2>Diplômes</h2>
  <ul>
    <li>2004 : Diplôme 1</li>
    <li>2002 : Diplôme 2</li>
    <li>2003 : Diplôme 3</li>
  </ul>

  <h2>Stages</h2>
  <ol>
    <li>Stage 1 (2004)</li>
    <li>Stage 2 (2002)</li>
  </ol>
</article>

<footer>
  <p>Informations complémentaires</p>
</footer>

Enfin, ajoutez dans votre page index.htm un lien vers cette page cv.htm dans le menu ou ailleurs :

<a href="cv.htm">Mon CV</a>

Résultats attendus

• Une page index.htm affichant clairement les cinq blocs (header, content avec aside et article, footer).
• Les images insérées s’affichent correctement avec un texte alternatif visible en cas de non chargement.
• Les liens fonctionnent correctement, ouvrant les pages ciblées ou les sites externes.
• Le menu de navigation est visible et permet d’accéder aux différentes pages ou sections.
• La page cv.htm présente un CV structuré avec les informations personnelles, diplômes et stages.
• Le lien entre la page d’accueil et le CV fonctionne et permet une navigation fluide.

Erreurs fréquentes

• Oublier l’extension .html ou .htm lors de la sauvegarde des fichiers, empêchant leur ouverture correcte dans le navigateur.
• Ne pas fermer correctement les balises HTML, ce qui peut provoquer des erreurs d’affichage.
• Utiliser des chemins absolus pour les images ou liens internes, rendant le site non portable.
• Ne pas inclure l’attribut alt dans les images, ce qui nuit à l’accessibilité.
• Confondre les balises de type bloc et inline, par exemple insérer un bloc dans un élément inline.
• Ne pas respecter la casse des balises ou des attributs, bien que HTML soit insensible à la casse, cela peut poser problème avec certains outils.
• Ne pas placer le menu de navigation dans la balise <nav>, ce qui nuit à la sémantique et à la compréhension du document.