Vous êtes sur la page 1sur 5

Durée : 2h Parcours : MPWIN

Documents autorisés : Développement Web coté Enseignant : Hatem Sandid


Memento CSS client
Date : 11 janvier 2019 Nombre de page(s) : 05 page(s)

Exercice 1 :
On suppose que l'on dispose d'une chaîne de caractères dont le contenu est une succession de textes de
la forme : Texte [url] Texte [url] Texte [url]…

1. Réalisez une fonction Formatter(ch) qui à partir d'une chaîne de la forme Texte [url] produit
une chaîne de caractères dont le contenu est le code html <a href="url">Texte</a>
2. Réalisez une fonction GenereMenu(s) qui à partir d'une telle chaîne construit le code html
d'un menu sous la forme d'une liste <ul class="menu"> dont les éléments <li> ont pour
contenu
<a href="url">texte</a>.

Exemple

var s ="choix 1 [doc/page1.html] choix 2 [doc/page2.html]";

genereMenu(s);

a pour résultat la chaîne de caractères

<ul class="menu">

<li><a href="doc/page1.html">choix 1</a></li>

<li><a href="doc/page2.html">choix 2</a></li>

</ul>

EXERCICE 2 : XML +DTD

Envisager une application dans laquelle les résultats d'un championnat de football doivent être
représentés en format XML. Les différents éléments d'un championnat de football sont : l'année,
la ligue concernée (L1, L2,…), les différentes journées avec leurs numéros (J1, J2,…), les dates
et bien sûr les rencontres avec leurs résultats.

1/5
Pour chaque rencontre, nous voulons être en mesure de représenter les deux équipes
impliquées, quels joueurs ont marqué des buts et le moment du but.

On doit préciser aussi pour chaque rencontre les 3 arbitres, un principale et 2 juges de touches.

Écrivez un document XML et une DTD pour cette application.

Exercice 3 : HTML+DOM+JS

Soit le fichier ex.html

<html>

<head>

<title>Essai DHTML</title>

<script type="text/javascript">

<!-- function ajout(){ }//-->

</script>

</head>

<body onClick="ajout()">

<ul id="Specialite">

<li>MDW</li>

<li>SEM</li>

</ul>

</body>

</html>

1. Sélectionner la liste d'identifiant "Specialite".


2. Créer un nouvel item de liste et lui affecter un texte «DSI».
3. Ajouter ce nouvel élément de liste à la liste des spécialités
4. Ajouter un bouton permettant, par un appel de fonction, de supprimer le dernier élément de la
liste.
2/5
Exercice 4
Soit le contenu HTML ci-dessous,

<html><head></head>

<body>

<div id="contenu">

<h2>Le chocolat</h2>
<p>Le chocolat [ʃɔkɔla][1] est un aliment sucré produit à partir de la fève de
cacao.<img class="illustration" src="chocolat.png" alt="chocolat"/> Celle-ci est
fermentée, torréfiée, broyée jusqu'à former une pâte de cacao liquide dont on extrait
la matière grasse appelée beurre de cacao. Le chocolat est constitué du mélange, dans
des proportions variables, de pâte de cacao, de beurre de cacao et de sucre ; on y
ajoute éventuellement des épices, comme la vanille.</p>

<aside class="encart">
<h3>Recette!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</aside>

<h2>Fèves de cacao</h2>
<p>Consommé initialement sous forme de boisson épicée en Amérique centrale, le
xocoatl, il se démocratise avec la révolution industrielle. Au XXIe siècle, il est
consommé sous forme solide (chocolat noir ou au lait) ou liquide (chocolat chaud).
<img class="illustration" src="cacao.jpg" alt="feves"/> Le chocolat se retrouve dans
de nombreux desserts tels que les confiseries, biscuits, gâteaux, glaces, tartes.
Offrir du chocolat, moulé de différentes manières, est devenu traditionnel lors de
certaines festivités : œufs, lapins et cloches à Pâques, pièces de monnaie pour
Hanoucca et Noël et cœurs pour la Saint-Valentin.</p>

</div>

</body></html>

Ecrivez le CSS nécessaire dans un fichier externe pour obtenir exactement le résultat suivant:
(faites particulièrement attention aux espacements - margin, padding)

3/5
Les Fichiers images sont dans le même dossier que la page HTML :

chocolat.png cacao.jpg

4/5
Exercice 5 Alternance de deux images

1. Créer une page html5 contenant une image.


2. Programmer en JavaScript une alternance entre cette image et une autre, toutes les
deux secondes.
3. Ajouter un bouton et le code JavaScript associé pour arrêter ce défilement.
4. Ajouter un bouton et le code JavaScript associé pour le reprendre.

Ecrire le code (html+js) permettant de réaliser ce qui est demandés ci-dessus.

5/5