Codage forum

**Admin** ✧ Messages : 67 Date d'inscription : 05/10/2011

Edwin Lorelans a écrit:

Idem, à peine je rentre à la fac que je veux finir vite, mais moi c'est mal barré x'DD

Pour le dico, no soucis ! Very Happy

Je te propose alors de faire par étape : Tu mettras ce MP dans tes archives, et tu noteras tout ça sur ton forum - c'est plus pratique pour coder ensuite :3

****************************************************************************

PREMIER CHAPITRE : LES TEXTES

¤ Soulignement : text-decoration: underline
¤ Ligne au dessus: text-decorartion: overline
¤ Ligne au dessus et en dessous: text-decoration: underline overline

¤ Mise en italique : font-style: italic
¤ Mise en Gras: font-weight: bold
¤ Donner de la finesse au texte: font-weight:lighter
¤ Alignement à gauche: text-align: left
¤ Alignement au centre: text-align: center
¤Alignement à droite: text-align: right
¤Alignement pour justifier: text-align: justify

¤ Modification de la taille : font-size: Xpx (X est le chiffre correspondant à la taille désirée)

¤ Modification de la couleur : color: #xxxxxx (les xxxxxx correspondent à un code de couleur de votre choix).

¤ Soulignement Coloré: border-bottom: #xxxxxx

¤ Modification de la police: font-family: Verdana (remplace Verdana par le nom de la police désirée)

¤ Suppression d' un soulignement: text-decoration: none
¤ Texte en petites Majuscules : font-variant: small-caps
¤ Mise en première lettre du texte en Majuscule: text-transform: Capitalize
¤ Mise en Minuscules : text-transform:lowercase
¤ Mise en Majuscules: text-transform:uppercase
¤ Ajouter de l'ombre au texte: text-shadow:Xpx Ypx Zpx (X est le décalage horizontale de l'ombre, Y est le décalage vertical, Z est l'intensité.)

***************************************************************************

Comment utiliser ce dictionnaire ? C'est simple ! Voilà le code principal à utiliser :

Code:: <div style= "?????" >ICI LE TEXTE A MODIFIER</div>

A la place des ?????, tu rajoutes les codes que tu veux, qui sont dans le dictionnaire plus haut, et tu les sépares par un point-virgule. Voilà un exemple :

Code:: <div style= "color:black;Font-weight:Bold;text-shadow:0px 0px 5px;text-decoration: underline;text-transform:uppercase" >ICI LE TEXTE A MODIFIER</div>

Ça te donnera ça :

ICI LE TEXTE A MODIFIER

Hésite pas à faire des petits tests, à jouer sur les codes pour mieux comprendre, j'ai fait comme ça pour maitriser cette partie xD Puis si tu vois qu'un truc bug, ou si t'as des questions, je suis là o/

Prochain chapitre, les cases !

**Admin** ✧ Messages : 67 Date d'inscription : 05/10/2011

Edwin Lorelans a écrit:

DEUXIÈME CHAPITRE : LES CASES

¤ bordure normale : border:solid
¤ en pointillés: border:dotted
¤ en petits tirets: border:dashed
¤ en relief double: border:groove
¤ en relief creusé: border:inset
¤ en relief extérieur : border:outset
¤ double: border:double
¤ épaisseur de la bordure : border:Xpx
¤ Arrondir les coins de la cellule:border-radius: Xpx Ypx Zpx Wpx ( X est le coin supérieur droit, Y, le coin supérieur gauche etc... Plus la valeur en pixel est grande, plus le coin est arrondi.)

¤ Fond de cellule en couleur : background-color: #XXXXXX
¤ Fond de cellule en une image: background-image: url('adresseurldel'image')
¤ Fond de cellule transparent : background: transparent

¤ Ajouter une barre de défilement lorsque le contenu de la cellule dépasse la taille voulue: overflow: auto
¤ Longueur et Largeur d'une cellule: width: Xpx; height: Ypx (Possibilité de mettre en %)
¤ Espacement entre le texte et les bords de la cellule: padding:Xpx
¤ Centrer la cellule: margin :auto
¤ Ombre sur la case : -moz-box-shadow:Xpx Ypx Zpx #XXXXXX
¤ Rotation de la case :-moz-transform:rotate(Xdeg) (Le X peut être négatif !)
¤ Décaler vers la droite, vers le haut etc... par rapport au centre: margin-left : Xpx ;margin-right : Xpx ;margin-top : Xpx ;margin-bottom : Xpx ( là aussi le X peut être négatif !)

**********************************************************************************************

Cette fois-ci, on met notre texte dans une case, une cellule, c'pareil ! xD Le truc c'est que... Ça fonctionne vraiment comme les textes ! Seulement il faudra maitriser cette partie ça elle nous permettra de mettre en forme un tableau, et plus particulièrement les cellules de ce tableau. Voilà un exemple de code pour illustrer ce chapitre, ainsi que son résultat. N'hésite pas à copier le code et à essayer de changer les valeurs pour comprendre chaque notion. Juste un truc, le dictionnaire des textes, tu peux l'utiliser aussi ici ! Par exemple, si tu ajoute la fonction italique (comme je l'ai fait en bas), le contenu de ta cellule sera en italique, tu vois ?

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Code:: <div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #556B2F;width: 300px;height: 200px;text-align: center;overflow: auto;padding : 20px;margin :auto;font-style: italic">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>

Prochain chapitre : Les tableaux ! ♪

**Admin** ✧ Messages : 67 Date d'inscription : 05/10/2011

Edwin Lorelans a écrit:

Bah avec ces mini-cours, tu y arriveras les doigts dans l'nez ! Cool

*********************************************************************

CHAPITRE TROIS : LES TABLEAUX, PREMIÈRE PARTIE

¤ Aligner le texte à droite : align="right"
¤ Centrer le texte : align="center"
¤ Aligner le texte à gauche : align="left"
¤ Justifier le texte : align="justify"

¤ Couleur de fond : bgcolor="#XXXXXX"
¤ Image de fond : background="fichier.bmp" (Mettre éventuellement une adresse URL à la place de fichier.bmp ?)
¤ Bordure : border="X"
¤ Taille : width="X%" height="X%"(on peut exprimer la taille en pixel aussi ! Il est recommandé de donner une taille en px au tableau plutôt qu'un pourcentage.)
¤ Espacement entre les cellules : cellpadding="X" cellspacing="X"
¤ Fusionner des cellules d'une même ligne : colspan="X" (X représente le nombre de cellules à fusionner)
¤ Fusionner des cellules d'une même colonne : rowspan="X" (idem)

Tout d'abord, sache que les tableaux sont IMPORTANTS. Ils sont utilisés quasi partout, ils permettront d'organiser les cellules vu en leçon 2, mais aussi divers possibilités ! Nous allons commencer par un tableau relativement simple à deux lignes et trois colonnes. On retrouve toujours les balises "table", suivit des balises "tr" pour les lignes et "td" pour les colonnes. Ainsi nous avons :

Code:: <table>
<tr>
<td>ligne 1 - colonne 1</td>
<td>ligne 1 - colonne 2</td>
<td>ligne 1 - colonne 3</td>
</tr>
<tr>
<td>ligne 2 - colonne 1</td>
<td>ligne 2 - colonne 2</td>
<td>ligne 2 - colonne 3</td>
</tr>
</table>

Comme pour les cellules, le tableau peut avoir une mise en forme avec divers styles ! Là par contre, tu remarques que les styles sont différents de ceux qu'on a déjà vu. De plus, il n'y a pas de point-virgule pour séparer chaque style.

Code:: <table bgcolor="#33401C" border="1" width="90%" align="center">
<tr>
<td>ligne 1 - colonne 1</td>
<td>ligne 1 - colonne 2</td>
<td>ligne 1 - colonne 3</td>
</tr>
<tr>
<td>ligne 2 - colonne 1</td>
<td>ligne 2 - colonne 2</td>
<td>ligne 2 - colonne 3</td>
</tr>
</table>

On peut fusionner certaines cases grâce aux fonctions colspan="nombre de cases à fusionner" et rowspan="idem". Colspan permet de fusionner des cases dans une seule ligne, tandis que rowspan les fusionne sur une même colonne. Un exemple ? Reprenons notre tableau ci-dessus et essayons de fusionner les trois cases sur la première ligne. On a :

Code:: <table bgcolor="#33401C" border="1" width="90%" align="center">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>ligne 2 - colonne 1</td>
<td>ligne 2 - colonne 2</td>
<td>ligne 2 - colonne 3</td>
</tr>
</table>

Et voilà j'ai fusionné les trois cases de la première ligne ! Chouette non ?
ligne 2 - colonne 1	ligne 2 - colonne 2	ligne 2 - colonne 3

Essayons à présent de fusionner les deux cases sur la première colonne ! Là il faudra faire attention et supprimer la première case de la deuxième ligne, ici j'ai supprimé < td > ligne 2 - colonne 1 < / td >

Code:: <table bgcolor="#33401C" border="1" width="90%" align="center">
<tr>
<td rowspan="2">Et voilà !</td>
<td>ligne 1 - colonne 2</td>
<td>ligne 1 - colonne 3</td>
</tr>
<tr>
<td>ligne 2 - colonne 2</td>
<td>ligne 2 - colonne 3</td>
</tr>
</table>

Et voilà !	ligne 1 - colonne 2	ligne 1 - colonne 3
Et voilà !	ligne 2 - colonne 2	ligne 2 - colonne 3

Une dernière chose. Dans les codes, j'ai sauté de lignes etc... Pour que se soit lisible, pour que tu comprennes ce que je fais. Seulement tu remarque aussi un vilain espace entre le code et le tableau. Aussi, enlève à la fin tes sauts de ligne pour réparer ça. Smile

Comme ceci !

Code:: <table bgcolor="#33401C" border="1" width="90%" align="center"><tr><td>ligne 1 - colonne 1</td><td>ligne 1 - colonne 2</td><td>ligne 1 - colonne 3</td></tr><tr><td>ligne 2 - colonne 1</td><td>ligne 2 - colonne 2</td><td>ligne 2 - colonne 3</td></tr></table>

ligne 1 - colonne 1	ligne 1 - colonne 2	ligne 1 - colonne 3
ligne 2 - colonne 1	ligne 2 - colonne 2	ligne 2 - colonne 3

Prochain chapitre : Les tableaux, partie 2

**Admin** ✧ Messages : 67 Date d'inscription : 05/10/2011

Edwin Lorelans a écrit:

Il est temps de donner une forme à notre tableau ! Smile

C'est le chapitre le plus difficile à comprendre, mais une fois compris ça passe tout seul ! Nous allons donc d'abord exploiter la leçon 3, en formant un tableau à deux lignes et deux colonnes, où on fusionnera les deux premières casses de la première ligne. Nous obtenons ça !

Code:: <table>
<tr>
<td colspan="2">ligne 1 - colonne 1</td>
</tr><tr>
<td>ligne 2 - colonne 1</td>
<td>ligne 2 - colonne 2</td>
</tr></table>

On va donner une forme à notre tableau en lui ajoutant des styles. C'est le moment de donner une dimension à votre tableau, je te le conseille très fortement, au risque de voir ton tableau déformé ! Je vais également mettre une bordure de 1, je sais les bordures de la leçon 3 sont moches, mais elles nous aideront. Après nous les supprimerons. Remarque aussi que je rajoute le cellspacing, le fameux espacement entre les cellules. C'est assez utile pour centrer ensuite nos cases. Smile

Le tableau qui est là est présent uniquement, et je dis bien uniquement pour servir de charpente. Oublie le fond en couleur et j'en passe, pas de décoration ici.

Code:: <table border="1" align="center" cellspacing="30"width="800" height="600">
<tr>
<td colspan="2">ligne 1 - colonne 1</td>
</tr><tr>
<td>ligne 2 - colonne 1</td>
<td>ligne 2 - colonne 2</td>
</tr></table>

ligne 1 - colonne 1
ligne 2 - colonne 1	ligne 2 - colonne 2

"Oui mis sans déco, c'est moche !" No panic, nous allons nous en occuper... Maintenant ! On va créer une case (comme dans la leçon 2) qui va englober touuut le tableau ! J'insiste sur le fait que la case et le tableau sont tous les deux indépendants l'un de l'autre ! Si tu fais une case trop petite, le tableau ne va pas s'adapter à sa taille non ! Il gardera sa taille et dépassera la case ! Aussi, il est important de faire concorder leur tailles par rapport à ce que tu voulais faire. Pour ma part, je ferais la case de la même taille que le tableau. Mais il est possible de la faire plus grande pour ajouter des éléments autour... Comme du texte, un titre etc...

Code:: <div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #33401C;width: 800px;height:600px">
<table border="1" align="center" cellspacing="30"width="800" height="600">
<tr>
<td colspan="2">ligne 1 - colonne 1</td>
</tr><tr>
<td>ligne 2 - colonne 1</td>
<td>ligne 2 - colonne 2</td>
</tr></table>
</div>

ligne 1 - colonne 1
ligne 2 - colonne 1	ligne 2 - colonne 2

Ça commence à prendre de la forme ! Maintenant on va ajouter nos petites cases à l’intérieur du tableau ! Là non plus y a rien de bien compliqué. Ceci tu vas devoir faire particulièrement attention aux dimensions de chaque case que tu vas créer ! Ici n'oublions pas que notre première cellule est un colspan. Il fera donc à longueur de notre tableau. et sa largeur divisée par 2. Soit 800 de longueur et 300 de largeur tu me diras ! Oui mais n'oublie pas non plus le cellspacing qui est de 30px ! Ce qui signifie qu'en réalité, on a 710 de longueur ( 800 - 30X3 ) et 210 de largeur ( 300 - 30X3 ). SAUF QUE - oui je t'embête encore - tu dois aussi compter la bordure de ta case qui a quand même son épaisseur..., puis les petits pixels qui pourraient éventuellement intervenir etc... Ce qui fait que je supprime 10px à tout casser à mes tailles. Pour ma part, en prévisualisant ce que j'ai déjà fait et en ajustant, je tombe sur 695 de longueur et 200 de largeur. Regarde de temps en temps ce que tu fais, en prévisualisant !

Code:: <div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #33401C;width: 800px;height:600px">
<table border="1" align="center" cellspacing="30"width="800" height="600">
<tr>
<td colspan="2">
<div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #556B2F;width: 685px;height: 200px;text-align: center;overflow: auto;padding : 20px;font-style: italic;margin :auto">ligne 1 - colonne 1</div>
</td>
</tr><tr>
<td>ligne 2 - colonne 1</td>
<td>ligne 2 - colonne 2</td>
</tr></table>
</div>

ligne 1 - colonne 1
ligne 2 - colonne 1	ligne 2 - colonne 2

Et bien on y arrive on y arrive ! On va rajouter nos deux cases en bas, tout en faisant attention aux tailles là encore !

Code:: <div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #33401C;width: 800px;height:600px">
<table border="1" align="center" cellspacing="30"width="800" height="600">
<tr>
<td colspan="2">
<div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #556B2F;width: 685px;height: 200px;text-align: center;overflow: auto;padding : 20px;font-style: italic;margin :auto">ligne 1 - colonne 1</div>
</td>
</tr><tr>
<td>
<div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #556B2F;width: 300px;height: 200px;text-align: center;overflow: auto;padding : 20px;font-style: italic;margin :auto">ligne 2 - colonne 1</div>
</td>
<td>
<div style ="border:dotted #006400;border-radius: 7px 10px 10px 10px;background-color: #556B2F;width: 300px;height: 200px;text-align: center;overflow: auto;padding : 20px;font-style: italic;margin :auto">ligne 2 - colonne 2
</div></td>
</tr></table>
</div>

Et voilàààà ! Smile

Pense à enlever les sauts de lignes qui nous ont permis de ne pas nous perdre, ainsi que la bordure du tableau qui nous a aidé. Ça nous donne à peut-près ça, j'ai juste réajuster les tailles, normalement ça donne un truc plus grand.

ligne 1 - colonne 1
ligne 2 - colonne 1	ligne 2 - colonne 2

Prochain chapitre : Les images

**Contenu sponsorisé**

Rechercher

Résultats par : Messages Sujets
Recherche avancée