Exercice

 Exercices d’application en html pour débutant

Travail à faire

Exercice 1 : Création d'une page simple

Objectif : Créer une page HTML contenant un titre, un paragraphe, une image et un lien.

1. Créer une page HTML avec les éléments suivants :

• Un titre (balise <title> et <h1>)

• Un paragraphe <p> avec du texte

• Une image (utilise une image en ligne ou une image locale)

• Un lien qui pointe vers une autre page (utilise la balise <a>)

Exercice 2 : Liste ordonnée et non ordonnée

Objectif : Utiliser les listes en HTML.

1. Créer une page avec :

• Une liste ordonnée (balise <ol>) de tes trois livres préférés.

• Une liste non ordonnée (balise <ul>) de tes hobbies.

Exercice 3 : Table de données

Objectif : Créer une table avec des données.

1. Créer une table <table> avec 3 colonnes et 4 lignes :

• Première ligne : titres des colonnes (nom, âge, ville)

• Remplis les 3 autres lignes avec des données fictives.

Exercice 4 : Formulaire de contact

Objectif : Créer un formulaire HTML.

1. Créer un formulaire avec les éléments suivants :

• Un champ texte pour le nom (balise <input>)

• Un champ pour l'email (balise <input> avec type="email")

• Une zone de texte pour un message (balise <textarea>)

• Un bouton d'envoi (balise <button>)

Exercice 5 : Liens et images

Objectif : Créer un lien avec une image.

1. Créer un lien <a> qui pointe vers une autre page ou site (par exemple, un site d'actualités).

2. À l'intérieur de ce lien, insère une image (balise <img>), de sorte qu'en cliquant sur l'image, l'utilisateur soit redirigé vers le lien.

Exercice 6 : Structuration d'une page

Objectif : Utiliser les balises de structure HTML.

1. Créer une page HTML avec :

• Un en-tête <header> contenant le titre de la page.

• Un bloc principal <main> avec un paragraphe.

• Un pied de page <footer> avec des informations de contact (email ou téléphone).

Exercice 7 : Stylisation avec des classes

Objectif : Appliquer des classes à des éléments HTML.

1. Créer une page HTML contenant :

• Un titre <h1> avec une classe titre-principal.

• Deux paragraphes <p>, chacun ayant une classe différente (texte-gros et texte-petit).

• Utilise un fichier CSS externe pour styliser les classes (par exemple, changer la taille de la police).

Exercice 8 : Encadré d'article

Objectif : Créer un encadré avec du texte.

1. Créer une section contenant un article <article>, avec :

• Un titre <h2> pour l'article.

• Un texte descriptif à l'intérieur d'un paragraphe <p>.

• Utilise la balise <aside> pour ajouter une note ou une citation dans un encadré à côté de l'article.