Pour pouvoir relier nos futures pages entre elles il va falloir créer des liens.
Ces liens seront gérer dans la zone MENU.
Un lien sera toujours sous la forme :
<a href="chemin du fichier"> Nom du Lien </a>
Dans notre étude nous avons besoin de 4 liens :
Insérons nos liens dans notre fichier "index.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Mon premier site en XHTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div class="style">
<span class="titre">Mon premier site en XHTML avec CSS</span>
</div>
</div>
<div id="menu">
<div class="style">
<span class="menu"><strong>MENU :</strong></span>
<ul class="nav">
{noir}<li><a href="index.html"> Accueil</a></li>{/noir}
<li>{noir}<a href="rubrique1.html">{/noir} Rubrique 1{noir}</a>{/noir}</li>
<li>{noir}<a href="rubrique2.html">{/noir} Rubrique 2{noir}</a>{/noir}</li>
<li>{noir}<a href="rubrique3.html">{/noir} Rubrique 3{noir}</a>{/noir}</li>
<li>{noir}<a href="rubrique4.html">{/noir} Rubrique 4{noir}</a>{/noir}</li>
</ul>
</div>
</div>
<div id="page">
<div class="style">
<p>Contenu de site web</p>
</div>
</div>
<div id="footer">
<div class="style">
<span>2005 Copyright by Moi</span>
</div>
</div>
</div>
</body>
</html>
Attention ! Pensez à rajouter un lien vers votre page principale comme ci-dessus, car une fois que nous cliquerons sur une des rubriques, nous ne pourrons plus revenir sur celle-ci.
Cliquez ici pour Voir l'aperçu
En résumé nous avons créé une page nommée "index.html", qui sera la première page affichée lors d'une visite d'un internaute.
Mais une seule page ne suffit pas pour mettre le contenu complet d'un site.
Il faut maintenant créer les autres fichiers HTML, qui accueilleront nos rubriques.
Pour cela nous allons reprendre notre fichier "index.html" et, le recopier plusieurs fois sous des noms différents.
Donc ouvrez le fichier "index.html" si ce n'est pas déjà fait, puis faire un "enregistrement sous" un autre nom que "index.html".
4 rubriques, d'ou 4 fichiers.
Une fois nos fichiers créés, nous nous retrouvons avec 6 fichiers qui sont:
Bien sûr tous ces fichiers ont un nom différent, mais sont identiques dans leur contenu.
Il faudra par la suite les modifier pour afficher d'autres informations.
Suggestion : Enlevez le lien de la page concernée, c'est-à-dire, si nous sommes sur la rubrique 2, enlevez le lien dans le fichier rubrique2.html :
<ul class="nav"> <li><a href="index.html"> Accueil</a></li> <li><a href="rubrique1.html"> Rubrique 1</a></li> <li> Rubrique 2</li> <!-- ici enlevez le lien --> <li><a href="rubrique3.html"> Rubrique 3</a></li> <li><a href="rubrique4.html"> Rubrique 4</a></li> </ul>
Voilà votre site est maintenant créé, à vous de compléter les textes de contenu de chaque page.
J'espère que ce cours vous auras apporté un soutient pour votre projet.
Et si vous avez des commentaires ou des questions à me poser, allez sur le forum.