HTML5 & CSS
Objectif :
– Connaitre le principe du codage des pages webs HTML
– Réaliser des pages webs sans outils logiciel WYSIWYG
– Connaitre la mise en page CSS pour personnaliser des sites existants (blog)
– Connaitre le langage de mise en page pour les applications ou sites internet
Pré-requis :
– pratique du web et de la bureautique
– bonnes connaissances informatiques
Programme :
Introduction au langage HTML
• Place du HTML dans l’environnement web
• Différencier le rôle d’HTML et de CSS
• Comprendre le principe des balises HTML
• Comprendre la Structure d’un document HTML
• Comprendre le fonctionnement des attributs dans les balises HTML
• Les documents HTML Minimum
Compléter l’en-tête d’un document HTML
• Utiliser les balises Metas importantes
• Utiliser la balise titre
Intégrer du texte
• Intégrer du Texte simple
• Ajouter des Titres et des paragraphes
• Ajouter des listes à puces ou numérotées
• Gérer les caractères spéciaux et l’encodage des caractères
Créer des liens hypertextes
• Utiliser la balise “a” pour intégrer des liens hypertextes
• Gérer les URL cibles (pages d’un même site, pages d’un autre site,…)
• Utiliser les Ancres nommées pour créer un lien qui renvoie à un endroit précis d’une page web
• Utiliser l’attribut target pour gérer l’ouverture de nouveaux onglets
Intégrer des images et gérer des arrière-plans
• Les formats d’images pour le web
• Intégrer une image avec la balise img
• Combiner images et liens hypertextes
Utiliser des tableaux
• Balise table, tr, td
• Imbrication des tableaux
• Groupement de colonnes
• Groupement de lignes
Utiliser des formulaires
• Propriétés du formulaire
• Intégrer différents types de champs de saisie
• Mettre en place une vérification des formulaires
Les feuilles de styles
• La syntaxe de base : sélecteur, propriété, valeur
• Utiliser les style “inline”, style “interne” et feuille de style externe
• L’application d’un style dans une page Html
• Les éléments class et id
Gérer les blocs de mise en page
• Utiliser les balises Div et Span
• Gérer les tailles, marges, bordures et arrères plans de blocs
• Différencier les affichages inline et block
• Gestion des dépassements avec overflow
• Comprendre les blocs « flottants » et le flux (left, right)
• Placer les images à gauche et à droite
• Créer des mises en page à plusieurs colonnes
• Utiliser des gabarits et des grilles html/css
• Utiliser les balises de blocs sémantiques (HTML5)
Utiliser des sélecteurs CSS “avancés”
• Le sélecteur :first-child
• Le sélecteur d’enfants
• Le sélecteur d’adjacence
• Le sélecteur d’attribut
• Quelques sélecteurs CSS3
Les spécificités de HTML5
• Intégrer des vidéos et des sons avec les balises médias
• Améliorer la sémantique avec les micro-formats
• Appréhender le potentiel de la balise canvas
Responsive design et périphériques mobiles
• Utiliser les medias queries pour adapter des mises en pages en fonction des types et tailles de périphériques
• Utiliser une grille responsive
• Résolution d’images pour écran retina
• Comprendre et configurer le Viewport
Utiliser des ressources trouvées sur le web
• Personnaliser un template HTML/CSS
• Intégrer des morceaux de codes (menu, snippet,…)
• Insérer des scripts javascript
• Utiliser des framework
Autres
• Préconisations pour un bon référencement
• Faire ses choix techniques en fonction des problématique de compatibilité de navigateurs
• Utiliser des codes HTML fournis par des sites webs (youtube,…)
• Respecter les standards / Valider son code
Durée : 3 jours
