Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Les dernières pages de Cours et Dossiers ajoutées
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 1 129 573 ]
Votre IP fleche [ 38.107.179.240 ]
Vous êtes ici : Home Page Dossiers Creer un site web Html Realisation site HTML (2)
Imprimer le document Version Imprimable

Informations Générales

[436] Posts sur le forum
[514] Membres inscrits
Il y a en ligne :
arrow 0 Membre
arrow 1 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.

Publicité


Prestataire

N°1 de l'hébergement, location de serveurs, nom de domaines et téléphonie.
(OVH est recommandé par Webelix.net)

www.

Nos Partenaires

Alsacreations
Dreamseed
L'éditeur JavaScript
DicoDuNet
Noogle
Tutopla.net
Page précédente |

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>
  {noir}<meta http-equiv="Content-Style-Type" content="text/css">{/noir} 
</head>

<body {noir}style="font-family: Arial, sans-serif;font-size: 12px; color: #000000;"{/noir}>
  <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 {noir}style="font-size: 24px; color: #FFFFFF;"{/noir}>{noir}Mon premier site en HTML{/noir}</p>
      </td>
    </tr>
    <tr valign="top">
      <td width="120" height="350" rowspan="2" bgcolor="#606DB2">
	  <p {noir}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>{/noir}
	  </p>
      </td>
      <td width="480" height="310" bgcolor="#AFD394">
	  <p>{noir}Contenu de site web{/noir}</p>
      </td>
    </tr>
    <tr valign="middle">
      <td width="480" height="40" bgcolor="#CDBCA3">
	  <p>{noir}2005 Copyright by Moi{/noir}</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>
        {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>
	  </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.

[0] commentaire - Voir/EditerAjout commentaire

Page précédente |
Haut de page