OFPPT

Office de la Formation Professionnelle

et de la Promotion du Travail

Contrôle Continu N°1

2020-2021
Direction Régionale centre sud
Filière : TDI 2 Durée : 2h00
Niveau : TS Barème : 20 points
Module : Application Web Coté Client Variante N°2

NB : Enregistrer Votre travail dans un dossier sous Nom-prenom et le rendre compressé.

Dans votre dossier créer :
- Un dossier images qui contient les images.
- Un dossier styles qui contient les feuilles de styles.
- Numéroter vos réponses en utilisant un commentaire
- Remettre votre travail sous forme de zip ou rar
NB : Le seul éditeur de code autorisé est le bloc Note de Windows.

1) Ecrire le code HTML pour définir la structure du document HTML index.html sachant que :
a. Votre site contient les dossiers ci-dessus. 1pt
b. Le titre de la page est " Contrôle 1". 1pt
c. Le lien vers le fichier de style est css.css. 1pt
d. La page contient le tableau suivant : 4pts

1
2) Ajouter le code CSS dans le fichier css.css pour :
a. Encadrer le tableau ci-dessus. 1pt
b. Fusionner les cellules comme indiqué ci-dessus. 2pt
c. Appliquer les styles du tableau comme indiqué. 1pt
Exercice 2 :
Soit le document page1. Html qui contient le code HTML suivant :

<div id="div1">
<p class="p">paragraphe 1<span id="sp1"> div1</span></p>
<p>paragraphe 2<span> div2</span></p>
<p class="p" id="p3">paragraphe 3<span> div3</span></p>
<span> div4</span>
</div>
<p id="p4"> >paragraphe 4</p>
< p >paragraphe 5</p>
<p class="p1" >paragraphe 6</p>
<a href="http://www.ofppt.ma">lien vers la site de ofppt</a>

NB : Ne pas apporter des modifications au code HTML

1) Créer un fichier style style1.css et ajouter le lien vers cette feuille dans le document
page1.html. 2pts.
2) Modifier la couleur des éléments qui ont les textes (div1 et paragraphe 3,
paragraphe4) en couleur rouge 2pt.
3) Modifier la couleur des éléments qui ont des (paragraphe1, paragraphe 3) en couleur
verte. 1pt
4) Modifier le remplissage en couleur du paragraphe4 en couleur bleu. 2pt
5) Modifier le remplissage en couleur #CC57B5 de l’élément html qui a l’attribut
href=http://www.ofppt.ma . 1pt
6) En survolant la souris sur le div4 sa couleur se change en jaune. 1pt
7) Changer la couleur du premier ligne de tous les paragraphes en rouge. 1pt

Bonne chance