Séance n°1 : Rappel sur le langage HTML & CSS

Mise en situation & Objectifs

Cette première séance d'informatique en 3^ème SI est dédiée à la réactivation des connaissances acquises en HTML5 et CSS3. Elle pose les bases de la structuration sémantique et de la mise en page web avant d'aborder les formulaires avancés et la programmation dynamique en JavaScript.

Structure d'une page Web

Tout document web moderne doit respecter le squelette HTML5 minimal suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fiche de renseignements</title>
</head>
<body>
  <!-- Contenu visible par l'utilisateur -->
</body>
</html>

Question d'auto-évaluation

Expliquez le rôle de chacune des lignes du code précédent avant de consulter la réponse.

<!DOCTYPE html>

<html lang="fr"> ... </html>

<head> ... </head>

<body> ... </body>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

Titres, Paragraphes & Mise en forme du texte

1. Hiérarchie des titres (<h1> à <h6>)

<h1>Titre principal (Niveau 1)</h1>
<h2>Titre de section (Niveau 2)</h2>
...
<h6>Sous-titre mineur (Niveau 6)</h6>

Les titres s'échelonnent de <h1> (le plus important, unique par page) jusqu'à <h6>. Ce sont des éléments de bloc (ils débutent sur une nouvelle ligne et possèdent une marge verticale par défaut).

2. Paragraphes de texte (<p>)

La balise <p>...</p> (Paragraph) est un élément de type bloc servant à structurer le texte en paragraphes distincts.

• Le navigateur ajoute automatiquement un saut de ligne et une marge verticale (espacement par défaut) avant et après chaque paragraphe.
• Règle de syntaxe sémantique : un paragraphe ne peut contenir que du contenu en-ligne (texte, images, balises de style). Il est strictement interdit d'imbriquer un paragraphe à l'intérieur d'un autre paragraphe, ou d'y insérer des éléments de bloc (comme <h1> à <h6> ou <div>).

<p>Le langage HTML permet de structurer le contenu d'une page Web.</p>
<p>Chaque paragraphe commence automatiquement sur une nouvelle ligne avec un espacement régulier.</p>

3. Saut de ligne forcé (<br>)

La balise <br> (Line Break) est une balise orpheline (auto-fermante / vide) de type en-ligne (inline).

• Elle provoque un retour immédiat à la ligne au sein d'un même flux de texte, sans créer de nouveau paragraphe et sans introduire de marge verticale supplémentaire.
• Cas d'utilisation typiques : adresses postales, coordonnées de contact, strophes d'un poème ou paroles de chanson, où le passage à la ligne fait partie intégrante du texte.
• Bonne pratique : ne jamais enchaîner plusieurs <br><br> pour espacer visuellement des éléments. L'espacement vertical doit toujours être géré en CSS via la propriété margin.

<p>
  Lycée Secondaire Habib Bourguiba<br>
  Avenue de la République<br>
  1001 Tunis, Tunisie
</p>

4. Trait de séparation thématique (<hr>)

La balise <hr> (Horizontal Rule / Thematic Break) est une balise orpheline de niveau bloc.

• Elle représente une rupture thématique ou une transition entre deux sujets au sein d'une même page ou section.
• Par défaut, les navigateurs l'affichent sous la forme d'un trait horizontal gris occupant toute la largeur disponible. Son apparence (couleur, épaisseur, marge) est facilement personnalisable en CSS.

<p>Ce premier paragraphe présente les concepts fondamentaux du balisage.</p>
<hr>
<p>Après cette transition, nous abordons l'application pratique des styles.</p>

5. Balises de mise en forme du texte

HTML5 fournit des balises en-ligne pour enrichir le texte, mettre en valeur des expressions ou leur donner une signification sémantique précise :

Conteneurs génériques (div & span)

Contrairement aux balises de texte qui apportent une signification sémantique, les conteneurs génériques sont des éléments neutres servant à regrouper d'autres éléments pour structurer une page ou leur appliquer un style CSS commun :

1. Conteneur de type bloc : <div>

La balise <div>...</div> (division) est un élément de niveau bloc. Elle commence toujours sur une nouvelle ligne, occupe par défaut toute la largeur disponible et ne possède pas de marges verticales prédéfinies. Elle constitue la brique fondamentale pour assembler des composants, des cartes (cards), des encadrés ou agencer les sections d'une mise en page.

2. Conteneur de type en-ligne : <span>

La balise <span>...</span> est un élément de niveau en-ligne (inline). Elle ne provoque aucun saut de ligne et n'occupe strictement que la largeur de son propre contenu. Elle sert principalement à cibler un mot, une expression ou une valeur au sein d'un paragraphe pour lui appliquer une classe, une couleur ou un style CSS spécifique.

3. Règles d'imbrication

Les conteneurs peuvent être imbriqués sans restriction (par exemple, un <span> au sein d'un <p>, lui-même enveloppé dans un <div>).

<div class="carte-profil">
  <h2>Mon Profil</h2>
  <p>Je suis un élève passionné par le <span class="important">développement Web</span>.</p>
</div>

Listes ordonnées & non ordonnées

Les listes permettent d'énumérer des éléments sous forme structurée :

1. Listes non ordonnées (à puces) : <ul>

Utilisées lorsque l'ordre des éléments n'a pas d'importance particulière. Chaque élément de la liste est délimité par <li> (List Item).

La balise <ul> dispose de l'attribut type permettant de personnaliser la forme de la puce :

• type="disc" : disque plein (valeur par défaut : •).
• type="circle" : cercle vide (○).
• type="square" : carré plein (□).

<!-- Liste avec puces carrées -->
<ul type="square">
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
</ul>

<!-- Liste avec cercles évidés -->
<ul type="circle">
  <li>Algorithmique</li>
  <li>Bases de données SQL</li>
</ul>

2. Listes ordonnées (numérotées) : <ol>

Utilisées pour des étapes, des classements ou des procédures ordonnées. La balise <ol> dispose de 3 attributs clés :

• type : définit le style de numérotation :
  • type="1" : chiffres arabes (par défaut : 1, 2, 3...)
  • type="a" : lettres minuscules (a, b, c...)
  • type="A" : lettres majuscules (A, B, C...)
  • type="i" : chiffres romains minuscules (i, ii, iii...)
  • type="I" : chiffres romains majuscules (I, II, III...)
• start : fixe la valeur numérique de départ (ex: start="5" commence à 5 ou 'e' ou 'V').
• reversed : attribut booléen qui inverse l'ordre de numérotation (compte à rebours : 3, 2, 1).

<!-- Liste avec chiffres romains débutant à 3 -->
<ol type="I" start="3">
  <li>Conception de la maquette</li>
  <li>Codage HTML/CSS</li>
  <li>Tests et validation</li>
</ol>

<!-- Compte à rebours inversé -->
<ol reversed>
  <li>Décollage !</li>
  <li>Mise à feu</li>
  <li>Préparation</li>
</ol>

3. Listes imbriquées

Une liste peut être imbriquée à l'intérieur d'un élément <li> pour créer des sous-niveaux :

<ul>
  <li>Front-end
    <ol type="a">
      <li>HTML5</li>
      <li>CSS3</li>
    </ol>
  </li>
  <li>Back-end</li>
</ul>

Tableaux

Les tableaux en HTML5 permettent d'organiser des données en lignes et en colonnes selon une structure sémantique stricte :

1. Balises de structure d'un tableau

• <table> : conteneur principal du tableau.
• <caption> : titre ou légende du tableau (placé obligatoirement juste après <table>).
• <thead> : groupe les lignes d'en-tête du tableau.
• <tbody> : groupe les lignes contenant les données du tableau.
• <tfoot> : groupe les lignes du pied de tableau (récapitulatif, totaux, moyennes).
• <tr> (Table Row) : définit une ligne du tableau.
• <th> (Table Header) : cellule d'en-tête (texte en gras et centré par défaut).
• <td> (Table Data) : cellule standard de données.

2. Exemple de tableau structuré complet

<table>
  <caption>Relevé des notes d'Informatique</caption>
  <thead>
    <tr>
      <th>Matière</th>
      <th>Coefficient</th>
      <th>Note / 20</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Algorithmique & Programmation</td>
      <td>3</td>
      <td>16.5</td>
    </tr>
    <tr>
      <td>Technologies Web (HTML/CSS)</td>
      <td>1.5</td>
      <td>18.0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Moyenne générale</th>
      <td colspan="2">17.0 / 20</td>
    </tr>
  </tfoot>
</table>

3. Fusion de cellules : colspan et rowspan

Deux attributs essentiels permettent de fusionner des cellules adjacentes :

• colspan="n" (Column Span) : fusionne horizontalement n colonnes sur une même ligne.

  <td colspan="2">Cellule fusionnant 2 colonnes</td>

• rowspan="n" (Row Span) : fusionne verticalement n lignes d'une même colonne.

  <td rowspan="2">Cellule fusionnant 2 lignes</td>

Médias (Images, Audio & Vidéo)

HTML5 offre des balises natives pour intégrer du contenu multimédia riche sans recourir à des plugins externes :

1. Images : <img>

<img src="images/photo.jpg" alt="Portrait de l'élève en tenue de lycée" width="300" height="200">

• src : chemin d'accès vers le fichier image (relatif ou absolu).
• alt : texte alternatif descriptif (accessibilité pour malvoyants et moteurs de recherche).
• width / height (optionnels) : dimensions d'affichage de l'image en pixels.

2. Fichiers Audio : <audio>

La balise <audio> intègre un lecteur sonore natif dans la page :

a. Syntaxe simple (avec attribut src direct) :

<audio src="sons/musique.mp3" controls>
  Votre navigateur ne prend pas en charge l'élément audio.
</audio>

b. Syntaxe multi-sources (avec balise <source> pour compatibilité maximale) :

Pour proposer plusieurs formats de secours (ex: MP3 et OGG) selon les navigateurs :

<audio controls>
  <source src="sons/musique.mp3" type="audio/mpeg">
  <source src="sons/musique.ogg" type="audio/ogg">
  Votre navigateur ne prend pas en charge l'élément audio.
</audio>

Attributs principaux de l'élément <audio> :

• src : chemin d'accès vers le fichier audio (dans la syntaxe simple).
• controls : affiche l'interface utilisateur native (bouton lecture/pause, curseur de volume, temps écoulé). Indispensable pour que le lecteur soit visible.
• autoplay : démarre la lecture automatique (souvent restreint par les navigateurs).
• loop : répète la lecture en boucle.
• muted : coupe le son par défaut.

3. Vidéos : <video>

La balise <video> permet de diffuser des séquences vidéo directement dans le navigateur :

a. Syntaxe simple (avec attribut src direct) :

<video src="videos/presentation.mp4" controls width="640" height="360">
  Votre navigateur ne prend pas en charge la lecture de vidéos HTML5.
</video>

b. Syntaxe multi-sources (avec balise <source> et image d'affiche) :

<video controls width="640" height="360" poster="images/affiche.jpg">
  <source src="videos/presentation.mp4" type="video/mp4">
  <source src="videos/presentation.webm" type="video/webm">
  Votre navigateur ne prend pas en charge la lecture de vidéos HTML5.
</video>

Attributs spécifiques à l'élément <video> :

• src : chemin d'accès vers le fichier vidéo (dans la syntaxe simple).
• controls : affiche les commandes de lecture (lecture/pause, volume, barre temporelle, plein écran).
• width et height : dimensions d'affichage du lecteur vidéo en pixels.
• poster="image.jpg" : image affichée avant le déclenchement de la lecture.
• autoplay, loop, muted : lecture automatique, boucle et mise en sourdine.

Liens hypertextes

La balise <a> (Anchor) est l'élément fondamental permettant la navigation entre les pages Web :

1. Syntaxe de base

<a href="https://monlycee.education.tn" target="_blank">Site officiel du lycée</a>

• href (Hypertext Reference) : adresse URL de la page cible ou ressource visée.
• target="_blank" (optionnel) : commande l'ouverture du lien dans un nouvel onglet.

2. Types de liens

Les différents types de liens au programme sont :

• Lien externe : pointe vers un autre site web sur Internet :

  <a href="https://google.com" target="_blank">Visiter Google</a>

• Lien interne : pointe vers une autre page située dans le même dossier ou site :

  <a href="file02.html">Accéder à la Séance n°2</a>

• Lien nommé (vers signet / ancre interne) : permet de naviguer vers une section spécifique de la même page identifiée par son id :

  <a href="#section-cours">Aller au cours</a>

• Lien de messagerie électronique : lance le client de messagerie grâce au préfixe mailto: :

  <a href="mailto:contact@lycee.tn">Envoyer un e-mail</a>

• Lien de numérotation de téléphone : permet d'appeler directement un numéro (notamment sur smartphone) via le préfixe tel: :

  <a href="tel:+21673123456">Appeler le lycée (+216 73 123 456)</a>

Intégration & Sélecteurs CSS

1. Méthodes d'intégration du CSS

Il existe trois façons d'intégrer des règles de style dans une page :

• Fichier externe lié (Recommandé) : via la balise <link> dans le <head> :

  <link rel="stylesheet" href="style.css">

• Feuille de style interne : déclarée dans l'en-tête via <style> :

  <style>
    body { background-color: #f0f4f8; }
  </style>

• Style en ligne (Inline) : directement dans la balise via l'attribut style :

  <p style="color: #4f46e5; font-weight: bold;">Texte stylé en ligne</p>

2. Anatomie d'une règle de style & Sélecteurs

selecteur { 
  propriété1: valeur1;
  propriété2: valeur2;
}

Les 4 sélecteurs indispensables au programme de 3STI :

• Sélecteur d'élément (balise) : cible toutes les balises de ce nom.

  p { color: #333333; line-height: 1.6; }

• Sélecteur de classe (.nom) : cible tous les éléments portant l'attribut class="nom". Réutilisable à volonté.

  .encadre-remarque { border-left: 4px solid #06b6d4; padding-left: 10px; }

• Sélecteur d'identifiant (#id) : cible l'unique élément portant l'attribut id="id".

  #profil-header { background-color: #ffffff; }

• Sélecteur universel (*) : cible absolument tous les éléments du document. Indispensable pour réinitialiser les marges du navigateur :

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

Typographie & Couleurs

1. Mise en forme du texte

/* Famille de police avec polices de substitution */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

/* Taille du texte en pixels, em ou rem */
font-size: 16px;

/* Style : normal, italic ou oblique */
font-style: italic;

/* Épaisseur du trait : normal, bold, ou valeurs 100 à 900 */
font-weight: bold;

/* Alignement : left, right, center ou justify */
text-align: center;

2. Couleurs et Arrière-plans

La couleur s'applique sur le texte via color et sur le fond via background-color :

• Nom de couleur : color: red;, color: navy;
• Hexadécimal à 6 chiffres (#rrggbb) : color: #4f46e5;
• Hexadécimal court à 3 chiffres (#rgb) : color: #0bd; équivalent à #00bbdd
• Format RGB : color: rgb(33, 150, 243);
• Format RGBA avec transparence : background-color: rgba(79, 70, 229, 0.2); (alpha de 0 à 1).

3. Dégradés linéaires en arrière-plan

/* Dégradé diagonal à 45 degrés entre deux teintes */
background: linear-gradient(45deg, #4f46e5, #06b6d4);

Résultat visuel :

Modèle de boîte (Box Model)

En CSS, chaque élément HTML affiché en mode bloc est modélisé sous la forme d'une boîte rectangulaire constituée de quatre couches concentriques :

Syntaxes abrégées de padding et margin :

• 1 valeur : padding: 10px; ➔ 4 côtés égaux.
• 2 valeurs : padding: 10px 20px; ➔ (haut/bas : 10px) et (gauche/droite : 20px).
• 3 valeurs : padding: 10px 20px 30px; ➔ (haut : 10px), (gauche/droite : 20px), (bas : 30px).
• 4 valeurs (sens horaire) : padding: 10px 15px 20px 25px; ➔ Haut, Droite, Bas, Gauche.

Cahier des charges & Travail à réaliser

Étapes de réalisation guidée :

1. Préparation du projet :
   • Créer un dossier nommé miniprojet01.
   • Créer à l'intérieur les fichiers index.html et style.css, ainsi qu'un sous-dossier images/.
2. Rédaction du document HTML5 (index.html) :
   • Insérer le squelette minimal avec l'encodage UTF-8 et la liaison vers style.css.
   • Créer un conteneur principal <div class="fiche"> pour délimiter la carte de visite.
   • Structurer les informations : Titre de niveau 1 pour votre prénom et nom, sous-titre pour la classe (3STI).
   • Insérer une photo de profil ou un avatar avec un attribut alt explicite.
   • Rédiger quelques paragraphes présentant vos centres d'intérêt, vos langages de programmation favoris et vos ambitions.
   • Ajouter un lien hypertexte vers votre profil scolaire ou un site de référence.
3. Stylisation avec CSS3 (style.css) :
   • Réinitialiser les marges par défaut avec le sélecteur universel *.
   • Définir une couleur de fond ou un dégradé élégant pour le body.
   • Appliquer le modèle de boîte sur la classe .fiche : largeur maximale, centrage horizontal (margin: 40px auto;), bordure arrondie et marge interne confortable (padding).
   • Harmoniser la typographie (famille de polices, graisses, alignements et couleurs de contraste).