Site Web > HTML5, CSS3

HTML5, CSS3, Orienter votre conception vers
des sites web modernes et dynamiques

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 oeuvre d'applications client/serveur attractives.

2 jours

Au centre ou
dans vos locaux

Devis sur demande

Pré-requis :


Connaissances de base en HTML et CSS.

Objectifs :


  • Concevoir et développer des applications Web en HTML 5 et CSS 3

  • Mettre en place et valider la structure HTML 5 des pages Web

  • Habiller des pages Web en CSS 3 afin de les rendre plus attractives

  • Rendre responsive design les pages Web d’un site

  • Intégrer des animations et du contenu multimédia.

Programme :

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.

Nouvelle structuration

  • Les éléments traditionnels structurant un document HTML 5 (doctype, html, head, body, meta …).
  • L’élément <nav> et la mise en place d’informations de navigation internes au site.
  • L’élément <section> et la mise en place de blocs de contenus.
  • L’élément <article> et la mise en place de contenus indépendants du document.
  • L’élément <aside> et la mise en place de blocs d’informations complétant un contenu principal.
  • Les éléments <header> et <footer> et la mise en place de sections d’introduction et de conclusion d’un bloc.
  • Les autres balises de structure.
  • 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.Imbrication et type de contenu.

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 <video> HTML5.

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).

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…

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.

Les transformations

  • Les transformations : translations, rotations, homothéties (-webkit-transform).
  • Les animations : les animations, les transitions (?webkit-transition).

 

Vous êtes*
Société
Numéro de SIRET
Code NAF
Votre prénom*
Votre nom*
Adresse Email*
Téléphone*
Sujet*
Message*

* Champs obligatoires