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

Vous êtes ici : Home Page

Dossiers

Creer un site web

Html

Realisation site HTML (1)

Imprimer

Informations Membres

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

Il y a en ligne :

0 Membre

2 Invités

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 1)

Créer un fichier "index.html" à la racine de votre site (ftp).
Puis ouvrez ce fichier à l'aide d'un éditeur de texte, du genre bloc note. (Mais un logiciel tel que EditPlus sera plus agréable lors du codage, car il fait la différence avec des couleurs de texte, entre les balises, les textes, et diverses options que compose une page HTML)

Et tapez ceci:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title> Nom du site </title>
</head>

<body>
  Contenu du site
</body>
</html>

Ceci est le minimum que l'on peut trouver dans une page HTML, toutes les pages seront structurées de cette manière.

Note : Pour plus amples informations sur les balises HTML, se référer aux "Cours HTML".

Etape 1 - Les Zones (mise en forme)

Nous allons inclure les codes qui vont nous délimiter les zones.
Rappelez vous, HEADER, MENU, PAGE et FOOTER sont les zones de notre futur site.

Attention ! Toutes lignes de codes en noir, sont celles que nous ajoutons au fur et à mesure de l'explication

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title>Mon premier site en HTML</title>
</head>

<body>
  <table width="600" align="center" valign="top" cellspacing="0" cellpadding="0" border="1">
    <tr valign="middle">
      <td width="600" height="90" colspan="2">
	  <p>Zone HEADER</p>
      </td>
    </tr>
    <tr valign="top">
      <td width="120" height="350" rowspan="2">
	  <p>Zone MENU</p>
      </td>
      <td width="480" height="310">
	  <p>Zone PAGE</p>
      </td>
    </tr>
    <tr valign="middle">
      <td width="480" height="40">
	  <p>Zone FOOTER</p>
      </td>
    </tr>
  </table>
</body>
</html>

Cliquez ici pour Voir l'aperçu

Nous voyons bien les zones sur cet exemple, du fait d'avoir activé l'option border="1"
Mais nous ne laisserons pas cette option par la suite.

Etape 2 - Les Couleurs

Nous allons mettre un peu de couleur à ce site, qui pour le moment est un peu fade.
Reprenons nos 4 couleurs que nous avions choisis dans le projet.

Cadre titre (Zone HEADER) avec un fond : bleu(#0068B4)
Cadre menu (Zone MENU) avec un fond : vert foncé(#88C065)
Cadre page (Zone PAGE) avec un fond : vert clair(#AFD394)
Cadre copyright (Zone FOOTER) avec un fond : marron(#CDBCA3)

Nous les insérons dans notre page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title>Mon premier site en HTML</title>
</head>

<body>
  <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>Zone HEADER</p>
      </td>
    </tr>
    <tr valign="top">
      <td width="120" height="350" rowspan="2" bgcolor="#88C065">
	  <p>Zone MENU</p>
      </td>
      <td width="480" height="310" bgcolor="#AFD394">
	  <p>Zone PAGE</p>
      </td>
    </tr>
    <tr valign="middle">
      <td width="480" height="40" bgcolor="#CDBCA3">
	  <p>Zone FOOTER</p>
      </td>
    </tr>
  </table>
</body>
</html>

Cliquez ici pour Voir l'aperçu

Comme vous pouvez le voir j'ai enlevé les bordures des zones, en mettant border="0".
Et par la même occasion, nous mettrons cellspacing et cellpadding à 2, ce qui donne les espaces entre les zones.

Passons à l'étape suivante Suite du Cours

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