HTML 5, CSS 3, créer des sites Web riches

Objectifs

Cette formation vous apprendra à créer des pages et des applications Web en utilisant HTML5 et CSS3. Vous découvrirez les avancées proposées par le HTML5 notamment en termes d'interfaces Web riches/RIA, de multimédia et de moyens de communication permettant la mise en œuvre d'applications client/serveur attractives.

Participants

Développeurs Web. Chefs de projet Web

Pré-requis

Connaissances de base de HTML et CSS

Moyens pédagogiques

1 poste par participant - 1 Vidéo projecteur - Support de cours fourni à chaque participant – Formation présentielle

Durée

2 jours

Les sessions inter-entreprises

Date Session
Ce plan de cours est établi à titre indicatif. Son contenu peut être adapté à chaque formation Télécharger la fiche pdfDemander un devis

Code

HTML5CSS3-CRESIWEB

Description détaillée

Rappels 

Rappels sur les versions HTML (HTML 4, XHTML 1.x, XHTML 2).

Les DTD : strict, transitional, frameset.

Les différents composants d'un document HTML : titres, paragraphes, liens, tableaux, formulaires...

Les commentaires.

La structure composite d'un document HTML : images, feuilles de style CSS, JavaScript, Flash...

Le modèle de document (DOM).

Le protocole HTTP.

Interaction client/serveur HTTP.

Interprétation du HTML par le navigateur.

Position des navigateurs face aux technologies HTML.

 

Introduction au HTML 5 

Les objectifs de HTML 5.

Le WhatWG versus W3C.

Les principaux concepts et apports.

Les différents composants : balises, formulaires, audio, vidéo, API, etc.

Outils de développement HTML 5.

Test de compatibilité, méthode de détection HTML 5.

Travaux pratiques 

Démonstrations. Découvertes des possibilités et du champ d'action.

 

Nouvelle structuration 

Les nouvelles catégories de contenus : Metadata content, Flow content, Sectioning content, Heading content.

Les nouvelles catégories de contenus : Phrasing content, Embedded content, Interactive content.

La validation des pages avec le valideur officiel du W3C.

Intérêt de ses nouvelles balises de structure.

Abandon de la notion de type "en ligne" et "bloc".

Travaux pratiques 

Mise en place et validation de la structure d'un document HTML 5.

 

Les nouvelles balises HTML 

Les balises et attributs obsolètes.

Les images SVG pour le dessin vectoriel.

Les canevas pour le dessin "bitmap".

Différence Canvas vs SVG. 

Les nouvelles balises : <mark>, <meter>,<time>,<figure>,<picture>...

Les extensions de balises HTML existantes.

Les nouveaux attributs : a, fieldset, iframe, area, button...

Les microformats. Présentation et avantages sur le référencement. Attributs itemprop='nationality'...

Les formulaires. Les nouveaux types de la balise <input> (email, date, week...). 

Les nouveaux champs de formulaires : range, autofocus, placeholder, menu...

Le contrôle et la validation de formulaires.

Les formats multimédias. Codecs et API Multimédia. 

Gestion vidéo et audio avec les nouvelles balises <audio> et <code><video></code> HTML 5.

Travaux pratiques 

Création de templates HTML 5. Positionnement d'éléments en absolu. Nombreux TP sur la mise en œuvre des balises HTML 5 (formulaires, conception...). Réalisation d'un lecteur multimédia.

 

Les sélecteurs CSS 3 

Rappel sur la syntaxe : les sélecteurs, les règles.

Sélecteurs de répétition nth-child(even).

Sélecteurs de cible target.

Sélecteurs frère antérieur ~.

Sélecteurs d'enfant unique only-child.

Media Queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal.

Création de layout avec flexbox (organisation des éléments en fonction d'une grille).

Travaux pratiques 

Intégration de CSS 3 aux applications Web. Sélection d'éléments d'une page HTML 5.

 

Les couleurs et la mise en forme du texte  

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.
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...
Travaux pratiques 
Application de couleurs. Mise en forme de textes. Gestion multicolonne
 
La mise en forme des boîtes et des fonds
Les ombres avec box-shadow.
Les coins arrondis avec border-radius...
Les fonds multiples.
Les gradients de fond (-webkit-gradient).
Les fonds ajustés aux conteneurs.
Travaux pratiques 
Appliquer des ombres et des arrondis.
 
Les transformations
Les transformations : translations, rotations, homothéties (-webkit-transform).
Les animations : les animations, les transitions (?webkit-transition).
Travaux pratiques 
Animations et effets de transition
 
 
 
 

 

 
 
 

Les dernières places disponibles

Aucune annonce pour le moment
Une erreur est survenue
Une erreur est survenue, l'administrateur a été contacté
Revenir à la première page