0% ont trouvé ce document utile (0 vote)
5 vues2 pages

TP1 HTML

Le document présente un TP de programmation web comportant trois exercices. L'exercice 1 demande la création d'une page HTML avec divers éléments tels que des en-têtes, des paragraphes, des liens, des images et une structure de page. Les exercices suivants incluent la création de tableaux, de listes, de formulaires, ainsi que l'intégration de médias comme des fichiers audio et des vidéos.

Transféré par

zdhudgdxh
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
5 vues2 pages

TP1 HTML

Le document présente un TP de programmation web comportant trois exercices. L'exercice 1 demande la création d'une page HTML avec divers éléments tels que des en-têtes, des paragraphes, des liens, des images et une structure de page. Les exercices suivants incluent la création de tableaux, de listes, de formulaires, ainsi que l'intégration de médias comme des fichiers audio et des vidéos.

Transféré par

zdhudgdxh
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

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:

Vous aimerez peut-être aussi