Exercice HTML: Page Spécifique
A titre d'exemple on vous demande de réaliser la page correspondant à la recette des Œufs sur le plat de manière à ce qu'elle ressemble à celle ci-dessous:
- L' entête et le pieds de page sont conforme à la charte.
- L'illustration de la recette est à droite avec une légende en petit caractères
- Les ingrédients sont listés dans une zone à fond vert pàle et dans une police sans-serif. Chaque élément de la liste est indexe par une lettre (par ordre alphabétique)
- Les noms des ingrédients apparaissent en bleu
- Les commentaires sont en rouge, décalés d'une largeur équivalente à 5 lettres M vers la droite.
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 | html> head> meta charset="UTF-8"/> link rel="stylesheet" type="text/css" href="charte.css" media="screen" /> link rel="stylesheet" type="text/css" href="oeuf.css" media="screen" /> title>l'oeuf/title> style> img { width="30%" height="30%"} /style> /head> body> div class="en-tete"> h1>Cuisine/h1> a href="">Accueil/a>>a href="">Recettes simples/a>>b>Œufs sur le plat/b> /div> h2>a id="a1">Œufs sur le plat/a>/h2> div class="illustration"> img src="oeuf.png" alt="image d'un œuf."/> p>Une illustration très laide, mais libre de droits./p> div>/div> /div> div class="ingredients"> h3>Ingrédients/h3> ol> li>une noisette de span class="ingr">beurre/span> ; p class="remarque">Si le beurre est salé, on salera moins les œufs ensuite./p> /li> li>des span class="ingr">œufs/span> p class="remarque">prendre des œufs raisonnablement frais/p> /li> /ol> /div> h3>Préparation/h3> ol class="preparation"> li>Faire chauffer la poêlle/li> li>la graisser avec le beurre/li> li>casser les deux œufs dans la poêlle/li> li>retirer du feu quand la consistence souhaitée est atteinte/li> /ol> div class="bas-de-page"> p> NFA016: br/> img src="logo_cnam.png" alt="le logo du cnam"/>/p> /div> /body>/html> |