🖼️ Semaine 1 - Jour 4 : Images, Tableaux et Formulaires

📚 Enrichir le contenu

Aujourd'hui, nous allons apprendre à intégrer des images, créer des tableaux pour présenter des données et concevoir des formulaires pour interagir avec les utilisateurs.

🖼️ Les Images

<img> - Image simple

Balise auto-fermante pour afficher une image.

<img
  src="chemin/image.jpg"
  alt="Description"
  width="300"
/>

📌 Attributs obligatoires :
• src : chemin vers l'image
• alt : texte alternatif (accessibilité)

<figure> et <figcaption>

Balises sémantiques pour image avec légende.

<figure>
  <img src="photo.jpg" alt="Photo">
  <figcaption>
    Légende de l'image
  </figcaption>
</figure>

✅ Avantage : Associe visuellement l'image et sa description

🌐 Formats d'image

Différents formats selon l'usage.

JPG/JPEG : Photos, images complexes
PNG : Transparence, logos, icônes
SVG : Graphiques vectoriels, icônes
WebP : Format moderne, léger
GIF : Animations simples

💡 Conseil : Optimiser les images pour le web (compression)

📊 Les Tableaux

<table> - Structure complète

Les tableaux permettent d'organiser des données en lignes et colonnes.

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Âge</th>
      <th>Ville</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>
Nom Âge Ville
Alice 25 Paris
Bob 30 Lyon
Charlie 28 Marseille

🔑 Balises :
• <table> : conteneur du tableau
• <thead> : en-tête du tableau
• <tbody> : corps du tableau
• <tr> : ligne (table row)
• <th> : cellule d'en-tête (table header)
• <td> : cellule de données (table data)

📝 Les Formulaires

<form> - Formulaire complet

Les formulaires permettent de collecter des informations des utilisateurs.

<form action="/submit" method="POST">

  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" required>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email">

  <textarea name="message" rows="4"></textarea>

  <button type="submit">Envoyer</button>

</form>

📋 Types d'input

text : texte simple
email : adresse email
password : mot de passe
number : nombre
tel : téléphone
date : date
time : heure
url : URL
search : recherche
color : couleur
file : fichier
checkbox : case à cocher
radio : bouton radio

🔑 Attributs importants

required : champ obligatoire
placeholder : texte d'exemple
value : valeur par défaut
disabled : champ désactivé
readonly : lecture seule
min / max : valeurs limites
minlength / maxlength : longueur texte
pattern : regex validation
autocomplete : autocomplétion

Froggiesplaining :


🎯 Objectifs de ce cours :
✅ Intégrer des images avec les balises <img>, <figure> et <figcaption>
✅ Créer des tableaux structurés avec thead, tbody, tr, th, td
✅ Construire des formulaires interactifs complets
✅ Connaître les différents types d'input et leurs attributs

📖 Points clés :
• L'attribut alt est obligatoire pour l'accessibilité
• Les tableaux sont pour les données, pas pour la mise en page
• Toujours associer un <label> à chaque input (attribut for/id)
• L'attribut name permet d'identifier les données envoyées
• L'attribut required rend un champ obligatoire

🏋️ Projet pratique :
Créez un formulaire de contact complet avec :
• Nom, email, téléphone
• Liste déroulante pour le sujet
• Zone de texte pour le message
• Bouton d'envoi stylisé

Froggie explain

GitHub - eCrea