RattTechWeb 2014-2015

Université Ibn Zohr A.U.
2014-2015
Faculté des Sciences SMI3
Département d’Informatique
Rattrapage Technologies du Web

Exercice 1 (2 pts)
Soit le code HTML suivant: Et soit la feuille de style
suivante (style.css):
<html>
<head><title>Exercice</title> body {color: blue; }
<style type="text/css">@import url(style.css); h1 {color: green; }
</style>
.h1 {color: blue; }
</head>
<body>
li+li {color: yellow;}
<h1>texte [1]</h1> ol[start] li {color: purple;}
<ul> ul {color: black; }
<li>texte [2]</li> h1+ul>li+li {color: orange;}
<li>texte [3]</li> h1+ul>li {color: red; }
</ul> h1+ul {color: blue; }
<h2>texte [4]</h2>
<ul>
<li>texte [5]</li> Exercice 3 (5 pts)
<li class="h1">texte [6]
Indiquez pour chaque nombre
<ol start="2"> entre crochet la couleur dans
<li>texte [7]</li> laquelle il s’affiche. On considère l’aperçu et le code HTML ci-dessous. Donner le contenu du fichier
<li>texte [8]</li> style.css de manière à ce que l’affichage de la page se fasse comme dans l’aperçu :
</ol> − la largeur de la zone de menu est égale à la largeur de la page, avec des
</li> marges, bordures et ajustements nuls
</ul> − la largeur de chaque « lien » dans la zone de menu est égale à 1/4 de la
</body></html> largeur de la page, avec des marges, bordures et ajustements nuls
Exercice 2 (3 pts) − au sein de la boîte de chaque lien du menu, le texte du lien est centré
− le texte des liens dans le menu est sans décoration et en gras
Ecrivez le code HTML permettant de réaliser la page représentée sur la figure ci- − la couleur de fond de chaque lien du menu est verte, la couleur de texte du
dessous. On précise que les deux liens "le site du w3c" et "l'auteur de ce document" menu est le blanc
envoient respectivement, l'un sur le site web dont l'adresse est www.w3c.org, et − la bordure de la zone de contenu est en ligne discontinue
l'autre sur la page auteur.html, qui est contenue dans un dossier nommée "autres", − les quatre marges de la zone de contenu sont de 10 points
situé dans le même dossier que la page à écrire. − les liens se trouvant dans un item de liste sont en italique et sans décoration
Une seule règle CSS est utilisée, le reste correspond au rendu par défaut de la − le fond des items en position impaires est gris foncé (#aaaaaa), le fond des
structure décrite par le code HTML items en position paires est gris clair (#cccccc)
table {border-collapse: collapse;}
th, td {border: solid 2pt black; padding:0.5ex;}
Exercice 4 (10 pts)
On désire créer un formulaire pour prendre des rendez-vous de durée variable.
Le formulaire a le code suivant :
<form action="rdv . php" method="post">
<p> nom <input type="text" name="nom" id="nom"/>
<span class="erreur" id="erreur nom"></span></p>
<p> heure début <input type="text" name="h1" id="h1" />
<span class="erreur" id=" erreur h1 "></span></p>
<p> heure fin <input type="text" name="h2" id="h2" />
<span class="erreur" id="erreur h2 "></span></p>
<p> <input type=" submit "/></p>
<html> </form>
<head> <p> Durée <span id=" duree "> </span></p>
<title>Test</title></head> Dans chacun des champs, l'utilisateur doit saisir une heure, sous la forme
<link href="style.css" type="text/css" rel="stylesheet"/> heure:minutes, par exemple : 16:30 pour "seize heures trente"
<body>
1. Ecrire une fonction permettant de vérifier que le contenu d'un champ dont on passe
<div id="menu"><a href="index.html">Index</a><a href="rec.html">Recherche</a><a href="ens.html">Enseignement</a><a href="liens.html">Liens</a></div>
3. Ecrire la fonction appelée par "onsubmit", pour vérifier que le formulaire est
<div id="body">
correctement rempli. Le formulaire est correctement rempli si :
<p>La liste de tous les cours se trouve ci-dessous, elle est également
1. le nom de la personne qui prend un rendez-vous n'est pas vide
disponible <a href="cours.pdf">au format PDF</a>
2. les deux champs d'heure sont remplis
</p>
3. la valeur du champ d'heure de début est inférieure à celle du champ
<ol>
d'heure de fin. Pour vérifier ce dernier point et comparer les heures, on
<li class="impair"> Introduction au système Unix, généralités
pourra utiliser la fonction définie à la question précédente.
(<a href="cours1.pdf">Support de cours en PDF</a>) </li>
En cas d'erreur, on affichera un message dans la page en remplissant la zone de
<li class="pair"> Introduction au système Unix, processus
message d'erreur correspondant au champ erroné (dans le cas où l'heure de fin
(<a href="cours2.pdf">Support de cours en PDF</a>) </li>
précède l'heure de début, on considèrera qu'il s'agit d'une erreur sur l'heure de fin).
<li class="impair"> Réseaux (<a href="cours3.pdf">Support de cours en
4. Quand on a tapé quelque chose dans l'un des champs de date, on désire que la
PDF</a>) </li>
durée du rendez-vous s'affiche dans le span d'identifiant durée (quand c'est
<li class="pair"> HTML (<a href="cours4.pdf">Support de cours en PDF</a>)
possible, c'est à dire que les deux champs d'heure contiennent bien des heures, et
</li><li class="impair"> CSS (<a href="cours5.pdf">Support de cours en
au bon format).
PDF</a>) </li></ol>
Ecrire le code javascript correspondant, et modifiez le html du formulaire pour que
</div>
ce code soit correctement appelé quand l'utilisateur tape quelque chose dans l'un
</body>
des champs d'heure.
</html>

RattTechWeb 2014-2015

Transféré par

Informations du document

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

RattTechWeb 2014-2015

Transféré par

Droits d'auteur :

Université Ibn Zohr A.U.

Rattrapage Technologies du Web

Vous aimerez peut-être aussi