Programme de formation HTML5 et CSS3

Durée :

3 jours [21 heures]

Objectif :

– Créer des pages avec le langage HTML5
– Améliorer la présentation et la maintenance des pages Web
– Concevez des feuilles de style avec CSS3

Public :

La formation HTML5 et CSS3 est destinée aux webmasters, développeurs, toute personne chargée de la maintenance d’un site internet, maquettistes.

Pré-requis :

Maîtrise de l’outil informatique et de la navigation sur le Web.

Moyens pédagogiques et techniques :

Réalisation de travaux types.
Exercices et travaux pratiques tout au long de la formation HTML5 et CSS3.

Formation HTML5 CCS3 version PDF

1ER JOUR

LES BASES DU CSS/HTML
● Avantages des Cascading Style Sheets
● Règles CSS
● Sélecteurs
● Priorité des Sélecteurs
● La Cascade
● Feuille de Style embarquée
● Feuille de Style externe
● Styles en ligne
● Types de Médias
● Divs et Spans
● Unités de Mesure
● Héritage
● @import

CSS FONT
● Font, Font-family, Font-size
● Font Style, Font Variant et Font Weight

CSS TEXT
● Letter-spacing
● Word-spacing
● Line-height
● Text-align, Text-decoration, Text-indent, Text-transform
● Vertical-align
● White-space
● Propriétés de Text

COULEURS ET BACKGROUNDS
● Les codes de couleur
● Colors et Backgrounds

CURSEURS
● Styles de Curseurs
● Curseurs personnalisés

BORDERS, MARGINS ET PADDING
● Principe
● Borders
● Margin
● Padding
● Borders, Margin et Padding

STYLER LES TABLES EN CSS
● Syntaxe HTML Table
● Styler une table

POSITION ET VISIBILITÉ
● Flux d’éléments
● Position, Positionner
● Z-index, Display
● Visibility, Float
● Clear

MISE EN PAGE CSS AVANCÉE
● Redéfinir les Styles, Positionner les titres
● Pleine largeur, Largeur Fixe
● Recommandations sur le positionnement
● Autres méthodes
● Bien utiliser Float pour la mise en page

2EME JOUR

CSS : PROPRIÉTÉS ABRÉGÉES
● Pourquoi les P.A. ?
● Liste des P.A. CSS
● Margins et Padding
● Border et Outline
● Backgrounds
● Fonts. Lists
● Utiliser les P.A.

LES LISTES CSS POUR LA NAVIGATION (MENUS)
● Navigation Verticale
● Listes imbriquées pour la Navigation
● Navigation Horizontale
● Drop-Down & Fly-Out
● Créer un Menu de Navigation

CSS BACKGROUND
● Boîtes à coins arrondis de largeur fixe, de largeur relative
● Technique « Mountaintop »
● Navigation tabulée
● Ombres portées
● Remplacer du texte par une image
● Utiliser les Backgrounds

PRÉSENTATION DES FORMULAIRES EN CSS
● Ergonomie
● Création du formulaire
● Reset
● Styler le Formulaire
● Agrandir le Formulaire

CSS : LES BONNES PRATIQUES

COMPATIBILITÉS NAVIGATEURS
● Quirks Mode
● Internet Explorer : instructions conditionnelles
● Les soucis habituels & leurs solutions
● Bug du modèle Box

3EME JOUR

COMPATIBILITÉS NAVIGATEURS
● Quirks Mode
● Internet Explorer : instructions conditionnelles
● Les soucis habituels & leurs solutions
● Bug et modèle Box

METTRE EN PAGE AVEC DES TABLEAUX
● Créer un tableau, spécifier les propriétés d’un tableau : bordure, centrage, couleur de fond…
● Définir les propriétés des cellules : couleur, alignement du texte

DÉFINIR LA NAVIGATION AVEC LES LIENS HYPERTEXTES
● Lien vers une ancre, vers une page du site, vers une adresse externe, vers une messagerie.

CRÉER L’INTERACTIVITÉ AVEC DES FORMULAIRES
● Créer un formulaire
● Définir les types de champ : texte, multilignes, mot de passe, menu déroulant, case à cocher…
● Envoyer  les informations par mail
● Récupérer les informations

FRAGMENTER LES FENÊTRE AVEC LES CADRES
● Principe de création d’une page de cadres
● Cadres verticaux, horizontaux, combinaisons
● Ajouter des liens dans les cadres
● Maquer les bordures, ajouter un ascenseur