Examen d'informatique module INF112 1ère session 2003-2004 sans calculatrice, sans document Le barème est indicatif Sauf indiqué contraire, dans les questions à choix multiples, il peut (ou non) y avoir plusieurs réponses possibles. Une non réponse ou une réponse incomplète sont équivalentes à des réponses fausses. Documents à rendre : (1) La présente feuille avec vos noms et prénoms (Pour les questions de type QCM, entourez les bonnes réponses sur le sujet) (2) Une copie avec les réponses aux exercices 3 et 5 Lexique HTML, JavaScript et VBA fourni en fin de sujet PARTIE I - HTML (sur 13 points) (A) Questions de cours (1 point) Q1. Qu'est ce que le Web? 1. Internet 2. un ensemble de documents hypertextes 3. un réseau d'ordinateurs inter-connectés avec son protocole de communication 4. un réseau d'ordinateurs inter-connectés avec son protocole de communication et des documents hypertextes Q2. Internet Explorer est : 1. un butineur 2. un client HTTP 3. un serveur de page HTML 4. un protocole Internet Q3. Que faut-il à un ordinateur connecté à Internet pour devenir serveur Web 1. exécuter un programme nommé serveur HTTP 2. lancer Internet Explorer 3. le déclarer aux moteurs de recherche 4. demander la permission au Consortium WWW 1
Q4. Qu est-ce qu un numéro IP? 1. le numéro de série qui figure sur chaque ordinateur 2. un numéro d identification associé à chaque page web 3. un numéro de téléphone pour accéder à un fournisseur d accès à Internet 4. un numéro d identification d ordinateur sur Internet (B) Problème On a construit un mini-site Web sur la formation des massifs montagneux en France. Ce site est composé de quelques pages HTML, d une feuille de style et d images. Ce site est organisé de la façon suivante : Le répertoire MASSIFS contient le fichier index.html Le répertoire DOC contient les fichiers o form.html o erosion.html o quiz.html Le répertoire JEUNES contient les fichiers o alpes.png o jura.png o pyrn.png Le répertoire VIEUX contient les fichiers o vosges.png o mc.png Le répertoire COMMUN contient les fichiers o style.css o home.jpg répertoire fichier MASSIFS DOC index.html IMG COMMUN form.html erosion.html quizz.html Jeunes Vieux style.css home.jpg alpes.png jura.png pyrn.png vosges.png mc.png Fig 1 : autre représentation du site Les questions Q5 à Qxx sont relatives à ce mini-site. 2
(B.1) liens (2 points) Q5. Dans la page erosion.html, on souhaite faire un lien vers form.html. Pour cela, on insère le code suivant : <a href="erosion.html"></a> dans erosion.html A votre avis, ce code va-t-il nous permettre de réaliser ce que l on souhaite? 1. Oui 2. Non, il faut mettre l adresse complète du site (avec un http). 3. Non, il faut insérer ce code dans form.html. 4. Non, il faut mettre <a href="form.html"> 5. Non, il faut ajouter du texte entre les balises <a> et </a>. Q6. Pour utiliser la feuille de style style.css dans la page quizz.html, quel code doit-on insérer dans le fichier quizz.html, juste après le couple de balises <title></title>? 1. <link rel="stylesheet" href="style.css" type="text/css"> 2. <link rel="stylesheet" href="commun/style.css" type="text/css"> 3. <link rel="stylesheet" href="../commun/style.css" type="text/css"> 4. <link rel="stylesheet" href="../../commun/style.css" type="text/css"> 5. <link rel="stylesheet" href="../../../style.css" type="text/css"> Q7. Dans erosion.html, on souhaite introduire un lien pour accéder à quizz.html. Que faut-il introduire? 1. <a href="doc/quizz.html"> petit test </a> 2. <a href="massifs/doc/quizz.html"> petit test </a> 3. <a href="../../quizz.html"> petit test </a> 4. <a href="../quizz.html"> petit test </a> 5. <a href="quizz.html"> petit test </a> Table des Matières 1. Formation des massifs anciens 2. Formation des massifs jeunes 1 Formation des massifs anciens 2 Formation des massifs jeunes form.html Fig 2 : le fichier form.html 3
Q8. Dans la page form.html, on décrit la formation des différents types de massifs. Pour organiser le texte, on introduit deux sections (une pour décrire la formation des massifs jeunes et une autre pour décrire la formation des massifs anciens). En début de cette même page, une table des matières est proposée. On souhaite permettre aux utilisateurs d accéder directement à chacune des sections à partir de la table des matières. Pour faire cela, il faut : 1. introduire une ancre pour chaque nom de la table des matières en début de fichier et introduire un lien externe au niveau de chaque section 2. introduire une ancre pour chaque nom de la table des matières en début de fichier et introduire un lien interne au niveau de chaque section 3. introduire une ancre pour chaque section, et introduire un lien externe pour chaque nom de la table des matières en début de fichier 4. introduire une ancre pour chaque section, et introduire un lien interne pour chaque nom de la table des matières en début de fichier 5. ce n est pas possible Dans le fichier style.css, on définit les styles suivants : body {background: white; color: blue} H1.griser {background: grey; color: black}.griser {background: cyan; color: white} (B2) Utilisation des balises (2 points) Le fichier index.html utilise cette feuille de style correctement (i.e. il n y a pas de faute de syntaxe). Les questions Q9 et Q10 sont relatives à cette feuille de style. Q9. Soit le code HTML suivant inséré dans index.html : <H2 class="griser"> Texte 1 </H2> De quelle couleur va apparaître le fond de «Texte 1»? 1. black 2. blue 3. cyan 4. grey 5. white Q10. Soit le code HTML suivant inséré dans index.html : <H1> Texte 2 </H1> : De quelle couleur va apparaître le texte «Texte 2»? 1. black 2. blue 3. cyan 4. grey 5. white 4
Q11. Quel résultat obtiendra-t-on en visionnant le code HTML ci-dessous? <ul> <li> Massifs jeunes </ul> <ul> <li> Alpes <li> Pyrénées <li> Jura </ul> <ul> <li> Massifs anciens <ul> <li> Vosges <li> Massif central </ul> </ul> Q12. Que faut-il modifier pour obtenir la liste suivante? 1. Il faut ajouter <ol> avant la ligne «<li> Alpes» et ajouter </ol> après la ligne <li> Jura 2. Il faut remplacer la balise <ul> avant la ligne «<li> Alpes» par la balise <ol> et remplacer la balise </ul> par </ol> après la ligne «<li> Jura» 3. Il faut supprimer la balise </ul> après la ligne «<li> Massifs jeunes» et supprimer la balise <ul> avant la ligne «li> Massifs anciens». 4. Il faut remplacer «<li> Alpes» par «<li "1"> Alpes», «<li> Pyrénées» par «<li "2"> Pyrénées», et «<li> Jura» par «<li "3"> Jura» 5
(B3) formulaires, Java, Java-script, images (2 points) Q13. Dans votre fichier quizz.html, vous voulez insérer la question «Quelles sont les principales roches sédimentaires?» avec alternatives de réponses (dont plusieurs alternatives sont correctes). Quel type de bouton allez-vous employer? 1. boutons radio 2. case à cocher 3. menu déroulant 4. zone de texte 5. aucun de ces élements Q14. Sur la page erosion.html on insère le code suivant : <A href="http://www.google.fr/search?q=sediment+erosion+-service">voir aussi</a> A quoi correspond cette URL? 1. C est une requête effectuée sur le moteur de recherches Google. On obtiendra une liste de liens sur des pages contenant tous les mots «sediment», «erosion» et «-service». 2. C est une requête effectuée sur le moteur de recherches Google. On obtiendra une liste de liens sur des pages contenant les mots «sediment» et «erosion», mais pas le mot «service». 3. C est une URL erronée, car il ne doit pas y avoir de caractère spéciaux (ici «-») dans une requête. 4. C est une URL erronée, car on ne peut pas faire un lien sur Google en précisant les mots d une requête. Q15. Pour les images, il existe deux grands types de format : les formats vectoriels et les formats bitmaps. Parmi les affirmations suivantes, lesquelles sont caractéristiques des formats vectoriels? 1. L image est décrite comme un tableau de points (pixels), qui ont chacun une couleur. 2. L image est décrite comme un ensemble de forme géométriques. 3. L image est décrite comme un suite de zones cliquables. 4. Le format est bien adapté pour la description de cartes et de paysages. 5. Le type de format vectoriel n existe pas. On parle de format géométrique. 6
<HTML> <HEAD> <TITLE>Questionnaire d'info</title> <SCRIPT> function CalculScore() { if (document.testinfo.codage[2].checked == true) { alert('bonne réponse'); } else { alert('mauvaise réponse'); } } </SCRIPT> </HEAD> <BODY> <FORM NAME="testinfo"> Voici une question. Choisissez une réponse <BR> <INPUT TYPE=RADIO NAME=codage VALUE="R1"> Réponse 1 <BR> <INPUT TYPE=RADIO NAME=codage VALUE="R2"> Réponse 2 <BR> <INPUT TYPE=RADIO NAME=codage VALUE="R3"> Réponse 3 <BR> <INPUT TYPE=RADIO NAME=codage VALUE="R4"> Réponse 4 <INPUT TYPE="button" value="b1"><br> <INPUT TYPE=RESET VALUE="B2" onclick="calculscore()"> </FORM> </BODY> Fig 3 : Formulaire et code Javascript Observez la page HTML donnée figure 3. Il s agit d un formulaire auquel est associée une fonction Javascript. Q16. Que faut-il avoir fait pour obtenir le message «Bonne réponse» 1. Choisir la ou les réponses suivantes 1.1. Réponse 1 1.2. Réponse 2 1.3. Réponse 3 1.4. Réponse 4 2. Cliquer sur le bouton «B1» 3. Cliquer sur le bouton «B2» 4. On obtient ce message dès le chargement de la page 5. On ne pourra jamais obtenir ce message 5.1. car le code Javascript est faux 5.2. car le code Javascript est mal positionné 5.3. car le formulaire contient une erreur 5.4. pour une autre raison 7
(B4) mise en service et utilisation du site (2 points) Le répertoire MASSIFS est installé sur le serveur www-lsr.imag.fr, dans le répertoire INF112/SITES La page index.html fait environ 50 lignes de 40 caractères. Un caractère est codé par un octet. Cette page utilise la feuille de style style.css, contient l image home.jpg, a des liens vers les fichiers form.html et erosion.html. La page style.css fait environ 40 lignes de 20 caractères. La page form.html fait environ 40 lignes, de 50 caractères. La page erosion.html fait environ 30 lignes, de 50 caractères. L image home.jpg est un fichier de 50 kbits On rappelle qu un octet correspond à 8 bits, 1 kbit = 2 10 bits = 1024 bits Q17. Quelle(s) URL permet(tent) d accéder directement à la page d index de ce site? «accéder directement» signifie que l on n affiche pas de page(s) intermédiaire(s) pour accéder à la page souhaitée. 1. http://www-lsr.imag.fr/index.html 2. http://www-lsr.imag.fr/inf112/sites/ 3. http://www-lsr.imag.fr/inf112/sites/massifsindex.html 4. http://www-lsr.imag.fr/inf112/sites/doc/../index.html 5. www-lsr.imag.fr/inf112/sites/massifs/index.html Q18. Lorsqu un client HTTP fait une requête pour obtenir la page index.html, quels seront les fichiers envoyés par le serveur? 1. seulement index.html 2. index.html et style.css 3. index.html, form.html,et erosion.html 4. index.html, form.html, erosion.html et style.css 5. aucune des réponses ci-dessus n est correcte Q19. Quelle est le poids du fichier index.html? 1. 50*40 = 2000 bits 2. 50*40 = 2000 octets 3. 50*40*8 = 160 000 bits 4. 50*40*8 = 160 000 octets Q20. Combien de temps faut-il a un ordinateur pour charger et afficher la page index.html à l aide d un modem qui charge 10kb/sec? On suppose que l affichage est immédiat une fois les informations nécessaires reçues. 1. entre 1 et 2 secondes 2. entre 5 et 10 secondes 3. entre 20 et 30 secondes 4. entre 50 et 60 secondes 5. plus de 60 secondes 8
(B5) A rédiger (4 points) Exercice 1 On ajoute l image dessin.jpg dans le répertoire DOC. Cette image correspond à une carte de France. On veut créer des zones cliquables associées à cette image. Pour cela, on utilise le logiciel GIMP pour définir ces zones. On obtient le code suivant : <Map name=aaa> <area shape="rect" coords="53,38,215,63" href="bbb"> <area shape="rect" coords="37,127,154,151" href="ccc"> </Map> <img src=ddd ismap usemap=eee> Cette portion de code sera insérée dans la page form.html. On souhaite que la première zone cliquable (BBB) pointe sur la page index.html et que la seconde zone pointe vers la page erosion.html Indiquer par quelles valeurs il faut remplacer les chaînes de caractères AAA, BBB, CCC, DDD, EEE? Exercice 2 Donner le code HTML correspondant à la visualisation suivante. (ne pas inclure de cadre noir extérieur). Le tableau n a pas à être centré dans la page. Ecrire les accents avec leur code HTML PARTIE II Algorithmique (sur 7 points) Exercice 3 : La suite de Fibonnaci Dans un tableau Excel, on souhaite faire une Macro inscrivant dans la première colonne du tableau des 15 premières valeurs de la suite de Fibonacci. Cette suite est définie par l équation suivante : U0 = 0 U1 = 1 Un = Un-1 + Un-2 On rappelle que pour écrire la valeur «0» dans la cellule A1, on écrit en algorithmique : Cellule(1,1) 0 Q3.1 Donner l algorithme correspondant à cette macro. 9
Exercice 4 On souhaite produire une action «DesRoues» permettant de reproduire la Figure 4. Pour cela, on procède en 2 temps. D abord on crée une action «UneRoue» paramétrée. Puis, on utilise cette action pour faire «DesRoues». Q4.1. Donner l algorithme décrivant une permettant de reproduire la figure 5. Les rectangles employés ont une longueur 10 fois supérieure à leur largeur. Le nombre de rectangle et la taille du rectangle doit être paramétrée. Q4.2. Donner un algorithme permettant de reproduire la figure 4. Vous fixerez la position initiale de la première roue dans l algorithme, le nombre de rayons et la taille des roues. Fig. 4 : ensemble de Roues Fig. 5 une roue 10