HTML5 et CSS3 : découverte et maîtrise des bases

Module 1 : présentation générale du langage HTML et HTML5

• La création du fichier Document type definition (DTD). Les règles de syntaxe du langage XML.
• La structure de base d'une page codée en HTML (balise images, balise CSS, balise JavaScript).
• Les balises HTML sémantiques à utiliser (titres, paragraphes, hyperliens, tableaux, formulaires, etc.).
• Le Document Object Model (DOM). 
• Le fonctionnement du protocole HTTP (HyperText Transfer Protocol) avec le HTML.
• L'optimisation des performances du Critical Rendering Path (chemin critique de rendu).
• Les différentes versions du HTML et les avantages du HTML5.
• Les outils utilisés pour le développement HTML5.
• Les tests de compatibilité et les outils utilisés pour contrôler le balisage HTML5.

Travaux pratiques :

• explorer toutes les possibilités offertes par le HTML5 ;
• découvrir et prendre en main les outils de développement.

Module 2 : structure d’une page web en HTML5

• Les balises principales d'un document HTML5 (doctype, head, body, meta, script, etc.).
• Les métadonnées HTML5.
• La propriété flex-flow. 
• Les éléments de sectionnement HTML5. 
• Les balises HTML5 sémantique. 
• Les éléments de contenu externe embarqué.
• Les éléments de contenu interactif.
• L’importance des balises sémantiques pour le référencement naturel (SEO).
• L’imbrication des éléments HTML5 et l'organisation des contenues.

Travaux pratiques :

• créer un document HTML5 et contrôler sa conformité avec des outils de validation.

Module 3 : utilisation des balises HTML5 et de leurs attributs

• Les balises et attributs HTML inutilisés dans le HTML5.
• Les nouvelles balises du HTML5 et leurs nouveaux attributs.
• Les données structurées (Rich Snippets (utilisation et avantages en termes de référencement).
• Les nouveaux champs de formulaire et leurs attributs en HTML5.

Module 4 : formatage des boîtes et des backgrounds en CSS3

• Les effets d'ombre avec la propriété box-shadow.
• Les coins arrondis avec la propriété border-radius.
• La gestion des arrière-plans multiples.
• Les dégradés de couleurs avec la propriété webkit-gradient pour les arrière-plans.
• L'ajustement d'un arrière-plan dans les conteneurs.
• Les propriétés de transformations CSS3.
• Les propriétés d'animations CSS3.
• La différence entre SVG et Canvas pour l'animation en CSS3.
• L'intégration de médias en CSS3 (formats supportés, ajout des codecs et API multimédia).
• L'utilisation des balises CSS3 pour contrôler les éléments vidéos et audios.

Travaux pratiques :

• créer un template en HTML5 et CSS3 ;
• positionner des éléments en valeurs absolues ; 
• créer un lecteur multimédia.

Module 5 : utilisation des sélecteurs CSS3

• La syntaxe des sélecteurs CSS3 et les règles à respecter.
• L'utilisation des sélecteurs de répétition.
• L’utilisation des medias queries (chargement conditionnel des feuilles de style).

Travaux pratiques :

• insérer du code CSS3 au sein d'une application Web ; 
• rechercher des éléments spécifiques dans le code source d’une page HTML5.

Module 6 : formatage du contenu en CSS3

• La transparence avec les propriétés RGB et RGBA.
• Les modes de couleurs HSL et HSLA.
• L’opacité avec la propriété opacity 
• L'insertion d'une police d'écriture.
• Les propriétés de mise en forme pour le texte.
• L'intégration d'une bibliothèque d'icônes.
• Le débordement avec la propriété text-overflow.
• Les espacements avec les propriétés wrap-option et white-space.
• Les effets de couleur et les ombrages avec les propriétés -webkit-text-fill-color et text-shadow.
• Les colonnes avec les propriétés column-count et column-width.

Travaux pratiques :

• formater du texte en appliquant des couleurs, du gras, de l'italique, etc. ;  
• utiliser le CSS Multi-column Layout Module.

Module 7 : mise en page avec les FlexBox CSS3

• Le flottement des éléments avec la propriété float.
• Le positionnement des sous-blocs dans le bloc principal.
• La disposition des blocs en fonction de leur ordre d'affichage.
• La gestion des espaces alloués par les blocs parents.
• Le centrage vertical d'un bloc.
• Le placement et la dimension des blocs pour le responsive design.

Travaux pratiques :

• créer une mise en page flexible et responsive design.

Module 8 : utilisation du module CSS Grid layout 

• Présentation du concept de mise en page par grille (Grid Layout). 
• La conception d'une mise en page par grille.
• Le placement des grilles dans la page.
• La disposition de la structure et de la taille des grilles parentes pour le responsive design.

Travaux pratiques :

• créer une mise en page avec une grille adaptée pour le responsive design.

Module 9 : sélection du framework CSS

• Présentation des frameworks CSS les plus utilisés : Bootstrap, Foundation, Materialize, Pure, etc.
• Les bons critères de sélection pour choisir son framework.
• Les frameworks CSS open source.
• Les frameworks front-end.
• Les frameworks dédiés aux développements mobiles.

Travaux pratiques :

• démonstration de plusieurs frameworks CSS.

Module 10 : utilisation du format SVG

• Les règles de syntaxe du SVG.
• La compatibilité et l'intégration d'images SVG au sein d'une page HTML5.
• L'insertion de polices d'écriture SVG.
• L'optimisation du code SVG.
• L'animation des images SVG.
• Présentation des bibliothèques SVG les plus utilisées : SVG.js, SNAP.svg, Raphaël, etc.

Travaux pratiques :

• intégrer une image SVG animée dans une page web.