Cours RechercherCtrl K

Fiches de révision

Fiches HTML & CSS

7 fiches, une par leçon, dans l'ordre du cours. Retour au cours HTML & CSS

HTML & CSS · Leçon 1

Ta première page web

À retenir

  • Le HTML décrit ce qu'est chaque contenu (titre, paragraphe, image…). Il ne calcule rien et ne s'occupe pas des couleurs.
  • Une balise s'ouvre avec <nom> et se ferme avec </nom> ; le contenu est entre les deux.
  • <head> contient les informations sur la page (encodage, titre de l'onglet) ; <body> contient ce qui s'affiche.
  • Quelques balises n'ont pas de contenu, donc pas de fermeture : <meta>, <img>, <br>.
  • L'indentation (les espaces en début de ligne) ne change pas l'affichage : elle rend le code lisible.

Mémo

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre de l'onglet</title>
  </head>
  <body>
    <h1>Titre de la page</h1>
    <p>Un paragraphe.</p>
  </body>
</html>

Pièges à éviter

  • Oublier une balise fermante : le navigateur devine, et l'affichage devient bizarre.
  • Écrire <p/> au lieu de </p>.
  • Mettre <title> dans <body> au lieu de <head>.
  • Oublier <meta charset="utf-8"> : les accents s'affichent mal (« é » au lieu de « é »).

Revoir la leçon et ses exercices

HTML & CSS · Leçon 2

Titres, paragraphes et listes

À retenir

  • Six niveaux de titres, de <h1> à <h6>, comme le plan d'un exposé : un seul <h1> par page.
  • On choisit un titre pour son niveau, jamais pour sa taille : la taille se règle en CSS.
  • Chaque bloc de texte va dans un <p> ; les retours à la ligne tapés dans le code sont ignorés.
  • <strong> = important (gras), <em> = insistance (italique).
  • <ul> = liste à puces, <ol> = liste numérotée, et chaque élément dans un <li>. Une sous-liste se place à l'intérieur d'un <li>.

Mémo

<h1>Sujet de la page</h1>
<h2>Une partie</h2>
<p>Un texte avec un mot <strong>important</strong> et une <em>insistance</em>.</p>
<ul>
  <li>Fruits
    <ul>
      <li>Pommes</li>
    </ul>
  </li>
</ul>
<ol>
  <li>Première étape</li>
  <li>Deuxième étape</li>
</ol>

Pièges à éviter

  • Mettre plusieurs <h1>, ou sauter de <h1> à <h4> pour avoir un texte plus petit.
  • Écrire un <li> tout seul, sans <ul> ou <ol> autour.
  • Fermer le <li> parent avant la sous-liste : elle doit être à l'intérieur.

Revoir la leçon et ses exercices

HTML & CSS · Leçon 3

Liens et images

À retenir

  • Un attribut donne une information en plus à une balise : nom="valeur", dans la balise ouvrante.
  • Un lien : <a href="adresse">texte cliquable</a>. Le texte doit dire où mène le lien.
  • Adresse absolue (https://…) = un autre site ; adresse relative (contact.html) = un fichier du même site ; mailto: = un e-mail.
  • Une image : <img src="…" alt="…">, sans balise fermante. Le alt décrit l'image ; il est vide (alt="") si l'image est décorative.
  • Une image dans un lien devient cliquable.

Mémo

<a href="https://antonin.skapski.fr">Voir le portfolio</a>
<a href="contact.html">Contact</a>
<a href="mailto:moi@exemple.fr">M'écrire</a>

<img src="/exemples/avion.svg" alt="Un avion qui décolle">

<a href="https://antonin.skapski.fr">
  <img src="/exemples/avion.svg" alt="Portfolio d'Antonin">
</a>

Pièges à éviter

  • Confondre href (les liens) et src (les images).
  • Oublier le alt d'une image.
  • Écrire « cliquez ici » : le texte du lien doit avoir un sens tout seul.
  • Oublier https:// dans une adresse vers un autre site : le navigateur cherche alors un fichier sur ton site.

Revoir la leçon et ses exercices

HTML & CSS · Leçon 4

Premiers pas en CSS

À retenir

  • Le CSS décrit l'apparence. Dans un projet, il est dans un fichier style.css relié par <link rel="stylesheet" href="style.css"> dans le <head>.
  • Une règle = un sélecteur + des déclarations propriété: valeur; entre accolades.
  • Sélecteurs : p (toutes les balises p), .classe (les éléments qui ont cette classe), #id (l'élément unique qui a cet id), .carte h1 (les h1 à l'intérieur de .carte).
  • Un élément peut avoir plusieurs classes : class="alerte danger".
  • Propriétés du texte : color, background-color, font-size, font-family, font-weight, text-align.

Mémo

/* style.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f6fb;
}

h1 {
  color: #2f5bd3;
  text-align: center;
}

.important {
  font-weight: bold;
}

Pièges à éviter

  • Oublier le point-virgule à la fin d'une déclaration : la ligne suivante est ignorée.
  • Oublier le point devant une classe (important au lieu de .important).
  • Écrire <style> dans un fichier .css.
  • Confondre color (le texte) et background-color (le fond).

Revoir la leçon et ses exercices

HTML & CSS · Leçon 5

Le modèle des boîtes

À retenir

  • Chaque élément est une boîte à quatre couches : contenu, padding (espace intérieur), bordure, marge (espace extérieur).
  • border: 2px solid #1d2340; = épaisseur, style (solid, dashed, dotted), couleur. border-radius arrondit les coins.
  • Raccourcis : 1 valeur = les 4 côtés ; 2 valeurs = haut/bas puis gauche/droite ; 4 valeurs = haut, droite, bas, gauche (sens des aiguilles d'une montre).
  • max-width + margin: 0 auto; = une boîte centrée qui rétrécit sur petit écran.
  • box-sizing: border-box; compte le padding et la bordure dans la largeur.

Mémo

.carte {
  box-sizing: border-box;
  max-width: 400px;
  margin: 40px auto;      /* centrée */
  padding: 10px 20px;     /* haut/bas, gauche/droite */
  border: 2px solid #1d2340;
  border-radius: 12px;
}

Pièges à éviter

  • Confondre padding (dedans) et margin (dehors).
  • margin: auto ne centre rien si la boîte n'a pas de largeur (width ou max-width).
  • Le padding d'un lien ne pousse pas les lignes voisines tant qu'il n'est pas en display: inline-block.

Revoir la leçon et ses exercices

HTML & CSS · Leçon 6

Mettre en page avec Flexbox

À retenir

  • display: flex; se met sur le parent : ses enfants directs se placent en ligne.
  • gap espace les enfants régulièrement.
  • justify-content répartit sur l'axe principal (flex-start, center, space-between, flex-end).
  • align-items aligne sur l'autre axe ; align-items: center centre verticalement une rangée.
  • flex-direction: column empile en colonne (les axes s'échangent) ; flex-wrap: wrap fait passer à la ligne.

Mémo

.entete {
  display: flex;
  justify-content: space-between; /* gauche ... droite */
  align-items: center;            /* centré en hauteur */
  gap: 16px;
}

.cartes {
  display: flex;
  flex-wrap: wrap;
}

.colonne {
  display: flex;
  flex-direction: column;
}

Pièges à éviter

  • Mettre display: flex sur les enfants au lieu du parent.
  • Oublier qu'en colonne, justify-content agit sur la hauteur.
  • Croire que text-align: center centre des blocs : il centre seulement le texte.

Revoir la leçon et ses exercices

HTML & CSS · Défi final

Une carte de profil

À retenir

  • Un site = du HTML pour le contenu (index.html) + du CSS pour l'apparence (style.css), reliés par <link>.
  • Structure : titres, paragraphes, listes, liens, images avec alt.
  • Apparence : sélecteurs, couleurs, modèle des boîtes, Flexbox.

Mémo

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

<div class="carte">
  <img src="photo.jpg" alt="…">
  <h1>Titre</h1>
  <nav class="liens">
    <a href="…">Lien</a>
  </nav>
</div>

Pièges à éviter

  • Oublier la balise <link> : la page s'affiche sans aucun style.

Revoir la leçon et ses exercices