Leçon 1 : HTML de base

HTML (HyperText Markup Language) est le langage qui permet de créer la structure d'une page web. Il utilise des balises pour définir le contenu.

Les balises les plus utilisées :

• <h1> à <h6> : titres, du plus important (h1) au moins important (h6).
• <p> : paragraphe de texte.
• <a href="URL"> : lien cliquable vers une autre page ou ressource.
• <img src="url" alt="description"> : insertion d’une image.
• <ul> et <ol> : listes non ordonnées (puces) et ordonnées (numérotées).
• <li> : élément de liste.
• <br> : saut de ligne.
• <strong> : texte en gras, important.
• <em> : texte en italique, emphase.

Exemple simple :

<h1>Titre principal</h1>
<p>Voici un paragraphe avec un <a href="https://exemple.com">lien</a>.</p>
<img src="https://via.placeholder.com/150" alt="Image exemple">
<ul>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
</ul>

Le code ci-dessus affiche un titre, un paragraphe contenant un lien, une image et une liste à puces.

Leçon 2 : CSS de base

CSS (Cascading Style Sheets) permet de styliser les éléments HTML : couleurs, polices, marges, etc.

Quelques propriétés CSS importantes :

• color : couleur du texte.
• background-color : couleur de fond.
• font-family : police de caractères.
• font-size : taille du texte.
• margin : marge extérieure.
• padding : marge intérieure.
• border : bordure autour de l'élément.
• text-align : alignement du texte (gauche, centre, droite).
• width: taillle du contenu
• height : hauteur de l'élément.

Exemple de CSS :

body {
  background-color: #f0f0f0;
  color: #333333;
  font-family: Arial, sans-serif;
}
h1 {
  color: darkblue;
  font-size: 2.5rem;
}

Ce CSS définit la couleur de fond de la page, la couleur du texte, la police et la taille du titre.

Leçon 3 : HTML avancé

En plus des balises de base, HTML propose des balises sémantiques qui améliorent la structure et l'accessibilité.

Balises sémantiques importantes :

• <div> : conteneur générique, sans signification particulière, utilisé pour grouper des éléments.
• <section> : section autonome d'une page (ex: un chapitre).
• <article> : contenu indépendant, comme un article de blog ou une actualité.
• <aside> : contenu secondaire, comme une barre latérale ou un encart.
• <header> : en-tête d'une page ou d'une section.
• <footer> : pied de page ou de section.
• <nav> : navigation principale.
• <figure> : bloc pour images ou médias avec légende.
• <figcaption> : légende d'une figure.

Exemple d'article avec figure :

<article>
  <header>
    <h2>Titre de l'article</h2>
  </header>
  <p>Ceci est un paragraphe d'article.</p>
  <figure>
    <img src="https://via.placeholder.com/300x150" alt="Exemple d'image">
    <figcaption>Légende explicative de l'image</figcaption>
  </figure>
  <footer>Publié le 20 juin 2025</footer>
</article>

L'article contient un titre, un paragraphe, une image avec légende, et un pied de page.

Formulaires HTML :

Les formulaires permettent de recueillir des informations utilisateurs.

• <form> : conteneur du formulaire.
• <input> : différents types de champs (texte, email, bouton, etc.).
• <textarea> : zone de texte multi-lignes.
• <label> : étiquette liée à un champ.
• <button> : bouton (soumission, reset...).

Exemple de formulaire :

<form action="/envoyer" 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" required>

  <label for="message">Message :</label>
  <textarea id="message" name="message"></textarea>

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

Tableaux HTML :

Les tableaux permettent d’organiser les données sous forme de lignes et colonnes.

• <table> : conteneur du tableau.
• <thead> : en-tête du tableau.
• <tbody> : corps du tableau.
• <tr> : ligne.
• <th> : cellule d'en-tête.
• <td> : cellule de données.

Exemple de tableau :

<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>
    <tr><td>Bob</td><td>30</td><td>Lyon</td></tr>
  </tbody>
</table>

Leçon 4 : CSS avancé

CSS permet de gérer la mise en forme avancée, animations et adaptabilité aux écrans.

Positionnement des éléments :

On peut définir la position d'un élément avec :

• static (par défaut)
• relative (par rapport à sa position normale)
• absolute (par rapport à l’ancêtre positionné)
• fixed (par rapport à la fenêtre)
• sticky (fixé au scroll dans une limite)

.box {
  position: absolute;
  top: 20px;
  left: 50px;
}

Flexbox (mise en page flexible) :

Pour organiser les éléments horizontalement ou verticalement, centrer, espacer, etc.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

CSS Grid (mise en page en grille) :

CSS Grid est un système de mise en page puissant permettant de créer des structures complexes avec des lignes et des colonnes. Il est idéal pour des mises en page en deux dimensions (lignes + colonnes).

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background-color: #0d6efd;
  color: white;
  padding: 20px;
  text-align: center;
}

Ici, on crée une grille de 3 colonnes de taille égale. Chaque élément a un fond bleu, du texte blanc et un espacement uniforme.

Média queries (responsive design) :

Pour adapter le style selon la taille de l’écran :

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

Animations simples :

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.element {
  animation: fadeIn 1s ease-in forwards;
}

Quiz final