Web Design
Html5 & Css3, créer les pages web interactives
Objectifs pédagogiques
- Maîtriser la structure des pages web avec HTML5
- Mettre en forme et styliser les pages avec CSS3
- Créer des interfaces responsives et adaptatives
- Intégrer des interactions et animations en CSS3
- Respecter les bonnes pratiques du web
Public concerné
Prérequis
Accessibilité
Un accompagnement spécifique peut être mis en place après étude des besoins.
Modalités d'évaluation
Programme de la formation
1) Introduction
• Distinctions fondamentales entre HTML et CSS.
• Évolutions apportées par les versions HTML5 et CSS3.
• Présentation des outils de développement.
2) Balises HTML fondamentales
• Structure d’un document HTML : éléments <doctype>, <html>, <head>, <body>.
• Concepts de balises et d’attributs.
• Balises d’en-tête : <title> et <meta>.
• Intégration de feuilles de style et de scripts : <link> et <script>.
• Balises de mise en forme textuelle : titres, paragraphes, citations.
• éléments de mise en valeur sémantique (<strong>, <em>, <mark>).
• Liens hypertextes : balise <a>.
• Gestion des images : <img>, <figure>, <figcaption>.
• Création de listes : <ul> et <ol>.
• Construction de tableaux : <table>, <tr>, <th>, <td>.
• Balises génériques <div> et <span>.
• Balises sémantiques : <nav>, <section>, <article>, <aside>, <header> et <footer>.
• Recommandations essentielles pour l’accessibilité (référentiels WCAG/RGAA) : attributs
alt, scope, etc.
3) Intégration de contenus multimédias
• Utilisation des iframes.
• Intégration de vidéos et de fichiers audio.
• Prise en compte de l’accessibilité des médias (compatibilité, sous-titrage, navigation au
clavier, etc.).
4) Sélecteurs et propriétés CSS fondamentaux
• Structure d’une règle CSS.
• Différents types de sélecteurs.
• Utilisation des pseudo-classes.
• Définition des couleurs.
• Propriétés relatives aux arrière-plans.
• Propriétés communes : dimensions, bordures, marges et espacements internes.
• Propriétés de mise en forme du texte : couleur, alignement, police, décoration, graisse,
taille.
• Unités de mesure : px, em, rem, vw, vh.
• Effets avancés : ombres, dégradés, texte en colonnes, bordures arrondies.
5) Techniques de positionnement en CSS
• Positionnement statique.
• Propriété `display`.
• Positionnements relatif, absolu et fixe.
• Propriétés `float` et `clear`.
• Modèles de mise en page Flexbox et Grid Layout.
6) Introduction au Responsive Design
• Dimensionnement avec des unités flexibles.
• Notion de viewport.
• Utilisation des media queries.
• Alternative : système de grille CSS.
7) Création de formulaires
• Éléments de formulaire : `<form>`, `<input>`, `<textarea>`, `<select>`, `<option>`.
• Labels et leur association aux champs.
• Améliorations HTML5 pour les formulaires : nouveaux types de champs et attributs.
• Validation native via HTML (types et attributs).
• Configuration de l’envoi : méthodes GET/POST, attribut `action`.
• Bonnes pratiques HTML pour la sécurité (OWASP, ANSSI).
• Recommandations HTML pour l’accessibilité (WCAG/RGAA).
8) Animations avec CSS3
• Transformations (rotation, translation, mise à l’échelle, déformation).
• Effets de transition.
• Création d’animations.
• Respect des préférences utilisateur (`prefers-reduced-motion`).
Modalités et délais d’accès
- une prise de contact via le formulaire d’inscription ou par e-mail,
- une analyse du besoin et du niveau du participant (audit réaliser par téléphone ou visio),
- la validation de l’inscription par l’organisme de formation.
L’inscription est réputée acquise dès lors que l’audit téléphonique est réalisé, que le devis et la convention soient signés. Un délai minimum obligatoire de 11 jours ouvrés entre la validation de l’inscription et la date théorique d’entrée en formation du stagiaire.
Cours pratique en présentiel ou à distance, dans nos locaux.
Tarif : 1000€ H.T.
uniquement par virement bancaire
3 jours soit 21 heures
Café, thé, chocolat chaud & viennoiseries sont offerts.
Dates :
– du 20/05/26 au 22/05/26 (en présentiel)
– du 22/06/26 au 24/06/26 (à distance)