Télécharger le programme HTML5 et CSS3 Initiation au format PDF

Formation HTML5 et CSS3 Initiation NEW

Créer des documents Web et des sites statiques avec HTML5 et CSS3

Objectifs

Cette formation vous permet d'utiliser les langages HTML et CSS dans leurs dernières versions pour concevoir et habiller des documents ainsi que des sites statiques avec les standards du Web et adaptés à tous les terminaux (responsive).

Public

Graphistes, webdesigners, webmasters, intégrateurs, développeurs, chefs de projet, ou toute autre personne en charge de la création de pages web.

Durée

35 heures en présentiel sur 5 jours

Pré-requis

Être à l'aise avec l'utilisation de son environnement informatique.

Formateur

Formateur expérimenté, développeur de site Web, et spécialiste du Web.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un accès à des supports de cours vidéos est envoyé en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Modalité de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.


Programme HTML5 et CSS3 Initiation

Introduction

  • Histoire du HTML et du CSS
  • Définition et utilité de HTML/CSS/JavaScript, les langages du web
  • Diversité des terminaux d'affichage (desktop, tablette, smartphone…)
  • Concepts généraux de la conception de documents WEB
  • Standards et compatibilité
  • Le navigateur, outil de diffusion et de développement

HTML – Structurer le document

  • Notion de balises < … >
  • Les balises sémantiques de HTML5
  • Le Doctype
  • Différentes parties d'un document HTML (header, footer, main, nav, …)
  • Les principales balises et leurs attributs
  • Utiliser les commentaires

HTML – Utiliser des balises sémantiques

  • Balises title et meta
  • Insertions des feuilles de styles CSS et des scripts JavaScript
  • Mise en place de la structure du document
  • Les balises principales de contenu : titres, paragraphe, listes ...
  • Hiérarchie des titres et mise en valeur pour le référencement

HTML – Ajouter de l’interactivité

  • Ajouter des liens
  • Notion de lien absolu et de lien relatif
  • Créer des ancres
  • Ajouter des formulaires accessibles
  • Les différents types de champs

HTML – Gérer le multimédia

  • Les images et les règles à respecter
  • Vidéo et audio (sans Flash)
  • SVG embarqué
  • Dessiner avec Canvas et Javascript
  • Les animations en Javascript et CSS3

CSS – Habiller le document

  • Structure CSS
  • Syntaxe d'une feuille de style
  • Notions d'éléments « in-line » et « block »
  • Utilisation des sélecteurs de balise

CSS – Sélectionner les éléments à habiller

  • Utilisation des attributs HTML « id » et « class »
  • Utilisation des sélecteurs d'identifiant et de classe
  • Utilisation des pseudo-classes et mise en forme des liens
  • Utilisation des sélecteurs d'attributs
  • Calculer les règles de priorité

CSS – Adapter la police et ajouter des couleurs

  • Polices et textes
  • Unités de mesure
  • Couleurs
  • Fonds
  • Styles des listes

CSS – Positionner les éléments

  • Principe des « boites » et leur positionnement
  • Display : inline / block / inlineblock
  • Dimensions, marges, espacements et bordures
  • Positionnement classique : float / clear
  • Les pièges des float et l'astuce du clearfix
  • Positionnements spéciaux (relatif, absolu, fixe)
  • Positionnements par Grille ou via Flexbox

CSS – Animations et effets

  • Coins arrondis
  • Ombres portées
  • Transparence
  • Filtres graphiques
  • Transformations 2D
  • Animations autonomes
  • Valeurs dynamiques : calc()

CSS – Adapter le document aux appareils

  • Principes du Responsive Web Design (RWD)
  • Différence entre résolution et taille d'affichage
  • Mise en page fluide et adaptative
  • Principe des media queries CSS
  • Points de rupture et règles conditionnelles
  • Menus adaptatifs

Javascript – Ajouter un contrôleur et modifier le document

  • Notions de programmation informatique
  • La place de Javascript dans la conception de documents HTML
  • Les APIs du navigateur
  • Modifier l’habillage en fonction des actions utilisateur

Hébergement - Publier son document sur le Web

  • Notions de serveurs/clients
  • Choisir un nom de domaine et un hébergement
  • Se connecter via FTP avec Filezilla
  • Déposer ses documents sur le serveur
  • Tester son travail à l’aide d’outils en ligne
  • Notions de CMS et de sites dynamiques

TD : Construire un site statique dit « vitrine » de 3 pages (accueil, contact, nos productions) de A à Z sans logiciel spécifique, seulement avec Notepad++ (PC) ou SublimeText (MAC)