TP1 : PROGRAMMATION WEB 1
Filière : MIP-I3
Exercice 1
1. Créez un document dans votre éditeur de code et enregistrez-le avec l’extension .html.
2. Spécifiez le type du document par une déclaration au début de votre code HTML.
3. Insérez un commentaire dans votre document HTML.
4. Donnez un titre à votre page web.
5. Créez trois en-têtes.
6. Créez deux paragraphes.
7. Créez un lien vers ”[Link]
8. Insérez une image dans votre page.
9. Ajoutez des lignes horizontales pour séparer les deux paragraphes.
10. Définissez un saut de ligne.
11. Spécifiez que le texte du premier paragraphe doit être en gras et en italique.
12. Spécifiez l’URL de la page vers laquelle le lien redirige l’utilisateur.
13. Indiquez le fichier source, le texte alternatif, ainsi que la largeur et la hauteur de l’image.
14. Le fichier source doit être défini avec un lien absolu et un lien relatif.
15. Spécifiez que la couleur du texte dans un paragraphe doit être bleue.
16. Spécifiez que la couleur de la bordure du deuxième paragraphe doit être rose.
17. Spécifiez que la couleur de l’arrière-plan de toute la page doit être verte.
18. Définissez une barre de navigation, un article, un en-tête (header) et un pied de page (footer) dans votre
page HTML.
Exercice 2
1. Créez un tableau contenant trois colonnes et cinq lignes.
2. Ajoutez une bordure au tableau en utilisant une méthode interne pour définir les propriétés de bordure
CSS.
3. Ajoutez une légende (caption) au tableau.
4. Créez une liste ordonnée et une liste non ordonnée, chacune contenant 5 éléments.
5. Créez des éléments HTML appartenant à la même classe et formatez-les selon leur classe.
6. Créez un en-tête de niveau H1 et spécifiez son style à l’aide de son identifiant (ID).
7. Spécifiez que votre page web doit être responsive par rapport à la taille de la fenêtre du navigateur.
8. Ajoutez des images et du texte responsifs.
9. Définissez des images responsives pour différentes tailles de fenêtre du navigateur.
1
10. Créez un formulaire dans votre page web contenant :
• Un label pour étiqueter les champs de saisie du formulaire.
• Un champ de saisie de type texte.
• Un champ de saisie de type numérique.
• Un champ de saisie de type mot de passe.
• Des boutons radio.
• Des cases à cocher.
• Un champ de saisie de type liste.
• Un bouton pour soumettre les données du formulaire.
• Un bouton pour réinitialiser tous les champs de saisie du formulaire.
11. Insérez un fichier audio dans votre page web.
12. Intégrez une vidéo YouTube dans votre page.
Exercice 3
Ecrire le code HTML permettant de définir les tableaux suivants:
• Premier cas:
• Deuxième cas:
• Troisième cas: