Formation HTML5 / CSS3

HTML5

Le matériel et les logiciels

• Ressources nécessaires
• Quel éditeur choisir ?
• Les navigateurs
  • Pourquoi différents navigateurs ?

Introduction

• Les différentes versions du HTML
• Les standards du web
• L'avenir du HTML5
• Compatibilité avec les navigateurs

Structure de base d'un document HTML

• Le doctype
• La balise HTML
• Définition de l'encodage
• La balise HEAD
  • Les metas informations
  • Insertion de CSS et Javascript
  • Les balises utiles pour le référencement
• La balise BODY

Mettre en forme du texte

• Le formatage du texte
  • Grassage, italique, soulignement, mise en évidence …
• Les balises d'entêtes
• Les listes ordonnées
• Les listes non ordonnées
• Les listes de définition
• Les abréviations
• Les espaces insécables, les sauts de ligne ...
• Les paragraphes
• L'alignement

Les tableaux

• Insertions de tableaux
• Insertion, suppression de lignes et colonnes
• Fusionner des lignes et colonnes
• Fractionner des lignes et colonnes
• caption, col, colgroup

Les liens hypertexte

• Création de lien hypertexte sur du texte
• Création de lien hypertexte sur des images
• Création de lien vers messagerie (mailto:)
• Les attributs

Les images

• Les formats d'images du web
• Les contraintes liées aux images
• Insertion d'images
• Les attributs
• figure, figcaption

Les éléments graphiques

• Canvas et le dessin de graphiques sur une page web
• SVG (Scalable Vector Graphics) et la création de graphiques interactifs

Les médias

• Insertion de vidéos et sons (HTML5)
• Insertion d'iframe
  • Insertion de vidéo Youtube, Daily motion ...
  • Insertion de Google maps

La sémantique

• Qu'est-ce que la sémantique HTML5 ?

Mieux structurer ses pages

• header
• nav
• section
• article
• aside
• footer

Les balises et attributs non repris en HTML5

• Balises : applet, bgsound, big, center, dir, font, frame, strike, tt, u ...
• Attributs : align, link, bgcolor, border, cellpadding, cellspacing, nowrap, height, name, valign ...

Les formulaires

• La balise form
• Les champs de texte
• Les zones de texte
• Les listes déroulantes
• Les boutons radio
• Les cases à cocher
• Les boutons envoyer et rétablir
• Les balises introduites à partir du HTML5
  • input (date, time, datetime-local, tel, email, url, color, number, search...)

Mettre en ligne son site

• De quoi ai-je besoin ?
• Client et serveur FTP
• Les outils indispensables

CSS3

Norme actuelle et tendance du CSS

• CSS1, CSS2, CSS3
• Compatibilité dans les navigateurs

Mise en forme à l'aide de CSS

• Principes des styles
• Créer des règles de style
• Comment structurer le CSS ?

Ou placer votre code CSS ?

• Dans une feuille de style externe
• Dans un document
• Dans un style intégré
• Avantages et inconvénients des différentes méthodes

La syntaxe

• Les sélecteurs de style
• Les balises
• Les classes
• Les identificateurs
• Les sélecteurs d'éléments imbriqués (Héritage)
• Les pseudo-éléments

Les propriétés CSS 2

• La gestion du texte, polices, couleur, taille, grassage ...
• Les arrière-plans
• Les blocs
• Les boites
• Les bordures
• Les listes
• Le positionnement

Appliquer un style CSS à un élément

• Avec une classe
• Avec une id
• Avec la balise span
• Avec la balise style
• Avantages et inconvénients

Eléments flottants

• La propriété float
• Eléments flottants
• Les colonnes en CSS

Responsive Web Design (RWD)

• Adaptation aux périphériques
• Le viewport
• Les media Queries
• Les frameworks
  • Bootstrap, foundation, Materialize

Les nouveaux sélecteurs CSS3

• Cibler des balises au sein du même parent
• Cibler les balises en fonction de leurs attributs
• Les nouvelles pseudo classes

Les bordures des blocs

• Création et réglage des coins arrondis
• Utilisation d'images
• Les ombres et effets d'ombres

Le fond des blocs

• Spécifier la taille
• Définir son positionnement
• Sélection de plusieurs fonds

Le texte

• Ombres et effets d'ombres
• Coupures et mises à la ligne
• Justifier et aligner le texte
• Utilisation de polices personnalisées

Transformations, transitions et animations

• Les effets 2D
• Les effets 3D
• Les animations simples et multiples