Bon le HTML :
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
< head>
< title>Bienvenue chez moi.</title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" / >
< link rel="stylesheet" type="text/css" href="type.css" title="default" media="screen">
< /head>
< body>
< div id="en_tete">
< a href="http://www.freazer.com/perso/ricou/"><img src="http://site.voila.fr/ricou/bann.jpg" alt="Bannière"></a>
< /div>
< div id="menu">
< div id="menu">
< div class="element_menu">
< h3>Menu</h3>
< ul>
< li><a href="moi.html">Moi.</a></li>
< li><a href="espacepc.html">Espace PC.</a></li>
< /ul>
< /div>
< div id="corps">
< p>
< h2>Ici, vous êtes chez moi.</h2><br/>
< /p>
< p>
Ceci est mon site perso. Vous allez découvrir mon univers < img
src="http://site.voila.fr/ricou/tirelangue.gif">.
< /p>
< /div>
< div id="pied_de_page">
< h4><a href="shizuko@hotmail.fr">M´écrire.</a></h4>
< /div>
< /body>
< /html>
- *******************************************
Et le CSS :
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
}
/ * L´en-tête */
- en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
/ * Le menu */
- menu
{
float: left;
width: 120px;
}
. element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
}
/ * Quelques effets sur les menus */
. element_menu h3 / * Tous les titres de menus */
{
color: Gold;
font-family: " Comic Sans MS", serif;
text-align: center;
}
. element_menu ul / * Toutes les listes à puces se trouvant dans un menu */
{
font-family: " Comic Sans MS", serif;
list-style-image: url("images/puce.png"); / * On change l´apparence des puces */
padding: 0px; / * Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; / * . .. mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; / * Idem pour margin, ça nous évite d´avoir à en écrire 4 ( margin-left, margin-right...) */
margin-bottom: 5px; / * Même chose que tout à l´heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
. element_menu a / * Tous les liens se trouvant dans un menu */
{
color: red;
}
. element_menu a:hover / * Quand on pointe sur un lien du menu */
{
background-color: blue;
color: magenta;
}
- corps
{
margin-left: 140px; / * Une marge à gauche pour pousser le corps, afin qu´il ne passe plus sous le menu */
margin-bottom: 20px; / * Ca c´est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; / * Pour éviter que le texte à l´intérieur du corps ne colle trop à la bordure */
color: #B3B3B3;
background-color: #626262; / * Une couleur de fond pour le corps */
background-image: url("images/motif.png");
background-repeat: repeat-x; / * Une petite image de fond qui se répètera horizontalement en haut */
border: 2px solid black; / * Une bordure pour bien marquer les limites du corps et pour faire joli */
}
h1
{
text-align: center;
color: blue;
font-size: x-large;
font-family: " Comic Sans MS", Arial, serif;
}
h3
{
text-align: center;
color: gold;
font-size: large;
font-family: " Comic Sans MS", Arial, serif;
}
h4
{
text-align: center;
color: black;
font-size: small;
font-family: " Comic Sans MS", Arial, serif;
}
souligne
{
text-decoration: underline;
text-align: center;
}
table
{
border-collapse: collapse; / * Les bordures du tableau seront collées ( plus joli) */
}
td
{
border: 2px solid red;
}
2 balises ouvertes, aucune qui sont fermées 
d´avance.
..."></a>