Web developpement durable examen de révision

Problème à signaler:


Télécharger Web developpement durable examen de révision



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

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.

EVA PR01 F05

Version 02

                                                                               1 / 6

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

B.  <a href="">Site du CNAM</a>

C.  <a name="</a>

D.  <a url=" ">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

C.  liste à puces

D.  corps du fichier

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 :

A.    Directement sur le sujet, identifiez et décrivez les éléments (balises) HTML présents 

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>

                                    <li>Du </li>

                                    <li>De la </li>

                                    <li>Une </li>            

                        </ul>

                        <p>Et le tout <span class='important'>Champagne !</span></p>

                        <p>Après </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>

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

            }

            alert("Trouvé en "+count+" essais");

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;

}

B.    Cette fonction est déclenchée automatiquement toutes les 20 secondes, dès 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()'>


4