Chapitre 3 — HTML5

Travaux Pratiques
HTML5 & CSS3

Structure sémantique, formulaires, site multi-pages et design interactif. Quatre TPs progressifs pour maîtriser le développement web.

Explorer les TPs Documentation MDN

Travaux Pratiques

Quatre projets pour tout maîtriser

Du CV personnel au guide CSS, chaque TP renforce vos compétences HTML5 & CSS3.

Débutant

TP 1 — Page de Présentation Personnelle

Créez une page HTML5 de CV/Portfolio avec une structure sémantique complète : header, navigation, compétences, expériences et liens sociaux.

  • Structure sémantique (header, main, footer)
  • Navigation avec ancres internes
  • Tableau des formations/expériences
  • Validation W3C sans erreurs
Voir le TP →
Intermédiaire

TP 2 — Formulaire d'Inscription

Construisez un formulaire d'inscription complet avec validation HTML5 native : patterns, types, messages d'erreur et accessibilité.

  • 10+ types de champs différents
  • Validation pattern (email, tél, password)
  • Fieldsets et autocomplete
  • Messages d'erreur personnalisés
Voir le TP →
Avancé

TP 3 — Site Vitrine Multi-Pages

Développez un site web complet de 5 pages pour NullDraft AI, une agence d'intelligence artificielle : accueil, équipe, services, galerie et contact.

  • 5 pages interconnectées
  • Images responsives (srcset, picture)
  • Tableau de tarifs, vidéo, iframe
  • Métadonnées SEO / Open Graph
Voir le TP →
Styles & Design

TP CSS — Solutions et Pratique

Guide de solutions interactif couvrant Flexbox, Grid, le Box Model, les sélecteurs, les variables et les animations CSS3.

  • Sélecteurs et Box Model
  • Layouts Modernes (Flexbox & Grid)
  • Thématisation (Clair/Sombre)
  • Transitions & Animations
Voir le TP →

Résumé du chapitre

Points clés couverts

Les compétences essentielles de HTML5 abordées dans ces travaux pratiques.

Structure Sémantique

header, nav, main, section, article, aside, footer

Formulaires HTML5

input, validation, pattern, required, fieldset

Multimédia Natif

audio, video, source, track, iframe

Accessibilité

ARIA, alt, labels, skip links, navigation clavier

Responsive Design

srcset, picture, media queries, viewport

CSS3 Moderne

Flexbox, CSS Grid, Variables, Animations

Ressources

Liens utiles

MDN Web Docs

Documentation HTML complète et à jour par Mozilla.

W3C Validator

Validez votre HTML pour garantir la conformité aux standards.

WAVE

Outil de test d'accessibilité web.

Can I Use

Tables de compatibilité des navigateurs.