HTML Perfectionnement

HTML Perfectionnement - Feuilles de style CSS

Réf. : HTMLPERF.

Public concerné : Toute personne ayant à gérer un site web et désirant aller plus loin dans la mise en forme et les effets.

Objectifs : Créer des pages HTML complexes, corriger des pages existantes pour les rendre plus attrayantes et qualitatives.

Prérequis : Connaissances préalables du niveau de base du module HTML Initiation.

Durée : 3 jours (21 heures) en présentiel Prix : 750,00 € HT

ou 3 jours (18 heures) en classe virtuelle synchrone Prix : 600,00 € HT « connexion internet et ordinateur requis »

Le programme HTML Perfectionnement

Introduction
Rappel des bases du langage HTML et présentation des feuilles de style CSS. Les différentes façons de déclarer les styles : dans la balise, dans le head ou en dehors de la page.
La grammaire et la syntaxe CSS
Les règles, les sélecteurs, les propriétés, les valeurs. Les notations short hand. La notion d'héritage. La notion d'ordre, la mention « !important ». Les identifiants et les classes. Les pseudo-classes et les pseudo-éléments. La combinaison de sélecteurs (groupe de sélecteurs, enfants, frères, etc). Comment faire un « reset ». Les commentaires en CSS.
Les couleurs et la transparence
Les couleurs du Web et la notion de code hexadécimal. Les dégradés. La notation RGBa. La propriété opacity.
Définir un fond de page
Couleur de fond. Motif de fond. Image de fond. Régler le comportement du background avec les propriétés background-repeat, background-size etc. Comment créer une vidéo d'arrière-plan.
Le formatage du texte
La taille : les unités absolues, les unités relatives. Les polices standard du Web, les polices non standard et la règle @font-face, les Google Fonts. La hauteur de ligne. L'espacement des mots et des lettres. Les autres propriétés de type text- et de type font-.
Le positionnement et le formatage des boîtes
La différence entre les balises block et les balises inline. Le positionnement normal. La notion de float. Créer plusieurs colonnes dans une page. Cacher un élément, la différence entre les propriétés display et visibility. Les positions relative, absolute et fixed. Le z-index. Les margin et les padding. Les bordures. La propriété border-radius. Les ombres.
Les animations en CSS
La propriété transition. La propriété transform. La règle @keyframes et la propriété animation.
Le Responsive Web Design (RWD)
Statistiques sur les résolutions d'écrans. La balise meta viewport. Syntaxe des media queries. Les points de rupture : leur nombre, leur valeur, leur unité. Savoir tester le rendu sur un navigateur. L'approche « mobile first ». La mise en page Flexbox. L'impression papier : créer une feuille de style impression ou utiliser les media queries.