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.
