De HTML5 au Git professionnel

Structure d'une page HTML

1.1 — Le squelette de base

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Ma page</title>
</head>
<body>
    <h1>Bonjour</h1>
</body>
</html>

1.2 — Rôle de chaque partie

1.3 — Attributs essentiels

L'attribut lang déclare la langue de la page, charset="utf-8" garantit l'affichage correct des accents, et la balise viewport rend la page utilisable sur mobile.

Pratique guidée

1. Créer un fichier index.html.
2. Écrire le squelette complet.
3. Ajouter un titre et l'ouvrir dans le navigateur.

Validation

• À quoi sert la balise <head> ?
• Pourquoi déclarer charset="utf-8" ?
• Que se passe-t-il sans la balise viewport sur mobile ?

<!doctype html>
<html lang="fr">
<head><meta charset="utf-8"><title>Rina</title></head>
<body><h1>Rina</h1></body>
</html>

Images et médias

3.1 — Insérer une image

<img src="photo.jpg" alt="Description de l'image" width="400">

L'attribut alt est obligatoire : il décrit l'image pour l'accessibilité et s'affiche si l'image ne charge pas.

3.2 — Vidéo et audio

<video src="demo.mp4" controls width="480"></video>
<audio src="intro.mp3" controls></audio>

3.3 — Image cliquable

<a href="index.html">
    <img src="logo.png" alt="Retour à l'accueil">
</a>

Validation

• Pourquoi l'attribut alt est-il important ?
• Que fait l'attribut controls sur une vidéo ?

<img src="img1.jpg" alt="Description 1" width="300">
<img src="img2.jpg" alt="Description 2" width="300">
<img src="img3.jpg" alt="Description 3" width="300">
<video src="demo.mp4" controls width="480"></video>

Formulaires

5.1 — Structure d'un formulaire

<form action="traitement.php" 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>

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

5.2 — Types de champs courants

5.3 — Validation native

<input type="text" required minlength="3">
<input type="number" min="0" max="100">

L'attribut for d'un <label> doit correspondre à l'id du champ pour que le clic sur le texte active le champ.

Validation

• Différence entre GET et POST au niveau du formulaire ?
• À quoi sert l'attribut required ?

<form method="post">
 <label for="nom">Nom</label><input id="nom" name="nom" required minlength="3">
 <label for="email">Email</label><input id="email" type="email" name="email" required>
 <label for="msg">Message</label><textarea id="msg" name="msg" required></textarea>
 <label><input type="checkbox" required> J'accepte</label>
 <button>Envoyer</button>
</form>

De HTML simple à une interface Web responsive

L'élève apprend à transformer une structure HTML en interface propre et responsive. Chaque leçon suit : explication → exemple → pratique → validation → défi.

Sélecteurs et cascade

2.1 — Sélecteurs de base

p { color: blue; }       /* élément */
.important { color:red; } /* classe */
#contact { padding:20px; } /* ID */
* { box-sizing:border-box; } /* universel */

2.2 — Sélecteurs combinés

h1, h2, h3 { font-family: Arial; }
.card p { color:#475569; }
.card > h2 { margin-top:0; }
input[type="email"] { border:2px solid blue; }

2.3 — Pseudo-classes et pseudo-éléments

a:hover { text-decoration:underline; }
input:focus { outline:2px solid blue; }
li:first-child { font-weight:bold; }
li:nth-child(2) { color:blue; }

.title::after {
    content:"";
    display:block;
    width:50px;
    height:3px;
}

2.4 — Cascade et spécificité

Plusieurs règles peuvent cibler le même élément. Le navigateur tient compte notamment de l'importance, de la spécificité et de l'ordre des règles.

p { color:blue; }
.message { color:green; }
#special { color:red; }

<p id="special" class="message">Bonjour</p>

À spécificité égale, une règle déclarée plus tard peut gagner. !important doit rester exceptionnel.

Validation

• Différence classe / ID ?
• Que signifie .card p ?
• Que signifie .card > p ?
• Pourquoi #special gagne-t-il ?

Couleurs et typographie

4.1 — Formats de couleur

p { color: red; }
.box { color:#1d4ed8; background-color:rgb(241,245,249); }
.overlay { background-color:rgba(15,23,42,.8); }

4.2 — Variables CSS

:root {
    --primary:#2563eb;
    --text:#1e293b;
    --surface:#ffffff;
}
body { color:var(--text); }
.button { background:var(--primary); }

4.3 — Typographie

body {
    font-family:Arial, sans-serif;
    font-size:16px;
    line-height:1.6;
}
h1 { font-size:2.5rem; font-weight:700; }
p { letter-spacing:.01em; }

4.4 — Alignement et décoration

h1 { text-align:center; }
a { text-decoration:none; }
.upper { text-transform:uppercase; }

4.5 — Unités utiles

:root{--primary:#2563eb;--text:#1e293b;--surface:#fff;--accent:#22c55e}
h1{color:var(--text)}p{color:var(--text)}.btn{background:var(--primary);color:#fff}

CSS Grid

6.1 — Activer Grid

.grid { display:grid; }

6.2 — Colonnes et gap

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

6.3 — auto-fit et minmax

.gallery {
    display:grid;
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
}

6.4 — Faire occuper plusieurs colonnes

.featured { grid-column:span 2; }

6.5 — Flexbox ou Grid ?

.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}

Transitions et animations

8.1 — Transition

.button {
    background:#2563eb;
    transition:background-color .2s ease, transform .2s ease;
}
.button:hover {
    background:#1d4ed8;
    transform:translateY(-2px);
}

8.2 — Transform

.card:hover { transform:translateY(-5px); }
.image:hover { transform:scale(1.05); }

Fonctions courantes : translate, scale, rotate, skew.

8.3 — @keyframes

@keyframes pulse {
    0% { transform:scale(1); }
    50% { transform:scale(1.08); }
    100% { transform:scale(1); }
}
.badge { animation:pulse 1.5s infinite; }

8.4 — Accessibilité

Respecter les utilisateurs qui préfèrent réduire les animations.

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

.carte{transition:transform .3s,box-shadow .3s}
.carte:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
@keyframes apparait{from{opacity:0;transform:translateY(12px)}to{opacity:1}}

Variables et types

1.1 — Déclarer une variable

let age = 20;
const nom = "Nina";
age = 21; // let peut être réassigné
// nom = "Léa"; // erreur : const est constant

On utilise let pour une valeur qui change et const par défaut. var est ancien et à éviter.

1.2 — Types primitifs

1.3 — Opérateurs et template literals

let a = 5, b = 2;
console.log(a + b, a > b, a === "5");

const message = `${nom} a ${age} ans.`;

=== compare la valeur et le type, contrairement à ==.

Pratique guidée

1. Créer un fichier script.js et le relier au HTML.
2. Déclarer plusieurs variables de types différents.
3. Les afficher avec un template literal dans console.log.

Validation

• Différence entre let et const ?
• Pourquoi éviter var ?
• Différence entre === et == ?

const nom="Ordinateur", prix=250000, disponible=true;
console.log(`${nom} : ${prix} Ar, dispo : ${disponible}`);

Boucles et tableaux

3.1 — Boucles

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let n = 3;
while (n > 0) {
    console.log(n);
    n--;
}

3.2 — Créer et parcourir un tableau

const fruits = ["pomme", "banane", "mangue"];
console.log(fruits.length);
console.log(fruits[0]);

fruits.forEach(f => console.log(f));

3.3 — Méthodes utiles

fruits.push("kiwi");
const majuscules = fruits.map(f => f.toUpperCase());

const longs = fruits.filter(f => f.length > 5);
const trouve = fruits.find(f => f === "kiwi");

Validation

• Différence entre for et while ?
• Que renvoie map par rapport à forEach ?

const eleves=[{nom:"Rina",note:14},{nom:"Toto",note:8}];
console.log(eleves.filter(e=>e.note>=10));

Le DOM

5.1 — Sélectionner un élément

const titre = document.querySelector("h1");
const carte = document.getElementById("carte-1");
const items = document.querySelectorAll(".item");

5.2 — Modifier le contenu

titre.textContent = "Nouveau titre";
carte.innerHTML = "<strong>Mis à jour</strong>";

5.3 — Modifier des classes et du style

carte.classList.add("actif");
carte.classList.toggle("cachee");
carte.style.color = "blue";

Validation

• Différence entre textContent et innerHTML ?
• Pourquoi préférer classList à style direct ?

document.querySelectorAll(".card").forEach(c=>c.addEventListener("click",()=>c.classList.add("vu")));

Validation des formulaires

7.1 — Lire les valeurs

const email = document.querySelector("#email").value;
const age = Number(document.querySelector("#age").value);

7.2 — Vérifier et afficher une erreur

form.addEventListener("submit", (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
        erreur.textContent = "Email invalide";
        return;
    }
    erreur.textContent = "";
    console.log("Formulaire valide");
});

7.3 — Expressions régulières (introduction)

const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(regexEmail.test(email));

Validation

• Pourquoi valider aussi côté serveur plus tard (module PHP) ?
• Comment afficher un message d'erreur sans recharger la page ?

if(nom.trim().length<3)errNom.textContent="Nom trop court";
if(!regexEmail.test(email))errEmail.textContent="Email invalide";
if(mdp.length<6)errMdp.textContent="6 caractères minimum";

fetch et API

9.1 — fetch avec then

fetch("https://api.exemple.com/produits")
    .then(reponse => reponse.json())
    .then(donnees => console.log(donnees))
    .catch(erreur => console.error(erreur));

9.2 — async / await

async function chargerProduits() {
    try {
        const reponse = await fetch("https://api.exemple.com/produits");
        const donnees = await reponse.json();
        console.log(donnees);
    } catch (erreur) {
        console.error("Erreur :", erreur);
    }
}

9.3 — Afficher les données dans le DOM

donnees.forEach(p => {
    liste.innerHTML += `<li>${p.nom} — ${p.prix} €</li>`;
});

Validation

• Pourquoi async/await est-il plus lisible que .then imbriqués ?
• Pourquoi toujours gérer les erreurs d'une requête réseau ?

async function charger(){try{const r=await fetch("https://restcountries.com/v3.1/all");const d=await r.json();liste.innerHTML=d.slice(0,10).map(p=>`<li>${p.name.common}</li>`).join("")}catch(e){console.error(e)}}

Créer une base de données

1.1 — Créer et utiliser une base

CREATE DATABASE formation CHARACTER SET utf8mb4;
USE formation;

1.2 — Table exemple : etudiants

CREATE TABLE etudiants (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nom VARCHAR(100) NOT NULL,
    email VARCHAR(150) UNIQUE NOT NULL,
    age INT,
    note DECIMAL(4,2) DEFAULT 0,
    date_inscription DATE DEFAULT (CURRENT_DATE)
);

1.3 — Deuxième table : cours + liaison

CREATE TABLE cours (
    id INT AUTO_INCREMENT PRIMARY KEY,
    titre VARCHAR(150) NOT NULL,
    duree_heures INT DEFAULT 20,
    prix DECIMAL(8,2) DEFAULT 0
);

CREATE TABLE inscriptions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    etudiant_id INT NOT NULL,
    cours_id INT NOT NULL,
    date_inscription DATE DEFAULT (CURRENT_DATE),
    FOREIGN KEY (etudiant_id) REFERENCES etudiants(id) ON DELETE CASCADE,
    FOREIGN KEY (cours_id) REFERENCES cours(id) ON DELETE CASCADE
);

Types à retenir : INT pour les nombres entiers, VARCHAR(n) pour le texte court, DECIMAL pour les prix/notes, DATE pour les dates, AUTO_INCREMENT pour un identifiant automatique.

Validation

• Différence entre CREATE DATABASE et CREATE TABLE ?
• À quoi sert PRIMARY KEY ?
• Pourquoi mettre UNIQUE sur email ?

CREATE DATABASE formation CHARACTER SET utf8mb4; USE formation;
-- puis les 3 CREATE TABLE du cours, puis SHOW TABLES; doit afficher 3 lignes.

Fonctions MySQL : COUNT, AVG, SUM et plus

3.1 — Les 5 fonctions incontournables

-- Nombre d'étudiants
SELECT COUNT(*) AS total FROM etudiants;
-- Moyenne des notes
SELECT AVG(note) AS moyenne FROM etudiants;
-- Somme des prix des cours
SELECT SUM(prix) AS chiffre FROM cours;
-- Meilleure et moins bonne note
SELECT MAX(note) AS meilleure, MIN(note) AS moins_bonne
FROM etudiants;

3.2 — GROUP BY : calculer par groupe

SELECT
    CASE WHEN note >= 10 THEN 'Admis' ELSE 'Ajourné' END AS resultat,
    COUNT(*) AS nb,
    AVG(note) AS moyenne
FROM etudiants
GROUP BY resultat;

3.3 — HAVING : filtrer après calcul

SELECT cours_id, COUNT(*) AS nb_inscrits
FROM inscriptions
GROUP BY cours_id
HAVING COUNT(*) > 5;

3.4 — Autres fonctions utiles

SELECT nom, UPPER(nom) AS nom_maj, ROUND(note,1) AS note_arrondie
FROM etudiants;

SELECT titre, prix, prix * 1.2 AS prix_ttc
FROM cours;

Validation

• Différence entre WHERE et HAVING ?
• Pourquoi COUNT(*) et COUNT(note) peuvent différer si note est NULL ?

SELECT COUNT(*) total, AVG(note) moy, MAX(note) maxi, MIN(note) mini
FROM etudiants WHERE note>=10;

Jointures AVEC INNER JOIN (et LEFT JOIN)

5.1 — Même résultat, syntaxe moderne

-- AVEC INNER JOIN : relation écrite avec ON
SELECT e.nom AS etudiant, c.titre AS cours
FROM etudiants e
INNER JOIN inscriptions i ON e.id = i.etudiant_id
INNER JOIN cours c ON c.id = i.cours_id;

5.2 — LEFT JOIN : garder même sans correspondance

-- Tous les étudiants, même ceux sans inscription
SELECT e.nom, c.titre
FROM etudiants e
LEFT JOIN inscriptions i ON e.id = i.etudiant_id
LEFT JOIN cours c ON c.id = i.cours_id;

INNER JOIN ne garde que les lignes qui correspondent des deux côtés. LEFT JOIN garde toutes les lignes de gauche, avec NULL à droite s'il n'y a rien.

5.3 — Statistique complète

SELECT c.titre,
       COUNT(i.id) AS nb_inscrits,
       ROUND(AVG(e.note),2) AS moyenne_notes
FROM cours c
LEFT JOIN inscriptions i ON c.id = i.cours_id
LEFT JOIN etudiants e ON e.id = i.etudiant_id
GROUP BY c.titre;

Validation

• Quand préférer INNER JOIN à la syntaxe à virgule ?
• Différence entre INNER JOIN et LEFT JOIN ?

SELECT e.nom,c.titre FROM etudiants e
INNER JOIN inscriptions i ON e.id=i.etudiant_id
INNER JOIN cours c ON c.id=i.cours_id;
SELECT e.nom,c.titre FROM etudiants e
LEFT JOIN inscriptions i ON e.id=i.etudiant_id
LEFT JOIN cours c ON c.id=i.cours_id;

Premiers pas avec PHP

1.1 — Syntaxe de base

<?php
$nom = "Rina";
$age = 21;
echo "Bonjour " . $nom;
?>

1.2 — Types et concaténation

$prix = 19.90;
$actif = true;
echo "Prix : " . $prix . " € (actif : " . var_export($actif, true) . ")";

1.3 — Mélanger HTML et PHP

<p>Bonjour <?= $nom ?>, vous avez <?= $age ?> ans.</p>

Un fichier .php doit être exécuté par un serveur (ex. via XAMPP/MAMP ou php -S localhost:8000), pas ouvert directement dans le navigateur.

Validation

• Comment déclarer une variable en PHP ?
• Différence entre echo et print ?
• Que fait <?= ?> ?

<p>Bonjour <?=$nom?>, vous avez <?=$age?> ans, moyenne <?=$moy?></p>

GET et POST

3.1 — Formulaire HTML

<form method="post" action="traitement.php">
    <input type="text" name="nom">
    <button>Envoyer</button>
</form>

3.2 — Récupérer les données

$nom = $_POST["nom"] ?? "";
echo "Bonjour " . htmlspecialchars($nom);

3.3 — GET vs POST

Validation

• Pourquoi utiliser htmlspecialchars sur une donnée reçue ?
• Quand préférer GET à POST ?

$nom=htmlspecialchars($_POST["nom"]??"");
echo "Merci $nom, message reçu !";

MySQL et modèle relationnel

5.1 — Créer une table

CREATE TABLE etudiants (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nom VARCHAR(100) NOT NULL,
    email VARCHAR(150) UNIQUE
);

5.2 — Clé primaire et clé étrangère

CREATE TABLE inscriptions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    etudiant_id INT,
    cours_id INT,
    FOREIGN KEY (etudiant_id) REFERENCES etudiants(id),
    FOREIGN KEY (cours_id) REFERENCES cours(id)
);

Validation

• À quoi sert une clé primaire ?
• Pourquoi une table de liaison "inscriptions" plutôt qu'une colonne unique ?

CRUD

$stmt = $pdo->prepare(
  "INSERT INTO etudiants (nom, email) VALUES (?, ?)"
);
$stmt->execute([$nom, $email]);

$stmt = $pdo->query("SELECT * FROM etudiants");
$tous = $stmt->fetchAll();

$stmt = $pdo->prepare(
  "UPDATE etudiants SET nom = ? WHERE id = ?"
);
$stmt->execute([$nouveauNom, $id]);

$stmt = $pdo->prepare(
  "DELETE FROM etudiants WHERE id = ?"
);
$stmt->execute([$id]);

Validation

• Quelle instruction SQL correspond à chaque lettre de CRUD ?
• Pourquoi toujours passer par une requête préparée, même pour un DELETE ?

Sécurité

9.1 — Injection SQL

// Dangereux :
$sql = "SELECT * FROM users WHERE email = '$email'";
// Sûr :
$stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
$stmt->execute([$email]);

9.2 — XSS et échappement

echo htmlspecialchars($commentaireUtilisateur);

9.3 — Mots de passe

$hash = password_hash($motDePasse, PASSWORD_DEFAULT);
// à la connexion :
password_verify($motDePasseSaisi, $hash);

Validation

• Pourquoi ne jamais stocker un mot de passe en clair ?
• Comment se protéger d'une injection SQL ?

$hash=password_hash($_POST["mdp"],PASSWORD_DEFAULT);
$stmt=$pdo->prepare("INSERT INTO users(email,mdp) VALUES(?,?)");
$stmt->execute([$_POST["email"],$hash]);

Git et commits

1.1 — Initialiser un dépôt

git init
git status

1.2 — Ajouter et committer

git add index.html style.css
git add .
git commit -m "Ajout de la page d'accueil"

1.3 — Historique

git log --oneline

Un commit est une photo datée et commentée du projet. Un message de commit clair explique ce qui a changé et pourquoi.

Validation

• Différence entre git add et git commit ?
• Pourquoi éviter les messages de commit du type "modif" ?

git init; git add .; git commit -m "Base CSS3";
...modifs...; git commit -m "Ajoute Flexbox"; git commit -m "Ajoute Grid"; git log --oneline

GitHub — push / pull

3.1 — Lier un dépôt distant

git remote add origin https://github.com/utilisateur/projet.git
git push -u origin main

3.2 — Récupérer les changements

git pull origin main

3.3 — Cloner un projet existant

git clone https://github.com/utilisateur/projet.git

Validation

• Différence entre git push et git pull ?
• Quand utiliser git clone plutôt que git init ?

git remote add origin https://github.com/pseudo/projet.git; git push -u origin main

Mon tableau de compétences

Coche quand tu sais faire seul, sans copier. Ta progression est sauvegardée dans ton navigateur.

▶ Essaie sans installer

Écris du code et vois le résultat aussitôt. Aucune installation requise.

Éditeur HTML / CSS / JS en direct

Simulateur SQL (table etudiants)

Teste SELECT, COUNT, AVG, WHERE sur des données d'exemple.

Suivi + attestation