Créer sont 1er Site !

Bonjour à tous,
Comme dit dans le tutoriel qui précédait celui là, cette nouvelle version du tutoriel est plus explicite et plus complète.
Nous allons, créer dans ce tutoriel un site web simple avec un header (titre du site), un menu (navigation), des news et un footer (copyright), et bien sûr tout en restant dans les normes W3C.

[size=small]1# Les logiciels utilisés :[/size]

[quote=Logiciels]
#Notepad++ : Télécharger.
Description : Notepad++ est un éditeur de source avec mise en relief de la syntaxe et mise en forme de cette dernière. Ce logiciel vous permet également de colorer les mots définis par l'utilisateur. Vous pouvez ainsi imprimer votre code source en couleur. De plus, Notepad++ possède une fonction multi-vues qui permet à l'utilisateur d'éditer différents documents à la fois et même d'éditer le même document en synchronisant 2 vues différentes. Il supporte entièrement le glisser-déposer: vous pouvez déposer le fichier pour l'ouvrir mais également glisser et visionner un document d'une vue à une autre. Enfin, ce logiciel fonctionne aussi vite que le bloc-note fourni par MS Windows.

#Opera : Télécharger.
Description : Opera est un navigateur web.
[/quote]

2# Lancement de l'opération : Création du site web :

Création du corps :

Tout d'abord le CSS, qui va nous servir à mettre en forme notre site.

Code:

body {
background-color: #FFF; /* Fond de page blanc */
font-family: Arial;
margin: 0px;
font-size: 10px;
}
#content_all{
width: 400px; /* Largeur de 400 pixels */
height: auto; /* Extensible en hauteur */
left: 50%; /* Est toujours au milieu de la page */
margin-left: -200px;
position: absolute;
}

Tout votre site sera contenu dans #content_all.
Maintenant, passons au xhtml qui va nous permettre de coder notre site .

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Créer son premier site web - Ipeople</title>
<link rel="stylesheet" type="text/css" media="screen" href="base.css" />
</head>
<body>
<div id="content_all">
<strong>Votre contenu sera placé ici !</strong>
</div>
</body>
</html>

Le doctype est très important, je vous conseil de garder celui qui est dans le code ci-dessus.
Création du header :

Notre header fera 400 pixels de largeur étant donné que le corps fait 400px lui aussi. Voici le code CSS commenté :

Code:

/* Header */
#header{
width: 400px; /* 400 pixels de largeur */
height: 80px; /* 80 pixels de hauteur */
border-bottom: 2px #ededed solid; /* La bordure du bas, fait 2 pixels et est de couleur grise */
float: left; /* On fera flooter tous nos éléments à gauche */
}
#header h1{ /* Notre titre de site sera placé entre les balise <h1> et </h1> */
float: left;
font-size: 17px;
color: #3c859a; /* Couleur bleue */
margin-top: 40px; /* On espace le titre de 40 pixels par rapport au haut de la page */
}

Et voici donc le code xhtml où notre #header et <h1></h1> seront placés :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Créer son premier site web - Ipeople</title>
<link rel="stylesheet" type="text/css" media="screen" href="base.css" />
</head>
<body>
<div id="content_all">
<div id="header">
<h1>Titre de notre site !</h1>
</div>
</div>
</body>
</html>

Voici le résultat visuel de ce qui a déjà été coder :
Création de la navigation :

Nous allons tout d'abord nous attaqué au CSS qui est le plus difficile étant donné qu'il faut créer un menu assez attrayant donc créer des class différentes de celles de base :

Code:

/* Navigation */
#nav{
width: 400px; /* Encore et toujours 400 pixels de largeur */
height: 30px;
float: left;
margin-top: 5px;
}
#nav ul{
width: 400px;
height: 30px;
float: left;
list-style-type: none; /* On enleve le style des listes, CAD les petits cercle noir */
margin-left: -40px;
margin-top: -5px; /* On fait remonter de 5 pixels */
}
#nav li{
width: 100px; /* 100 pixels de largeur - On peut donc en placer 4 dans ul */
height: 30px;
float: left;
background-color: #61a2b5;
}
#nav li:hover{ /* Lorsque l'on passe notre souris sur la navigation */
width: 100px;
height: 30px;
float: left;
background-color: #3c859a;
}
.link_nav{ /* La classe des liens, celle ci définit la couleur du lien */
color: #FFF;
text-decoration: none;
float: left;
margin: 7px;
}

Et donc le xhtml qui passe du doctype et du header avec maintenant la navigation en plus :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Créer son premier site web - Ipeople</title>
<link rel="stylesheet" type="text/css" media="screen" href="base.css" />
</head>
<body>
<div id="content_all">
<div id="header">
<h1>Titre de notre site !</h1>
</div>
   <div id="nav">
   <ul>
   <li><a href="#" class="link_nav">Navigation</a></li> 
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   </ul>
   </div>
</div>
</body>
</html>

Et voici donc l'aperçu du site avec le code créé jusquà présent :

Et bien sûr, tout ce code est toujours valide aux normes W3C !
Création des news :

Les news sont on peut dire le plus important étant donné que ce sont elles qui préviennent les visiteurs. Nous allons donc faire un truc simple (nous prendrons exemple sur des blogs) :

Code:

/* News */
.news{ /* On créé une classe pour qu'elle puisse se répeter sans devenir invalide W3C */
width: 400px;
height: auto;
float: left;
margin-top: 10px;
background-color: #f9f9f9;
border-bottom: 2px #e5e5e5 solid;
}
.news h1{ /* Le titre de la news */
width: 380px;
font-size: 13px;
color: #53a8b2;
float: left;
margin-left: 10px; /* On le décale de la gauche de 10 pixels */
border-bottom: 1px #e5e5e5 solid;
}
.news p{
width: 380px;
height: auto; /* Extensible en hauteur */
float: left;
margin-left: 10px;
margin-top: 5px;
color: #454545;
}

Et le xhtml qui est assez compréhensible pour un débutant si il à bien suivi depuis le début du tutoriel et lu les commentaires affichés sur les codes :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Créer son premier site web - Ipeople</title>
<link rel="stylesheet" type="text/css" media="screen" href="base.css" />
</head>
<body>
<div id="content_all">
<div id="header">
<h1>Titre de notre site !</h1>
</div>
   <div id="nav">
   <ul>
   <li><a href="#" class="link_nav">Navigation</a></li> 
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   </ul>
   </div>
      <div class="news"> 
      <h1>Titre de la news</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
</div>
</body>
</html>

Et comme toujours l'aperçu du site avec les news :
Création du footer :

Nous attaquons donc la fin de ce tutoriel, par le footer. Là où vous afficherez votre pseudo, votre copyright ...
Pour ce footer, du texte aligner à droite suffira (de couleur bleue bien sûr) :

Code:

/* Footer */
#footer{
width: 400px;
height: auto;
float: left;
margin-top: 15px;
text-align: right; /* Le texte est aligné à droite */
}
#footer p{
color: #3c859a;
}

Et voici donc la fin du code xhtml :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Créer son premier site web - Ipeople</title>
<link rel="stylesheet" type="text/css" media="screen" href="base.css" />
</head>
<body>
<div id="content_all">
<div id="header">
<h1>Titre de notre site !</h1>
</div>
   <div id="nav">
   <ul>
   <li><a href="#" class="link_nav">Navigation</a></li> 
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   </ul>
   </div>
      <div class="news"> 
      <h1>Titre de la news</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
         <div id="footer">
         <p>Copyright 2009/2010<br/>
         Tutoriel pour Britania.ws</p>
         </div>
</div>
</body>
</html>

Et l'aperçu :

Félicitation !
Vous venez de créer votre premier site web.
Je vous donne donc si vous le souhaitez les codes entiers :

Le code CSS :

Code:: body {
background-color: #FFF;
font-family: Arial;
margin: 0px;
font-size: 10px;
}
#content_all{
width: 400px;
height: auto;
left: 50%;
margin-left: -200px;
position: absolute;
}
/* Header */
#header{
width: 400px; /* 400 pixels de largeur */
height: 80px; /* 80 pixels de hauteur */
border-bottom: 2px #ededed solid; /* La bordure du bas, fait 2 pixels et est de couleur grise */
float: left; /* On fera flooter tous nos éléments à gauche */
}
#header h1{ /* Notre titre de site sera placé entre les balise <h1> et </h1> */
float: left;
font-size: 17px;
color: #3c859a; /* Couleur bleue */
margin-top: 40px; /* On espace le titre de 40 pixels par rapport au haut de la page */
}
/* Navigation */
#nav{
width: 400px; /* Encore et toujours 400 pixels de largeur */
height: 30px;
float: left;
margin-top: 5px;
}
#nav ul{
width: 400px;
height: 30px;
float: left;
list-style-type: none; /* On enleve le style des listes, CAD les petits cercle noir */
margin-left: -40px;
margin-top: -5px; /* On fait remonter de 5 pixels */
}
#nav li{
width: 100px; /* 100 pixels de largeur - On peut donc en placer 4 dans ul */
height: 30px;
float: left;
background-color: #61a2b5;
}
#nav li:hover{ /* Lorsque l'on passe notre souris sur la navigation */
width: 100px;
height: 30px;
float: left;
background-color: #3c859a;
}
.link_nav{ /* La classe des liens, celle ci définit la couleur du lien */
color: #FFF;
text-decoration: none;
float: left;
margin: 7px;
}
/* News */
.news{ /* On créé une classe pour qu'elle puisse se répeter sans devenir invalide W3C */
width: 400px;
height: auto;
float: left;
margin-top: 10px;
background-color: #f9f9f9;
border-bottom: 2px #e5e5e5 solid;
}
.news h1{ /* Le titre de la news */
width: 380px;
font-size: 13px;
color: #53a8b2;
float: left;
margin-left: 10px; /* On le décale de la gauche de 10 pixels */
border-bottom: 1px #e5e5e5 solid;
}
.news p{
width: 380px;
height: auto; /* Extensible en hauteur */
float: left;
margin-left: 10px;
margin-top: 5px;
color: #454545;
}
/* Footer */
#footer{
width: 400px;
height: auto;
float: left;
margin-top: 15px;
text-align: right; /* Le texte est aligné à droite */
}
#footer p{
color: #3c859a;
}

Et le code xhtml :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Créer son premier site web - Ipeople</title>
<link rel="stylesheet" type="text/css" media="screen" href="base.css" />
</head>
<body>
<div id="content_all">
<div id="header">
<h1>Titre de notre site !</h1>
</div>
   <div id="nav">
   <ul>
   <li><a href="#" class="link_nav">Navigation</a></li> 
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   <li><a href="#" class="link_nav">Navigation</a></li>
   </ul>
   </div>
      <div class="news"> 
      <h1>Titre de la news</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
         <div id="footer">
         <p>Copyright 2011/2012<br/>
         Tutoriel pour Ipeople.be</p>
         </div>
</div>
</body>
</html>

A bientôt peut être pour un nouveau tutoriel !