Aller au contenu

Séance 2 : Liens, images, tableaux et sémantique HTML

🎯 Objectifs de la séance

À la fin de cette séance, vous serez capable de :

  • Créer des liens hypertextes et gérer la navigation
  • Intégrer des images dans une page web
  • Construire des tableaux de données
  • Utiliser les balises sémantiques HTML5 pour structurer une page

📚 Partie théorique

2.1 Les liens hypertextes

Les liens sont l'essence même du Web (HyperText). Ils permettent de naviguer entre les pages.

Syntaxe de base

<a href="destination">Texte du lien</a>

Liens relatifs vs absolus

Liens absolus : URL complète vers un site externe

<a href="https://www.google.com">Aller sur Google</a>
<a href="https://developer.mozilla.org">Documentation MDN</a>

Liens relatifs : Chemins vers des fichiers du même site

Structure de dossiers :
mon-site/
│
├── index.html
├── contact.html
└── pages/
    └── about.html

Depuis index.html :

<!-- Fichier au même niveau -->
<a href="contact.html">Contact</a>

<!-- Fichier dans un sous-dossier -->
<a href="pages/about.html">À propos</a>

Depuis pages/about.html :

<!-- Remonter d'un niveau avec ../ -->
<a href="../index.html">Accueil</a>
<a href="../contact.html">Contact</a>

Attributs utiles du lien

target="_blank" : Ouvrir dans un nouvel onglet

<a href="https://google.com" target="_blank">Ouvrir dans un nouvel onglet</a>

title : Info-bulle au survol

<a href="contact.html" title="Nous contacter">Contact</a>

Ancre vers une section : Naviguer dans la même page

<!-- Définir l'ancre -->
<h2 id="section-contact">Contact</h2>

<!-- Lien vers l'ancre -->
<a href="#section-contact">Aller à la section Contact</a>

Lien email

<a href="mailto:contact@example.com">Nous écrire</a>

Lien téléphone

<a href="tel:+33123456789">Appelez-nous</a>

2.2 Les images

Syntaxe de base

<img src="chemin/vers/image.jpg" alt="Description de l'image">

⚠️ Attributs obligatoires :

  • src : Source (chemin) de l'image
  • alt : Texte alternatif (accessibilité, SEO, si image ne charge pas)

Chemins relatifs et absolus

Chemin absolu (image externe)

<img src="https://example.com/images/photo.jpg" alt="Description">

Chemin relatif

Structure :
mon-site/
│
├── index.html
└── images/
    ├── logo.png
    └── photos/
        └── equipe.jpg

Depuis index.html :

<img src="images/logo.png" alt="Logo de l'entreprise">
<img src="images/photos/equipe.jpg" alt="Photo de l'équipe">

Attributs optionnels utiles

<img src="photo.jpg" 
     alt="Description" 
     width="300" 
     height="200"
     title="Info-bulle au survol">

⚠️ Astuce : Spécifier width et height améliore les performances (évite le décalage de contenu lors du chargement).

2.3 Les tableaux

Les tableaux servent à présenter des données structurées (pas pour la mise en page !).

Structure de base

<table>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
</table>
  • <table> : Conteneur principal
  • <tr> : Table Row (ligne)
  • <td> : Table Data (cellule de données)

Tableau avec en-têtes

<table>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Dupont</td>
        <td>Jean</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Martin</td>
        <td>Sophie</td>
        <td>30</td>
    </tr>
</table>
  • <th> : Table Header (cellule d'en-tête, en gras par défaut)

Structure complète avec thead, tbody, tfoot

<table>
    <thead>
        <tr>
            <th>Produit</th>
            <th>Prix</th>
            <th>Quantité</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ordinateur</td>
            <td>899€</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Souris</td>
            <td>25€</td>
            <td>5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>924€</td>
            <td>7</td>
        </tr>
    </tfoot>
</table>

Fusion de cellules

colspan : Fusionner des colonnes (horizontal)

<tr>
    <td colspan="2">Cette cellule occupe 2 colonnes</td>
    <td>Cellule normale</td>
</tr>

rowspan : Fusionner des lignes (vertical)

<tr>
    <td rowspan="2">Cette cellule occupe 2 lignes</td>
    <td>Cellule 1</td>
</tr>
<tr>
    <!-- Pas de première cellule, elle est fusionnée depuis la ligne précédente -->
    <td>Cellule 2</td>
</tr>

2.4 Balises sémantiques HTML5

HTML5 introduit des balises qui donnent du sens à la structure, au-delà de simples <div>.

Pourquoi utiliser les balises sémantiques ?

✅ Accessibilité : Les lecteurs d'écran comprennent mieux la structure
✅ SEO : Les moteurs de recherche identifient mieux le contenu
✅ Maintenabilité : Le code est plus lisible et compréhensible

Les principales balises sémantiques

<header>
    <!-- En-tête du site ou d'une section -->
    <!-- Logo, navigation, titre principal -->
</header>

<nav>
    <!-- Menu de navigation -->
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="about.html">À propos</a></li>
    </ul>
</nav>

<main>
    <!-- Contenu principal de la page (unique par page) -->

    <article>
        <!-- Contenu autonome (article de blog, produit...) -->
        <h2>Titre de l'article</h2>
        <p>Contenu de l'article...</p>
    </article>

    <section>
        <!-- Section thématique du document -->
        <h2>Titre de la section</h2>
        <p>Contenu de la section...</p>
    </section>

    <aside>
        <!-- Contenu annexe (sidebar, publicité...) -->
        <h3>Articles liés</h3>
        <ul>...</ul>
    </aside>
</main>

<footer>
    <!-- Pied de page -->
    <!-- Informations de contact, copyright, liens légaux -->
</footer>

Autres balises sémantiques utiles

<figure> et <figcaption> : Image avec légende

<figure>
    <img src="graphique.png" alt="Graphique des ventes">
    <figcaption>Figure 1 : Évolution des ventes en 2024</figcaption>
</figure>

<time> : Date ou heure

<p>Publié le <time datetime="2025-10-07">7 octobre 2025</time></p>

<mark> : Texte surligné

<p>Le résultat le plus <mark>important</mark> est celui-ci.</p>

💻 Partie pratique

Exercice 2 : Mini-site fan sur un thème libre

📋 Consignes

Créez un mini-site de 3 pages sur un sujet qui vous passionne : un jeu vidéo, une série TV, un sport,...

Structure de fichiers à créer :

mon-site/
│
├── index.html (page d'accueil)
├── page2.html (contenu principal)
├── page3.html (galerie/infos)
└── images/
    ├── logo.png
    └── photo1.jpg

Contenu de chaque page :

index.html (Page d'accueil)

  • En-tête avec logo (image) et titre du site
  • Menu de navigation vers les 3 pages
  • Section d'introduction avec image et paragraphe
  • Pied de page avec copyright

page2.html (Contenu principal)

  • En-tête identique
  • Menu de navigation (même menu)
  • Article de présentation détaillée
  • 1-2 images avec légendes (<figure>)
  • Pied de page

page3.html (Infos complémentaires)

  • En-tête identique
  • Menu de navigation
  • Contenu au choix (personnages, épisodes, statistiques...)
  • Au moins 1 lien externe (site officiel, wiki...)
  • Pied de page

Exigences techniques

  • [ ] Utiliser les balises sémantiques : <header>, <nav>, <main>, <article>, <footer>
  • [ ] Menu de navigation fonctionnel sur chaque page
  • [ ] Au moins 3 images avec attribut alt
  • [ ] Au moins 1 lien externe
  • [ ] Utiliser <figure> et <figcaption> pour une image
  • [ ] Code indenté et commenté

✅ Checklist de validation

  • [ ] Structure sémantique correcte
  • [ ] Navigation fonctionne entre toutes les pages
  • [ ] Toutes les images s'affichent
  • [ ] Lien externe fonctionnel

Exercice 3 : Emploi du temps

📋 Consignes

Créez un fichier emploi-du-temps.html contenant votre emploi du temps hebdomadaire (réel ou fictif pour un étudiant en L2 informatique).

Structure attendue :

  • Planning sur 5 jours (Lundi à Vendredi)
  • 4 créneaux horaires minimum par jour (ex: 8h-10h, 10h-12h, 14h-16h, 16h-18h)
  • Types de cours variés : CM, TD, TP, Projet

Exigences techniques (simplifiées) :

  • [ ] Attribut border="1" pour visualiser le tableau
  • [ ] Utiliser <thead>, <tbody>
  • [ ] Utiliser <th> pour les en-têtes (jours et horaires)
  • [ ] Au moins 1 utilisation de colspan (ex: pause déjeuner)
  • [ ] Au moins 1 utilisation de rowspan (ex: TP de 3h)
  • [ ] Cellules bien alignées et tableau cohérent

🔧 Conseils et bonnes pratiques

Organisation des fichiers

mon-projet/
│
├── index.html
├── page2.html
├── page3.html
│
└── images/
    ├── logo.png
    ├── photo1.jpg
    └── photo2.jpg

Règles d'or :

  • Noms de fichiers en minuscules et sans espaces (utiliser -)
  • Bonne convention : mon-fichier.html, ma-photo.jpg
  • Organiser les images dans un dossier images/ ou img/
  • Extension .html (pas .htm)

Attribut alt pour les images

Mauvais exemples :

<img src="photo.jpg" alt="photo">  ❌ Trop vague
<img src="logo.jpg" alt="logo">    ❌ Pas descriptif
<img src="img001.jpg" alt="">      ❌ Vide (sauf image décorative)

Bons exemples :

<img src="equipe.jpg" alt="Photo de l'équipe devant le bureau">  ✅
<img src="logo.jpg" alt="Logo de l'entreprise TechCorp">        ✅
<img src="graphique.jpg" alt="Graphique montrant l'évolution des ventes 2024"> ✅

<!-- Image purement décorative (alt vide accepté) -->
<img src="decoration.png" alt="">  ✅

Validation du code HTML

Utilisez le validateur W3C : https://validator.w3.org/

Comment valider :

  1. Aller sur le site
  2. Onglet "Validate by File Upload" ou "Validate by Direct Input"
  3. Uploader votre fichier ou coller le code
  4. Corriger les erreurs identifiées

📝 À retenir de cette séance

✅ Les liens (<a href="">) permettent la navigation : relatifs (même site) ou absolus (sites externes)
✅ Les images (<img>) nécessitent src et alt obligatoires
✅ Les tableaux structurent des données avec <table>, <tr>, <td>, <th>
✅ colspan et rowspan fusionnent des cellules
✅ Les balises sémantiques HTML5 (<header>, <nav>, <main>, <article>, <footer>) donnent du sens à la structure
✅ Organiser les fichiers en dossiers clairs avec une nomenclature cohérente

📚 Pour aller plus loin

Documentation

Outils