CREATION D'UNE PAGE SIMPLE, SANS FRAME

Voilà, il est temps de s'y coller ! On va commencer très simplement en créant une page sans frame mais attention, on n'utilise que le bloc notes ;)

Tout d'abord, je vous invite à télécharger les éléments de décor que j'utilise pour réaliser ce tuto. Libre à vous de les remplacer par la suite. Les couleurs et dimensions que je vais utiliser correspondent à cette déco et ce sera à vous de les adapter ensuite pour la vôtre.

Cliquez ici pour télécharger la déco

• PREPARATION

Commencez par créer un dossier que vous nommerez comme vous voulez. Ce dossier contiendra tout votre site (ou menu, enfin on se comprend lol).

A l'intérieur de ce dossier, créez un sous-dossier que vous nommerez "design" (cette fois faites comme moi ou bien souvenez-vous en parce que j'utiliserai "design" pour ce dossier dans la suite du tuto).
Placez-y les images de déco que vous avez téléchargées.

• LA FEUILLE DE STYLE

Ouvrez un nouveau document vierge sur le bloc notes.

Copiez et collez le code ci-dessous dans ce nouveau document. Attention, il ne s'agit pas de copier bêtement hein ;) J'ai bien détaillé ce code dans "La feuille de style" du menu "RENSEIGNEMENTS" un peu plus haut sur le site.

body { color:#d72b45; margin:15px; scrollbar-base-color:#eef1d9; font-size:8pt; font-family:Verdana; }
a { color:#849640; text-decoration:none; }
a:hover { color:#eef1d9; text-decoration:none; cursor:crosshair; }
td { font-size:8pt; font-family:Verdana; }
h1 { font-family:verdana; font-size:8pt; font-weight:bold; color:#849640; }
p { font-family:verdana; font-size:8pt; color:#d72b45; margin-left:0px; margin-right:0px; }

Enregistrez ce document (Fichier/Enregistrer sous...)
Nommez-le "_menu.css" et placez-le bien à la racine du site, c'est à dire dans le premier dossier.

• TRES IMPORTANT !!!

Une fois votre page html commencée, pensez à enregistrer le plus souvent possible ! On n'est jamais à l'abris d'un "plantage" bien que ce soit limite impossible avec le bloc notes lol mais une coupure d'électricité suffit à tout perdre !

Vous pouvez avoir un aperçu de l'avancement de votre page à tout moment. Il se peut qu'elle s'affiche mal si vous êtes en milieu de tableau par exemple et que vous n'avez pas refermé toutes les balises. Evidemment, si votre code comporte une erreur, la page ne pourra pas fonctionner alors soyez concentré ;)

Pour visualiser votre page avant publication, il suffit de l'enregistrer. Allez dans votre dossier, faites un clic droit sur le document.htm et Ouvrir avec... choisissez votre navigateur (Mozilla, Internet Explorer ou autre...).

Personnellement, j'enregistre et vérifie ma page très souvent. Ça me permet de voir si j'ai fait une erreur (plus facile à retrouver sur quelques lignes que sur une page entière !) et je me rends compte aussi de ce que ça donne, des fois qu'il faille changer quelque chose.

• CREATION DE LA PAGE HTML

Ouvrez un nouveau document vierge sur le bloc notes, comme précédemment.

Il s'agit d'un document html donc nous allons l'indiquer en mettant tout le contenu de la page entre les balises <html> et </html>.
Dans cette page, il y aura une entête comprise entre les balises <head> et </head>.
Il y aura ensuite le corps de la page compris entre les balises <body> et </body>.

Nous allons donc commencer par ça en écrivant ces balises sur la page :

Avant de continuer, je vous conseille d'enregistrer votre page (Fichier/Enregistrer sous...)
Nommez-la "index.htm" (ou autrement, c'est vous qui voyez !) et placez-la bien à la racine du site, comme la feuille de style.

• L'ENTETE

Elle peut contenir énormément d'informations mais pour cette page, nous mettrons le minimum.

Comme il s'agit de l'entête, nous placerons ces quelques lignes entre les balises <head> et </head>.

Tout d'abord, on lui donne un titre :
<title>Nom de votre site</title>

Là, nous allons empêcher Internet Explorer d'afficher le menu contextuel sur les images :
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

Maintenant, nous faisons appel à notre feuille de style pour qu'elle s'applique à la page :
<link href="_menu.css" rel="stylesheet" type="text/css">

Nous en sommes là :

<html>

<head>
<title>Nom de votre site</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<link href="_menu.css" rel="stylesheet" type="text/css">
</head>

<body>
</body>

</html>

• LE CORPS DE LA PAGE

On attaque la grosse partie... un p'tit café ? Bon on y va ;)

Le fond de page

Première chose, nous allons mettre un fond à notre page. Comme ça concerne le corps de la page même, nous allons l'indiquer en plaçant un attribut dans la balise d'ouverture <body>. Le fond en question se trouve normalement dans le dossier design et il se nomme bien "fond.gif".
Voilà donc l'attribut à ajouter à la balise : background="design/fond.gif"
Voilà où nous en sommes :

Nous allons maintenant nous occuper du corps à proprement parler, donc tout se situera entre les balises <body...> et </body>

Centrage de la page

Avant tout, je pense que comme moi vous aimez les pages centrées, non ? Alors c'est simple, on encadrera tout ça par les balises de centrage. Pour ne pas oublier celle qui ferme, vous pouvez tout simplement écrire la première juste après la ligne <body...> et la dernière juste avant la ligne </body>.

Mise en forme du tableau : le haut

Nous avons besoin d'un tableau de 628 pixels de large. Afin que nos éléments collent bien les uns aux autres, il est important qu'il n'y ait aucun espacement entre les cellules elles-mêmes ni avec le bord du tableau. Voilà ce qu'il faut écrire :
<table width="628" cellspacing="0" cellpading="0">

Nous ouvrons une ligne (c'est obligatoire !)
<tr>

Voici la cellule qui contient l'image "haut.gif" de notre déco. Elle mesure 628 de large mais là il faut également préciser la hauteur qui est de 65. Voilà le code :
<td width="628" height="65" background="design/haut.gif">

Nous n'avons rien à écrire dans cette cellule, elle ne sert qu'à afficher l'image alors nous pouvons la fermer :
</td>

Nous fermons aussi la ligne pour passer à la suivante :
</tr>

Mise en forme du tableau : le milieu

La 2ème ligne contient l'image du milieu, c'est donc là qu'on mettra le contenu de la page ;) D'abord, on finit le décor ! On place donc notre image "milieu.gif" dans cette ligne :
<tr><td background="design/milieu.gif">

Petite question technique, si on laisse comme ça, l'écriture va déborder un peu de chaque côté quand on remplira la page... c'est logique, on ne va pas écrire dans les bords du tableau quand même ;) Alors on va ajouter un nouveau tableau dans cette cellule. Il sera composé de 3 colonnes : 1 toute petite à gauche de 19, 1 toute petite à droite de 19 ce qui fait que celle du milieu sera bien placée entre les bords du tableau (628 - 19 - 19 = 590 lol). Vous me suivez ?? On y va :

On ouvre donc un tableau de 100% de large, on ouvre une ligne (toujours) :
<table width="100%"><tr>

La 1ère colonne mesure 19, on n'y met rien :
<td width="19"></td>

La 2ème colonne mesure 590, on lui demande d'être alignée verticalement en haut :
<td valign="top" width="590">

Sautez quelques lignes dans votre page. Ça n'influe pas sur l'affichage puisqu'on est en language html mais ça vous sera utile pour vous repérer parce que c'est ici que vous mettrez votre "blabla", vos images... ;) C'est fait ? OK, on peut refermer la colonne ;)

</td>

La 3ème colonne mesure 19, on n'y met rien, c'est la même que la première :
<td width="19"></td>

Cette ligne est terminée :
</tr>

On peut refermer ce petit tableau qui se trouve toujours dans la 2ème ligne du premier tableau :
</table>

On referme également la cellule et la 2ème ligne du gros tableau :
</td>
</tr>

<html>

<head>
<title>Nom de votre site</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<link href="_menu.css" rel="stylesheet" type="text/css">
</head>

<body background="design/fond.gif">
<center>

<table width="628" cellspacing="0" cellpading="0">
<tr>
<td width="628" height="65" background="design/haut.gif"></td>
</tr>

<tr>
<td background="design/milieu.gif">
<table width="100%">
<tr>
<td width="19"></td>
<td valign="top" width="590">

</td>
<td width="19"></td>
</tr>
</table>
</td>
</tr>

</center>
</body>

</html>

Mise en forme du tableau : le bas

La 3ème ligne du gros tableau contient l'image du bas. On place donc "bas.gif" dans cette cellule qui mesure toujours 628 et on referme :
<tr>
<td width="628" height="44" background="design/bas.gif"></td>
</tr>

C'est terminé, on referme aussi le tableau ;)
</table>

• REMPLISSAGE

On tient le bon bout !!! Il n'y a plus qu'à remplir ;)

Déjà, il faut bien vous placer dans votre page html. Tout ce que vous écrirez à partir de maintenant se situera entre ces lignes (vous avez normalement sauté des lignes pour repérer l'endroit facilement) :

<td valign="top" width="590">

C'est ici que vous pouvez écrire !

</td>

• EXERCICES

Si vous ne savez pas quoi mettre pour le moment, voilà quelques suggestions qui serviront d'exercices par la même occasion !

Vous trouverez les réponses dans les autres pages du menu "RENSEIGNEMENTS" ;)

1) Ecrivez un texte aligné à droite, en Comic Sans MS, taille 2
2) Ecrivez un texte centré de la couleur de votre choix mais différente
3) Ecrivez un texte aligné à gauche en gras, puis en italique
4) Faites un lien qui s'ouvre dans une nouvelle fenêtre vers votre site sur un texte centré
5) Faites un lien avec infobulle vers votre site, sur votre bannière centrée et sans bordure ;)

Aller j'arrête lol ! Bonne chance :)

<<< Cliquez ici pour voir mon résultat >>>