M1 ID - Contrôle n°1

Conditions du contrôle

Vous allez devoir réaliser UNE page web, avec UNE feuille de style CSS. Celles-ci devront être rendues sur deux copies séparées indiquant clairement chacune ce qu'elle contient.

Une des feuilles représentera un fichier qui s'appellera page.html, l'autre un fichier qui s'appellera style.css. Il vous appartient dans la suite de choisir dans quelle page (c'est-à-dire dans quel fichier) doivent s'écrire les réponses aux questions qui vous seront posées.

Il vous est de plus totalement interdit d'utiliser les balises suivantes :

<font> <center>

ainsi que les attributs suivants dans toute balise dans le code HTML :

background link vlink text align valign

D'une manière générale toute balise ou tout attribut HTML intervenant sur la présentation est à proscrire.

Exercice 1

Quoi que vous écriviez dans ces pages, elle devront bien entendu pouvoir passer avec succès les contrôles du W3C. La feuille de style ne devra en particulier produire ni erreur ni avertissement.
Cela implique qu'un certain nombre de choses soient écrites avant tout dans la page, indépendamment de toute autre question.
Écrivez les.
HTML
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr" lang="fr">
<head>
      <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Contrôle n°1 - Correction</title>
</head><body>
....
</body></html>

Exercice 2

La page aura un fond jaune et le texte de la couleur #ff0000.
CSS
body { 
  background:yellow;
  color:#ff0000;
}

Exercice 3

La page doit avoir UN grand titre de type <h1> . Il devra avoir la présentation suivante : couleur de fond rgb(0,100,0), bord continu, épais et rouge, texte blanc, en gras, centré dans la ligne, écrit en sans-serif.
CSS
h1 { 
  background:rgb(0,100,0);
  color:white;
  border:thick solid red;
  text-align:center;
  font-family:sans-serif;
  font-weight:bold;
}

Exercice 4

Les prochaines réponses à une question qui nécessite d'écrire dans le corps de la page HTML devront être chacune précédée d'un titre de type <h2> dont le texte sera « Question n°XXX » (avec le bon numéro de question bien entendu) et dont la présentation sera :
  1. couleur du fond : blanc,
  2. texte noir, aligné à droite, de taille 20 pixels,
  3. pas de bord.
CSS
h2 { 
  background:white;
  color:black;
  text-align:right;
  font-size:20px;
}

Exercice 5

Dans la page page.html vous ajouterez des liens vers les pages suite.html (dont on supposera qu'elle existe dans votre répertoire) et http://www.univ-lille3.fr encadrés par <div class="choix"> et </div> (les deux dans le même <div>). Vous vous arrangerez pour qu'un texte explicite apparaisse à l'écran afin qu'on puisse cliquer.
HTML
<div class="choix">
	<a href="suite.html">Suite</a>
	<a href="http://www.univ-lille3.fr">Portail de l'université</a>
</div>

Exercice 6

Définissez dans la feuille de style tout ce qu'il faut pour que la zone <div class="choix">...</div> de la question précédente s'affiche en bas à gauche de votre page, à 5 pixels des bords gauche et bas, et qu'elle occupe la moitié de la largeur de la page et 10% de sa hauteur.
CSS
div.choix{
	position:fixed;
	right:5px;
	top:5px;
	width:50%;
	height:10%;
}

Exercice 7

Le code HTML ci-dessous...produit cet effet sans feuille de style.Il faut qu'il produise ceci avec une feuille de style :
<ol>
  <li>aaa</li>
  <li>aaa
     <ol>
        <li>bbb</li>
        <li>bbb</li>
        <li>bbb</li>
     </ol></li>
  <li>aaa
     <ul>
        <li>bbb</li>
        <li>bbb</li>
        <li>bbb</li>
     </ul></li>
  <li>aaa</li>
</ol>
  1. aaa
  2. aaa
    1. bbb
    2. bbb
    3. bbb
  3. aaa
    • bbb
    • bbb
    • bbb
  4. aaa
  1. aaa
  2. aaa
    • bbb
    • bbb
    • bbb
  3. aaa
    • bbb
    • bbb
    • bbb
  4. aaa

Remarque : Ne recopiez pas cette liste dans votre page.
Attention : il vous est interdit d'utiliser les attributs class, type et style : tout doit être défini par contexte dans la feuille de style.
CSS
ol {list-style-type:upper-roman;}
ol ol {list-style-type:lower-roman;}
ul {list-style-type:lower-alpha;} 

Exercice 8

Dans votre page définissez une zone, avec un texte quelconque et une taille quelconque, telle que :
  1. son fond est rouge et son texte est blanc ;
  2. elle a un bord blanc épais ;
  3. quand le pointeur de la souris passe au dessus de cette zone elle passe en couleurs inversées, fond blanc et texte rouge, tandis que le bord devient rouge.
HTML
<div class="solutionzone">
  bla bla  bla bla  bla bla  bla bla<br />
  bla bla  bla bla  bla bla  bla bla<br />
  bla bla 
</div>
CSS
div.solutionzone { 
  background:red;
  color:white;
  border:thick solid white;
}

div.solutionzone:hover { 
  background:white;
  color:red;
  border:thick solid red;
}

Dernière modification : 25/8/2016