Exercice HTML: Site de recettes de cuisine
On veux réaliser un site de recettes de cuisine. Il se compose de plusieurs pages. Entre autre une page d'accueil (que l'on ne demande pas de réaliser), une page affichant les recettes simples et une page associée à chaque recette.
La charte du site impose que chaque page dispose d'un entête et d'un pied de page
- L' entête et le pied de page sont centrés sur fond mauve.
- Dans l'en-tête de chaque page, on dispose de fonctionnalités de navigation dans la hiérarchie des pages (exemple Accueil>Recettes simples>Œufs sur le plat).
- Le pied de page comprend une information (ici NFA016 et le logo du cnam) situé à droite. Le logo à la largeur de 2 lettre M.
On vous demande de réaliser une pages des recettes simple qui ressemble à celle présentée ci-dessous:
- L' entête et le pieds de page sont conforme à la charte.
- Chaque nom de recette apparaît sur une ligne précédée d'une illustration.
- Les illustration on 3 fois la auteur de la lettre M
- Les lignes sont en alternance sur fond blanc et sur fond violet.
- Cliquer sur un nom de recette renvoie a la page de description correspondante.
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 | html> head> meta charset="UTF-8"/> link rel="stylesheet" type="text/css" href="charte.css" media="screen" /> title>Les recettes simples/title> style> table {font-size:x-large;} td img{height:3em;} tr:nth-child(even) {background-color: rgb(130,40,230);} tr:nth-child(odd) {background-color: white;} /style> /head> body> div class="en-tete"> h1>Cuisine/h1> a href=".tout">Accueil/a>>a href="">b>Recettes simples/b>/a> /div> table> caption>Mes recettes simples/caption> tr> td>img src="pizza.png" alt="une pizza" />/td>td>a href="pizza.html">Pizza/a>/td> /tr> tr> td>img src="saucisses-frites.png" alt="une saucice"/>/td> td>a href="saucisses-frites.html">Saucisses frites/a>/td> /tr> tr> td>img src="sardines.png" alt="sardines" />/td> td>a href="sardines.html">Sardines/a>/td> /tr> tr> td>img src="oeuf.png" alt="oeuf" />/td> td>a href="oeuf.html">Œufs sur le plat/a>/td> /tr> tr> td>img src="ravioli.png" alt="ravioli"/>/td> td>a href="ravioli.html">Ravioli/a>/td> /tr> /table> div class="bas-de-page"> p> NFA016: br/> img src="logo_cnam.png" alt="le logo du cnam"/>/p> /div> /body> /html> |