TP HTML & CSS #1

S1 2026-2027 - IUT - Université de Lille, BUT2 SD

R3.03 : Technologies web — BUT2 SD

Cette séance de travaux pratiques, menée sur ordinateur, couvre l'ensemble du cours Technologies web (HTML5 et CSS3). Elle est organisée en quatre séances qui s'appuient l'une sur l'autre. À chaque étape : lisez la consigne, écrivez le code, enregistrez puis actualisez la page dans le navigateur (F5) pour vérifier le résultat.

TP 1 — HTML : les éléments de base

Objectif : écrire des pages HTML valides, comprendre la structure d'un document, et construire un petit site multi-pages.

1.1 Préparation : l'arborescence des fichiers

Avant d'écrire la moindre ligne de code, il faut organiser son espace de travail. L'organisation des fichiers et des répertoires s'appelle l'arborescence.

Créez le dossier web dans votre espace personnel.
Dans web, créez deux sous-dossiers :
- cours : contiendra les cours et fiches de TP (pdf, cours).
- code : contiendra tous les fichiers de code réalisés.
Dans code, créez un dossier tp1.
Dans tp1, créez un dossier site1.
Dans site1, créez un dossier images.

Vous devez obtenir cette arborescence :

web/
├── cours/
└── code/
    └── tp1/
        └── site1/
            └── images/

À retenir : pensez à toujours séparer les contenus (code) des ressources pédagogiques (cours), et à créer un dossier images dès le départ. La structuration des répertoires doit refléter la structure logique du site.

1.2 Chemins relatifs et absolus

Une ressource (page, image, style) est localisée par un chemin. Deux types de chemins existent :

Le chemin absolu : adresse complète à partir de la racine du serveur (ou de l'URL complète https://...).
Le chemin relatif : localisation à partir de l'emplacement de la page courante.

Rappel : les URL relatives

URL relative	Désigne
`""`	l'URL de base
`"abc"`	la ressource `abc` dans le répertoire courant
`"."`	le répertoire courant
`".."`	le répertoire parent du répertoire courant
`"/"`	le répertoire racine du serveur

Dans site1, placez un fichier photo.jpg dans le dossier images. (générateur d'images)
Dans un paragraphe, notez (sans les exécuter dans des balises) ce que désigneraient les chemins ./images/photo.jpg, ../site1/index.html et /images/photo.jpg selon le tableau ci-dessus.

1.3 Premier document HTML5

Dans site1, ouvrez votre éditeur de texte et créez index.html.
Tapez le squelette HTML5 suivant :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>
      Récupérer plusieurs lignes d'un long texte quelconque et le copier ici.
    </p>
  </body>
</html>

Sauvegardez, puis ouvrez index.html dans le navigateur (double-clic ou glisser-déposer).
Gardez les deux fenêtres ouvertes (éditeur + navigateur) : à chaque question, modifiez le code, enregistrez et actualisez (F5).

À retenir : <!DOCTYPE html> déclare un document HTML5, <head> contient les informations pour les machines (<meta charset="UTF-8"> gère le codage des caractères), <body> le contenu visible.

1.4 Les titres

Ajoutez un titre de niveau 1 : « Ma première page HTML ».
Ajoutez un titre de niveau 2 : « Premières balises ».
Testez les autres niveaux (<h3> … <h6>) en les ajoutant les uns après les autres.
Dans la barre d'onglet du navigateur, vérifiez le titre de la page : modifiez le <title> pour « Page Accueil : Prénom NOM » et actualisez.

À retenir : les titres <h1> à <h6> structurent hiérarchiquement le contenu. Il est d'usage de n'avoir qu'un seul <h1> par page et de respecter l'ordre croissant des niveaux.

1.5 Les commentaires

Ajoutez un titre de niveau 3 « Commentaire », puis le commentaire  juste avant le <h1>.
Vérifiez que le commentaire n'apparaît pas dans la page, mais qu'il est visible dans le code source (Ctrl+U).

1.6 Paragraphes et citations

Ajoutez un <h3> « Paragraphe » au-dessus du premier paragraphe.
Ajoutez un <h3> « Autre bloc : blockquote », puis recopiez le même texte entre les balises <blockquote>...</blockquote> :
Notez la différence d'affichage entre <p> et <blockquote>.

1.7 Mise en forme du texte

Ajoutez un <h3> « Autres balises : mise en forme du texte », puis testez :

<p>
  Voici du texte <strong>en gras fort</strong>,
  du code <code>int x = 10;</code>,
  du texte <small>en petit</small>.
</p>

Ajoutez un texte avec un indice (exemple X_i) et un autre avec un exposant (exemple X_n) :
Recherchez sur internet à quoi sert la balise <pre>. Illustrez avec un exemple (par exemple un petit bloc de code en plusieurs lignes conservant sa mise en forme) :

À retenir : <strong>, <em>, <mark> indiquent le sens du texte (à privilégier), <b>, <i>, <u> ne sont que cosmétiques. <sub> et <sup> gèrent indice et exposant, <pre> préserve les espaces et retours à la ligne, <code> affiche du code.

1.8 Sections div et span : bloc vs en-ligne

Le contenu d'une page peut être découpé en sections logiques grâce à deux balises :

<span> : section en-ligne — ne provoque pas de rupture de texte (ni avant, ni après).
<div> : section de type bloc — provoque une rupture de ligne avant et après.
Ajoutez un <h3> « Sections div et span ».
Testez 3 éléments <span> qui se suivent sur une même ligne, puis 3 éléments <div> qui se suivent :
Lister 3 autres balises de type en-ligne.
Lister 3 autres balises de type bloc.

Notation à adopter : pour chaque nouvelle balise rencontrée, notez son rôle, son type (en ligne ou bloc) et si elle a du contenu ou est vide.

1.9 Balises vides : br et hr

Ajoutez un <h3> « Exemples de balises vides ».
Ajoutez un <h4> « Retour à la ligne » et recopiez le premier paragraphe en y insérant deux retours à la ligne <br>.
Ajoutez un <h4> « Ligne horizontale » et insérez une ligne horizontale <hr>.

1.10 La syntaxe des attributs

Les attributs permettent de spécifier les propriétés des balises. La syntaxe générale d'une balise est : <balise attribut="valeur">…</balise>.

Historiquement, on configurait la mise en forme avec des attributs tels que align, bgcolor, text, size, color (par exemple <div align="right"> ou <hr size="6" color="red">). Ces attributs sont aujourd'hui obsolètes : on ne les utilise plus, car la mise en forme relève désormais du CSS (séance 2). Il suffit de savoir les reconnaître dans d'anciennes pages.

Ajoutez un <h3> « La syntaxe avec attributs ».
Testez une seule fois la syntaxe avec l'attribut (obsolète) align sur un <div align="right"> pour constater le rendu… avant de le supprimer.

À retenir : la syntaxe d'une balise est <balise attribut="valeur">…</balise>. Les attributs align, bgcolor, text, size, color sont obsolètes : ne les utilisez plus. Ne mélangez pas la mise en forme avec le contenu — le CSS permet cette séparation.

1.11 Les couleurs

Ajoutez un <h3> « Comprendre les couleurs ».
bgcolor et text sont des attributs (dépassés) de <body>. Choisissez une couleur de fond et une couleur de texte en anglais, puis appliquez-les.
Recherchez sur internet le code hexadécimal de ces couleurs et testez.
Testez aussi rgb(…) et rgba(…) pour la même couleur.

À retenir : une couleur se note par un nom (red), un code hexadécimal (#D04A0B), un rgb(r,g,b), un rgba(r,g,b,a) ou un hsl(...). Le hexadécimal est le plus courant.

1.12 Les caractères spéciaux (entités)

Certains caractères ne sont pas directement affichables par un navigateur (ils ont un sens en HTML). On les obtient via des entités, composées du caractère &, du nom du caractère, terminées par ;. Exemple :   pour un espace.

Ajoutez un <h3> « Caractères spéciaux ».
En utilisant ces codes, faites afficher la condition suivante (avec les espaces) :

si a < b & c > d  alors :

1.13 Les listes

Ajoutez un <h2> « Listes ».
Ajoutez une liste non numérotée avec 4 matières : Mathématiques (UE 1), Statistiques (UE 1), Programmation (UE 1), Systèmes d'information (UE 1)
Créez la même liste numérotée avec <ol>.
Ajoutez deux listes imbriquées numériques : la première contient les UE (UE 1 et UE 2) et dans chaque UE, créez une liste contenant les matières qui y appartiennent.
Testez l'attribut type sur <ol> : 1, A, a, I, i. Faites en sorte que la numérotation des matières continue quelle que soit l'UE (recherchez l'attribut start).
Ajoutez un glossaire avec les définitions (recherchez sur internet et reformulez) des mots : Adresse IP, HTTP, HTML, XHTML, XML, UNIX, W3C, serveur, datacenter, cloud. Utilisez la liste de définitions :

<dl>
  <dt>HTML</dt>
  <dd>Langage de balisage décrivant l'organisation des pages web.</dd>
  <dt>HTTP</dt>
  <dd>Protocole de communication client-serveur utilisé par le World Wide Web.</dd>
</dl>

Récapitulatif : pour les balises vues dans cette section, notez 1) leur rôle, 2) si elles sont de type bloc ou en ligne, 3) si elles sont utilisées avec contenu ou vides.

1.14 Les images

Dans le dossier tp1, créez une page perso.html contenant :
- un titre de page « Ma page personnelle » ;
- un titre de niveau 1 « Bienvenue sur ma page personnelle » ;
- un paragraphe de présentation.
Récupérez une image (n'ayant pas besoin d'être redimensionnée) et sauvegardez-la dans site1/images. Notez son extension (.jpg, .png, .gif…).
Insérez cette image dans perso.html :
Testez les attributs alt, title (bulle d'information) et width="300".
Encadrez l'image d'un <figure> avec un <figcaption> (légende).

À retenir : <img> est une balise auto-fermante ; src (chemin) et alt (texte alternatif) sont obligatoires. alt est indispensable pour l'accessibilité et le référencement.

1.15 Les liens hypertextes

Ajoutez dans index.html un lien relatif « page personnelle » vers perso.html :
Ajoutez dans perso.html un lien « Accueil » pour revenir à index.html.
Ajoutez dans la page d'accueil des liens externes (absolus) : « Université de Lille » (https://www.univ-lille.fr/) et « Recherche web » vers Google.
Ajoutez un lien mailto: « Envoyez-moi vos commentaires » :
Ajoutez le logo de l'IUT en image liée vers le site de l'IUT :
Ajoutez au début de la page d'accueil un <h2> « Table des matières » contenant des liens internes (signets/ancres) vers les rubriques de la page. Chaque rubrique reçoit un id :
Gardez en bas de page un lien « Retour Table des matières » : <a href="#sommaire">↑</a> (placez id="sommaire" sur le titre de la table des matières).
Trouvez deux petites images de flèches « up » et « down », sauvegardez-les dans images, et utilisez-les comme liens pour remonter/descendre plus vite dans la page :

À retenir : un lien relatif (perso.html) désigne un fichier par rapport à la page courante ; un lien absolu (https://...) donne l'adresse complète ; href="#id" pointe vers une ancre du même document ; mailto: ouvre le client de messagerie (usage déconseillé, spams).

Récapitulatif : pour les balises vues dans cette section (a, img, figure, figcaption), notez rôle, type (bloc/en ligne) et contenu ou vide.

1.16 Les tableaux

Ajoutez un <h2> « Tables ». Insérez le tableau suivant :

<table>
  <tr>
    <td>Nom</td> <td>Prénom</td> <td>Téléphone</td>
  </tr>
  <tr>
    <td>Dupont</td> <td>Marcel</td> <td>0645781289</td>
  </tr>
  <tr>
    <td>Durand</td> <td>Jean</td> <td>0678044581</td>
  </tr>
  <tr>
    <td>Dupuis</td> <td>Jeanne</td> <td>0633951102</td>
  </tr>
</table>

Complétez avec une ligne de promotion (utilisez <caption> pour la légende « Annuaire étudiants S1 ») et distinguez les cellules d'en-tête avec <th>.
Insérez une image de Roubaix dans la première et la dernière colonne du tableau, avec une info-bulle title, et transformez ces images en liens vers le site de la ville.
Testez colspan et rowspan (exemple : une cellule « Notes » couvrant trois colonnes, un titre de ligne couvrant deux lignes).

À retenir : <table> définit le tableau, <tr> une ligne, <td> une cellule, <th> une cellule d'en-tête, <caption> la légende. colspan et rowspan fusionnent des cellules.

1.17 Complément : recherches personnelles

Créez une section « Complément : Recherches Personnelles » dédiée à vos découvertes HTML liées au cours.
Pour chaque nouvel élément HTML découvert (en dehors du cours), ajoutez un <h3> présentant l'élément, suivi d'un exemple illustrant son utilisation.

Bonus — Déployer sa page avec GitHub Pages

Objectif : rendre votre site accessible sur Internet, gratuitement, hébergé par GitHub, et pouvoir partager l'adresse (URL).

Jusqu'à présent, vos pages ne s'ouvraient que sur votre ordinateur (file://...). Pour qu'elles soient visibles par tout le monde, il faut les publier en ligne. C'est ce qu'on appelle un hébergement web. Nous allons utiliser GitHub Pages, un service gratuit de GitHub qui publie des pages web statiques (HTML + CSS).

Aucune connaissance de git n'est requise dans ce TP : nous passerons par l'interface graphique du site GitHub (sans ligne de commande). Si un jour vous utilisez la ligne de commande, sachez que git sert normalement au suivi des versions ; ici l'interface web fera le travail à votre place.

Créer un compte GitHub

GitHub est un service en ligne appartenant à Microsoft qui permet d'héberger des projets (les « dépôts » / repositories).

Ouvrez le site https://github.com/ et cliquez sur Sign up (S'inscrire) en haut à droite.
Saisissez un e-mail, un mot de passe et un nom d'utilisateur (username) — choisissez-le proprement (ex. prenom.nom), car il apparaîtra dans l'adresse (URL) de votre site.
Suivez les étapes de validation proposées (confirmation par e-mail) sans créer de dépôt lors de l'inscription.

À retenir : votre username sert d'identifiant et figurera dans l'adresse finale de votre site.

Créer un « dépôt » (repository)

Un dépôt (ou repo) est un espace de stockage en ligne qui va contenir les fichiers de votre site web.

Une fois connecté, cliquez sur le bouton vert New repository (Nouveau dépôt).
Dans Repository name (nom du dépôt), saisissez un nom sans espaces ni accents, en minuscules, ex. site1.
Choisissez Public (Public) : indispensable pour que GitHub Pages soit gratuit.
Ne cochez PAS l'option « Add a README file » (nous allons ajouter nous-mêmes les fichiers juste après).
Cliquez sur Create repository (Créer le dépôt).

Vous arrivez sur une page vide présentant des commandes git. Ignorez-les : vous n'avez rien à taper.

Envoyer ses fichiers

Le dépôt est vide. Il faut maintenant y déposer les fichiers de votre site (ceux du dossier site1, dont index.html et images).

La page Add file (Ajouter un fichier) permet d'envoyer des fichiers par glisser-déposer, sans toucher à git.

En haut de la page du dépôt, cliquez sur Add file → Upload files (Envoyer des fichiers).
Dans la zone prévue, glissez-déposez les fichiers de site1. Pour respecter l'arborescence, il faut recréer le dossier images : avant d'envoyer, ouvrez votre dossier local images et glissez-déposez son contenu en ayant créé, dans le site GitHub, un sous-dossier nommé images (glissez d'abord les fichiers de images, puis glissez les fichiers du dessus dans la « racine » du dépôt).
En bas de page, cliquez sur Commit changes (Valider les modifications). Vous pouvez laisser le message par défaut.

À retenir : la structure de fichiers sur GitHub doit exactement reproduire celle de votre dossier local (index.html à la racine, images/ à l'intérieur), sinon les chemins relatifs ./images/photo.jpg ne fonctionneront plus.

Activer GitHub Pages

Il reste à dire à GitHub que ce dépôt doit être publié comme un site web.

Dans votre dépôt, allez dans l'onglet Settings (Paramètres) tout en haut.
Dans le menu de gauche, cliquez sur Pages.
Sous Branch (Branche), déroulez la liste et choisissez main, puis gardez la valeur /(root) (racine) à côté.
Cliquez sur Save (Enregistrer).

GitHub construit alors le site. L'adresse (URL) est affichée en haut de cette page de réglages et a la forme :

https://<username>.github.io/<nom-du-dépôt>/

Par exemple, pour le dépôt site1 du compte jean.dupont :

https://jean.dupont.github.io/site1/

À retenir : la page index.html placée à la racine du dépôt devient automatiquement la page d'accueil du site (celle affichée par défaut).

Vérifier et faire évoluer le site

Ouvrez l'adresse URL dans le navigateur. La publication peut prendre jusqu'à 1-2 minutes (page « 404 » ou vide en attendant). Actualisez (F5) plusieurs fois.
Une fois visible, notez l'adresse dans vos réponses.
Si vous voulez modifier le contenu : modifiez votre fichier local, puis retournez dans le dépôt, ouvrez le fichier concerné, cliquez sur l'icône crayon, collez le nouveau contenu et validez avec Commit changes. Les modifications apparaissent en ligne après quelques minutes.

À retenir : un site GitHub Pages est un site statique (HTML/CSS/JS). Il ne peut pas exécuter de code de programmation côté serveur (PHP, base de données…). Pour notre TP, c'est parfait.

Exercice récapitulatif

Publiez la page site1 (ou votre page contenant index.html) sur GitHub Pages et faites fonctionner les liens relatifs (perso.html, images…).
Échangez l'adresse (URL) de votre site avec un voisin : chacun doit pouvoir consulter et naviguer dans le site de l'autre.
Dans vos réponses, notez l'URL finale de votre site et expliquez en 2-3 lignes à quoi sert index.html à la racine du dépôt.