Ch. 06 Programmation web avancée — Terminale Série D Informatique

1. HTML5 et CSS3 : construire un site moderne

Depuis la classe de Première, tu maîtrises les fondations du HTML5 et du CSS3. En Terminale, il s'agit de consolider ces briques pour produire des pages non seulement valides, mais réellement professionnelles : structure sémantique claire, mise en page fluide, formulaires ergonomiques.

Définition — Les apports du HTML5

Le HTML5 a introduit des balises sémantiques qui décrivent le rôle d'une zone de la page plutôt qu'un simple conteneur générique (<div>) : <header>, <nav>, <main>, <section>, <article>, <aside> et <footer>. Il a aussi enrichi les formulaires avec de nouveaux types de champ (email, date, number, tel) et des attributs de validation natifs comme required ou pattern, qui évitent d'écrire du code de vérification supplémentaire pour les cas les plus simples.

Une mise en page sémantique

HTML<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <section id="accueil">
      <h1>Bienvenue sur mon site</h1>
    </section>

    <section id="contact">
      <form>
        <label for="email">Adresse e-mail</label>
        <input type="email" id="email" name="email" required>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Mon site</p>
  </footer>
</body>

Une mise en page moderne avec Flexbox

Le module CSS Flexbox permet d'aligner et de répartir des éléments dans un conteneur, sans recourir aux anciennes techniques de positionnement (flottants, tableaux détournés). Il est idéal pour organiser des cartes, un menu ou un pied de page.

CSS.cartes {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.carte {
  flex: 1 1 260px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

La propriété display: flex transforme le conteneur en flex container ; gap espace les cartes ; flex-wrap: wrap autorise le retour à la ligne sur petit écran, ce qui rend la page responsive sans média-requêtes complexes.

2. JavaScript approfondi : conditions, événements et fonctions

Le JavaScript est le langage qui donne vie au frontend : il réagit aux actions de l'utilisateur et modifie la page sans recharger. En Terminale, tu approfondis trois piliers : les structures conditionnelles, la gestion des événements et l'écriture de petites fonctions réutilisables.

Les conditions

JavaScriptlet note = 14;

if (note >= 16) {
  console.log("Mention Très Bien");
} else if (note >= 14) {
  console.log("Mention Bien");
} else if (note >= 10) {
  console.log("Admis");
} else {
  console.log("Non admis");
}

La gestion des événements

Un événement est une action détectée par le navigateur : un clic, une saisie clavier, l'envoi d'un formulaire... La méthode addEventListener() permet d'y réagir sans mélanger le HTML et le JavaScript.

JavaScriptconst bouton = document.querySelector("#btnEnvoyer");

bouton.addEventListener("click", function () {
  alert("Message envoyé !");
});

const formulaire = document.querySelector("#monFormulaire");

formulaire.addEventListener("submit", function (evenement) {
  evenement.preventDefault(); // empêche le rechargement de la page
  console.log("Formulaire intercepté avant envoi");
});

Une mini-fonction utilitaire

Découper son code en petites fonctions rend le programme plus lisible et plus facile à réutiliser.

JavaScriptfunction estVide(valeur) {
  return valeur.trim().length === 0;
}

console.log(estVide(""));       // true
console.log(estVide("  "));     // true
console.log(estVide("Congo"));  // false

Exemple — Validation simple d'un formulaire côté client

Avant d'envoyer un formulaire au serveur, on vérifie généralement que les champs obligatoires ne sont pas vides. Cela évite des allers-retours inutiles et guide l'utilisateur immédiatement.

JavaScriptconst form = document.querySelector("#inscription");

form.addEventListener("submit", function (e) {
  const nom = document.querySelector("#nom").value;

  if (estVide(nom)) {
    e.preventDefault();
    alert("Le champ Nom ne peut pas être vide.");
  }
});

3. Les bases du backend : introduction à PHP ou Node.js

Définition — Frontend et backend

Le frontend désigne tout ce qui s'exécute dans le navigateur de l'utilisateur (HTML, CSS, JavaScript) : c'est la partie visible et interactive du site. Le backend, à l'inverse, désigne le code qui s'exécute côté serveur, avant que la page ne soit envoyée au navigateur : il traite les données, interroge une base de données, vérifie un mot de passe, génère du contenu personnalisé...

Le langage PHP reste l'un des plus accessibles pour démarrer en programmation côté serveur : il s'intègre directement dans des fichiers HTML et s'exécute sur le serveur avant l'envoi de la page.

PHP<!DOCTYPE html>
<html>
<body>

  <?php
    echo "Bonjour, bienvenue sur mon site !";
  ?>

</body>
</html>

Le code placé entre <?php et ?> est exécuté sur le serveur ; seul le résultat (ici le texte affiché) est envoyé au navigateur. L'utilisateur ne voit jamais le code PHP lui-même, contrairement au JavaScript qu'il peut inspecter dans son navigateur.

À savoir — L'alternative Node.js

Node.js permet d'exécuter du JavaScript côté serveur, en dehors du navigateur. Son intérêt principal : utiliser le même langage pour le frontend et le backend d'un même projet. Il est très employé pour des sites modernes et des applications en temps réel, mais son apprentissage est plus progressif que celui du PHP pour un premier projet de site dynamique.

4. Les bases de MySQL pour un site web dynamique

Définition — Base de données

Une base de données est un espace de stockage structuré, organisé en tables, utilisé côté serveur pour conserver les informations d'un site : comptes utilisateurs, articles publiés, messages de contact, commandes... MySQL est l'un des systèmes de gestion de bases de données (SGBD) les plus répandus pour les sites web, en particulier associé à PHP.

Une table MySQL ressemble à un tableau : chaque ligne est un enregistrement, chaque colonne un champ.

SQLCREATE TABLE utilisateurs (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nom VARCHAR(50),
  email VARCHAR(100),
  date_inscription DATE
);

Côté PHP, on établit d'abord une connexion conceptuelle au serveur MySQL, puis on envoie des requêtes.

PHP<?php
  $connexion = mysqli_connect("localhost", "utilisateur", "motdepasse", "mon_site");

  $resultat = mysqli_query($connexion, "SELECT nom, email FROM utilisateurs");

  while ($ligne = mysqli_fetch_assoc($resultat)) {
    echo $ligne["nom"] . " - " . $ligne["email"] . "<br>";
  }
?>

L'instruction SELECT nom, email FROM utilisateurs demande à la base de renvoyer les colonnes nom et email de tous les enregistrements de la table utilisateurs.

5. Mettre en ligne un site web : hébergement et FTP

Définition — Hébergement et nom de domaine

Un hébergement web est un espace de stockage sur un serveur distant, accessible en permanence sur internet, où sont déposés les fichiers de ton site (pages HTML, CSS, JavaScript, PHP, base de données). Un nom de domaine (par exemple monsite.cg) est l'adresse lisible qui permet aux visiteurs d'atteindre cet hébergement, à la place d'une adresse IP difficile à retenir.

Méthode — Mettre son site en ligne via FTP

Souscrire à un hébergement web et réserver un nom de domaine.
Récupérer les identifiants FTP fournis par l'hébergeur (adresse du serveur, identifiant, mot de passe).
Se connecter à l'hébergement à l'aide d'un client FTP (par exemple FileZilla).
Transférer l'ensemble des fichiers du site (HTML, CSS, JS, images, fichiers PHP) vers le dossier racine du serveur.
Vérifier en ligne, via le nom de domaine, que le site s'affiche correctement.

6. Projet de fin d'études : réaliser un site web complet

Éléments attendus pour le projet

Une page d'accueil soignée, construite avec des balises sémantiques HTML5 et une mise en page CSS moderne (Flexbox ou Grid).
Un formulaire de contact fonctionnel, avec une validation JavaScript côté client avant l'envoi.
Si possible, une connexion à une base de données MySQL pour enregistrer ou afficher du contenu dynamique.
Une réflexion sur la mise en ligne réelle ou simulée du site : hébergement et transfert FTP.

Exemple — Plan d'un mini-site pour une association scolaire

index.html — page d'accueil : présentation de l'association, dernières actualités.
activites.html — page listant les activités proposées (une section sémantique par activité).
contact.html — formulaire de contact (nom, e-mail, message) validé en JavaScript avant envoi.
traitement.php — script backend qui réceptionne le formulaire et enregistre le message dans une table MySQL messages.
style.css — feuille de style unique, avec une mise en page Flexbox pour les cartes d'activités.

🧠 À retenir

Le HTML5 apporte des balises sémantiques (header, nav, main, section, article, footer) et des formulaires enrichis.
Flexbox structure une mise en page moderne et responsive, sans recourir aux anciennes techniques de positionnement.
Le JavaScript approfondi combine conditions (if/else), événements (addEventListener) et petites fonctions réutilisables.
Le backend (PHP, Node.js) exécute du code côté serveur, contrairement au frontend qui s'exécute dans le navigateur.
MySQL stocke les données d'un site dynamique (utilisateurs, articles...) dans des tables interrogées par des requêtes SQL comme SELECT.
Mettre un site en ligne nécessite un hébergement, un nom de domaine et un transfert de fichiers via un client FTP.
Le projet de fin d'études mobilise l'ensemble de ces compétences : page d'accueil, formulaire, et si possible base de données.

Trois cartes en Flexbox

Facile

Écris le code HTML et CSS permettant d'afficher trois cartes côte à côte (par exemple trois activités d'un club scolaire), alignées horizontalement et réparties uniformément grâce à Flexbox.

Correction

HTML<div class="cartes">
  <div class="carte"><h3>Club Informatique</h3><p>Ateliers de programmation.</p></div>
  <div class="carte"><h3>Club Lecture</h3><p>Rencontres autour des livres.</p></div>
  <div class="carte"><h3>Club Théâtre</h3><p>Répétitions le mercredi.</p></div>
</div>

CSS.cartes {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.carte {
  flex: 1 1 30%;
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

flex: 1 1 30% indique à chaque carte de faire environ un tiers de la largeur du conteneur, tout en pouvant rétrécir ou grandir selon l'espace disponible ; flex-wrap: wrap permet aux cartes de passer à la ligne sur un écran étroit.

Validation d'un champ obligatoire

Facile

Un formulaire d'identifiant #monFormulaire contient un champ #pseudo. Écris un script JavaScript qui empêche l'envoi du formulaire si ce champ est vide, et qui affiche une alerte à l'utilisateur.

Correction

JavaScriptconst formulaire = document.querySelector("#monFormulaire");

formulaire.addEventListener("submit", function (e) {
  const pseudo = document.querySelector("#pseudo").value;

  if (pseudo.trim().length === 0) {
    e.preventDefault();
    alert("Merci de renseigner un pseudo avant d'envoyer le formulaire.");
  }
});

La méthode preventDefault() bloque l'envoi réel du formulaire tant que la condition n'est pas respectée ; trim() supprime les espaces avant de tester la longueur, pour éviter qu'une saisie de simples espaces soit acceptée comme valide.

Frontend ou backend ?

Moyen

Explique, avec un exemple simple en PHP, la différence entre le frontend et le backend d'un site web.

Correction

Le frontend regroupe le HTML, le CSS et le JavaScript exécutés directement dans le navigateur de l'utilisateur : ce code peut être consulté via l'outil « Afficher le code source ». Le backend regroupe le code exécuté sur le serveur, avant l'envoi de la page : l'utilisateur n'y a jamais accès directement, seul le résultat final lui parvient.

PHP<?php
  $heure = date("H");

  if ($heure < 18) {
    echo "Bonjour !";
  } else {
    echo "Bonsoir !";
  }
?>

Ici, le serveur calcule l'heure et choisit le message avant d'envoyer la page : le navigateur ne reçoit que le texte final ("Bonjour !" ou "Bonsoir !"), jamais le code PHP ni la logique de calcul. C'est un traitement backend. Si l'on voulait faire ce même choix côté navigateur, à partir de l'heure de l'utilisateur, on écrirait ce test en JavaScript : ce serait alors un traitement frontend.

Plan du projet de fin d'études

Difficile

Conçois le plan complet d'un site web personnel de fin d'études : liste les pages nécessaires, décris le contenu du formulaire de contact, et propose la structure d'une table MySQL pour enregistrer les messages reçus.

Correction

Pages du site :

index.html — page d'accueil : présentation personnelle, photo, courte biographie.
projets.html — présentation de réalisations (portfolio scolaire, exposés, projets techniques).
contact.html — formulaire de contact.

Formulaire de contact : champs Nom, E-mail, Message, tous validés en JavaScript avant l'envoi (aucun champ vide), puis transmis à un script PHP traitement.php.

SQLCREATE TABLE messages (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nom VARCHAR(50),
  email VARCHAR(100),
  message TEXT,
  date_envoi DATETIME
);

Le script traitement.php reçoit les données envoyées par le formulaire, les enregistre dans la table messages à l'aide d'une requête INSERT INTO, puis affiche une confirmation à l'utilisateur. L'ensemble des fichiers (HTML, CSS, JS, PHP) est ensuite transféré vers l'hébergement à l'aide d'un client FTP.

QCM

10 questions · Correction immédiate

0Score

0/10Répondues

Question 1/10

Quelle balise HTML5 doit être utilisée pour désigner le contenu principal et unique d'une page ?

Question 2/10

En Flexbox, quelle propriété CSS aligne les éléments enfants le long de l'axe principal du conteneur ?

Question 3/10

En JavaScript, quel mot-clé permet d'exécuter un bloc de code lorsqu'une condition précédente est fausse ?

Question 4/10

Quelle méthode JavaScript permet d'écouter un événement (clic, envoi, etc.) sur un élément du DOM ?

Question 5/10

Que désigne le terme « backend » dans le développement web ?

Question 6/10

Quelle syntaxe permet d'afficher du texte à l'écran en PHP ?

Question 7/10

MySQL est un système de gestion de...

Question 8/10

Quelle instruction SQL permet de récupérer des données stockées dans une table ?

Question 9/10

Qu'est-ce qu'un nom de domaine ?

Question 10/10

À quoi sert un client FTP comme FileZilla lors de la mise en ligne d'un site ?