Un site en table avec un exemple concret

Invité

1 - Ouvrez le logiciel avec lequel vous allez créer (coder le site) le site (Nvu, Notepad ++, Bloc Note....)

2 - Maintenant vos premières lignes de codage. Quoi déja ? eh oui... lol!

Un site en table avec un exemple concret 175322

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>

3 - Pour avoir un tableau de base avec 1 haut et 2 colonnes sans espace entre les éléments tapez ce code (je vous met en majuscule les élément que vous pouvez modifiée) après le <body> .

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI VOUS EN VOULEZ UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE VOTRE TEXTE (OU DE VOTRE IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI VOUS N'EN VOULEZ PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU VOUS METTEZ LE HEADER) px;" colspan="2">
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHE px; width: HAUTEURS DES 2 COLONNES px;">
<br>
</td>
<td colspan="1"
style="vertical-align: top; width: LARGEUR DE LA COLONNE DE DROITE px;">
</td>
</tr>
</tbody>
</table>

4 - Maintenant le remplir un peu :
a - D'abord le header

Prendre votre header.
Je suis gentille pour l'exemple du tuto je vous met un header.
Un site en table avec un exemple concret 850pw7

Un site en table avec un exemple concret 850pw7

Mettre ce code

Code:: <img alt="NOM DU FICHIER"
src="ADRESSE HTTP DU FICHIE (LIEN DU FICHIER)">

A cet emplacement

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI VOUS EN VOULEZ UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE VOTRE TEXTE (OU DE VOTRE IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI VOUS N'EN VOULEZ PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU VOUS METTEZ LE HEADER) px; width: HAUTEURS DES 2 COLONNES px;" colspan="2">
ICI

b - Ensuite la colone de gauche.
Généralement je met mon menu mais vous pouvez y mettre ce que vous voulez
Dans le code ça donne ça :

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI VOUS EN VOULEZ UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE VOTRE TEXTE (OU DE VOTRE IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI VOUS N'EN VOULEZ PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU VOUS METTEZ LE HEADER) px;" colspan="2">
HEADER
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHEpx;">
BLABLABLA
</td>

c - Pour la colonne de gauche (la page qui va se charger quand vous allez cliqué sur les liens) Entrez ce code.

Code:: <iframe
src="URL DE TA PAGE QUI S'AFFICHERA DANS L'I - FRAME (IL S'AGIT LE PLUS SOUVENT DE CELLE DE LA PAGE D'ACCUEIL) ATTENTION NE PAS CHANGER L'URL"
name="NOM DE LA FRAME" frameborder="0" height="HAUTEUR DE LA FRAME"
width="LARGEUR DE L'I - FRAME"></iframe>

A cet emplacement

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI VOUS EN VOULEZ UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE VOTRE TEXTE (OU DE VOTRE IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI VOUS N'EN VOULEZ PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU VOUS METTEZ LE HEADER) px;" colspan="2">
HEADER
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHE px;width: HAUTEURS DES 2 COLONNES px;">
BLABLABLA
</td>
<td colspan="1"
style="vertical-align: top; width: 555px;">
ICI</td>
</tr>
</tbody>
</table>

5 - Finir la page par

Code:: </body>
</html>

Voila la partie code html est fini vous devriez avoir un code de ce genre

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI VOUS EN VOULEZ UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE VOTRE TEXTE (OU DE VOTRE IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI VOUS N'EN VOULEZ PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEAU (LA OU VOUS METTEZ LE HEADER) px;" colspan="2">
HEADER
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHE px;width: HAUTEURS DES 2 COLONNES px;">
BLABLABLA
</td>
<td colspan="1"
style="vertical-align: top; width: 555px;">
EMPLACEMENT DE LA FRAME (LA PAGE)</td>
</tr>
</tbody>
</table>
</body>
</html>

6 - Hébergez vos pages

Voila c'est fini : Le résultat

» Un site en I - Frame avec exemple concret
» Les news du site
» Site en cours
» Aide pour site
» [HTML #1] Le squelette du site