Un site Web - Exemple de page et de code HTML

L'encadré suivant présente un exemple de «page» HTML très simple. On y trouve du texte de couleur, des caractères gras et de grosseur variable, deux listes à puces et une liste numérotée, ainsi qu'un hyperlien vers le site Web des créateurs de la recette :

Tarte aux pommes et caramel à l'érable

Préparation : 20 min
Cuisson : 10 min
Portions : 8

Auteur : Les Producteurs toqués de l'île d'Orléans

Ingrédients

3 pommes
1 c. à soupe (15 ml) jus de citron
1 abaisse de tarte, légèrement cuite

Sauce au caramel :

1/3 tasse (85 ml) beurre
2/3 tasse (170 ml) farine tout-usage
2 c. à soupe (30 ml) sucre d'érable
1 tasse (250 ml) sirop d'érable
1/2 tasse (125 ml) jus de pommes
3/8 tasse (95 ml) crème 35%

Étapes

Peler les pommes, les trancher très minces et les arroser de jus de citron.
Déposer dans l'abaisse.
Cuire au four à 350 ºF (175 ºC) environ 10 minutes.
Pendant ce temps, dans une casserole, à feu doux, faire fondre le beurre et ajouter la farine.
Cuire environ 1 minute.
Ajouter le sucre d'érable, le sirop d'érable, le jus de pomme et la moitié de la crème.
Cuire en fouettant constamment jusqu'à épaississement.
Verser 1 tasse (250 ml) de caramel sur les pommes et laisser refroidir avec un papier ciré sur le dessus.
Ajouter au caramel restant, l'autre moitié de la crème et bien mélanger.
Accompagner la tarte de ce mélange.

Code HTML

Dans l'encadré qui suit, vous voyez à quoi ressemble le code HTML qui défini l'apparence du premier encadré. Le code HTML est fait de caractères ordinaires, sans couleur ou autre ornementation. Des balises qui se trouve dans le code détermine l'apprarence et la mise en page de la page finale.

Chaque balise s'ouvre avec la une expression de format <balise> et se ferme avec une expression de format </balise>. Par exemple, au tout début du code, la balise paragraphe (p) s'ouvre avec l'expression , qui indique une justification de paragraphe à gauche, et se ferme quatre lignes plus bas avec l'expression . Vous remarquez que les balises sont imbriquées les une dans les autres : une balise s'ouvre, une deuxième s'ouvre, la deuxième se ferme, la première se ferme... Ces imbrications peuvent devenir très complexes.

Derrière chaque page qui est publiée sur le Web, il y a une page de code semblable à celle de l'encadré ci-bas. Vous pouvez vous amuser, en comparant les deux encadrés, à deviner quelle balise détermine quel caractéristique de mise en page!

Tarte aux pommes et caramel à l'érable


Préparation : 20 min 
Cuisson : 10 min 
Portions : 8


Auteur : <a href="http://www.producteurstoques.com/" target="_parent">Les Producteurs toqués de l'île d'Orléans</a>


Ingrédients 

<ul>
<li>
3 pommes</li>
<li>1 c.à soupe (15 ml) jus de citron</li>
<li>1 abaisse de tarte, légèrement cuite
</li>
</ul>

Sauce au caramel :

<ul>
<li>
1/3 tasse (85 ml) beurre</li>
<li>
2/3 tasse (170 ml) farine tout-usage</li>
<li>
2 c.à soupe (30 ml) sucre d'érable</li>
<li>
1 tasse (250 ml) sirop d'érable</li>
<li>
1/2 tasse (125 ml) jus de pommes</li>
<li>
3/8 tasse (95 ml) crème 35%
</li>
</ul>
<div align="left">
Étapes
</div>
<ol>
<li>Peler les pommes, les trancher très minces et les arroser de jus de citron.</li>
<li>Déposer dans l'abaisse.</li>
<li>Cuire au four à 350 ºF (175 ºC) environ 10 minutes.</li>
<li>Pendant ce temps, dans une casserole, à feu doux, faire fondre le beurre et ajouter la farine.</li>
<li>Cuire environ 1 minute.</li>
<li>Ajouter le sucre d'érable, le sirop d'érable, le jus de pomme et la moitié de la crème.</li>
<li>Cuire en fouettant constamment jusqu'à épaississement.</li>
<li>Verser 1 tasse (250 ml) de caramel sur les pommes et laisser refroidir avec un papier ciré sur le dessus.</li>
<li>Ajouter au caramel restant, l'autre moitié de la crème et bien mélanger.</li>
<li>Accompagner la tarte de ce mélange.
</li>
</ol>

« Précédent | Suivant »

Un projet DesMondes