Consignes : le sujet est séparé en deux : la partie HTML et la partie CSS. Pensez bien à rendre les deux. Les réponses aux questions se fait sur le sujet qui est ensuite ramassé. Tous documents autorisés. Durée : 1h Le barème n est donné qu à titre indicatif. Partie CSS Question CSS-1 : QCM (2 points) Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur : color : bleu ; width : 1m ; weight : 50px; text-decoration :blink ; background-color: #FF0000; font-style: italic; border-style : solid ; position : fixé ; margin : 2 em ; Parmi ces affirmations, cochez celles qui sont vraies : CSS signifie Cascading Style Sheet Tous les navigateurs interprètent correctement le code CSS CSS est défini par le Microsoft CSS est défini par le W3C Les couleurs en CSS peuvent être exprimées selon leur code RGB Le centimètre est une unité de longueur de CSS Le code CSS est toujours dans la page html
Question CSS-2 : Mise en forme (4 points) Quel code CSS faut-il utiliser si l on veut donner la couleur rouge (couleur du texte) et une police de caractère grasse à tous les paragraphes P qui suivent un titre de niveau 3? Comment faire en sorte que, lorsque la souris les survole, les liens hypertextes aient un fond jaune et soient écrits en majuscule?
Comment ajouter une numérotation automatique du style «Question CCS-1»(1 étant le numéro incrémenté automatiquement) pour tout les titres de niveau 1? Précisez comment modifier la première lettre de tous les paragraphes P pour qu elle ait le double de taille que les autres lettres du paragraphe et quelle soient écrite en rouge.
Question CSS-3 : Prédire le résultat Voici un fichier index.html : (4 points) <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>intro Internet, UNS</title> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <table style="width: 100%;"> <tbody> <tr> </tr></tbody> </table> 1 <td><h1>intro Internet, UNS</h1></td> <td><div class="date">last update : 10/10/2008 16:12:19</div></td> 2 <fieldset><legend>cours et td sur HTML/xhtml</legend> <ul> <li><strong>cours html : </strong><a href="html/html-1p.pdf">les transparents sur html, un par page (lecture)</a> et <a href="html/html- 4p.pdf">les transparents 4 par pages (impression)</a> et les exemples du cours sont disponibles <a href="html/exemple">dans ce répertoire</a>.</li> <li><strong>exercices : </strong><a href="xhtml/exo">l'énoncé du premier tp</a></li> </ul> </fieldset> 3 <fieldset><legend>cours et td sur CSS</legend> <ul> <li><strong>cours CSS: </strong><a href="css/css.pdf">les transparents sur CSS, un par page (lecture)</a> et <a href="css/css- 4p.pdf">les transparents 4 par pages (impression)</a> et les exemples du cours sont disponibles <a href="css/exemple">dans ce répertoire</a>.</li> <li><strong>exercices : </strong> <a href="css/exo">l'énoncé du second tp</a> 4 </li> </ul> </fieldset> </body> </html>
Et voici un fichier style.css (qui est dans le même répertoire que le fichier index.html ci-dessus) : fieldset { background: #FFFAC0; /* un jaune */ margin: 1em 0em; legend { background-color:#c7f4ae; /* un vert clair */ color: black; font-weight:bold; font-variant: small-caps; border: green thin solid; h1 { font: normal small-caps 900 36px/44px arial; background-color: black; color: #90EE90; /* un vert */ border-style: groove; border-color: #90EE90; text-align: center; a:hover { background-color:#c7f4ae; /* un vert clair */ div.date { text-align: right; font-style: italic; color:#999999; /* un gris clair */ body { text-align: justify; color: gray; background-color: #EEFFEE; /* un vert très clair */ Remplissez le tableau ci-dessous qui concerne la mise en forme des éléments HTML encadrés, tels qu ils apparaissent dans les navigateurs. Les valeurs possibles à mettre dans les cases sont indiquées sur la seconde ligne du tableau.
Style valeurs possibles Alignement du texte gauche, droite, centré, justifié Couleur du texte valeur rgb ou dénomination française Couleur du fond valeur rgb ou dénomination française Encadré? Gras? Italique? Casse oui ou non oui ou non oui ou non minuscules, majuscules, petites majuscules, comme le texte tapé Cadre 1 Cadre 2 Cadre 3 Cadre 4 Cadre 4 quand la souris le survole