Exercice HTML: Page Spécifique
Rédigé par GC Team, Publié le 11 Janvier 2012, Mise à jour le Mercredi, 14 Décembre 2022 20:49![](/images/thumb/147/default.png)
Participez au vote ☆☆☆☆☆★★★★★
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<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> |