Développement Web · Manuel numérique interactif

HTML5 et CSS3 — Manuel interactif

Manuel interactif sur HTML5 et CSS3 : structure sémantique universelle, flexbox, grille et mise en forme adaptative de vos pages web.

Ce que vous apprendrez

Table des matières

  1. Avant-propos et cadre pédagogique collégial
    • Le rôle fondamental du développement web en première session
    • Pondération collégiale et méthode de travail recommandée
    • Configuration de l'environnement de développement avec Visual Studio Code
    • Les standards québécois et la norme gouvernementale d'accessibilité
  2. Les fondations du Web et l'anatomie d'un document HTML5
    • Une brève histoire de Tim Berners-Lee et des organismes de standardisation
    • Le cycle requête-réponse et la construction de l'arbre DOM
    • L'en-tête technique head et ses métadonnées indispensables
    • Balises appariées, balises orphelines et syntaxe des attributs
    • Règles d'indentation et d'emboîtement strict
    • Validation officielle avec le validateur du W3C
  3. La sémantique structurelle et l'accessibilité universelle
    • La fin de la « divite » : pourquoi la sémantique est primordiale
    • Les grandes régions de repère : header, nav, main et footer
    • Distinguer article, section et aside sans ambiguïté
    • La hiérarchie des niveaux de titre : h1 à h6
    • Accessibilité numérique et lecteurs d'écran (NVDA et VoiceOver)
    • L'attribut aria-label et les repères complémentaires
  4. Le balisage de contenu textuel, listes et typographie française
    • Paragraphes, retours à la ligne et séparateurs thématiques
    • Emphase sémantique : strong et em plutôt que b et i
    • Les listes à puces, ordonnées et de définitions
    • Les liens hypertextes : chemins relatifs, chemins absolus et ancres
    • Typographie française soignée : espaces insécables et guillemets
    • Interdiction formelle du Title Case dans les titres et sous-titres
  5. Les tableaux de données et l'intégration multimédia moderne
    • Les tableaux sémantiques pour présenter des données et non pour la mise en page
    • Architecture d'un tableau complet : thead, tbody, tfoot et l'attribut scope
    • L'image sémantique avec figure et figcaption
    • Formats modernes d'images et attribut loading="lazy"
    • Images adaptatives avec la balise picture et l'attribut srcset
    • Audio et vidéo natives avec sous-titrage WebVTT
  6. Les formulaires interactifs et la validation native
    • Le rôle de la balise form, attributs action, method et novalidate
    • La liaison sacrée entre label et id : l'accessibilité des champs
    • Placeholder versus label : ne jamais confondre l'un avec l'autre
    • Les types d'intrants modernes et les claviers mobiles virtuels
    • Regroupements logiques avec fieldset et legend
    • Validation native avec required, minlength et pattern regex
  7. Les bases de CSS3, cascade, héritage et modèle de boîte
    • Liaison d'une feuille de style externe et règle de séparation du fond et de la forme
    • Anatomie d'une règle CSS : sélecteur, propriété et valeur
    • Les sélecteurs simples, combinés et les pseudo-classes
    • Le calcul mathématique de la spécificité (le poids des sélecteurs)
    • Le modèle de boîte : content, padding, border et margin
    • La règle universelle du box-sizing: border-box
  8. Typographie web, couleurs, contrastes et variables CSS
    • Les familles de polices génériques et la directive @font-face
    • Les unités de mesure : pourquoi abandonner les pixels pour les rem
    • La lisibilité optimale : interligne, graisse et longueur de ligne
    • Les modèles de couleur : hexadécimal, RGB et HSL
    • Normes de contraste chromatique WCAG AA et vérification DevTools
    • Les variables CSS personnalisées et la thématisation dynamique
  9. La mise en page unidimensionnelle avec Flexbox
    • Le concept du conteneur parent et des éléments enfants flexibles
    • L'axe principal et l'axe transversal : flex-direction
    • Alignement et distribution sur les deux axes : justify-content et align-items
    • Le retour à la ligne automatique et l'espacement : flex-wrap et gap
    • Les propriétés individuelles des enfants : flex-grow, flex-shrink et flex-basis
    • Patrons de conception courants au cégep : la barre de navigation et le pied de page collant
  10. La grille bidimensionnelle avec CSS Grid
    • La révolution bidimensionnelle : pourquoi CSS Grid surpasse les anciens systèmes
    • L'unité fractionnaire fr et la fonction repeat()
    • L'agencement auto-adaptatif magique : auto-fit, auto-fill et minmax()
    • Positionnement explicite par numéros de lignes : grid-column et grid-row
    • La mise en page visuelle cartographiée avec grid-template-areas
    • Arbre décisionnel : quand choisir Flexbox et quand choisir CSS Grid
  11. Le design adaptatif et les requêtes médias
    • La philosophie du mobile-first : concevoir pour la contrainte
    • Syntaxe des requêtes médias et points de rupture stratégiques
    • Les images et vidéos parfaitement fluides
    • Ergonomie tactile : taille minimale des zones de contact
    • Préférences utilisateur : mode sombre et réduction des animations
  12. Transitions, animations douces et micro-interactions
    • La propriété transition : donner vie aux changements d'état
    • Les transformations géométriques avec transform
    • Les animations complexes avec la directive @keyframes
    • Les règles de sobriété dans l'animation professionnelle
  13. Débogage avec les outils de développement et optimisation
    • L'inspecteur d'éléments : votre allié au quotidien
    • L'onglet Styles calculés et le diagramme du modèle de boîte
    • L'audit de performance et d'accessibilité avec Lighthouse
    • La liste de contrôle avant la remise d'un travail pratique collégial

Ouvrir le manuel interactif · Paiement unique : 29,95 $ CA

← Tous les manuels