Université de Yaoundé 1 University of Yaounde 1
******* *******
Ecole Normale Supérieure Higher Teacher Training College
******* *******
Département D’Informatique Department Of Computer Sciences
INF2241 : Développement Web et Mobile
TD 1 : Généralités sur le Web et HTML
2023-2024
Browndon KUIMO
PARTIE 1 : COMPREHENSION DU COURS
Exercice 1 : Définir les concepts suivants
1. Internet 6. HTML 12. Entité HTML
2. Framework 7. WWW 13. Lien hypertexte
3. DataCenter 8. Balise 14. Iframe
4. Responsive Web 9. Expression régulière 15. Attribut HTML
Design 10. URL
5. Architecture MVC 11. Protocole HTTP
Exercice 2 : Questions de cours
1. Expliquer le rôle de l’internet dans le fonctionnement du World Wide Web
2. Présenter les composants essentiels d’une URL et leurs rôles
3. Décrivez brièvement le fonctionnement du protocole HTTP
4. Expliquez en quoi consiste le modèle client-serveur dans le contexte du Web
5. Présenter quelques bonnes pratiques de sécurité à prendre en compte lors du développement d’une
application web
6. Expliquer comment le Web a évolué depuis son invention et présenter les tendances actuelles en
matière de développement web
7. A quoi sert la déclaration DOCTYPE ?
8. Comment peut-on valider un document html ?
9. Comment définir le jeu de caractères utilisé dans le document ?
10. Quel est le rôle des balises sémantiques ?
PARTIE 2 : EXERCICES PRATIQUES
Exercice 1 : Les listes
Créer un document html contenant des listes numérotées et des listes à puce comme illustré ci-contre.
ENS YDE // DITE // INFO L2 // Semestre 2 // INFO2241 // TD N°1 // 2023-2024 // Browndon KUIMO || Page 1 sur 4
Exercice 2 : Balises sémantiques
Réaliser la page ci-dessous en utilisant les balises sémantiques du HTML5
Exercice 3 : Les liens relatifs
L'objectif de cet exercice est de construire l'arborescence suivante en utilisant les liens relatifs :
1. Créer les différents dossiers et fichiers de cette
arborescence.
2. Utiliser les liens relatifs afin de réaliser ce qui suit :
a. La page accueil.html dans le dossier racine,
contenant un sommaire vers les différentes pages à
savoir list-produits et qui-sommes-nous.
b. La page "qui-somme-nous.html" contient une
description de l'équipe et deux liens : un lien vers
la page "list-produits" et un lien vers la page
contact
c. La page "list-produits" affiche des liens vers les 3
produits
d. Les pages "produit-1.html", "produit-2.html",
"produit-3.html" contiennent les détails du produit
et un lien qui renvoie vers la page "list-produits".
e. La page "contact.html" contient un formulaire simple composé d'un champ email, un champ
textarea pour saisir un message et un bouton pour envoyer les données. De plus, elle doit
contenir un lien vers la page d’accueil.
ENS YDE // DITE // INFO L2 // Semestre 2 // INFO2241 // TD N°1 // 2023-2024 // Browndon KUIMO || Page 2 sur 4
Exercice 4 : Les ancres
Dans cet exercice on va attribuer des ancres à quelques endroits de la page et par la suite on va créer des liens qui
pointent vers ces ancres afin de faciliter la navigation de l'utilisateur sur la page.
Pour cela, il faut créer une page composée de 6 chapitres précédés de 6 liens. Chaque lien envoie vers un chapitre
précis, pour simplifier on va considérer que chaque chapitre est composé d'un titre et d'un paragraphe. (Voir l’exemple
ci-dessous)
Exercice 5 : Tableau HTML
Utiliser les éléments caption, thead, tbody, tfoot et autres pour afficher les données dans un tableau
structuré de la façon suivante :
Exercice 6 : Tableau HTML
Créer les tableaux suivants en utilisant les propriétés de fusion "colspan" et "rowspan" :
1. Cas 1
ENS YDE // DITE // INFO L2 // Semestre 2 // INFO2241 // TD N°1 // 2023-2024 // Browndon KUIMO || Page 3 sur 4
2. Cas 2
Exercice 7 : Formulaire HTML
Créez un formulaire contenant un champ de texte pour saisir un login un champ password pour le mot de
passe de huit caractères au maximum, chacun étant précédé d’un label explicatif. Ajoutez un bouton d’envoi
et un bouton de réinitialisation.
Exercice 8 : Formulaire HTML
Créer un formulaire (voir l’exemple ci-dessous) qui contient les éléments suivants :
1. Champs de saisie de nom, prénom et e-mail.
2. Deux boutons radio pour le choix du sexe.
3. Un champ destiné au transfert de fichier photo dont le format est restreint aux types JPEG ou PNG.
4. Une liste de choix pour les pays.
5. Une liste de choix multiple pour les langages préférés.
6. Des cases à cocher pour choisir les domaines d'activités.
Exercice 9 : Expression régulière avec l’attribut pattern
Créer un formulaire en utilisant des inputs et des attributs HTML5 qui permettent d'effectuer les
vérifications suivantes :
1. Les champs sont obligatoires
2. L’email doit se terminer par "ensyde.cm"
3. Le password doit contenir entre 6 et 8 caractères dont au moins un est impérativement un chiffre.
4. Attribuer en css une couleur de fond verte aux champs correctement remplis
ENS YDE // DITE // INFO L2 // Semestre 2 // INFO2241 // TD N°1 // 2023-2024 // Browndon KUIMO || Page 4 sur 4
