docPremière session
download 
Plainte Transcription
Première session
Développement
Web (NFA0016)
première session
Février 2013
Durée : 3h
Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits.
Barème donné à titre indicatif.
Exercice 1 3 points
Écrivez le code HTML permettant de réaliser la page représentée sur la figure ci-dessous. On
précise que les deux liens “le site du w3c” et “l’auteur de ce document” envoient respectivement,
l’un sur le site web dont l’adresse est www.w3c.org, et l’autre sur la page auteur.html, qui est
contenue dans un dossier nommé “autres”, situé dans le même dossier que la page à écrire.
Pour rendre le tableau plus lisible nous avons ajouté dans header le code css suivant :
table {border-collapse: collapse;}
th, td {border: solid 2pt black; padding:0.5ex;}
C’est la seul règle css, le reste correspond au rendu par défaut de la structure décrite par le code
HTML
1
Exercice 2 2 points
Dessinez (sans oublier les nœuds texte) l’arbre correspondant au code source HTML suivant :
< !DOCTYPE HTML>
<html>
<head>
<t i t l e></ t i t l e>
<meta charset=” u t f −8” />
</head>
<body>
<h1>HTML</h1>
<p> Une page <em>s o u r c e</em> en <strong>HTML</ strong> r e p r é s e n t e l a
s t r u c t u r e d ’ un document e t peux ê t r e vue comme un a r b r e .
</p>
<div id=” i n f o ”>
Autre l a n g a g e s du web :
<dl>
<dt>CSS</dt>
<dd> d é c r i t l a p r é s e n t a t i o n d ’ une page HTML
<dt>J a v a s c r i p t</dt>
<dd>permet de m a n i p u l e r l a page HTML e t b i e n d ’ a u t r e c h o s e</dd>
</ dl>
</ div>
</body>
</html>
Exercice 3 4 points
On considère le code HTML suivant :
< !DOCTYPE HTML>
<html>
<head>
<t i t l e>c s s</ t i t l e>
<meta charset=” u t f −8” />
<l i n k href=” s t y l e . c s s ” r e l=” s t y l e s h e e t ” media=” s c r e e n ” />
</head>
<body>
<div id=” e n t e t e ”>
<h1>Le j o u r n a l de NFA016</h1>
<h2>S i fun , s i c o o l</h2>
</ div>
<div id=”menu”>
<ul>< l i>o c t o b r e</ l i>< l i>novembre</ l i>< l i>décembre</ l i>< l i> f é v r i e r</ l i></ ul>
</ div>
<div id=” m e s e n t r e e s ”>
<div c l a s s=” e n t r e e ”>
<h2>o c t o b r e 2012</h2>
<p>
On débute <a href=” h t t p : / / f r . w i k i p e d i a . o r g /HTML”>HTML</a>
facile
!
</p>
</ div>
<div c l a s s=” e n t r e e ”>
2
<h2>novembre 2012</h2>
<p>
On debute <a href=” h t t p : / / f r . w i k i p e d i a . o r g /CSS”>CSS</a>
ça s e c o m p l i q u e !
</p>
</ div>
<div c l a s s=” e n t r e e ”>
<h2>décembre 2012</h2>
<p>
A i l l e , o u i l l e J a v a s c r i p t ça p i q u e . . . . p l u s que l e houx de n oë l . . . <br/>
<img src=”houx−de−n o e l −1. j p g ” a l t=” photo du cnam” width=” 100 px” />
</p>
</ div>
<div c l a s s=” e n t r e e ”>
<h2> f é v r i e r 2012</h2>
<p>
On p a s s e l ’ examen
<a href=” h t t p : / / f r . w i k i p e d i a . o r g / w i k i /World Wide Web”>Web</a> !
</p>
</ div>
</ div>< !−− f i n de m e s e n t r e e s −−>
<div id=” p i e d ”>
c o p y l e f t MANC 2102
</ div>
</body>
</html>
1. Dessiner l’aspect approximatif de la page en considérant que le fichier style.css est vide.
2. Sans modifier le code HTML, proposer le contenu du fichier style.css permettant d’obtenir la présentation de la figure ci-dessous.
— La zone de d’entête est sur fond jaune et le texte y est centré.
— Le titre est dans une fonte Times nommée Lucida Console et le sous titre (“si fun ...”)
est en italique.
— Le bloc des entrées est sur fond rose et chaque entrée sur fond bleu.
— Dans chaque entrée les paragraphes sont en rouge
— Le paragraphe de la troisième entrée (décembre) est centré.
— Le menu est sur fond rouge.
— Le menu est à gauche et d’une largeur de 10 % de la fenêtre du navigateur. Il a une
marge de 8 % à gauche.
— Le bloc des entrées est situe à droite du menu et d’une largeur de 70 % de la fenêtre du
navigateur.
— Le pied de page est centré en dessous et dans une plus petite fonte.
3
Exercice 4 7 points
On désire créer un formulaire pour prendre des rendez-vous de durée variable.
Pour des raisons de portabilité, on n’utilisera que les balises de HTML4 (et donc pas les balises
numériques ou temporelles de HTML5).
Le formulaire a le code suivant :
<form action=” rdv . php” method=” p o s t ”>
<p> nom <input type=” t e x t ” name=”nom” id=”nom” />
<span c l a s s=” e r r e u r ” id=” e r r e u r n o m ”></span></p>
<p> h e u r e début <input type=” t e x t ” name=” h1 ” id=” h1 ” />
<span c l a s s=” e r r e u r ” id=” e r r e u r h 1 ”></span></p>
<p> h e u r e f i n <input type=” t e x t ” name=” h2 ” id=” h2 ” />
<span c l a s s=” e r r e u r ” id=” e r r e u r h 2 ”></span></p>
<p> <input type=” submit ” /></p>
</form>
<p> Durée <span id=” d u r e e ”> </span></p>
Dans chacun des champs, l’utilisateur doit saisir une heure, sous la forme heure:minutes, par
exemple : 16:30 pour “seize heures trente”.
Question 4.1
Écrire une fonction permettant de vérifier que le contenu d’un champ dont on passe l’identifiant
contient bien une heure dans un format correct. On considèrera que les heures et les minutes sont
systématiquement données sur deux chiffres. Par exemple 2h5 sera écrit 02 :05.
On peut, au choix utiliser ou non les expressions régulières.
4
Question 4.2
Écrire une fonction calculant la durée en minutes du rendez-vous. Au cas où l’une des heures
serait mal définie, la fonction renverra -1.
Si l’heure de fin est inférieure à l’heure de début, la durée calculée sera, naturellement, négative.
Question 4.3
Écrire la fonction appelée par “onsubmit”, pour vérifier que le formulaire est correctement
rempli. Le formulaire est correctement rempli si :
1. le nom de la personne qui prend un rendez-vous n’est pas vide
2. les deux champs d’heure sont remplis
3. la valeur du champ d’heure de début est inférieure à celle du champ d’heure de fin. Pour
vérifier ce dernier point et comparer les heures, on pourra utiliser la fonction définie à la
question précédente.
En cas d’erreur, on affichera un message dans la page en remplissant la zone de message
d’erreur correspondant au champ erroné (dans le cas où l’heure de fin précède l’heure de début,
on considèrera qu’il s’agit d’une erreur sur l’heure de fin).
Question 4.4
Quand on a tapé quelque chose dans l’un des champs de date, on désire que la durée du
rendez-vous s’affiche dans le span d’identifiant duree (quand c’est possible, c’est à dire que les
deux champs d’heure contiennent bien des heures, et au bon format).
Écrire le code javascript correspondant, et modifiez le html du formulaire pour que ce code soit
correctement appelé quand l’utilisateur tape quelque chose dans l’un des champs d’heure.
Exercice 5 4 points
On suppose que les paragraphes du document sur lequel on va travailler ne contiennent que du
texte, et pas d’autres éléments.
On veut écrire une fonction de recherche dans une page, qui passera le texte trouvé en noir sur
fond jaune pour la première occurrence dans tous les paragraphes.
Pour cela, en supposant que le texte cherché soit “texte”, l’idée est de remplacer
<p> on cherche le mot texte dans le document</p>
par
<p> on cherche le mot <span style="background-color: yellow">texte</span>
dans le document</p>
Question 5.1
Dessiner les arbres DOM correspondant aux deux paragraphes précédents, avant et après remplacement.
Question 5.2
Écrire une fonction javascript qui prend comme argument un élément paragraphe (supposé
vide) et trois textes, et qui remplit le paragraphe, en utilisant le DOM, pour obtenir la structure
qui correspond au HTML
<p> TEXTE1 <span style="background-color: yellow">TEXTE2</span> TEXTE3</p>
(où TEXTE1, TEXTE2 et TEXTE3 seront remplacés par les valeurs des arguments).
5
Question 5.3
Écrire une fonction qui prend comme arguments
— un élément paragraphe ;
— un texte à chercher
et qui transforme le paragraphe comme ci-dessus, en mettant en valeur la première occurrence
du texte à chercher, si celui-ci se trouve dans le paragraphe.
On rappelle quelques fonctions sur les string qui pourront être utiles :
— i= s.indexOf(s1) : retourne la première position dans s à laquelle s1 est trouvée, ou -1 si
s1 n’est pas une sous-chaı̂ne de s. Par exemple dans
s= "un test !!"
i= s.indexOf("test")
i vaudra 3.
— i= s.length() est la longueur de la chaı̂ne de caractères s.
— s1= s.substr(pos, taille) s1 vaudra la sous-chaı̂ne de s commençant en position pos
et de longueur taille.
6
