Examen HTML/CSS 2018 : sujet2
Exo1 : consignes de présentation
Les trois exercices sur machine seront présentés dans une unique page disposant d'un menu permettant l'accès à chaque exercice :
Consignes
- La présentation de la page pourra être améliorée au goût de chacun
- La feuille de style sera externe
- Le travail sera réalisé en local
- En fin d'examen, la page, la feuille de style et les images seront regroupées au sein d'un dossier à votre nom qui sera mis en ligne sur le serveur et zippé en local
- La copie sera rendue sous forme de mail avec le dossier zippé en pièce jointe et l'adresse du sujet (non zippé) déposé sur le serveur
Exercice 2 (sur papier)
En se basant sur l'arbre ci dessous :
- déterminer les éléments atteints par les sélecteurs ci dessous :
- div h2
- div + div
- div + div p
- * + div p
- div + *
- body * * p
- * + p *
- p + p
- p:first-child *
- *:first-child > p
-
Quel sélecteur minimal pour atteindre chacun des éléments suivants :
- 27 30
- 18 20 23
- 28 29 31 32
- 8 16 17 24
- 2 6 7 26
<div class="podium">
<div>
</div>
</div>
1) A partir du code ci-dessus, sans le modifier, construire le podium ci-dessous :
2) Sans modifier le code source, numéroter les places :
3) Sans modifier le code, apporter une touche bucolique en utilsant l'image ci-dessous :
notes :
- la couleur du podium est : #E8A91C
- la question 3 peut être traitée sans passer par la question 2
- on pourra faire appel aux propriétés : display et position, ainsi qu'à des pseudo-éléments
Exos 4 : mobiles
en utilisant le code ci-dessous (sans le modifier) :
<div id="mobil">
<div>
</div>
<div>
</div>
</div>
<p></p>
obtenir le résultat suivant :
- la hauteur du conteneur est de 500px
- les mobiles ont une hauteur et une largeur de 50px (hors bordures)
- lors du survol du conteneur :
- le curseur prend la forme d'une main (pointer)
- la mention "cliquer pour voir" aparait centrée sous la figure
- lors du clic sur le conteneur
- les deux mobiles inversent leur position
- la mention "bravo !!!" apparait en rouge, centrée sous la figure
-
lorsque le clic souris est relaché, les deux mobiles reprennent leur position initiale
- les deux mobiles seront positionnés de façon relative
Exos 5 : menus
Soit le code ci-dessous qui ne sera pas modifié :
<div id="navig"><div><h3>menu1</h3>
<div><p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
</div> </div> <div><h3>menu2</h3>
<div><p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
</div> </div> <div><h3>menu3</h3>
<div><p>item1</p>
<p>item2</p>
<p>item3</p>
</div> </div> </div> Obtenir le résultat suivant :