HTML - CSS
Informations générales
Logiciel
HTML - CSS
Référence du Module
IN-WE-DEV-HTML-001
Durée
4,0 Jour(s)
Objectifs
- Concevoir et développer des applications Web en HTML et CSS
- Rendre plus attractives des pages Web en utilisant CSS
- Réaliser un site Web " responsive "
Formule
Présentiel ou distanciel
Public
- Toute personne souhaitant apprendre à développer des applications Web en HTML
Prérequis
- Avoir les connaissances de base du Web
Programme
- Préparer l'environnement de développement
- Comprendre ce qu’est le « World Wide Web » ? - Clients et serveurs web
- Comprendre les Adresses IP et la résolution des noms - Serveurs et ports
- Gérer le client, le serveur et l’éditeur sur la machine de développement
- Créer un premier fichier « index.html »
- Vérifier le fonctionnement via le navigateur web
- Réaliser un site web fondamental
- Définir HTML - CSS et langages de programmation
- Modifier le fichier « index.html »
- Intégrer des titres et sous-titres dans le code HTML
- Structurer le contenu « texte » en paragraphes dans le code HTML
- Ajouter des commentaires - des listes dans le code HTML
- Créer un dossier spécifique pour les images
- Différencier images bitmap et images vectorielles
- Vérifier le compatibilité avec les navigateurs web
- Différencier chemins absolus et chemins relatifs
- Intégrer des images dans le code HTML
- Modifier la taille et la résolution des images avec « Gimp »
- Rogner une image selon une zone de sélection avec « Gimp »
- Vérifier la compatibilité des « codecs audio » avec les navigateurs
- Créer un dossier spécifique pour les fichiers audio
- Intégrer des fichiers audio dans le code HTML
- Analyser les « attributs » disponibles avec la balise <audio>
- Vérifier la compatibilité des « codecs vidéo » avec les navigateurs
- Créer un dossier spécifique pour les fichiers vidéo
- Intégrer des fichiers vidéo dans le code HTML
- Analyser les « attributs » disponibles avec la balise < video >
- Intégrer des hyperliens dans le code HTML
- Créer des pages supplémentaires pour notre site
- Accéder aux différentes pages via leur URL
- Créer un menu de navigation dans le code HTML
- Gérer le style avec CSS
- Découvrir les couleurs primaires et le système RGB
- Construire une page web = HTML + CSS
- Ajouter du code CSS à l'intérieur d'une balise HTML - du document HTML
- Créer un dossier spécifique pour les fichiers CSS
- Utiliser un fichier « global.css » pour le style global
- Créer un lien vers le fichier global.css dans le code HTML
- Utiliser les variables CSS et de noms de couleurs
- Créer un dossier spécifique pour les fichiers de polices de caractères
- Ajouter des polices de caractères dans le code CSS
- Gérer la couleur de texte et la priorité entre les polices dans le code CSS
- Compléter le style des titres <h1> à <h2> dans le code CSS
- Ajouter des classes dans le code CSS
- Modifier la balise <ol> - <ul> dans le code HTML
- Ajuster les balises <audio> et <video> dans le code CSS
- Utiliser le modèle de Boîtes CSS
- Découvrir HTML5 et les éléments sémantiques
- Calculer la taille des boîtes standards - Modèle alternatif de boîte CSS
- Modifier les propriétés CSS « max-width » et « float »
- Gérer la partie <header> dans le code HTML - dans le code CSS
- Gérer un formulaire de contact
- Gérer du code source avec GIT
- Réaliser un site web « responsive »
- Créer une mise en page moderne avec le module CSS « FlexBox »
- Adapter le code CSS pour la démo « Flex Direction » - « Justify Content »
- - « Align Items » - « Flex Grow » - « Align Self »
- Réorganiser les blocs principaux avec FlexBox
- Gérer le CSS adaptative avec les Media Queries
- Démontrer les breakpoints avec les Media Queries
- Gérer le bloc <header> - central - <aside> avec les Media Queries
- Gérer les polices de caractères - des images avec les Media Queries
- Adapter le code HTML du formulaire de contact
- Gérer le formulaire de contact avec les Media Queries
- Gérer du code avec GIT
Prochaines sessions
