TP Introduction au langage HTML5

Spécialité NSI - Première

Objectifs du TP

Comprendre l'architecture client-serveur et le protocole HTTP
Découvrir la structure d'une page HTML5
Maîtriser les balises HTML essentielles
Créer une page web complète

Matériel : PC + Navigateur (Firefox, Chrome) + Éditeur de code (VS Code, Notepad++)

Partie A : Comment fonctionne le Web ?

A.1 L'architecture client-serveur

Quand vous tapez une adresse web dans votre navigateur, que se passe-t-il ?

┌─────────────┐                              ┌─────────────┐
│             │  (1) Requête HTTP            │             │
│  NAVIGATEUR │  ─────────────────────────►  │   SERVEUR   │
│  (Client)   │                              │     WEB     │
│             │  ◄─────────────────────────  │             │
│             │  (2) Réponse (code HTML)     │             │
└─────────────┘                              └─────────────┘

Le client (navigateur) envoie une requête HTTP au serveur
Le serveur renvoie le code HTML de la page demandée
Le navigateur interprète le code et affiche la page

A.2 Le protocole HTTP

HTTP (HyperText Transfer Protocol) est le protocole utilisé sur Internet depuis 1990 pour transférer des pages web.

Une URL (Uniform Resource Locator) est l'adresse d'une ressource sur le web :

https://www.wikipedia.org/wiki/HTML
└─┬─┘   └──────┬──────┘ └────┬────┘
protocole    serveur      chemin

A.3 Le HTML

HTML (HyperText Markup Language) est un langage de balisage qui permet de structurer le contenu d'une page web : texte, images, liens...

Important : HTML structure le contenu (le fond), CSS gère l'apparence (la forme).

Exercice A.1 : Ouvrez n'importe quelle page web, faites un clic droit → "Afficher le code source". Observez la structure du code HTML.

Partie B : Structure d'une page HTML5

B.1 Les balises

Les pages HTML sont composées de balises entourées de chevrons < >.

Il existe deux types de balises :

Balises en paires (ouvrante + fermante) :

<titre>Ceci est un titre</titre>

Balises orphelines (auto-fermantes) :

<image />

B.2 Les attributs

Les attributs complètent les balises avec des informations supplémentaires :

<balise attribut="valeur">Contenu</balise>

Exemple :

<image source="photo.jpg" />

B.3 Structure de base d'une page HTML5

Créez un fichier page.html avec le code suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Ma première page</title>
    </head>
    <body>
        <!-- Le contenu visible ici -->
    </body>
</html>

Élément	Rôle
`<!DOCTYPE html>`	Indique qu'il s'agit d'une page HTML5
`<html>`	Balise racine, englobe tout le contenu
`<head>`	En-tête (métadonnées, titre, liens CSS)
`<meta charset="utf-8">`	Encodage des caractères (accents)
`<title>`	Titre affiché dans l'onglet du navigateur
`<body>`	Corps de la page (contenu visible)
`<!-- ... -->`	Commentaire (non affiché)

Exercice B.1 : Créez le fichier page.html, ouvrez-le dans votre navigateur. Que voyez-vous ?

Partie C : Organiser le contenu

C.1 Les paragraphes

<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>

Pour un simple retour à la ligne dans un paragraphe : <br />

C.2 Les titres

HTML propose 6 niveaux de titres, de <h1> (le plus important) à <h6> :

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

Attention : Ne confondez pas <title> (titre de l'onglet) et <h1> (titre dans la page).

Exercice C.1 : Dans votre fichier, ajoutez un titre <h1> et deux paragraphes dans le <body>.

C.3 Mettre en valeur le texte

<p>Ce mot est <strong>important</strong>.</p>
<p>Ce mot est <em>mis en valeur</em>.</p>
<p>Ce mot est <mark>surligné</mark>.</p>

Balise	Signification	Rendu par défaut
`<strong>`	Important	gras
`<em>`	Emphase	italique
`<mark>`	Marqué	surligné

Note : Ces balises indiquent le sens du texte, pas son apparence. L'apparence peut être modifiée en CSS.

C.4 Les listes

Liste non ordonnée (à puces) :

<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ul>

Liste ordonnée (numérotée) :

<ol>
    <li>Première étape</li>
    <li>Deuxième étape</li>
    <li>Troisième étape</li>
</ol>

Exercice C.2 : Ajoutez une liste de vos 3 langages de programmation préférés.

Partie D : Les liens

D.1 Lien vers un autre site (lien absolu)

<p>Visitez <a href="https://www.python.org">le site Python</a> !</p>

D.2 Lien vers une page de votre site (lien relatif)

Si page2.html est dans le même dossier :

<a href="page2.html">Aller à la page 2</a>

Si page2.html est dans un sous-dossier pages/ :

<a href="pages/page2.html">Aller à la page 2</a>

Si page2.html est dans le dossier parent :

<a href="../page2.html">Aller à la page 2</a>

D.3 Lien vers une ancre (même page)

Pour créer un sommaire cliquable sur une longue page :

<!-- Le lien -->
<a href="#section2">Aller à la section 2</a>

<!-- La cible (plus bas dans la page) -->
<h2 id="section2">Section 2</h2>

Exercice D.1 : Créez deux fichiers HTML qui se lient mutuellement.

Partie E : Les images

E.1 Insérer une image

<img src="images/photo.jpg" alt="Description de l'image" />

Attribut	Rôle	Obligatoire
`src`	Chemin vers l'image	Oui
`alt`	Texte alternatif (accessibilité)	Oui
`width`	Largeur en pixels	Non
`height`	Hauteur en pixels	Non

E.2 Formats d'images pour le web

Format	Usage
JPEG (.jpg)	Photos
PNG (.png)	Illustrations, logos, transparence
GIF (.gif)	Animations simples
SVG (.svg)	Icônes, logos vectoriels
WebP (.webp)	Format moderne, bonne compression

E.3 Image cliquable

<a href="grande_image.jpg">
    <img src="miniature.jpg" alt="Cliquez pour agrandir" />
</a>

Exercice E.1 : Téléchargez une image, placez-la dans un dossier images/ et insérez-la dans votre page.

Partie F : Les tableaux

F.1 Structure de base

<table>
    <tr>
        <td>Ligne 1, Cellule 1</td>
        <td>Ligne 1, Cellule 2</td>
    </tr>
    <tr>
        <td>Ligne 2, Cellule 1</td>
        <td>Ligne 2, Cellule 2</td>
    </tr>
</table>

Balise	Rôle
`<table>`	Définit le tableau
`<tr>`	Définit une ligne (table row)
`<td>`	Définit une cellule (table data)
`<th>`	Définit une cellule d'en-tête (table header)
`<caption>`	Titre du tableau

F.2 Tableau avec en-tête

<table>
    <caption>Liste des élèves</caption>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Classe</th>
    </tr>
    <tr>
        <td>Dupont</td>
        <td>Marie</td>
        <td>1ère NSI</td>
    </tr>
</table>

F.3 Fusion de cellules

colspan="2" : fusionne 2 cellules horizontalement
rowspan="2" : fusionne 2 cellules verticalement

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

Exercice F.1 : Créez un tableau de votre emploi du temps (une journée).

Partie G : Balises sémantiques HTML5

HTML5 introduit des balises pour structurer une page de manière sémantique :

┌─────────────────────────────────────┐
│            <header>                 │
├─────────┬───────────────────────────┤
│         │        <section>          │
│  <nav>  │   ┌─────────┬─────────┐   │
│         │   │<article>│ <aside> │   │
│         │   └─────────┴─────────┘   │
├─────────┴───────────────────────────┤
│            <footer>                 │
└─────────────────────────────────────┘

Balise	Usage
`<header>`	En-tête de page ou de section
`<nav>`	Menu de navigation
`<main>`	Contenu principal
`<section>`	Section thématique
`<article>`	Contenu autonome (article, post)
`<aside>`	Contenu complémentaire (sidebar)
`<footer>`	Pied de page

Projet final : Créer une page web thématique

Consignes

Réalisez une page web sur un thème de votre choix (film, jeu vidéo, sport, artiste...).

Éléments obligatoires : - [ ] Structure HTML5 valide - [ ] Un titre principal <h1> et au moins un sous-titre <h2> - [ ] Au moins 3 paragraphes de texte - [ ] Au moins 2 images - [ ] Une liste (ordonnée ou non) - [ ] Un tableau - [ ] Au moins un lien externe

Bonus : - [ ] Utilisation des balises sémantiques (<header>, <main>, <footer>) - [ ] Un menu de navigation avec ancres - [ ] Plusieurs pages liées entre elles

Organisation des fichiers

mon_site/
├── index.html
├── page2.html
└── images/
    ├── image1.jpg
    └── image2.png

Résumé des balises essentielles

Catégorie	Balises
Structure	`<!DOCTYPE>`, `<html>`, `<head>`, `<body>`
Métadonnées	`<meta>`, `<title>`
Texte	`<p>`, `<br>`, `<h1>`-`<h6>`, `<strong>`, `<em>`
Listes	`<ul>`, `<ol>`, `<li>`
Liens	`<a href="">`
Images	`<img src="" alt="">`
Tableaux	`<table>`, `<tr>`, `<td>`, `<th>`
Sémantique	`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`

Pour aller plus loin

CSS Diner : flukeout.github.io - Apprendre les sélecteurs CSS
Flexbox Froggy : flexboxfroggy.com - Apprendre Flexbox
MDN Web Docs : developer.mozilla.org - Documentation de référence

Licence

Auteur : Florian Mathieu Licence : CC BY-NC-SA 4.0

Ce document est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.