Prog Web & MM

Ce TP permet de découvrir les bases du langage HTML en créant une première page web simple. Il enseigne la structuration du texte, l’utilisation des commentaires, des listes, des images, ainsi que la mise en forme des paragraphes. Pour réaliser ce TP, il suffit d’avoir un éditeur de texte basique comme le Bloc-Notes de Windows et un navigateur web pour visualiser les pages créées.

Objectifs

• Créer une page HTML basique avec un titre et un commentaire.
• Insérer et formater du texte en utilisant différentes balises HTML.
• Aligner des paragraphes à gauche, droite, centré et justifié.
• Appliquer des styles de police, taille, couleur, gras et italique.
• Créer différents types de listes HTML.
• Insérer des images dans une page web, y compris une image de fond.

Prérequis et installation

• Un ordinateur avec Windows et accès au Bloc-Notes (Notepad).
• Un navigateur web récent pour afficher les pages HTML (Chrome, Firefox, Edge, etc.).
• Connaissances de base sur la structure d’un fichier texte.
• Pas besoin d’outils ou logiciels spécifiques autres que Bloc-Notes et un navigateur.

Création d’une première page HTML simple

Dans cet exercice, vous créez une page HTML basique avec un titre, un commentaire et un texte formaté. Cette étape vous familiarise avec la syntaxe HTML minimale.

Procédure :

<!DOCTYPE html>
<html>
<head>
  <title>Ma Première Page Web</title>
</head>
<body>

<!-- Utilité de la balise PRE -->

<pre>
Phrase 1 Phrase 1 Phrase 1 Phrase 1,
                 Phrase 2 Phrase 2,
Phrase 3 Phrase 3 Phrase 3 Phrase 3 Phrase 3 Phrase 3.
</pre>

</body>
</html>

Le titre « Ma Première Page Web » s’affiche dans la barre du navigateur. Le commentaire n’est pas visible dans la page mais est présent dans le code source. Le texte est placé dans une balise <pre> pour conserver les espaces et retours à la ligne.

Ajout de paragraphes avec différents alignements

Cette étape consiste à insérer plusieurs paragraphes dans la même page HTML et à appliquer des alignements différents pour chaque paragraphe. Cela permet de comprendre la mise en forme textuelle en HTML.

Procédure :

<p style="text-align:left;">
Paragraphe 1 aligné à gauche. Première phrase du premier paragraphe.
Deuxième phrase du premier paragraphe.
</p>

<p style="text-align:right;">
Paragraphe 2 aligné à droite. Première phrase du deuxième paragraphe.
Deuxième phrase du deuxième paragraphe.
</p>

<p style="text-align:center;">
Paragraphe 3 centré. Première phrase du troisième paragraphe.
Deuxième phrase du troisième paragraphe.
</p>

<p style="text-align:justify;">
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
</p>

Chaque paragraphe a un style d’alignement différent défini par l’attribut CSS text-align. Le quatrième paragraphe est long et justifié pour montrer l’effet de ce style sur un texte dense.

Application de styles de police et couleurs sur un texte structuré

Dans cet exercice, vous devez créer une page web illustrée (comme dans la figure fournie) où le texte utilise la police « Candara » en taille 14. Les dates doivent être en gras et italique, tandis que les noms des établissements doivent apparaître en bleu. Cette étape permet d’apprendre à appliquer des styles CSS sur des éléments spécifiques.

Procédure :

<style>
  body {
    font-family: Candara, sans-serif;
    font-size: 14px;
  }
  .date {
    font-weight: bold;
    font-style: italic;
  }
  .etablissement {
    color: blue;
  }
</style>

<p>Formation à <span class="etablissement">Nom de l'établissement</span> en <span class="date">2023</span>.</p>

Vous devez adapter ce modèle en fonction du contenu exact de la figure fournie dans le TP. L’utilisation des classes CSS permet de cibler précisément les dates et établissements pour leur appliquer les styles demandés.

Création de listes HTML

Cette étape consiste à écrire le code HTML pour créer différents types de listes comme illustré dans un tableau fourni. Cela permet de comprendre les balises <ul>, <ol> et <li> pour les listes non ordonnées, ordonnées et imbriquées.

Procédure :

<!-- Liste non ordonnée -->
<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

<!-- Liste ordonnée -->
<ol>
  <li>Premier</li>
  <li>Deuxième</li>
  <li>Troisième</li>
</ol>

<!-- Liste imbriquée -->
<ul>
  <li>Élément principal
    <ul>
      <li>Sous-élément 1</li>
      <li>Sous-élément 2</li>
    </ul>
  </li>
  <li>Élément principal 2</li>
</ul>

Les listes doivent correspondre à celles présentées dans le tableau du TP. L’imbrication permet de créer des sous-listes.

Insertion d’images dans une page web

Vous devez insérer deux images dans l’une des pages créées précédemment. L’une des images doit être définie comme image de fond de la page. Cette étape montre comment intégrer des images et utiliser des styles CSS pour définir une image de fond.

Procédure :

<!-- Insertion d’une image classique -->
<img src="chemin/vers/image1.jpg" alt="Description de l'image 1">

<!-- Définition d’une image de fond -->
<style>
  body {
    background-image: url('chemin/vers/image2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

Remplacez chemin/vers/image1.jpg et chemin/vers/image2.jpg par les chemins réels des images choisies. L’image de fond couvre toute la page sans répétition.

Résultats attendus

• Une page HTML affichant le titre « Ma Première Page Web » dans l’onglet du navigateur.
• Un commentaire visible uniquement dans le code source : « Utilité de la balise PRE ».
• Un texte formaté dans une balise <pre> respectant les espaces et retours à la ligne.
• Quatre paragraphes alignés respectivement à gauche, droite, centré et justifié.
• Un texte utilisant la police « Candara » en taille 14, avec les dates en gras et italique, et les noms des établissements en bleu.
• Des listes HTML correspondant aux exemples du tableau, avec listes ordonnées, non ordonnées et imbriquées.
• Deux images insérées, dont une en image de fond couvrant toute la page.

Erreurs fréquentes

• Oublier la déclaration <!DOCTYPE html> au début du fichier, ce qui peut causer un rendu incorrect.
• Ne pas fermer correctement les balises HTML, notamment <p>, <ul>, <li> ou <pre>.
• Confondre les balises de commentaires HTML <!-- --> avec du texte visible.
• Ne pas utiliser les styles CSS correctement pour aligner les paragraphes ou appliquer la police et les couleurs.
• Mettre les images sans indiquer un chemin valide ou sans attribut alt, ce qui nuit à l’accessibilité.
• Oublier de définir l’image de fond dans la balise <style> ou mal configurer les propriétés CSS (background-repeat, background-size).
• Ne pas respecter la casse des noms de classes dans le CSS et le HTML.