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