Webelix.net :: Creer un site web - Html - Réalisation du site en HTML (partie 2)

Vous êtes ici : Home Page

Dossiers

Creer un site web

Html

Realisation site HTML (2)

Imprimer

Informations Membres

	[195] Posts sur le forum
	[177] Membres inscrits

Il y a en ligne :

0 Membre

0 Invité

Membre en ligne:
Aucun

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

Partenaires

Réalisation du site en HTML (partie 2)

Etape 3 - Les Textes

Après avoir créé les zones et les avoir remplies par nos couleurs, nous allons mettre en forme nos textes.

Nos polices que nous allons employer, sont:

Arial de taille 12 pixels, de couleur noir, pour le texte global
Arial de taille 24 pixels, de couleur blanc, pour le titre
Arial de taille 13 pixels, de couleur noir, pour le menu

Pour formater les polices nous allons utiliser le CSS (Feuille de style en cascade)

Cela va donner ceci:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title>Mon premier site en HTML</title>
  <meta http-equiv="Content-Style-Type" content="text/css"> 
</head>

<body style="font-family: Arial, sans-serif;font-size: 12px; color: #000000;">
  <table width="600" align="center" valign="top" cellspacing="2" cellpadding="2" border="0">
    <tr valign="middle">
      <td width="600" height="90" colspan="2" bgcolor="#0068B4">
	  <p style="font-size: 24px; color: #FFFFFF;">Mon premier site en HTML</p>
      </td>
    </tr>
    <tr valign="top">
      <td width="120" height="350" rowspan="2" bgcolor="#606DB2">
	  <p style="font-size: 13px;"><strong>MENU :</strong><br>
      <ul>
        <li> Rubrique 1</li>
        <li> Rubrique 2</li>
        <li> Rubrique 3</li>
        <li> Rubrique 4</li>
      </ul>
	  </p>
      </td>
      <td width="480" height="310" bgcolor="#AFD394">
	  <p>Contenu de site web</p>
      </td>
    </tr>
    <tr valign="middle">
      <td width="480" height="40" bgcolor="#CDBCA3">
	  <p>2005 Copyright by Moi</p>
      </td>
    </tr>
  </table>
</body>
</html>

Cliquez ici pour Voir l'aperçu

Note : <meta http-equiv="Content-Style-Type" content="text/css"> renseigne à la page que nous utilisons le CSS.

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 page index.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title>Mon premier site en HTML</title>
  <meta http-equiv="Content-Style-Type" content="text/css">
</head>

<body style="font-family: Arial, sans-serif;font-size: 12px; color: #000000;">
  <table width="600" align="center" valign="top" cellspacing="2" cellpadding="2" border="0">
    <tr valign="middle">
      <td width="600" height="90" colspan="2" bgcolor="#0068B4">
	  <p style="font-size: 24px; color: #FFFFFF;">Mon premier site en HTML</p>
      </td>
    </tr>
    <tr valign="top">
      <td width="120" height="350" rowspan="2" bgcolor="#606DB2">
	  <p style="font-size: 13px;"><strong>MENU :</strong><br>
      <ul>
        <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>
	  </p>
      </td>
      <td width="480" height="310" bgcolor="#AFD394">
	  <p>Contenu de site web</p>
      </td>
    </tr>
    <tr valign="middle">
      <td width="480" height="40" bgcolor="#CDBCA3">
	  <p>2005 Copyright by Moi</p>
      </td>
    </tr>
  </table>
</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 5 fichiers qui sont:

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>
   <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.

Les 6 dernières pages de Cours et Dossiers ajoutées

Informations Générales