I. QCM (10pts)
Complétez le tableau ci-dessous (directement sur cette feuille que vous joindrez à votre copie, ou en reproduisant le tableau ci-dessous sur votre copie).
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
HTML
1. Le HTML est un langage dit :
a) Encodé
b) Crypté
c) Balisé
d) Orienté objet
2. Quel est le schéma HTML correct ?
a) <html> <body> <head> </head> </body> </html>
b) <html> <head> </head> <body> </body> </html>
c) <html> <head> </head> <body> </html> </body>
d) <html> <body> </body> <head> </head> </html>
3. Entre quelles autres balises les balises <link> se trouvent-elles ?
a) <body> </body>
b) <head> </head>
c) <title> </title>
d) <script> </script>
4. Quelle balise permet d’aller à la ligne ?
a) <b>
b) <b />
c) <br>
d) <br />
5. Comment insérer une image ?
a) <img src = "image.png">
b) <img href = "image.png">
c) <a img = "image.png">
d) <div img = "image.png">
CSS
6. Comment mettre en rouge le texte de tous les éléments de type <p> ?
a) p {color : red;}
b) p {font-color : red;}
c) p {background-color : red;}
d) <p style = "color : red">
7. Comment définir une classe page qui s’applique uniquement aux éléments <div>?
a) page.div {….}
b) page#div {….}
c) div.page {….}
d) div#page {….}
8. Comment mettre en bleu les liens que l’utilisateur a consultés ?
a) <a style = ”color : blue”>
b) a : hover {color : blue;}
c) a : visited {color : blue;}
d) a : active {color : blue;}
9. Comment définir un tableau de largeur 200px ?
a) <table width = ”200px”>
b) <tableau height = ”200px”>
c) table {width : 200px;}
d) table {height : 200px;}
10. Comment mettre en italique tous les items des listes ?
a) li.ul {font-style : italic;}
b) ol {text-decoration : italic;}
c) ul {text-decoration : italic;}
d) li {font-style : italic;}
II. Positionnement (5pts)
On considère le code suivant :
...
<style type="text/css">
div {
border: solid 1px black;
margin: 10px;
width: 100px;
height: 50px;
}
</style>
...
<div id="conteneur" style="border: 3px dotted black; width: 280px; height: 200px;">
<div id="blocA"> Bloc A </div>
<div id="blocB"> Bloc B </div>
<div id="blocC"> Bloc C </div>
</div>
...
permettant d’afficher la page suivante :
Bloc A
Bloc B
Bloc C
Pour chaque cas décrit ci-dessous, schématisez les blocs A, B et C dans le conteneur (représenté par un rectangle en pointillés).
Cas 1
Nom | position | top (px) | left (px) | visibility | display | float |
conteneur | static | |||||
blocA | static | 0 | 140 | visible | bloc | none |
blocB | static | 60 | 0 | visible | none | none |
blocC | static | 0 | 140 | visible | bloc | none |
Cas 2
Nom | position | top (px) | left (px) | visibility | display | float |
conteneur | static | |||||
blocA | static | 0 | 140 | visible | bloc | none |
blocB | static | 60 | 0 | visible | inline | none |
blocC | static | 0 | 140 | visible | inline | none |
Cas 3
Nom | position | top (px) | left (px) | visibility | display | float |
conteneur | static | |||||
blocA | static | 0 | 140 | visible | bloc | left |
blocB | static | 60 | 0 | visible | bloc | left |
blocC | static | 0 | 140 | visible | bloc | left |
Cas 4
Nom | position | top (px) | left (px) | visibility | display | float |
conteneur | static | |||||
blocA | relative | 0 | 140 | visible | bloc | none |
blocB | relative | 60 | 0 | visible | bloc | none |
blocC | relative | 0 | 140 | visible | bloc | none |
Cas 5
Nom | position | top (px) | left (px) | visibility | display | float |
conteneur | absolute | |||||
blocA | absolute | 0 | 140 | visible | bloc | none |
blocB | absolute | 120 | 0 | visible | bloc | none |
blocC | absolute | 60 | 140 | visible | bloc | none |
III. Programmation HTML & CSS (5pts)
Complétez le code de la page HTML ci-dessous.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body{
color:black;
text-align:center;
}
#entete{
A compléter
}
#menu{
float:left;
width:20%;
height:400px;
background-color:gray;
text-align:left;
}
#menu ul{
list-style:none;
font-weight:bold;
margin:20px;
}
#menu ul li{
margin-top:10px;
margin-bottom:10px;
}
#menu ul li a{
color:white;
text-decoration:none;
}
#page{
A compléter
}
.titre{
font-size:20pt;
font-weight:bold;
margin:20px;
}
.colonne1{
width:100px;
font-weight:bold;
background-color:black;
color:white;
padding:10px;
}
.colonne2{
width:300px;
background-color:gray;
padding:10px;
text-align:left;
}
.colonne2 a{
color:white;
text-decoration: underline;
font-style:italic;
}
.noteBasPage{
font-size:8pt;
}
</style>
</head>
<body>
<div id="entete">LIENS</div>
<div id="menu">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="html.html">Cours HTML</a></li>
<li><a href="css.html">Cours CSS</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="liens.html">Liens</a></li>
</ul>
</div>
<div id="page">
A compléter
</div>
</body>
</html>
3/5