Devoir de contrôle n°3 (série C) : page d'un produit, galerie d'images, texte surligné

Exercice 1 : la page d'un produit (7 pts)

Une boutique en ligne veut la page « produit.html » d'une chéchia :

• le titre de l'onglet est « Chéchia rouge » ;
• un titre de niveau 1 « Chéchia rouge », une image « chechia.jpg » avec un texte alternatif, et un paragraphe de description ;
• un tableau de deux colonnes (Caractéristique, Valeur) avec les lignes Couleur / Rouge et Prix / 25 DT ;
• un lien « Ajouter au panier » vers « panier.html ».

• 1) Écrire le code HTML de la page (3 pts).
• 2) Écrire le CSS : le prix est mis en évidence par une classe prix (texte rouge et gras) ; le lien a l'aspect d'un bouton (fond vert, texte blanc, marge intérieure de 8 pixels) (2 pts).
• 3) Partie programmation : écrire une fonction ligne(carac, valeur) qui retourne une ligne du tableau, puis un programme qui lit n puis n couples et affiche les lignes (2 pts).

Pour le couple Taille / 57 : <tr><td>Taille</td><td>57</td></tr>

Exercice 2 : une galerie d'images (6 pts)

On veut une galerie de photos du lycée : toutes les images ont la même largeur, une bordure grise et un petit espace autour.

• 1) Écrire le CSS de la classe galerie appliquée aux images : largeur 200 pixels, bordure grise de 1 pixel, marge de 6 pixels et une marge intérieure de 4 pixels (2 pts).
• 2) Écrire une fonction image(fichier, texte) qui retourne la balise de l'image avec la classe galerie, par exemple <img src="cour.jpg" alt="La cour" class="galerie"> (2 pts).
• 3) Écrire le programme qui lit n puis n couples (fichier, texte) et affiche la balise <figure id="photos">, les n images, une par ligne, puis </figure> (2 pts).

Exercice 3 : surligner des mots (7 pts)

Dans un petit éditeur, l'utilisateur entoure de deux étoiles les mots à surligner : « le *bac* est en *juin* ». Le programme doit produire le HTML correspondant : « le <mark>bac</mark> est en <mark>juin</mark> ».

• 1) Expliquer pourquoi il faut savoir si l'étoile rencontrée ouvre ou ferme un passage surligné (1 pt).
• 2) Écrire la fonction surligne(ch) qui remplace chaque étoile par <mark> ou </mark> en alternance, sans utiliser replace (4 pts).
• 3) Écrire le programme qui lit une phrase ; si elle contient un nombre impair d'étoiles, il affiche « Étoiles mal fermées », sinon il affiche le HTML (2 pts).