AJC FORMATION : 02. HTML5, CSS3, Responsive – Création de pages web

Introduction à HTML

• Fonctionnement d' un site Web
• Présentation du langage HTML
• Structure d'un document HTML
• Le doctype
• Balises Meta
• Positionnement de HTML par rapport à CSS
• Choix d'un éditeur de Texte

Travaux pratiques : Mise en place d'une page simple via un éditeur de texte

Les balises de base

•  Syntaxe des balises 
•  Les balises à contenu et les balises vides
•  Les attributs de balise
•  Les balises de titre
•  Les balises de structure
•  Les liens
•  Les images
•  Les listes
•  Les tableaux

Travaux pratiques : Création d'une page simple (Titres, Paragraphes, image, liens), Création d'une page présentant les films 

Les formulaires

•  Les inputs du formulaire
•  Principe d'envoi des formulaires
•  Les différents éléments du formulaire

Travaux pratiques : Création d'un formulaire de création de compte client

Les nouveautés HTML5

•  Les nouvelles balises de structure
•  Les nouveaux inputs de formulaire
•  Validation native des formulaires
•  Ajouter du son et des vidéos
•  Le canvas
•  Le format SVG

Travaux pratiques : Adaptation avec de nouveaux inputs dans le précédent formulaire

Présentation de CSS

•  Utilité des feuilles de style
•  Où écrire le CSS ?
•  Syntaxe de base
• Principe de fichiers tels que reset.css ou normalize.css

Les sélecteurs

• Quelques propriétés de base
• Les couleurs (RGB, HSL, HEX)

Travaux pratiques : Ajout de styles dans la page créée par les balises de base

Structure et positionnement des éléments

•  Les éléments block, inline
•  Marges et bordures
•  Le positionnement dans le flux
•  Position relative et absolue
•  Autres positions

Travaux pratiques : Création d'un gabarit

Les nouveautés CSS3

•  Les nouveaux sélecteurs
•  Créer des dégradés
•  Les bordures arrondies
•  Les effets de texte
•  Les transitions
•  Les animations
•  Le positionnement en grille
•  Le positionnement Flexbox

Travaux pratiques : Adaptation du précédent gabarit, ajout de différents effets 

Introduction au Responsive Web Design

•  Les modes du web
•  Compatibilité des navigateurs
•  Part de marché des navigateurs
•  Le marché mobile
•  La nécessité du Responsive Design
•  Les différents types de terminaux
• Les limites du Responsive Design

Travaux pratiques : Présentation d'outils de Test d'un site responsive

Application du Responsive Web Design

• Une solution basée sur HTML et CSS
•  Adaptation des contenus visuels (images, icônes, polices, …)
•  Adaptation du positionnement
•  Adaptation de la navigation
• Les différentes unités de mesure
• Principe de Grille

Les Media Queries et propriétés CSS

• Approche portrait/paysage, tactile, impact sur l'ergonomie
•  Règles conditionnelles (orientation, device-width...)
•  Réglage complémentaire de rendu visuel (Viewport)
•  Eviter les débordements. Points de rupture

Travaux pratiques : Faire évoluer le gabarit à l'aide des Media Queries