Il faut au moins avoir un fichier Html et un fichier CSS; (merci siteduzero)
voici une exemple du fichier 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>Le Site de Menelith</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="cssindex" href="index.css" />
</head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<div class="element_menu">
<h3>Le Projet</h3>
<ul>
<li><a href="page1.html">L´histoire</a></li>
<li><a href="page2.html">F.A.Q.</a></li>
<li><a href="page3.html">Le Monde</a></li>
</ul>
</div>
<div class="element_menu">
<h3>La Création</h3>
<ul>
<li><a href="page4.html">Contacts</a></li>
<li><a href="page5.html">Artworks</a></li>
<li><a href="page6.html">Screens</a></li>
<li><a href="page7.html">Liens</a></li>
</ul>
</div>
</div>
<div id="corps">
<h1>Le site sur Menelith !< /h1>
<p>
Bonjour et bienvenue sur mon site sur Menelith ! <br />
Ce jeu qu´est-ce que c´est ?
</p>
<h2>Un MMORPG crée sous RealmCrafter</h2>
<p>
Le jeu Menelith sera un <acronym title="Massively Multiplayer Online Role Playing Game">MMORPG</acronym> en 3D créer sous le logiciel "Realm Crafter"</p>
</p>
<p>
Une F.A.Q. sera présente sur le site expliquant les différents aspects du jeu.
</p>
<h2>Realm Crafter ?< /h2>
<p>
C´est cool , mais c´est quoi Realm Crafter ?< br />
RealmCrafter est un logiciel de création de MMORPG 3D.Realm Crafter est un Engine de MMORPG qui peut être facilement utilisé pour créer un environnement énorme et riche avec aucune connaisance de programmation !
</p>
<p>
Pour plus d´informations sur ce programme visiter le site officiel : www.realmcrafter.com (en anglais)
<br/>
Ou sinon la version française du site : http://realmcrafter.jexiste.fr
</p>
<h2>Et ce jeu ? Il sort quand ?< /h2>
<p>
Sachant que le logiciel de création ne sort que vers la fin des vacances , la création du jeu ne peut commencer à la sortie de Realm Crafter, et comme la création du jeu prendra beaucoup de temps ... La date de sortie reste incertaine.
<br/> Par contre le scénario et déja en construction ainsi que les Artworks des différents éléments du jeu.
</p>
<h2>Recrutement</h2>
<p>
Ce site est créé pour informer les joueurs de notre futur jeu , mais aussi de recruter des gens pour travailler avec nous ! Pour la création nous aurons besoin de :
<ul>
<li>Modélisateurs 3D</il>
<li>Programmateurs Blitz Basic (Peut-être)</il>
<li>Scénaristes pour les quetes</il>
<li>Webmaster (pour créer un site digne du nom ^^)</il>
</ul>
</p>
<p> Voilà tout pour le moment ! Le site sera bientôt mise à jour (j´espère) avec des liens vers différents aspects du jeu. (ex : F.A.Q. ; Artworks etc etc etc...)
</p>
<p class="ps">
P.S. : Le jeu sera bien sûr , ENTIERREMENT GRATUIT et exclusivement en Français ! (Une version anglaise sera crée si notre chèr jeu : "Menelith" trouve du succès.)
</p>
<p class="ps2">
P.S.2 : Désolé pour les fautes d´orthographes ;- )
</p>
</div>
<div id="pied_de_page">
<p>Copyright "Menelith Corporation" 2005, All Rights Reserved</p>
</div>
</body>
</html>
Puis le contenu du fichier CSS:
p
{
text-indent: 30px;
color: silver;
font-size: 18px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
h1, h2
{
text-decoration: underline;
font-family: "Arial Black", Arial, Verdana, serif;
color: white;
text-align: center;
}
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d´enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image:
url("http://www.aboutstonehenge.info/images/educat
ion/stonehenge-wallpaper-3.jpg");
background-repeat: no-repeat; /* Le fond ne se répète pas */
background-position: center; /* Le fond est aligné en haut à droite */
background-attachment: fixed;
}
ul
{
color: red;
font-size: 18px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
list-style-position: inside;
}
a img
{
border: none;
}
- en_tete
{
width: 760px;
height: 100px;
background-image:
url("http://img281.imageshack.us/img281/8227/banne
rmenelith24qv.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
- menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
}
.element_menu h3 /* Tous les titres de menus */
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
text-decoration: underline;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: disc; /* 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: #B3B3B3;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
- 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-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 */
}
- pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}
- pied_de_page p
{
color: black;
}
.ps
{
color: lime;
}
.ps2
{
color: lime;
}
Et voila !! ! Désolé pour le gros SPAM !! !
)... 