Fiche d’exercices pour HTML
Introduction
HTML (HyperText Markup Language) est le langage de balisage utilisé
pour créer des pages web. L’objectif de cette fiche d’exercices est de
vous permettre d’apprendre progressivement à utiliser HTML, en
couvrant tous les aspects essentiels pour devenir compétent dans la
création de sites web de base.
Chaque exercice est conçu pour vous familiariser avec un aspect du
HTML, allant des éléments de base aux concepts avancés. Une fois que
vous aurez terminé cette fiche, vous serez en mesure de programmer en
HTML efficacement.
• Exercices de base
Structure de base d’une page HTML
Exercice : Créez une page HTML simple contenant les éléments
suivants :
Une balise <html>, une balise <head> et une balise <body>.
Ajoutez un titre dans la balise <head> (utilisez la balise <title>).
Le texte dans une page HTML
Exercice : Créez une page avec plusieurs types de texte :
Un titre <h1>, un sous-titre <h2>, un texte normal <p>.
Utilisez une balise <strong> pour mettre en gras du texte et <em> pour
italiser du texte.
Listes
Exercice : Créez une liste ordonnée (<ol>) et une liste non ordonnée
(<ul>) avec au moins trois éléments dans chacune.
Liens hypertexte
Exercice : Ajoutez un lien vers un site web (par exemple, vers
https://www.wikipedia.org) dans une page HTML avec la balise <a>.
Images
Exercice : Ajoutez une image à votre page web avec la balise <img>.
Utilisez un attribut src pour indiquer le chemin de l’image et un attribut
alt pour fournir une description de l’image.
Exercices intermédiaires
Tableaux
Exercice : Créez un tableau avec 3 lignes et 3 colonnes. Utilisez les
balises <table>, <tr>, <td>, et <th>.
Formulaires
Exercice : Créez un formulaire HTML simple avec :
Un champ de texte (<input type= »text »>).
Un bouton de soumission (<input type= »submit »>).
Un champ de sélection (<select> avec <option>).
Id et classes
Exercice : Créez une page HTML où vous appliquez des styles différents
à deux paragraphes en utilisant des identifiants (id) et des classes
(class).
Métadonnées
Exercice : Ajoutez des métadonnées à la page HTML :
Un meta pour le charset (<meta charset= »UTF-8 »>).
Un meta pour la description de la page (<meta name= »description »
content= »Une description de ma page »>).
Commentaires
Exercice : Ajoutez des commentaires dans votre code HTML pour
expliquer le contenu de votre page.
Exercices avancés
Tableaux de mise en page
Exercice : Utilisez un tableau pour créer une mise en page de base avec
une en-tête, un corps et un pied de page.
Insertion de vidéos
Exercice : Intégrez une vidéo dans une page HTML avec la balise
<video>. Ajoutez également un attribut controls pour permettre à
l’utilisateur de contrôler la lecture.
Embedding de contenu externe
Exercice : Intégrez une carte Google Maps ou un tweet à l’aide de la
balise <iframe>.
Formulaire avec validation
Exercice : Créez un formulaire avec validation HTML5 (par exemple, un
champ email qui ne doit pas être vide et un champ texte pour le nom qui
doit avoir un minimum de 3 caractères).
Tableaux responsives
Exercice : Créez un tableau qui s’adapte à la taille de l’écran (tableau
responsive) en utilisant des règles CSS de base.
Exercices avec CSS et intégration de styles
Application de couleurs et de polices
Exercice : Appliquez une couleur d’arrière-plan à la page et définissez
une police différente pour tous les titres.
Mise en page avec Flexbox
Exercice : Créez une mise en page de base en utilisant Flexbox pour
aligner les éléments horizontalement et verticalement dans le <body>.
Bordures et marges
Exercice : Ajoutez une bordure autour d’un paragraphe et appliquez des
marges et des espacements à différents éléments.
Styles au survol (Hover)
Exercice : Appliquez un effet de changement de couleur de fond à un lien
lorsque l’utilisateur passe la souris dessus.
Création d’un menu de navigation
Exercice : Créez un menu de navigation horizontal avec des liens (utilisez
des listes non ordonnées <ul> et des liens <a>).
Exercices pratiques
Créer une page d’accueil
Exercice : Créez une page d’accueil pour un site fictif avec un en-tête, un
menu de navigation, une section de contenu et un pied de page.
Créer une page de contact
Exercice : Créez une page de contact avec un formulaire qui permet de
saisir un nom, un email, un message, et un bouton pour soumettre le
formulaire.
Mise en page d’un article de blog
Exercice : Créez un modèle simple pour un article de blog comprenant
un titre, une image en tête, un résumé, et une section pour le texte de
l’article.
Ajouter une section FAQ
Exercice : Créez une section FAQ (questions fréquemment posées) en
utilisant une liste et un accordéon (où les réponses apparaissent
lorsqu’on clique sur une question).
Page d’annonce produit
Exercice : Créez une page HTML pour un produit, comprenant une
image, une description, un prix, et un bouton « Ajouter au panier ».
Exercices de structure avancée
Balises sémantiques
Exercice : Utilisez des balises sémantiques comme <header>, <footer>,
<section>, <article>, et <nav> pour structurer votre page.
Créer une page avec plusieurs sections
Exercice : Créez une page avec plusieurs sections de contenu, chacune
ayant son propre en-tête, et liez ces sections dans le menu de
navigation.
Responsive design
Exercice : Utilisez les media queries pour rendre votre page HTML
responsive. La page doit s’adapter aux écrans de différentes tailles
(mobile, tablette, bureau).
Animation simple en CSS
Exercice : Créez une animation CSS qui fait apparaître un élément
progressivement lorsqu’on survole un bouton.
Accessibilité Web
Exercice : Assurez-vous que votre page est accessible en ajoutant des
éléments comme des attributs alt pour les images et des rôles ARIA pour
les éléments interactifs.
Exercices de révision
Projet de page personnelle
Exercice : Créez une page personnelle contenant des informations de
base à votre sujet (photo, bio, hobbies, liens vers des réseaux sociaux).
Création d’une page portfolio
Exercice : Créez une page portfolio pour présenter vos projets ou
travaux. Ajoutez des liens vers des projets externes.
Ajouter un slider d’images
Exercice : Créez un slider d’images simple en HTML et CSS (sans
JavaScript).
Créer une galerie d’images
Exercice : Créez une galerie d’images en utilisant des balises <figure>,
<figcaption>, et en affichant plusieurs images sous forme de grille.
Navigation à plusieurs niveaux
Exercice : Créez un menu de navigation à plusieurs niveaux, par
exemple, un menu déroulant avec des sous-menus.
Exercices de consolidation
Optimisation pour le référencement (SEO)
Exercice : Ajoutez des balises pour améliorer le référencement de votre
page (par exemple, <meta> pour le SEO, titres et descriptions
appropriés).
Créer un formulaire de connexion
Exercice : Créez un formulaire de connexion avec des champs pour le
nom d’utilisateur et le mot de passe.
Création d’une page de politique de confidentialité
Exercice : Créez une page HTML pour une politique de confidentialité
d’un site fictif.
Préparation d’une page pour l’intégration CMS
Exercice : Créez une page HTML simple en vue de l’intégration dans un
CMS comme WordPress (utilisez des balises et des structures qui
pourraient être adaptées pour un template).
Créer une page d’erreur 404
Exercice : Créez une page d’erreur 404 personnalisée, avec un message
indiquant que la page demandée n’existe pas.
