Proposition 1

Transcription

Proposition 1
CORRIGE TYPE
I. PARTIE THÉORIQUE : (20/20)
QCM (+2 bonne réponse)
Possible d’avoir plusieurs choix dans la même question
Q1. Comment faire un saut de ligne ?
Avec la balise <P>
Avec la balise <BR>
Avec la balise <S>
Q2. Quelle balise permet de mettre un texte en gras ?
<G></G>
<B></B>
<ST></ST>
Q3. Quelle balise permet de mettre un texte en exposant ?
<SUP></SUP>
<SUB></SUB>
<EXP></EXP>
Q4. Laquelle de ces balises donne le titre de plus grande taille ?
<H1>
<H3>
<H6>
Q5. Dans quelles balises insère-t-on le corps du site (ce qui est directement visible par le
visiteur) ?
<HEAD></HEAD>
<BODY></BODY>
<A></A>
Q6. Que signifie le sigle CSS ?
Coordoning Style Sheets
Cascading Style Sheets
Cascading Style Sheats
Q7. Quelle propriété du background n'existe pas ?
Background-font
Q8. A quoi correspondent les valeurs réspéctives du code suivant : 'margin :
Marge : haut droite bas gauche
Marge : droite haut gauche bas
Marge : droite bas gauche haut
Q9. Quelle syntaxe sert à définir une classe ?
. header
#header
Header
Q10. Qu'affichera le bloc <div id='header'></div> avec le css #header { background : red
url(images/header. png) no-repeat scroll 0 0; }
L'image header. png
La couleur rouge
Rien du tout
II. PARTIE PRATIQUE : (20/20)
Exercice 1
Expliquer chaque ligne de code html suivant
(10p)
<ol id="menu" class="simple_menu simple_menu_css horizontal black_menu">
<li><a href="index.html">Home</a></li>
<li><a href="#">Templates</a>
<!-- sub menu -->
<ol>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="cinema.html">Cinema</a></li>
<li><a href="slider.html">Nivo Slider</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li class="last"><a href="photogrid.html">Photo Grid</a></li>
<li><a href="image.html">Static Image</a></li>
</ol>
<!-- end sub menu -->
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="fullscreen-gallery.html">Fullscreen Gallery</a></li>
<li class="last"><a href="news.html">News</a></li>
</ol>
<div class="clr"></div>
<!-- menu 2 -->
<ol id="menu2" class="simple_menu simple_menu_css horizontal black_menu">
<li><a href="gallery.html">Portraits</a></li>
<li><a href="gallery.html">Landscapes</a></li>
<li class="last"><a href="gallery.html">Wildlife</a></li>
</ol>
CE CODE PERMET D’AFFICHER LA LISTE SUIVANTE QUI EST LA BAS D’UN MENU DE NAVIGATION
1. Home
2. Templates
1. Gallery
2. Cinema
3. Nivo Slider
4. Columns
5. Tabs
6. Photo Grid
7. Static Image
3. Portfolio
4. Fullscreen Gallery
5. News
1. Portraits
2. Landscapes
3. Wildlife
Exercice 2
Expliquer chaque ligne de cette partie de feuille de style
.float_left {
float: left;
background: #1A1A1A;
height: 170px;
width: 175px;
border: 1px solid #CCC;
box-shadow: 3px 3px 3px #e3e3e3;
margin: 0px 0px 13px 13px;
padding-top: 9px;
text-align: center;
}
Position à gauche
Arrière-plan
La longueur 170px
La largeur : 175 px
Bordure 1p solide avec une couleur
L’ombre
Les marges extérieures
Les marges intérieures
Alignement de texte centré
(10p)