Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 139969 ]
Votre IP fleche [ 38.103.63.16 ]
Vous êtes ici : Home Page Dossiers Creer un site web Xhtml Realisation site XHTML (3)
Imprimer Imprimer le document

Informations Membres

[195] Posts sur le forum
[177] Membres inscrits
Il y a en ligne :
  arrow 0 Membre
  arrow 0 Invité

fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.


Nom de domaine

www.

Partenaires

Page précédente |

Réalisation du site en XHTML avec CSS (partie 3)

Etape 4 - Les Liens

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 :

  • Vers la Rubrique 1
  • Vers la Rubrique 2
  • Vers la Rubrique 3
  • Vers la Rubrique 4

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">
        <li><a href="index.html"> Accueil</a></li>
        <li><a href="rubrique1.html"> Rubrique 1</a></li>
        <li><a href="rubrique2.html"> Rubrique 2</a></li>
        <li><a href="rubrique3.html"> Rubrique 3</a></li>
        <li><a href="rubrique4.html"> Rubrique 4</a></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

Etape 5 - Les Pages

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.

  • Un fichier nommé "rubrique1.html"
  • Un fichier nommé "rubrique2.html"
  • Un fichier nommé "rubrique3.html"
  • Un fichier nommé "rubrique4.html"

Une fois nos fichiers créés, nous nous retrouvons avec 6 fichiers qui sont:

  • style.css
  • index.html
  • rubrique1.html
  • rubrique2.html
  • rubrique3.html
  • rubrique4.html

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.

Page précédente |
Haut de page