HTML5 : les fondamentaux

Identifier les éléments qui constituent une page Web
• Reconnaître les différents langages dans une page Web : le HTML, le CSS, le JavaScript
• Distinguer les éléments constitutifs d'une page Web : balises de titre, liens, images, feuilles de style
➔ Étude de cas : analyse de sites Web et du code associé

Choisir les outils pour analyser et écrire du code
• Identifier les différents éditeurs HTML, WYSIWYG et les outils en ligne
• Installer un outil d'analyse et l'expérimenter sur un site grand public
➔ Exercice : prise en main d'un outil de code

Organiser les fichiers d'un site Web
• Nommer et ranger les fichiers d'un site
• Assimiler les règles de nomenclature
• Intégrer les bonnes pratiques pour agencer les éléments d'un site : images, pages, feuilles de style, polices…
➔ Quiz : validation des bonnes pratiques

Réaliser ou modifier des pages Web
Créer le code pour structurer une page Web
• Créer un fichier HTML dans l'éditeur, le nommer et l'enregistrer
• Se repérer dans le fichier HTML en identifiant les balises structurelles de la page : doctype, html, head, body, title, meta
Décrypter et coder : les balises les plus courantes
• Identifier les nouvelles balises HTML5 et leur usage
• Hiérarchiser le texte avec les balises de titre et les paragraphes
• Mettre du texte en gras et en italique
• Créer des listes à puce et numérotées
➔ Exercice : coder une page Web simple contenant les balises les plus courantes

Ajouter de l'interactivité avec les liens hypertextes
• Créer des liens absolus vers des pages externes
• Organiser les fichiers d'un site
• Créer des liens relatifs vers d'autres pages et fichiers du site
• Créer des liens vers une adresse mail
• Créer des liens vers des ancres
➔ Jeu pédagogique sur la nomenclature des liens et les chemins relatifs

Afficher des images et les habiller avec du texte
• Comprendre le principe de l'affichage des images
• Insérer la balise img et son attribut src pour afficher ses images
• Ajouter l'attribut alt pour rendre l'image accessible
➔ Exercice : ajouter des images dans une page Web

Créer des tableaux pour afficher des données ou modifier une newsletter
• Assembler les balises table, tr, td, th pour créer un tableau de données
➔ Étude de cas : visualiser le code d'une newsletter

S'initier au langage CSS
Mettre en place une feuille de style
• Styliser le texte (police, taille, couleur)
• Ajouter un arrière-plan
• Habiller une image avec du texte
• Créer une feuille de style externe
➔ Exercice : habiller graphiquement une page Web

Mettre en ligne des contenus Web
• Comprendre les principes de mise en ligne : upload, download, client, hôte, URL
• Utiliser un outil de FTP
• Tester et valider son contenu dans un navigateur
➔ Exercice : mise en ligne de pages Web