Formation HTML5 / CSS3

Objectifs de la formation HTML 5 et CSS3

HTML est un langage qui permet de présenter des informations sur Internet. Bien qu'encore en cours de création, la version HTML 5 est un langage parfaitement utilisable.

A la fin de cette formation, vous serez capable de :

•    Créer des pages en HTML 5 et utiliser les nouvelles balises HTML 5.
•    Utiliser les APIs JavaScript de HTML 5.
•    Connaître le niveau de support des fonctionnalités HTML 5 par les navigateurs actuels.
•    Emuler certaines fonctionnalités HTML5 sur des navigateurs moins récents.
•    Mettre en page et en forme avec CSS3

Public concerné Développeurs de sites Web, chefs de projets web,  responsables de site web, webmasters Pré-requis Il faut connaitre le (X)HTML et le JavaScript ou avoir suivi les formations XHTML/CSS et JavaScript.

Informations pratiques Référence : #HC53 Durée : 2 jours (14 heures) Tarif inter-entreprises: 1 050€ (HT) Stage intra-entreprise disponible   Dates :  - du 4 au 5 Février  - du 11 au 12 Avril  - du 27 au 28 Juin  - du 3 au 4 Octobre  - du 21 au 22 Décembre   Consultez-nous pour obtenir un devis et les prochaines disponibilités de nos consultants formateurs.

Présence nationale Cliquez sur l'image pour l'agrandir Aix-en-Provence, Auxerre, Bordeaux, Caen, Clermont-Ferrand, Dijon, Grenoble, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Perpignan, Reims, Rennes, Rouen, Strasbourg, Toulouse, Toulon, Tours

Programme de la formation HTML 5 et CSS3

Introduction à HTML 5 et CSS3

• Contexte : fonctionnement d’un site internet
• Histoire du HTML
• Organismes de normalisation : WHATWG et W3C
• La nouvelle vision HTML 5
• Roadmap HTML 5

Utiliser le HTML 5 aujourd'hui

• Savoir quand choisir le HTML 5
• Utiliser le HTML 5 avec des navigateurs qui ne le supportent pas

Balisage HTML 5

• Structure d'une page : disparition des notions "en ligne" et "bloc"
• Doctype, NameSpace, Encoding
• Les nouveaux éléments : section, article, aside, nav, ... pour en-têtes , pied de pages, etc.
• Les indispensables balises telles que menu, command, details, summary
• Elements  sémantiques
• Les micro data
• Dates et temps
• Les éléments obsolètes : center, font, frame, acronym, ...
• HTML 5 et CSS
• Compatibilité entre navigateurs
• Optimisation des balises pour les moteurs de recherche (SEO)

Les formulaires HTML 5

• Balise form
• Créer et utiliser des formulaires HTML 5
• Gestion des dates, des emails, ..
• Les validations de formulaire en HTML5
• Auto focus

Audio et Video en HTML 5

• Les éléments audio et video
• Les conteneurs
• Contrôler la vidéo, l'audio avec l'API HTML5
• Support et formats (codecs WebM, MP4, H.264, Ogg Theora, MP3, AAC, Vorbis)
• Gérer plusieurs sources vidéos/audios
• Streaming
• Ajouter des sous-titres à une vidéo HTML5

Vue d'ensemble des APIs pour HTML 5

• Les APIs HTML 5
• Gestion des fichiers
• Audio et Vidéo
• Site web hors ligne
• Drag & Drop
• Extension de HTMLDocument
• Extension de HTML Element
• Historiques de pages

Dessiner en HTML 5

• Dessiner en JavaScript
• Canvas vs SVG
• Contexte
• Accessibilité
• Quid des designers actuels ?

La communication en HTML 5

• Les événements
• Envoi de messages entre documents
• Envoi de messages par canaux
• Le push serveur
• Web Sockets
• Présentation de node.js
• Les Web Workers pour le multi-tâches

La géo-localisation avec HTML 5

• Vue d'ensemble
• La vie privée de l'utilisateur
• Géolocaliser ses utilisateurs sur Google Maps

Stockage avec HTML 5

• Stockage local
• Stockage en session
• Bases de données SQL Web

CSS3 : standardiser des propriétés

• Vue d'ensemble : se passer d'images, éviter les astuces
• Coins arrondis
• Ombres portés
• Transparence
• Mise en page et positionnement
• Autres nouveautés

CSS3 : mise en page et positionnement

• Vue d'ensemble : clarifier le code, éviter la multiplication de
  imbriquées
• Niveau de présentation
• Mise en page par patron
• Mise en page multi-colonnes
• Mise en page par boite horizontales ou verticales
• Positionnement par grille
• Autres nouveautés

CSS3 : animation

• Transformations (2D et 3D)
• Transitions

Logiciels utilisés

Tout logiciel où il n'y a aucun intérêt pédagogique à le faire faire par les stagiaires sera préinstallé sur les postes.

Travaux pratiques

Tout au long de cette formation, de nombreux exercices seront effectués. En effet, environ 60% du temps est concacré à la pratique.

Formations connexes disponibles dans notre centre de formation

Si vous souhaitez aller plus loin, vous pouvez suivre les formation Ajax avec JQuery ou php initiation.

Mots clés associés à cette formation

XHTML, HTML5, HTML 5, CSS3, CSS 3, JavaScript, Standard, W3C, WHATWG, Internet, Web, site.

Financement de la formation professionnelle

Ce cours peut être financé par l'OPCA (Agefos, Fafiec, Opcalia...) de votre entreprise ou par le Fongecif de votre région.

Il peut également être suivi dans le cadre du DIF, du CIF, ou d'une période de professionnalisation.