HTML5 & CSS3

Comprendre l'architecture

• Historique
• Elaboration des spécifications
• Evolution du HTML
• Evolution des CSS
• Les conseils sur la conception des pages Web
• Evolution des navigateurs
• Outils de développement
• Compatibilité des navigateurs
• Séparation du contenu et de la mise en forme
• Structure sémantique
• Optimisation du code et organisation des fichiers
• Validation du code

Structurer

• Balises et contenus
• Attributs
• Syntaxe
• Imbrication des éléments
• Commentaires
• Structure générale des pages web
• Déclaration doctype
• Elément "html"
• Elément "head"
• Elément "body"

Utiliser les conteneurs sémantiques

• Elément "div"
• Elément "span"
• Elément "header"
• Elément "footer"
• Elément "aside"
• Elément "nav"
• Elément "main"
• Elément "section"
• Elément "article"

Utiliser les conteneurs de texte

• Langue et direction du texte
• Titres
• Paragraphes
• Citations
• Listes
• Adresses
• Texte préformaté
• Lignes horizontales

Appliquer une mise en forme sémantique au texte

• Insertion de caractères spéciaux
• Emphase forte
• Emphase simple
• Gras et italique
• Indice et exposant
• Soulignement
• Barré
• Taille des caractères
• Titres d’œuvres et citations courtes
• Insertions et suppressions
• Retour à la ligne
• Autres mises en forme sémantiques
• Propriétés de mise en forme

Créer des interactions

• Affichage des détails
• Utilisation d'une boîte de dialogue

Créer des liens

• Insertion de liens pour lier les pages
• Structure des liens
• Liens vers des pages
• Liens internes
• Contexte d’ouverture du lien
• Relations des liens
• Liens vers les messageries
• Liens de téléchargement
• Liens en image

Créer un tableau

• Structure
• Lignes
• Cellules
• Fusion des cellules
• Titre
• Groupes de colonnes
• Regroupement des colonnes
• Ciblage de colonnes
• Tableaux structurés

Gérer les images

• Formats de compression
• Elément "img"
• Elément "figure"

Réaliser un formulaire de saisie

• Structure
• Champs de texte
• Listes de valeurs
• Boutons radio à choix unique
• Cases à cocher à choix multiple
• Elément "input"
• Aides à la saisie
• Boutons d’action

Gérer le multimédia

• Formats et les codecs
• Insertion d’une vidéo
• Insertion d’un fichier audio

Gérer les styles

• Rôle des CSS
• Styles intégrés dans un élément HTML
• Styles définis dans la page
• Imbrication des schémas
• Styles définis dans un fichier .css
• Styles importés

Utiliser Microdata

• Etat des lieux du Web sémantique
• Objectif de Microdata
• Schéma pour les personnes

Utiliser les feuilles de style

• Structure
• Unités de mesure
• Notation des couleurs
• Commentaires
• Sélecteurs
• Application des styles

Modéliser les polices de caractères

• Module CSS3 pour les polices de caractères
• Polices de caractères
• Taille des caractères
• Mise en forme des caractères
• Syntaxe raccourcie

Modéliser le texte et ses conteneurs

• Application des styles
• Couleur du texte
• Décorations
• Mise en forme du texte
• Titres, les paragraphes et citations
• Listes
• Tableaux
• Formulaires

Modéliser les boîtes

• Concept du modèle de boîte
• Affichages
• Marges externes
• Bordures
• Remplissages internes
• Largeur et hauteur
• Arrière-plans
• Coins arrondis
• Ombres portées

Mettre en page à l'aide des boîtes

• Objectifs
• Positionnement
• Flottement
• Superposition
• Mise en page en affichage tableau
• Débordement
• Visibilité
• Mise en page flexible
• Mise en page en grille

Gérer le Responsive Web Design

• Développement responsive
• Requêtes de média
• Taille des écrans

Utiliser les modules d’animation

• Modules CSS
• Transformations
• Transitions
• Animations

Utiliser des modules CSS pour les graphistes

• Modules en devenir
• Masques
• Habillage du texte

Créer des feuilles de style pour l’impression

• Impression des pages web
• Feuilles de style spécifiques
• Propriétés globales des pages
• Polices de caractères
• Eléments non imprimés
• Ruptures de lecture
• Liens hypertextes