Durée : 4 jours
Code : TWC75
Prochaines dates programmées :
Formation #TWC75
Formation HTML5 & CSS3 : maîtriser la création de ses pages Web
Email
Partager
Partager
Partager
Partager
Partager
Objectifs
- Réaliser ou mettre à jour des pages et applications Internet en HTML5 et CSS3
- Etre capable de concevoir des pages et applications web avec Flexbox et Grid Layout
Programme
Public Cible
Dates
1/ Retour sur le HTML et CSS : les fondamentaux
Approche Pédagogique
- Les versions successives du HTML (HTML 4, XHTML 1.x, XHTML 2)
- Navigateurs et nouvelles technologies HTML
- Comment HTML est interprété par le navigateur
- La notion de client/serveur HTTP
- Les composants d’un document HTML : textes, liens, titres, paragraphes, tableaux, formulaires, etc.
- Les commentaires
- Comment est structuré un document HTML : le doctype
- La balise <head>
- Lien avec une feuille de style
- Lien avec un fichier JavaScript
- La balise <body>
- Méthode et balises pour structurer une page
- Le texte dans la page HTML
- Les caractères spéciaux
- Quand utiliser HTML 5
- Les principaux concepts et apports
- La "roadmap" de HTML 5
- Les différents composants : balises, formulaires, audio, vidéo, API
- Outils de développement HTML 5
- Test de compatibilité, méthode de détection HTML 5
- Les éléments de structure <nav>, <section>, <article>, <aside>, <header> et <footer>
- Les catégories de contenus : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content
- Intérêt des balises structurantes pour le référencement
- Imbrication et type de contenu
- Les balises et attributs obsolètes
- Les balises : <mark>, <meter>, <time>, <figure>, <picture>...
- Les extensions de balises HTML existantes
- Les attributs : a, fieldset, iframe, area, button...
- Les microformats. Présentation et avantages sur le référencement
- Les nouveaux champs et attributs de formulaires : range, autofocus, placeholder, menu...
- Les dessins : Canvas versus SVG
- Les formats multimédias. Codecs et API Multimédia
- Gestion vidéo et audio avec les nouvelles balises <audio> et <video> HTML5
- Rappel sur la syntaxe : les sélecteurs, les règles
- Sélecteurs de répétition nth-child(even), de cible target, de frère antérieur ~, d'enfant unique only-child
- Media Queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal
- Rappel sur les déclarations RGB et RGBA
- Les modèles HSL et HSLA
- La propriété opacity
- Support des polices distantes @font-face
- Mise en forme du texte
- Création d'un système d'icônes
- Gestion des débordements par text-overflow
- Gestion des enchaînements par wrap-option, white-space-treatment...
- Effets de couleur et d'ombre sur texte text-fill-color, text-shadow...
- Les modes multicolonnes avec column-count, column-width...
- Les ombres avec box-shadow
- Les coins arrondis avec border-radius...
- La gestion des fonds multiples
- Les gradients de fond (-webkit-gradient)
- Les fonds ajustés aux conteneurs
- Les transformations : translations, rotations, homothéties
- Les animations : les animations, les transitions
- Le principe de Grilles "Grid"
- Réaliser une mise en page par bloc
- Positionnement de chacun des blocs sur la page
- Changement de la disposition et de la taille des blocs parents en fonction de la taille de l'écran de l'internaute
- Qu'est-ce que Flexbox ? La fin des floats
- Affichage “Flexbox”
- Axe principal et axe transversale
- Répartition et alignement des éléments
- Dimensions de base, agrandissements et réductions
- Ordonnancement des éléments
- L'offre communautaire. (Bootstrap, Material Design, Foundation)
- Critère communs et concepts partagés
- Les Framework spécialisés composants
- Les Framework spécialisés mobiles
- La syntaxe SVG
- Support et intégration des images SVG dans le documents
- SVG et polices de caractères
- Optimisation de SVG
- Animation des graphiques SVG
- Bibliothèque pour la création de graphiques SVG (SVG.js, Velocity, Raphael...)
Approche Pédagogique
- Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
- Cas pratiques
- Remise d’outils
- Echanges d’expériences
Personnes Visées
- Chefs de Projet
- Développeurs
- Webmasters
Dates
- Du 23 au 26 Avril 2024
- Du 23 au 26 Juil. 2024
- Du 22 au 25 Oct. 2024