Signature codée

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci

>> Les tutos indispensables :
Les bases du html
Les tableaux en html
Des notions de CSS
Faire défiler du texte
Utiliser les iframes

C'est partie ^^

La signature

Tout d'abord, ouvrez un éditeur de texte (type bloc-note ou notepad), et copiez-collez le code suivant

Code:

<html>
<head>
<title>Signature</title>

<style type="text/css">

le css sera ici

</style>

</head>

<body>

le code html de la sign' sera là

</body>
</html>

Enregistrez cette page en "sign.html" (attention à l'extension Wink

)

La structure

Ma signature contient un tableau à 1 colonne et 3 lignes :
-> ligne 1 : les liens en haut
-> ligne 2 : l'image
-> ligne 3 : les liens en bas.

Commençons donc par coder ce tableau

Code:

<table>
<tr>
   <td>La case du haut</td>
</tr>
<tr>
   <td>La case du milieu</td>
</tr>
<tr>
   <td>La case du bas</td>
</tr>
</table>

On va ensuite donner à notre tableau un nom d'id et on va ajouter du cellspacing et cellpadding pour éviter d'avoir des espaces entre nos cellules

Code:

et on va donner un nom à chaque case

Code:

<table id="sign" cellpadding="0" cellspacing="0">
<tr>
   <td id="case_haut">La case du haut</td>
</tr>
<tr>
   <td id="case_milieu">La case du milieu</td>
</tr>
<tr>
   <td id="case_bas">La case du bas</td>
</tr>
</table>

Avant de commencer à coder chaque partie (que ce soit pour le contenu ou la mise en page), travaillons le rendu de notre tableau. Dans le css, on va donc indiquer

Code:

table#sign{propriétés;}

Ce code signifie : "voici le style du tableau (table) ayant pour nom d'id (#) 'sign' "

Moi, dans mon exemple, je veux que mon tableau :
-> fasse 400 px de large

Code:

width:400px;

-> ait une bordure marron en pointillé

Code:

border:1px dashed #96774a;

-> ait des coins arrondis

Code:

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;

-> ait une couleur de fond beige/marron

Code:

background-color:#eacda3;

-> soit centré sur ma page

Code:

margin:auto;

ce qui me donne

Spoiler:

La base est faite. Travaillons maintenant chaque case.

La case du haut

Ici, avant de remplir le contenu de cette case, on va personnaliser sa mise en page. Pour cela, on va indiquer ceci dans le css

Code:

table#sign td#case_haut{propriétés;}

Libre à vous de mettre ce que vous voulez ^^ En ce qui me concerne, j'ai
-> imposer une hauteur de 20px

Code:

height:20px;

-> ajouter un peu de remplissage pour éviter que mon texte ne soit collé au bord

Code:

padding:4px;

-> centrer le texte

Code:

text-align:center;

-> donner une couleur à mon texte

Code:

color:#96774a;

-> ajouter une bordure un peu plus épaisse en bas de ma case

Code:

border-bottom:solid 2px #96774a;

ce qui me donne

Spoiler:

Passons maintenant au contenu. Ma case du haut va contenir 4 liens. Je vous rappelle qu'en html, les liens se codent de cette façon :

Code:

<a href="lien">Mon texte cliquable</a>

et si on veut que le lien s'ouvre dans un nouvel onglet, on ajoute target="_blank"

Je code donc mes 4 liens et je les mets dans ma case du haut

Code:

Mettons un peu de mise en page sur ces liens. Dans le css il va falloir indiqué :

Code:

table#sign td#case_haut a{propriétés des liens;}

table#sign td#case_haut a:hover{propriétés des liens survolés;}

Et une fois de plus Oeuf de Pâques

, à vous de faire ce que vous voulez. Voici mon rendu

Spoiler:

J'en ai fini avec cette case Smile

La case du milieu

Ici, j'ai décidé de mettre une image pour ma case du milieu. Ici, 2 solutions :

-> soit vous mettez votre image dans la case en utilisant ce code html

Code:

-> soit vous le mettez dans le CSS de votre tableau.

Personnellement, j'ai choisi de mettre mon image dans mon css et non directement dans mon tableau. Pourquoi ? De cette façon, je suis sure qu'elle ne va pas déformer mon tableau ^^ Nous allons donc voir ensemble cette solution ^^ On va donc travailler le CSS de la case du milieu

Code:

table#sign td#case_milieu{propriétés;}

J'ai choisi de mettre cette image en fond [clic]. Je vais imposer dans mon css une hauteur (height) ainsi qu'une largeur (width) et je vais aussi centrer en haut mon image.
Je vais aussi mettre un caractère vide dans ma case

Code:

ce qui me donne pour le CSS et le rendu

Spoiler:

Si j'avais mis l'image directement j'aurai eu ceci :

Spoiler:

La case du bas

Point de vue mise en page, pas de prise de tête : je fais la même chose que ma case du haut, sauf que cette fois, je mets la bordure épaisse en haut.

Code:

table#sign td#case_bas{
height:20px;
padding:4px;
text-align:center;
color:#96774a;
border-top:solid 2px #96774a;
}

Ma case du bas va contenir des liens comme la case du haut ainsi qu'un texte défilant. Ce qui me donne

Code:

<td id="case_bas"><a href="#" target="_blank">Lien 1</a> - <a href="#" target="_blank">Lien 2</a> - <a href="#" target="_blank">Lien 3</a> - <a href="#" target="_blank">Lien 4</a>
<marquee direction="left" scrollamount="6" onMouseOver="this.stop()" onMouseOut="this.start()";>Mon texte qui défile</marquee></td>

Pour la mise en page, mes liens ont les mêmes propriétés que ceux de la case du haut, je les ajoute donc dans le css

Code:

table#sign td#case_haut a, table#sign td#case_bas a{
text-decoration:none;
color:#96774a;
font-size:12px;
font-variant:small-caps;
font-weight:bold;
}

table#sign td#case_haut a:hover, table#sign td#case_bas a:hover{
color:#69563a;
}

et voilà ! Ma sign est terminé ^^

Spoiler:

L'installer sur le forum

Vous allez voir, c'est très simple Smile

-> Enregistrez votre page html "sign.html".
-> Hébergez-là sur le net (par exemple sur Archive-host)

-> Mettez le code suivant dans votre sign' :

Code:

En remplaçant le lien par le lien de votre page html hébergée.

Exemple :

Code:

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]