Correction - FIL - Université Lille 1
Download
Report
Transcript Correction - FIL - Université Lille 1
Université Lille 1 – Licence S2
2013-2014
UE Technologies du Web 1
Devoir Surveillé
vendredi 14 mars 2014 – durée 1h
Précisez votre numéro de groupe sur votre copie.
Supports de cours et notes manuscrites de cours et TD autorisées. Autres documents intedits.
Exercice 1 :
Q1.
A propos d’XHTML :
Q 1.1. Quelle est la particularité de la balise <img> par rapport à la majorité des balises ?
Réponse. Elle est auto-fermante.
Q 1.2. Donnez une définition du rôle de la balise <strong> dans un document HTML.
Réponse. Elle a pour rôle de mettre fortement en évidence une portion de texte.
Q 1.3. Comment place-t-on du texte en commentaire dans un document HTML ? Donnez un exemple en
commentant le texte : « ceci est un commentaire ».
Réponse. <!-- ceci est un commentaire -->
Exercice 2 :
Q 1 . Dessinez l’arbre DOM correspondant au document ci-dessous. Vous ne représenterez pas les nœuds de type
texte.
<! DOCTYPE html >
< html xmlns = " http :// www . w3 . org /1999/ xhtml " >
< head >
< title > Document html 5 minimal </ title >
< meta charset = " UTF -8 " / >
</ head >
< body >
< header >
<p > < abbr title = " Technologies du Web 1 " > TW1 </ abbr > - Devoir surveillé 1
</ header >
</ p >
< h1 > Exercice 1 </ h1 >
< div class = " sujet " >
<p > Le premier exercice porte sur < strong > HTML </ strong >. En particulier il est demandé de
construire l ’ arbre < abbr > DOM </ abbr > d ’ un document . </ p >
<p > Ces notions ont été vues en <a href = " http :// portail . fil . univ - lille1 . fr / ls2 / tw1 " > cours
</ a > et travailler lors des TD . </ p >
</ div >
< div class = " solution " >
< div id = " solExo1 " class = " droite " >
< img src = " ds1 / solution - exo1 . jpg " alt = " la solution de l ’ exo 1 " / >
</ div >
<p > < em > Oups ! </ em > </ p >
</ div >
< h1 > Les autres exercices </ h1 >
< div class = " sujet " >
<p > Les autres exercices portent plutôt sur < abbr > CSS </ abbr >. </ p >
<p > Répondez aux questions avec précisions . </ p >
</ div >
<p > Fin de l ’ exercice </ p >
</ body >
</ html >
Réponse.
Q2.
Citez
• deux attributs
Réponse. charset,title, href, class, src, alt
• deux éléments de phrasés
Réponse. <abbr>, <strong>, <img>, <em>
• deux élements de flux
Réponse. <p>, <div>, <img>1 , <a>
qui sont utilisés dans ce document.
Q3.
Q 3.1. Quel sélecteur permet de sélectionner les éléments <abbr> dont l’attribut title est défini.
Réponse. abbr[title]
Q 3.2. Encadrez sur l’arbre précédent les éléments sélectionnés.
Q4.
Q 4.1. Quel sélecteur permet de sélectionner les éléments <p> fils d’un élément <div>.
Réponse. div>p
Q 4.2. Entourez sur l’arbre précédent les éléments sélectionnés.
Exercice 3 :
On considère la boite suivante pour l’élément <header> :
Q 1 . Donnez les définitions de règles CSS qui permettent d’obtenir cette boîte pour cet élément sachant que la
bordure si elle apparaît doit être en trait continu rouge.
Réponse.
{
border - left : solid 4 px red ;
padding : 10 px ;
margin - left :20 px ;
margin - right :100 px ;
}
1 Oui,
<img> est dans les 2 catégories...
Q2.
Couleur :
Q 2.1. Ajoutez la règle qui permet de définir une couleur d’arrière-plan rgb(128,0,0).
Réponse. background-color:
rgb(128,0,0);
Q 2.2. Quelle valeur permet d’obtenir la même couleur mais avec un coefficient de transparence de 0.3 ?
Réponse. rgba(128,0,0,0.3);
Q 3 . Reproduisez sans les valeurs numériques le dessin de la boîte ci-dessus et hachurez la zone qui prendra la
couleur d’arrière-plan définie.
Réponse.
Exercice 4 :
On considère le document suivant où les balises <pi > correspondent à des balises <p> qui ont été numérotées pour les
besoins de l’exercice. On propose également un ensemble de sélecteurs si .
<body>
<p1 > BLA </p1 >
<div>
<p2 > BLA </p2 >
<p3 id="trois"> BLA </p3 >
<p4 > BLA </p4 >
<p5 title="par cinq"> BLA </p5 >
</div>
<p6 class="truc"> BLA </p6 >
<p7 > BLA </p7 >
<div>
<p8 class="truc"> BLA </p8 >
<p9 > BLA </p9 >
</div>
</body>
Q1.
s1
s2
s3
s4
s5
s6
s7
:
:
:
:
:
:
:
p.truc
p+p
p#trois
div p.truc
p:first-child
div p
div p[titleˆ="par"]
Donnez une phrase qui décrit l’action des sélecteurs s2 et s4 .
Réponse. s2 : « Tous les éléments <p> qui suivent immédiatement un élément <p>. »
s4 : « Tous les éléments <p> de classe truc descendant d’un élément <div>. »
Q 2 . Pour chacun des sélecteurs donnez les coefficients de priorité a, b et c que vous présenterez dans un tableau
de la forme
Réponse.
s1
s2
s3
s4
s5
s6
s7
a
0
0
1
0
0
0
0
b
1
0
0
1
1
0
1
c
1
2
1
2
1
2
2
Q 3 . Dans un tableau similaire à celui ci-dessous, indiquez par une croix dans la case correspondante par quels
sk chacun des pi est sélectionné et entourez la croix du sélecteur qui l’emporte.
Réponse.
s1
p1
p2
p3
p4
p5
p6
p7
p8
p9
s2
s3
x
x
x
(x)
s4
s5
(x)
(x)
s6
s7
x
x
(x)
x
(x)
(x)
(x)
x
(x)
x
x
x
(x)