Formation HTML5 / CSS3

Personnalisation:
Le programme peut être modifié en fonction de vos besoins et de vos objectifs sur le contenu, la durée et les modalités.

HTML Jour 1 et 2

Le matériel et les logiciels Jour 1

• Ressources nécessaires
• Un éditeur de code
• Les navigateurs

Introduction

• Les différentes versions du HTML
• Les standards du web
• Compatibilité avec les navigateurs

Structure de base d'un document HTML

• Le doctype
• La balise HTML
• Définition de l'encodage
• La balise head
• La balise body

La sémantique

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

Mieux structurer ses pages

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

Mettre en forme du texte

• Le formatage du texte : gras, 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

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
• Les attributs

Les images

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

Autres élements graphiques Jour 2

• Canvas
• SVG

Les médias

• Insertion de vidéos
• Insertion de sons
• Utilisation d'iframe (Youtube, Google maps ...)

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

Mettre en ligne son site

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

CSS Jour 3 et 4

Norme actuelle et tendance du CSS Jour 3

• Evolution du CSS
• Compatibilité dans les navigateurs

Ou placer votre code ?

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

Mettre en forme à l'aide de CSS

• Principe des styles
• Créer des règles de style
• Bonnes pratiques pour structurer le CSS

Les sélecteurs CSS

• Les sélecteurs de type
• Les sélecteurs de classe
• Les sélecteurs d'identifiant
• Le sélecteur universel
• Les sélecteurs d'attribut
• Les combinateurs
• Les pseudo-classes
• Les pseudo-éléments

Les bases du CSS

• La gestion du texte, polices, couleur, taille, mise en évidence ...
• Les arrière-plans
• Les blocs
• Les boites
• Les bordures
• Les listes
• Le positionnement (absolu, relatif, fixe ...)

Le CSS3 Jour 4

• Les couleurs(RGB, RGBA), les dégradés, l'opacité
• Les arrière-plans multiples, ajustement au conteneur
• Les ombres et effets d'ombres
• Les bordures et les coins arrondis
• Utilisation de polices personnalisées
• Les transformations
• Les transitions
• Les animations

Gestion des colonnes

• Ancienne méthode : float
• Les méthodes récentes : grid, column, flex
• Les avantages et inconvénients, la compatibilité avec les navigateurs

Responsive Web Design (RWD)

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

Formation ajoutée le 01/01/2015, mise à jour le 26/05/2022.