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