Corrige Contrôle continu n°1 - Programmation Web - HTML Note :
Semestre 2
………/20
Exercice 1 : (3 pts)
1. Ajoutez au début de la page (juste sous le titre de premier niveau "votre nom complet") une table
des matièrres yppertexte de ce genre pointant vers des "cibles" uue loon mettra en place au point suivant de
loexercice :
• Mes coordonnées
• Mon curriculum vitae
• Mes hobbies
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Votre Nom Complet</title>
</head>
<body>
<h1>Votre Nom Complet</h1>
<!-- Table des matières -->
<h2>Table des matières</h2>
<ul>
<li><a href="#coordonnees">Mes coordonnées</a></li>
<li><a href="#cv">Mon curriculum vitae</a></li>
<li><a href="#hobbies">Mes hobbies</a></li>
</ul>
<!-- Mes coordonnées -->
<h2 id="coordonnees">Mes coordonnées</h2>
<p>Ici, vous pouvez ajouter vos coordonnées.</p>
<!-- Mon curriculum vitae -->
<h2 id="cv">Mon curriculum vitae</h2>
<p>Ici, vous pouvez ajouter votre curriculum vitae.</p>
<!-- Mes hobbies -->
<h2 id="hobbies">Mes hobbies</h2>
<p>Ici, vous pouvez ajouter vos hobbies.</p>
</body>
</html>
2. Mettez en place les "cibles" (des liens créés au point précédent) juste avant les titres de chapitre,
puis testez ou vos renvois :
<a href= > </a>
Exercice 2 : (4 pts)
Créer un document html contenant des listes numérotées et des listes à puce comme illustré ci-
dessous.
<ol>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ol>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
Exercice 3 : (5 pts)
Créer le tableau suivant en utilisant les propriétés de fusion "colspan" et "rowspan" :
<table border="1">
<tr>
<td rowspan="2">Ligne 1, Colonne 1</td>
<td colspan="2">Ligne 1, Colonnes 2 et 3 fusionnées</td>
<td>Ligne 1, Colonne 4</td>
</tr>
<tr>
<td>Ligne 2, Colonne 2</td>
<td>Ligne 2, Colonne 3</td>
<td rowspan="2">Ligne 2, Colonne 4 fusionnée</td>
</tr>
<tr>
<td colspan="2">Ligne 3, Colonnes 1 et 2 fusionnées</td>
<td>Ligne 3, Colonne 3</td>
<td>Ligne 3, Colonne 4</td>
</tr>
</table>
Exercice 4 :
Créer un formulaire (voir l’exemple ci-dessous) uui 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. (5 pts)
<form action="#" method="post" enctype="multipart/form-data">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required><br><br>
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom" required><br><br>
<label for="email">E-mail :</label>
<input type="email" id="email" name="email" required><br><br>
<label>Sexe :</label>
<input type="radio" id="homme" name="sexe" value="homme" required>
<label for="homme">Homme</label>
<input type="radio" id="femme" name="sexe" value="femme" required>
<label for="femme">Femme</label><br><br>
<label for="photo">Photo (JPEG ou PNG) :</label>
<input type="file" id="photo" name="photo" accept="image/jpeg, image/png" required><br><br>
<label for="pays">Pays :</label>
<select id="pays" name="pays" required>
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="canada">Canada</option>
<!-- Ajoutez d'autres pays selon vos besoins -->
</select><br><br>
<label for="langages">Langages préférés :</label>
<select id="langages" name="langages[]" multiple required>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<!-- Ajoutez d'autres langages selon vos besoins -->
</select><br><br>
<input type="submit" value="Envoyer">
<input type="reset" value="Réinitialiser">
</form>
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. (3 pts)
<form action="#" method="post">
<label for="login">Login :</label>
<input type="text" id="login" name="login" required><br><br>
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password" maxlength="8" required><br><br>
<input type="submit" value="Envoyer">
<input type="reset" value="Réinitialiser">
</form>
