Voici le code :
(Il est pas super propre car je me suis inspiré d'un tutoriel et n'est pas encore terminé)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #003399 ;
}
div#conteneur
{
width: 770px ;
padding: 0 0;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
h1#header
{
height: 265px ;
background: url(C:\Documents and Settings\Bohnert Cédric\Bureau\creation web\images\background.jpg) top ;
margin: 0 ;
padding: 30;
color: #3333cc;
}
h1#header a
{
width: 400px ;
display: block ;
color: #3333cc ;
margin: 0 ;
}
ul#menu
{
padding: 0 0 0 0;
background: url(C:\Documents and Settings\Bohnert Cédric\Bureau\creation web\images\background.jpg) left top ;
list-style-type: none ;
}
ul#menu li
{
float: left ;
text-align: center ;
background: url(C:\Documents and Settings\Bohnert Cédric\Bureau\creation web\images\background.jpg) left top ;
}
ul#menu li a
{ padding: 0 0 0 0;
width: 130px ;
line-height: 30px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #000033 ;
display: block ;
text-decoration: none ;
border-right: 2px solid #ffcc33 ;
background: url(C:\Documents and Settings\Bohnert Cédric\Bureau\creation web\images\background.jpg) left top ;
}
ul#menu li a:hover
{
background: url(bg_menu.gif) repeat-x 0 0 ;
}
div#contenu
{
padding: 10px 25px 10px 70px ;
background: url(C:\Documents and Settings\Bohnert Cédric\Bureau\creation web\images\background.jpg) left top ;
}
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #3333cc ;
border-bottom: 1px solid #9b2 ;
}
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenu a
{
color: #8a0 ;
}
div#contenu a:hover
{
color: #9b2 ;
}
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 97px ;
text-align: right ;
color: #8a0 ;
background: url(C:\Documents and Settings\Bohnert Cédric\Bureau\creation web\images\ikheader.jpg) left top ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
* html pre
{
width: 636px ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}
</style>
</head>
<body>
<div id="conteneur">
<h1 id="header"><center><a href="etape1.html" title="Les Royaumes D'Acier - Accueil"><img src="C:\Documents and Settings\Bohnert Cédric\Bureau\creation web\images\iklogo.jpg" border="0" alt="Les Iron Kingdoms" /></a></center></h1>
<ul id="menu">
<li><a href="etape1.html">Etape n°1</a></li>
<li><a href="etape2.html">Etape n°2</a></li>
<li><a href="etape3.html">Etape n°3</a></li>
<li><a href="etape4.html">Etape n°4</a></li>
<li><a href="etape5.html">Etape n°5</a></li>
</ul>
<div id="contenu">
<h2>Présentation des Royaumes d'Acier </h2>
<p>Ce monde campagne D&D 3.5 est inspiré du jeu d'action de figurines WARMACHINE et de HORDES développé par Privateer Press. L'action se déroule sur Cain, plus précisement sur la partie occidentale du continent d’Immoren, au sein de ce que l'on appelle les Royaumes d'Acier (Iron Kingdoms). Cette terre, où cohabitent tant bien que mal diverses races intelligentes (humains, nains, elfes, gobelins, trollkins… ), est le siège de luttes incessantes pour la suprématie. Le destin des nations se joue sur les champs de bataille et dans la boue des tranchées. Chevaliers en armure, fusiliers et magiciens, épaulés par des géants de métal, les warjacks, s'opposent et s'entretuent dans ces guerres perpétuelles.
</p>
<p>Dans cet univers de full metal fantasy, la magie n'est plus la seule source de pouvoir. L'avènement de la science a permis la découverte du moteur à vapeur, et les Royaumes d'Acier sont de fait plongés dans une ère de révolution industrielle. Les problèmes de surpopulation urbaine, de pollution et de ségrégation raciale viennent s'ajouter à la lutte contre les ennemis héréditaires ou les créatures monstrueuses.
</p>
<p>Magie, vapeur et armes à feu : ces trois éléments sont les pierres angulaires de l'univers fantastique et impitoyable des Royaumes d'Acier. Alors chargez votre épée mékamagique, vérifiez vos munitions et remettez du charbon dans votre warjack, car votre équipement fera souvent la différence entre la victoire et la défaite, et l'art de la guerre en Immoren ne tolère aucune approximation.</p>
</div>
<p id="footer">.</p>
</div>
</body>
</html>
