Vous êtes sur la page 1sur 6

Ecole SITI

Rue des Crayres


BP 1034, 51687 REIMS Cedex 2
tel 03 26 36 80 20

Correction dexamen
Anne universitaire 2012 - 213

Unit denseignement
Code de lUE

NFA074

Intitul

Conception dun site web

Enseignant (s)

A. RENARD

Examen
Session

09/02/2013

Date

1re session

Horaires

13h15-15h15

Dure

2 heures

Consignes particulires

Pour cette preuve, vous avez le droit uniquement vos supports de cours ainsi qu vos documents
personnels. Aucun livre ou autre document nest autoris.
Vous rpondrez aux exercices 1 3 directement sur le sujet que vous devez imprativement rendre
avec votre copie.
Chaque exercice prsente une indication du barme et du temps ncessaire sa rsolution.
Vos codes devront respecter les instructions du cours.
En cas de problme durant lpreuve, joindre le Cnam Champagne-Ardenne au 03 26 36 80 07,
03.26.36.80.10 ou 03.26.36.80.20.

EVA PR01 F05


Version 02

1/6

Exercice 1 Questions de cours (15%) :


A. Dfinissez le W3C, son rle et un exemple concret de ce quil peut apporter au dveloppeur.
Le W3C est un consortium qui a pour but de normaliser les technologies lies au web, dont HTML, CSS et
javascript. Do son nom, Word Wide Web Consortium
A titre dexemple concret, le W3C propose un outil de validation (syntaxe, encodage, DOM, ) de page html

B. Listez quels sont les outils ncessaires au dveloppement dun site en HTML CSS Javascript.

Un diteur (avec coloration syntaxique, compltion, auto indentation, ftp )


Des navigateurs (plusieurs, de plusieurs versions, et les plugins pour dvelopper comme web
developper pour Firefox
Un systme de validation de type W3C

Exercice 2 QCM (15%) :


Rpondez directement sur le sujet
1. Quel est le code HTML permettant de crer un lien ?
A. <a>http://ne.pleiad.net </a>
B. <a href="http://ne.pleiad.net">Site du CNAM</a>
C. <a name="http://ne.pleiad.net</a>
D. <a url=" http://ne.pleiad.net">Site du CNAM</a>
2. Lesquelles parmi ces balises sont des balises de dfinition des tableaux ?
A. <thead><body><tr>
B. <table><tr><tt>
C. <table><head><tfoot>
D. <table><tr><td>
3. Les balises et le texte qui ne sont pas visibles directement sur une page HTML (par exemple le titre)
doivent tre places dans :
A. Le corps de la page (Balise body)
B. Len-tte de la page (Balise head)
C. Les tableaux (Balise table)
4. Quelle balise provoque un retour la ligne ?
A. <nl/>
B. <NEWLINE/>
C. <br/>
D. <hr/>
5. Quel est le rle de la balise <titre> ?
A. crire en grand
B. centrer un titre
C. dfinir le titre du document
6. Quelle balise introduit une liste numrote ?
A. <ln>
B. <ol>
C. <listnum>
D. <h1>
7. Quel est le rle de la balise <body> ?
A. criture en plus petit
B. dbut de paragraphe
C. liste puces
D. corps du fichier

NFA074

2/6

09/02/2013

8. Quelle est la couleur reprsente par #ffffff ?


A. blanc
B. noir
C. gris clair
D. gris fonc
9. Parmi les lignes de code HTML suivantes, laquelle permet de dcrire la liste puces ci-dessous ?
Fruits
o Banane
o Fraise
Legumes
A. <ul><li>Fruits</li><ul><li>Banane</li><li>Fraise</li></ul><li>Legumes</li></ul>
B. <ul><li>Fruits<ol><li>Banane</li><li>Fraise</li></ol></li><li>Legumes</li></ul>
C. <ul><li>Fruits<ul><li>Banane</li><li>Fraise</li></ul></li><li>Legumes</li></ul>
D. <ul><li>Fruits<ul><li>Banane</li></ul></li><li>Fraise</li><li>Legumes</li></ul>

Exercice 3 Cration dune page web (25%) :


Afin de raliser la page web ci-dessous :
A. Directement sur le sujet, identifiez et dcrivez les lments (balises) HTML prsents

NFA074

3/6

09/02/2013

B. Ecrivez le code html et les rgles CSS lies du contenu du bloc avec la bordure en pointills.

#blocDroite{width:550px;float:left;border:5px dotted #333333;padding:10px;}


.souligne{text-decoration:underline;}
.important{font-weight:bold}
.etrange{font-style:italic;}
.c1{color:#ff0000;}
.c2{color:#0000ff;}
.c3{color:#00ff00;}

<div id='blocDroite'>
<h1>Mon ...</h1>
<p>J'ai eu la chance... <span class='etrange'>excellent,</span> puis ...</p>
<ul>
<li>Du ... <span class='souligne'>J'adore</span>)</li>
<li>Du ...</li>
<li>De la ...</li>
<li>Une ...</li>
</ul>
<p>Et le tout ... <span class='important'>Champagne !</span></p>
<p>Aprs ...</p>
<div style='text-align:center;'>
<ol>
<li>Mamie ... <span class='c1'>des ...</span></li>
<li>Mamie ...<span class='c2'>des ...</span></li>
<li>Tonton ...<span class='c3'>des ...</span></li>
</ol>
</div>
</div>

NFA074

4/6

09/02/2013

Exercice 5 Javascript (25%) :


En javascript :
Math.random() retourne un nombre alatoire entre 0 et 1
Math.round( floatvalue ) retourne la partie entire du nombre quon lui passe en paramtre
A. Ecrire la fonction aleatoire(n) qui retourne un entier alatoirement entre 0 et n

// fonction pour gnrer un nombre entier alatoire entre 0 et n


function aleatoire(n){
// gnration d'un nombre flottant ( virgule) entre 0 et 1
r = Math.random();
// en le multipliant par n, j'ai donc un nombre flottant ( virgule) entre 0 et n
r = r * n;
// je ne garde que la partie entire
r = Math.round(r);
// je retourne la valeur
return r;
// version en une seule ligne
return Math.round(n*Math.random());
}

B. Ecrire le code javascript qui gnre un entier alatoire de 0 100 puis demande au visiteur de le
deviner. A chacune de ses propositions, une indication trop grand ou trop petit est fournie
linternaute. Une fois la valeur trouve, un message le lui indique ainsi que le nombre dessais.

x = aleatoire(100);// gnration d'un nombre entier de 0 100


count=1;// initialisation du nombre d'essais 1
p = prompt("Proposez un nombre"); // premier essai
while(p!=x){ // on va demander jusqu'a ce que la valeur propose soit la bonne
if(p<x)
alert("Trop petit");
else
alert("Trop grand");
count++;// incrmentation du nombre d'essais 1
p = prompt("Proposez un nombre"); // nouvel essai
}
alert("Trouv en "+count+" essais");

NFA074

5/6

09/02/2013

Exercice 6 Javascript et DOM (20%) :


A. Ecrire la fonction virus() qui va procder une permutation circulaire des url des liens contenus sur
la page en cours.

function virus(){
// rcupration de tous les a du documents
liens = document.getElementsByTagName("a");
// on conserve le valeur de l'attribut href du premier lien pour l'attribuer au dernier en fin de parcours
prem = liens[0].href;
// permutation : attribuer chaque lien le href du suivant (sauf pour le dernier)
for(i=0;i<liens.length-1;i++)
liens[i].href=liens[i+1].href;
// prem est la valeur de l'attribut href du dernier lien
liens[liens.length-1].href = prem;
}

B. Cette fonction est dclenche automatiquement toutes les 20 secondes, ds le chargement de la page.

function doVirus(){
// appeler la fonction virus
virus();
// appeler la fonction doVirus de nouveau dans 20 secondes
setTimeout("doVirus()",20000);
}

<body onload='doVirus()'>

NFA074

6/6

09/02/2013