Header
Partagez | 

Signature codée

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Signature codée   Dim 10 Juil - 19:01

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:
<table id="sign" cellpadding="0" cellspacing="0">

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:
<td id="case_haut"><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></td>

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 image tuto
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:
<img src="lien" alt="mon image" />
-> 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:
<td id="case_milieu"> </td>

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:
<iframe name="sign" src="lien_de_votre_page" scrolling="no" height="260px" width="420px" align="center" frameborder="0" ></iframe>

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

Exemple :

Code:
<iframe name="sign" src="http://www.archive-host.com/files/1107316/2ef84d7a72bd99d991bc3d94be669ebf11b18534/sign.html" scrolling="no" height="260px" width="420px" align="center" frameborder="0" ></iframe>




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
Signature codée
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+