[PDF] Web developpement durable examen de révision | Cours Informatique

(1)

Ecole SITI Rue des Crayères BP 1034, 51687 REIMS Cedex 2 tel 03 26 36 80 20

Correction d’examen

Année universitaire 2012 - 213

Unité d’enseignement

Code de l’UE

NFA074

Intitulé

Conception d’un site web

Enseignant (s)

A. RENARD

Examen

Session

09/02/2013

Date

1

ère

_session

Horaires

13h15-15h15

Durée

2 heures

Consignes particulières

Pour cette épreuve, vous avez le droit uniquement à vos supports de cours ainsi qu’à vos documents

personnels. Aucun livre ou autre document n’est autorisé.

Vous répondrez aux exercices 1 à 3 directement sur le sujet que vous devez impérativement rendre

avec votre copie.

Chaque exercice présente une indication du barème et du temps nécessaire à sa résolution.

Vos codes devront respecter les instructions du cours.

En cas de problème durant l’épreuve, joindre le Cnam Champagne-Ardenne au 03 26 36 80 07,

03.26.36.80.10 ou 03.26.36.80.20.

(2)

Exercice 1 – Questions de cours (15%) :

A. Définissez le W3C, son rôle et un exemple concret de ce qu’il peut apporter au développeur. Le W3C est un consortium qui a pour but de normaliser les technologies liées au web, dont HTML, CSS et javascript. D’où son nom, Word Wide Web Consortium

A titre d’exemple concret, le W3C propose un outil de validation (syntaxe, encodage, DOM, … ) de page html B. Listez quels sont les outils nécessaires au développement d’un site en HTML – CSS – Javascript.

 Un éditeur (avec coloration syntaxique, complétion, auto indentation, ftp …)

 Des navigateurs (plusieurs, de plusieurs versions, et les plugins pour développer comme « web

developper » pour Firefox

 Un système de validation de type W3C

Exercice 2 – QCM (15%) :

Répondez directement sur le sujet

1. Quel est le code HTML permettant de créer 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 définition 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 placées dans :

A. Le corps de la page (Balise body) B. L’en-tête 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 rôle de la balise <titre> ? A. écrire en grand

B. centrer un titre

C. définir le titre du document

6. Quelle balise introduit une liste numérotée ? A. <ln>

B. <ol>

C. <listnum> D. <h1>

7. Quel est le rôle de la balise <body> ? A. écriture en plus petit B. début de paragraphe

(3)

8. Quelle est la couleur représentée par #ffffff ?

A. blanc

B. noir C. gris clair D. gris foncé

9. Parmi les lignes de code HTML suivantes, laquelle permet de décrire 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 – Création d’une page web (25%) :

Afin de réaliser la page web ci-dessous :

(4)

B. Ecrivez le code html et les règles CSS liées du contenu du bloc avec la bordure en pointillés.

#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>

</ul>

<p>Et le tout ... <span class='important'>Champagne !</span></p> <p>Après ...</p>

<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>

(5)

Exercice 5 – Javascript (25%) :

En javascript :

 Math.random() retourne un nombre aléatoire entre 0 et 1

 Math.round( floatvalue ) retourne la partie entière du nombre qu’on lui passe en paramètre

A. Ecrire la fonction aleatoire(n) qui retourne un entier aléatoirement entre 0 et n

// fonction pour générer un nombre entier aléatoire entre 0 et n

function

aleatoire(n){

// génération 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 entière

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 génère un entier aléatoire de 0 à 100 puis demande au visiteur de le

deviner. A chacune de ses propositions, une indication « trop grand » ou « trop petit » est fournie à

l’internaute. Une fois la valeur trouvée, un message le lui indique ainsi que le nombre d’essais.

x = aleatoire(100);// génération 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 proposée soit la bonne

if(p<x)

alert("Trop

petit");

else

alert("Trop

grand");

count++;// incrémentation du nombre d'essais à 1

p = prompt("Proposez un nombre"); // nouvel essai

}

(6)

[PDF] Web developpement durable examen de révision | Cours Informatique

Correction d’examen

Année universitaire 2012 - 213

Unité d’enseignement

NFA074

Conception d’un site web

A. RENARD

Examen

09/02/2013

1

session

13h15-15h15

2 heures

Pour cette épreuve, vous avez le droit uniquement à vos supports de cours ainsi qu’à vos documents

personnels. Aucun livre ou autre document n’est autorisé.

Vous répondrez aux exercices 1 à 3 directement sur le sujet que vous devez impérativement rendre

avec votre copie.

Chaque exercice présente une indication du barème et du temps nécessaire à sa résolution.

Vos codes devront respecter les instructions du cours.

En cas de problème durant l’épreuve, joindre le Cnam Champagne-Ardenne au 03 26 36 80 07,

03.26.36.80.10 ou 03.26.36.80.20.

Exercice 1 – Questions de cours (15%) :

Exercice 2 – QCM (15%) :

Exercice 3 – Création d’une page web (25%) :

Exercice 5 – Javascript (25%) :

En javascript :

 Math.random() retourne un nombre aléatoire entre 0 et 1

 Math.round( floatvalue ) retourne la partie entière du nombre qu’on lui passe en paramètre

A. Ecrire la fonction aleatoire(n) qui retourne un entier aléatoirement entre 0 et n

// fonction pour générer un nombre entier aléatoire entre 0 et n

function

aleatoire(n){

// génération 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 entière

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 génère un entier aléatoire de 0 à 100 puis demande au visiteur de le

deviner. A chacune de ses propositions, une indication « trop grand » ou « trop petit » est fournie à

l’internaute. Une fois la valeur trouvée, un message le lui indique ainsi que le nombre d’essais.

x = aleatoire(100);// génération 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 proposée soit la bonne

if(p<x)

alert("Trop

petit");

else

alert("Trop

grand");

count++;// incrémentation du nombre d'essais à 1

p = prompt("Proposez un nombre"); // nouvel essai

}

Exercice 6 – Javascript et DOM (20%) :

A. Ecrire la fonction virus() qui va procéder à une permutation circulaire des url des liens contenus sur

la page en cours.

function virus(){

// récupération 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;

_session