Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

HTML5, CSS3, Responsive – Création de pages web

réf : DEV-HT

Objectifs de formation : à l’issue de la formation, le stagiaire sera capable de créer des applications web dynamiques et responsives, en utilisant conjointement les nouvelles possibilités du langage HTML5 et des feuilles de style CSS3.

Objectifs pédagogiques

  • Concevoir et développer des applications Web en HTML5 et CSS3
  • 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
  • Savoir produire des pages compatibles avec les différents navigateurs internet
  • Rendre responsive design les pages Web d’un site
  • Créer des images et des animations vectorielles

Pré-requis

Avoir des connaissances internet standard

Une expérience pratique du web est souhaitable

Public concerné

Développeurs, concepteurs web, chefs de projets…

Programme

  • DTD et syntaxe XML
  • Structure d’un document HTML
  • Sémantique HTML
  • Modèle de document
  • Protocole HTTP
  • Optimisation du Critical Render Path
  • Topographie des concepts et apports du HTML5
  • Présentation des différents outils de développement HTML5
  • Test de compatibilité & méthode de détection HTML5

Travaux pratiques

Premiers pas sur les outils de développement HTML5

  • Les éléments « classiques » de structuration & les nouveautés
  • Les catégorie de contenus
  • Balises structurantes & référencement
  • Imbrication et type de contenu

Travaux pratiques

Mise en oeuvre de la structure d’un document HTML

  • Balises & attributs obsolètes
  • Présentation des balises les plus utilisées
  • Extensions de balises HTML
  • Les attributs
  • Les microformats & référencement
  • Les nouveaux champs et attirbuts de formulaires
  • Les dessins
  • Les formats multimédia
  • Gestion vidéo et audio

Travaux pratiques

Mise en place de templates HTML5 avec des contenus multimédias

  • Notions de base autour de la syntaxe et des règles
  • Présentation des sélecteurs courants

Travaux pratiques

Mise en oeuvre de CSS3 au applications Web, utilisation des sélecteur d’éléments sur une page HTML5

  • Rappels : déclarations RGB & RGBA
  • Modèles HSL & HSLA
  • Propriété Opacity
  • Support des polices distantes
  • Mise en forme du texte
  • Mise en place d’un système d’icônes
  • Gestion des débordements
  • Gestion des enchainements
  • Effets de couleur et d’ombre
  • Modes multi-colonnes

Travaux pratiques

Mise en couleur et en formes des contenus

  • Ombres & coins arrondis
  • Fonds multiples
  • Gradients de fond
  • Fonds ajustés aux conteneurs
  • Les transformations
  • Les animations

Travaux pratiques

Mise en forme et animations grâce aux notions abordées

  • Le principe de Grilles
  • Mise en page par bloc
  • Positionnement des blocs
  • Responsive : adaptation de la disposition et de la taille des blocs

Travaux pratiques

Adaptation d’un page web modulaire et responsive

  • La fin des floats
  • Les sous-blocs & répartition
  • Ordre d’affichage
  • Occupation de l’espace mis à disposition par les parents
  • Centrer un bloc en hauteur
  • Responsive : adaptation de la disposition et de la taille des blocs

Travaux pratiques

Adaptation d’un page web modulaire et responsive

  • L’offre communautaire
  • Critères communs et concepts partagés
  • Frameworks composants & Framework CSS
  • La syntaxe SVG
  • Support & intégration des images
  • Polices de caractères
  • Optimisation
  • Animation des graphiques
  • Bibliothèque pour la création de graphiques

Travaux pratiques

Création d’une animation vectorielle

Équipe pédagogique

Professionnel expert dans le développement

Moyens pédagogiques et techniques

  • Espace intranet de formation.
  • Documents supports de formation projetés.
  • Exposés théoriques
  • Étude de cas concrets
  • Mise à disposition en ligne de documents supports à la suite de la formation.

Dispositif de suivi

  • Émargement numérique.
  • Mises en situation.
  • Formulaires d’évaluation de la formation.
  • Certificat de réalisation de l’action de formation.

Vous avez une question ?