RM HTML5-CSS3
Trame HTML5 – CSS3
Partie 1 : Introduction au Web et au HTML
- Le World Wide Web : URL, HTTP/HTTPS, Hypertexte
- Qu’est-ce que HTML ? Un langage de balisage sémantique
- Différence HTML / CSS / JavaScript
- Historique (HTML → XHTML → HTML5, aujourd’hui Living Standard)
Exercice : créer une première page minimaliste
avec <!DOCTYPE html>,
<html>, <head>,
<body>.
Partie 2 : Les bases du HTML
Structure de base d’une page HTML5
Les balises de contenu texte :
<h1>à<h6>(titres)<p>(paragraphe)<br>,<hr>
Mise en valeur :
<strong>,<em>,<mark>,<small>,<del>,<ins>Listes :
<ul>,<ol>,<li>Liens hypertextes :
<a href="...">(+ attributstarget,title)Images :
<img src="..." alt="...">(et importance de l’attributalt)
Exercice : créer une page avec un titre, deux paragraphes, une liste et un lien externe.
Partie 3 : Structure sémantique et organisation
Différence
<div>vs balises sémantiques HTML5 :<header>,<footer>,<main>,<nav>,<article>,<section>,<aside>
Importance pour le SEO et l’accessibilité
Notion d’imbrication et hiérarchie des balises
Exercice : structurer un mini-article avec
<header>, <nav>,
<article>, <footer>.
Partie 4 : Métadonnées et ressources externes
<head>et ses éléments :<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><meta name="description">(SEO)
La balise
<link>: relier un fichier CSS ou une icône faviconLa balise
<script>: charger un JS externe (aperçu seulement)
Exercice : ajouter un titre d’onglet, une description SEO et une favicon.
Partie 5 : Introduction au CSS
Qu’est-ce que CSS ? Différence avec HTML
Trois manières d’ajouter du style :
- inline (
style="") → à éviter sauf test - interne (
<style>) - externe (
style.css) → bonne pratique
- inline (
Sélecteurs de base : par balise, par classe (
.rouge), par id (#intro)Propriétés essentielles :
color,background,font-family,font-size,text-align,margin,padding,border
Exercice : styliser une page : fond de couleur, titre centré, paragraphe en italique.
Partie 6 : Mise en page moderne (HTML + CSS)
- Modèle de boîte (box model) :
content,padding,border,margin - Organisation en bloc vs inline
(
display: block/inline/inline-block) - Introduction à Flexbox
(
display: flex,justify-content,align-items) - Aperçu de Grid Layout
Exercice : créer une page avec un header, une zone de contenu en 2 colonnes, et un footer.
Partie 7 : Médias et formulaires
- Insertion de médias :
<audio>,<video>,<iframe> - Formulaires HTML :
<form>,<input>,<textarea>,<select>,<button> - Nouveaux types de champs HTML5 :
email,number,date,range,color - Attributs modernes :
required,placeholder,pattern
Exercice : créer un formulaire de contact simple (nom, email, message).
Partie 8 : Bonnes pratiques et outils
- Validation du code : validator.w3.org
- Accessibilité : rôle de
alt,label,aria-... - Différence bonne pratique vs mauvaise
pratique (ex. pas de
<font>, pas de<center>) - Introduction aux outils développeur des navigateurs (Inspecteur, Console)
- Où trouver de la documentation fiable : MDN