Présentation

Formation d’intégration web sans framework et sans CMS : on écrit le HTML et le CSS à la main, et on regarde ce que le navigateur en fait.

La question posée d’entrée est celle que tout le monde se pose : pourquoi apprendre HTML et CSS à l’heure des constructeurs de pages et du code généré ? La réponse tient en deux mots — accessibilité et référencement — et occupe le reste du parcours. Un balisage juste se lit à la voix, se classe dans les résultats de recherche et se corrige ; un empilement de div ne fait rien de tout cela, quel que soit l’outil qui l’a produit.

Public visé : débutants en développement web, communicants et graphistes qui veulent reprendre la main sur le code, étudiants en informatique ou en communication digitale.

Prérequis : aisance informatique générale. Aucune connaissance en programmation.

Programme détaillé

Jour 1 — Origines et structure

De SGML à HTML5 : structurer l’information, une brève histoire
Balisage n’est pas programmation : ce que le navigateur fait du document
Séparer le fond et la forme : pourquoi CSS est né en 1996
Balises et attributs, chemins relatifs et absolus
Première page structurée, de bout en bout

Jour 2 — Sémantique, tableaux et normes

Structure sémantique d’un document : titres, sections, repères de navigation
Ce que le balisage sémantique change pour un lecteur d’écran et pour un moteur
Tableaux de données : en-têtes, portées, légendes — et ce pour quoi un tableau n’est pas fait
Normes et standards : validation, compatibilité, dette d’un HTML approximatif
Le conteneur générique et son usage raisonnable

Jour 3 — Le CSS des bases

Intégration du style : inline, interne, externe
Sélecteurs : balise, classe, identifiant, descendance, groupes
Cascade, héritage et spécificité : d’où vient la règle qui gagne
Typographie : familles, échelles, hauteur de ligne, lisibilité
Couleurs et contrastes, avec le seuil d’accessibilité comme garde-fou
Inspection des styles dans les outils de développement du navigateur

Jour 4 — Box model et mise en page

Le modèle de boîte : marges, bordures, remplissage, box-sizing
Tailles, unités relatives et absolues
Design de page : rythme vertical, alignements, densité
Flexbox : axes, alignement, distribution, cas d’usage réels
Construire une page structurée entièrement en Flexbox

Jour 5 — Responsive et projet

Le responsive vu par le designer, puis vu par le navigateur
Approche mobile-first : écrire les petites largeurs en premier
Requêtes de média, points de rupture choisis d’après le contenu
Un menu de navigation adaptatif, sans bibliothèque
Projet final : intégration complète d’une maquette, revue collective

Évaluation

TP à chaque session, corrigés et commentés
Contrôle de validation du balisage et du contraste
Projet final : une page ou un mini-site intégré, présenté et défendu

Modalités

Volume : 5 jours / 35 h (modulable — le socle HTML tient en 2 jours)
Format : présentiel ou distanciel
Supports : cours, aide-mémoires, fichiers de départ, corrigés

Demander un devis

ou écrire directement, objet déjà rempli.