Profitez de notre offre de création de site internet à un prix spécial pour une durée limitée.
Introduction
Ce tutorial a pour but de vous apprendre à créer votre propre site web statique et son design, avec comme seule image, la bannière .
Voici ce que contiendra votre site :
- Un menu général à gauche
- Un sous-menu à droite
- Votre corps au centre
- Un pied de page
Voici ce dont vous aurez besoin :
- Un hebergeur
- Filezilla pour le transfert de vos fichiers sur votre serveur
- Notepad ou autre éditeur de texte pour le codage du site
- Une bannière
N’oubliez pas de sauvegarder assez souvent votre avancement.
C’est parti
1. La base du site en HTML
Ouvrez votre éditeur de texte.
On va commencer par créer un bloc “conteneur” qui contiendra le site web statique et qui permettra d’aligner le tout parce qu’on l’aura centré :
Code: <center><div id="conteneur"></div></center>
Quand je ne le préciserai pas, vous insérerez le code dans ce bloc. Mtn, on va créer un bloc qui contiendra votre bannière :
Code: <div id="header"></div>
Pour l’instant, on n’inserera rien dans les blocs, tout se mettra dans le CSS.
Ensuite on va créer trois blocs : deux menu et le corps. Je vous conseille de les mettre dans l’ordre suivant :
Code: <div id="menug"></div> <div id="menud"></div> <div id="corps"></div>
Et pour finir cette première partie, nous allons mettre notre pied de page :
Code:
<div id="footer"></div>
N’oubliez pas de mettre des sauts a la ligne.
Voici ce que vous devriez obtenir :
Code: <html> <head> <title>Mon site</title> </head> <body> <center> <div id="conteneur"></div> <div id="menug"></div> <div id="menud"></div> <div id="corps"></div> <div id="footer"></div> </div> </center> </body> </html>
2. On met de l’ordre dans nos blocs
Après avoir fait un lien depuis votre fichier HTML vers la page CSS :
Code: <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
enregistrez le (personnelemnt je l’ai appelé “index.html”) puis ouvrez une nouvelle page vide et enregistrez-la (“style.css”).
Cette page contiendra le style du site.
Nous allons commencer par donner une largeur au bloc “conteneur” :
Code:
#conteneur {
width: 80%;
}
Pour rendre notre site un peu plus beau, on va lui donner une couleur de fond :
Code:
body {
background-color: black;
}
Puis nous allons donner une hauteur, une largeur et une image du fond au bloc “header” :
Code:
#header {
width: 500px;
height: 400px;
background-image: url("header.png");
}
Et maintenant c’est le plus dur de cette étape 2, positionner nos deux menus et le corps :
Code:
#menug {
float: left;
border: 2px solid grey;
width: 15%;
height: 340px;
}
#corps {
border: 2px solid grey;
height: 340px;
width: 66%;
position: center;
}
#menud {
float: right;
border: 2px solid grey;
width: 15%;
height: 340px;
}
Et pour finir cette deuxième étape, on va positionner le pied de page :
Code:
#footer {
width: 100%;
border: 2px solid grey;
height: 20px;
}
Donc voici ce que vous devriez avoir dans votre page CSS :
Code:
body {
background-color: black;
}
#conteneur {
width: 80%;
}
#header {
width: 500px;
height: 400px;
background-image: url("header.png");
}
#menug {
float: left;
border: 2px solid grey;
width: 15%;
height: 340px;
}
#corps {
border: 2px solid grey;
height: 340px;
width: 66%;
position: center;
}
#menud {
float: right;
border: 2px solid grey;
width: 15%;
height: 340px;
}
#footer {
width: 100%;
border: 2px solid grey;
height: 20px;
}
3. Le site web statique prend forme
Bon si vous êtes un petit peu curieux vous aurez déjà ouvert votre fichier “index.html”. Ok a part vos deux blocs de menu, le corps et la bannière, votre site est vide. Ne vous inquiétez pas c’est normal, tout ce qui nous reste à faire c’est insérer les liens et le texte.
Pour commencer, on va insérer le menu général à gauche :
Code: <p> <h2>MENU</h2> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Divers</a></li> </ul> </p>
On va maintenant mettre le sous-menu à droite :
Code: <p> <h2>ACCUEIL</h2> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Présentation</a></li> <li><a href="#">Membres</a></li> <li><a href="#">Divers</a></li> </ul> </p>
Un peu de texte à l’intérieur du corps :
Code: <h1>Accueil</h1> <br />
Un petit peu de texte pour combler les espaces du corps du site.
Et pour finir les droits d’auteur dans le footer :
Code: <center>Copyright lagenceweb.ch | tous droits reservés</center>
Votre code HTML est deja un peu plus long qu’avant :
Code: <html> <head> <title>Mon site</title> <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" /> </head> <body> <center> <div id="conteneur"> <div id="header"></div><br /> <div id="menug"> <p> <h2>MENU</h2> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Divers</a></li> </ul> </p> </div> <div id="menud"><p> <h2>ACCUEIL</h2> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Présentation</a></li> <li><a href="#">Membres</a></li> <li><a href="#">Divers</a></li> </ul> </p></div> <div id="corps"> <h1>Accueil</h1> <br /> Un petit peu de texte pour combler les espaces du corps du site. </div><br /> <div id="footer"><center>Copyright lagenceweb.ch | tous droits reservés</center></div> </div> </center> </body> </html>
4. Couleurs & alignement
Bon, notre site web statique est terminé au niveau du codage HTML, il ne reste plus qu’à finaliser le CSS.
Tout d’abord, nous allons redonner de la couleur aux trois titres pour qu’ils soient visibles.
Les deux petits titres :
Code:
h2 {
color: darkgrey;
}
Et le grand titre :
Code:
h1 {
color: darkgrey;
}
Mtn il nous faut modifier le code CSS pour le corps, il faut y rajouter une couleur pour le texte, je choisis gris :
Code:
#corps {
border: 2px solid grey;
height: 340px;
width: 66%;
position: center;
color: grey;
}
On fait pareil dans le “footer” :
Code:
#footer {
width: 100%;
border: 2px solid grey;
height: 20px;
color: grey;
}
Il ne reste plus que nos deux menus. Il faut rendre leur puces en couleurs et les liens en couleur aussi. Pour les puces, elles se changent comme du texte, on va donc utiliser la fonction “color” :
Code:
#menug {
float: left;
border: 2px solid grey;
width: 15%;
height: 340px;
color: grey;
}
Code:
#menud {
float: right;
border: 2px solid grey;
width: 15%;
height: 340px;
color: grey;
}
On va maintenant mettre nos liens en couleur :
Code:
a {
color: white;
}
Et on va les faire changer de couleur lorsqu’on les survole :
Code:
a:hover {
color: black;
background-color: grey;
}
Et maintenant il ne reste plus que l’alignement des menus :
Code:
ul {
text-align: left;
}
Conclusion
Ce tutorial est la preuve que l’on peut faire un site web statique assez bien en peu de temps.
Vous pouvez toujours modifer mon code pour rajouter d’autres choses (par exemple rajouter un 3ème menu en dessus du bloc central).
Ce code est un petit exemple de création d’un site web statique simple, si vous voulez un site web professionnel lagenceweb est à votre disposition garantissant le meilleur rapport qualité-prix dans la réalisation de votre site web.
