Tuto codage

Coucou les gens ! Ici je vais vous présenter un moyen de faire un petit peu vos codes RP vous même !
Ce tuto est pour les non initiées ou les novices ! Si vous êtes déjà intermédiaire il ne vous servira certainement à rien.
De plus, il est pour les codages sur les forums, dans les topics et non pas les codages de css.

Est-ce que le codage c'est difficile ? Alors, oui, parfois on se casse la tête, mais les premières étapes de la réussite des codes c'est surtout le par coeur. Vous n'avez pas besoin de devenir un as en codage, d'ailleurs, au delà du parcoeur si vous parlez anglais couramment ou non (vous apprendrez des mots, au pire) cela sera encore plus facile vu que le codage est uniquement en anglais.

Voici le sommaire de ce qui sera vu

1. Explication générale
2. Les arrières plans (unis, images)
3. Les bordures et arrondis
4. Les marges
5. La taille
6. Insertion d'une image
7. div et span
8. Les erreurs les plus courantes
9. Des propriétés en vrac
10. Le mot de la fin
11. Exercices
12. Logiciels et sites



Partons sur cette base :

Code:

<div style="background-color: #????; width: 550px; border: #????? carac1 carac2; padding: 10px;"> Texte du RP </div>

Cette base peut donner ça



Bon alors vous allez me demander tout d'abord : "div style c'est quoi"
C'est simple : vous avez trois type d'écriture (enfin d'autres, mais voilà les basico-basiques)
- le Bbcode : c'est tout ce qui est

Code:

[b] [/b] – [i] [/i]  – [u] [/u]

- le html : même chose sauf que c'est avec les < et > il sert surtout à l'écriture
- le CSS : il sert à la mise en page. Background-color par exemple c'est du CSS

La balise div style permet d'introduire du css dans un code html.
Tout d'abord pour pouvoir mettre un code vous devez être en mode html / régider là ou vous écrivez votre réponse.
Pour faire simple, faites un test : Ecrivez un texte, sélectionner ce que vous voulez mettre en gras. S'il se met en gras et que vous pouvez le voir directement, cliquez sur cette petite feuille et normalement ça devrait se transformer en code.
Si vous voyez le code, c'est bon.



Donc, revenons sur notre base de code, si vous maîtrisez l'anglais ça va être simple :
background-color: #??????; permet de gérer le fond de votre zone (couleur unie)
Vous pouvez soit remplacer les ?????? par un code couleur ( téléchargez la boite à couleur si vous voulez) soit par grey, red, (dans ce cas faut enlever le #) etc.. mais je vous conseille un code couleur parce que c'est plus précis
Exemple :
background-color: #006699;
(006699 : c'est un bleu)

Pour utiliser une image en arrière plan : background-image: ('URL');
Pour gérer la répétition: background-repeat: no-repeat; / x-repeat; / y-repeat / repeat

Faites attention à ne pas enlever les ' parce que... bah c'est mortel POUF ça ne marchera pas !

Exemple sur un code :


(ouai c'est bioutiful je sais)

Code:

<div style="background: url('https://screenshots.fr.sftcdn.net/fr/scrn/69656000/69656242/thumbnail-100x100.png') repeat; width: 550px; border: #006699 solid 10px; padding: 10px; border-radius: 20px;"> Texte du RP
Texte du RP
Texte du RP  </div>

Comme je l'ai fais ici, vous pouvez aussi utiliser la simple fonction BACKGROUND qui est une méga propriété et qui peut avoir plusieurs valeurs comme le lien et la répétition.



border: permet d'installer des bordures en réglant la couleur, la taille et le style de bordure
Pour ça il faut régler
- la couleur : avec #??????
- la taile en px xpx
- le type de bordure (dotted [pointill] solid [solide], dasshed [traits]

Exemple :
Border: #000000 2px solid;
Bordure noire, 2 px et solide

Vous pouvez aussi gérer chacune des bordure (border-top, border-bottom, border-right, border-left) d'une façon totalement individuelle

Avec ça vous pouvez pas mal déjà vous amusez à personnaliser vos rp.
Vous pouvez évidemment ajouter une image/gif/autre etc...

A la place de solid vous pouvez mettre:
dotted (pointillé)
dashed (tirets)
groove (sort de 3D)
double (double 1px solid, 1px transparant, 1px solid)

Je vous invite à taper border css sur google vous trouverez tout plein de caractéristiques de BORDER.

En lien avec BORDER nous avons aussi la possibilité de faire des coins arrondis.
Pour se faire on utilise:
border-radius: ???

Vous pouvez utiliser deux choses pour compléter les ???
Soit, toutes vos bordures sont à la même taille, dans ce cas, n'utilisez qu'un seul
border-radius: 20px;

Soit toutes les bordures ne sont pas à la même taille dans ce cas il faut marquer les 4.
Border-radius: 0px 0px 50px 50px;

Vous pouvez aussi utiliser une quotation en %, c'est pratique pour les ronds, par exemple si vous voulez faire un rond vous pouvez
border-radius:100%
A noter que border-radius ne s'applique pas uniquement quand border est présent, vous pouvez faire une bordure sur n'importe quel élément.



Reprenons ce qu'on a dit toute à l'heure :

Code:

<div style="background-color: #????; width: 550px; border: #????? carac1 carac2; padding: 10px;"> Texte du RP </div>

Nous avons vu les background, les bordures, maintenant, parlons des marges.
Vous trouverez
padding : ? →marges intérieures
margin : ? → marges extérieures

Ici on va utiliser plutôt une marge intérieure vu qu'on souhaite faire un petit espace entre le bord du fond et le texte, pour que ce soit plus lisible.
Comme pour border, vous pouvez utiliser padding-top, padding-bottom, etc...



Pas bien difficile :
width: largeur
height: hauteur
S'expriment le plus souvent en pixel, mais vous pouvez l'exprimer en % (c'est très utile notamment pour les personnes qui ont des tailles d'écran différent, mais on le fait surtout pour les thèmes, en fait)



Admettons que dans l'exemple RP précédemment vous souhaitez y ajouter une image. Voilà ce qu'on peut faire :



En voici le code :

Code:

<div style="background-color: white; width: 550px; border: #006699 solid 10px; border-radius: 20px;"><img src="http://i99.beon.ru/38.media.tumblr.com/324f7d4c53343b1dd264d3dd23e88c6b/tumblr_not5zfJPJf1seoz4xo3_1280.gif"/> 
 Texte du RP
Texte du RP
Texte du RP  </div>

Il est important de ne pas sauter de ligne entre les lignes de code sinon vous aurez un saut de ligne entre les deux. Si vous le souhaitez, vous pouvez, mais si vous voulez que tout soit collé, alors mieux vaut éviter.

Le code pour mettre une image en html est donc

Code:

<img src="LIEN"/>

oubliez de suite le img /img dans lequel vous ne pouvez absolument rien paramétrer ni ajouter du css !
Au passage le code pour insérer un lien en html c'est

Code:

<a href="LIEN"> blabla </a>

qui remplace donc le url=

Admettons que vous souhaitez aussi mettre des bords arrondis aux deux coins en haut de l'image.
Comment faire donc ?
Vous pouvez mettre des propriétés à une image.



Il vous faut don rajouter un style= en enlevant le / de img src sans oublier d'ouvrir et de fermer les '' Vous pouvez faire ça à un peu n'importe quoi.



Tu es bien gentille mais toute à l'heure tu as dis de mettre un padding et depuis l'image il a disparu !
Eh oui. Le padding a disparu. Pourquoi ? Et bien regardez ce que ça donne avec :



Le padding étant mis au premier code, il va inclure tout ce qu'il y a à l'intérieur jusqu'à sa fermeture.
Comment donc régler ce souci ?
C'est ce que j'utilise pour vous introduire la notion de div et de span.
Si on reprend le premier code vous voyez que ça commence par div style="...;"
Il existe un autre il s'agit de span style="...;"

La différence ? div va créer un bloc, c'est à dire qu'il va automatiquement sauter une ligne avant et après alors que span ne va pas le faire. Span est donc à utiliser pour des choses plus légères et qui ne s'applique que précisément au début et à la fin de la balise. (vous pourrez faire vos tests, le codage ça passe par du test et des erreurs surtout en fait)





• lorsque je mets des ' ou des " il est important de mettre le lien entre et de ne pas les enlever sinon l'image ne s'affichera pas
• ne pas oubliez les div style="..."
• ne pas oublier le ":" après la propriété
• ne pas oublier le ";" après la valeur
vous pouvez repérer cette faute d'une manière simple : une partie du code que vous avez écrit ne s'affiche pas ? C'est à partir de ça que vous devez investiguer.

• ne pas mettre n'importe quoi comme espace
c'est
propriété: valeur; propriété: valeur; → pas d'espace en plus ou en moins

• Mal mettre une balise, par exemple

Vous êtes prêts pour le tuto codage numéro 2 ? Celui-ci demandera un peu plus d'efforts de votre part, car pour le tester, cela va être un peu plus embêtant vu que nous allons parfois utiliser des feuilles de style !

Il sera divisé en deux parties, tout d'abord, les tableaux, puis tout le reste.

Nous allons cependant commencer encore par un peu de html puis nous nous dirigerons lentement vers du css de plus en plus sur feuille de style.

Le tuto qui suit et ses codages bien qu'applicables aux réponses Rps sont plus complexes et peuvent être utilisés à ce niveau pour faire des codages complexes de réponse RP mais aussi fiche de lien, relation, page d'accueil

Voici le sommaire ~

1. Les tableaux
2. Les positions
3. Le «float »
4. Les transformations
5. Comment créer une feuille de style
6. Les class et id
7. Effet simple au passage de la souris
8. Info bulle
9. L'image qui laisse place à du texte



Bon alors, une grosse base d'HTML que nous n'avons pas vu la fois précédente. La raison ? C'est un peu long et chiant les tableaux, et dès que vous commencez à ajouter plein de lignes et de colonnes et surtout à devoir les fusionner… Ca deviens parfois casse couille je vous l'avoue xD La deuxième raison c'est qu'on parlait surtout des codages pour des réponses Rps là on va aller un peu plus loin.

Les tableaux faut savoir que c'était ma bête noire au début quand j'ai appris à coder. Alors déjà j'inversais toutes les balises et pouaa.. Voilà. Maintenant ça va beaucoup mieux.

Ne prenez pas peur cela dit, ne sont que des tableaux, en général, sauf si vous faites des pages d'accueil ça ne vous sert pas trop.

PARTIE 1 : LA BASE DES TABLEAUX, TABLE TD ET TR

Alors, déjà, à quoi ça sert, mis à part la pure « faire un tableau », les tableaux en codage ?

Par exemple, à faire ça :

Oui c'est Hilel sur la photo. Il est plutôt pas mal hein ? C'est un gars plutôt froid si vous le connaissez pas. Oui je m'éclate à écrire de la merde. En fait vous savez quoi, je crois qu'il me tuerait s'il me voyait écrire cette connerie. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu.Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu.

BLBLBLBL mais c'est pas un tableau ça !

Oui c'est Hilel sur la photo. Il est plutôt pas mal hein ? C'est un gars plutôt froid si vous le connaissez pas. Oui je m'éclate à écrire de la merde. En fait vous savez quoi, je crois qu'il me tuerait s'il me voyait écrire cette connerie. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu.Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu. Fufufufu.

Vous le voyez le tableau à présent ? Certes c'est une ligne avec deux colonnes mais c'est un tableau !

Passons au code maintenant.

Code:

<table BORDER style="width: 550px; margin: auto;"><tr><td><img src="http://zupimages.net/up/17/06/8mx8.png" width="100"> </td> <td> <div style="overflow: auto; height: 90px; width: 450px;">  Texte  </div> </td> </tr> </table>

Je vais tout d'abord vous décortiquer la chose.

On ouvre toujours (et on FERME) un tableau avec la balise table /table.
Il arrive fréquemment de l'oublier parce qu'on écrit tellement de choses entre… Petit rappel de tuto 1,si vous ne fermez pas la balise table… ça risque de poser des problèmes au fofo~.
Le petit conseil c'est de l'écrire juste après et d'écrire en plein milieu. (c'est tout)

Ensuite vous voyez en gros BORDER. La majuscule est voulue. Oui vous écrivez bien border en gros comme ça, ça indique que vous voulez des bordures visibles, je vous conseille aussi de le garder quand vous créez votre tableau, surtout quand vous faites des fusions de colonne ou de ligne parce que ça vous permet de savoir si vous avez mis les bons nombres.

Ensuite vous voyez TR. Cela indique le début d'une LIGNE.
TD indique le début d'une colonne.
Il est important de d'abord mettre la ligne et ensuite la colonne. On n'écrit pas td tr (texte) /tr /td sinon votre code ne marchera juste pas.

Il est important de savoir que
- dans cette configuration (c'est à dire avec table td tr) , vous devrez gérer ligne par ligne
- dans cette même configuration, vous devez avoir le même nombre de colonne par ligne
- dans cette même configuration, vous ne pouvez pas modifier les tailles des cellules de façon unique, elles se suivent

/!\ Lorsque vous écrivez un tableau il est important de ne pas sauter de ligne . Comme moi peut-être, vous voudriez sauter une ligne entre chaque ligne du tableau pour gagner en visibilité. Chose qui d'ailleurs marchera sur notepad++.
Sur forumactif en revanche ça ne marche pas. Plus vous sautez de lignes, plus vous aurez d'espace avant le tableau. Faites le test, vous verrez. Au passage, la balise pour aller à la ligne c'est

Code:

<br/>

. Si vous en mettez deux, ça fait donc un saut de ligne.
Lorsque vous éditez votre page d'accueil, vous pouvez par contre sauter des lignes.

Pour les très très grands tableaux (ceux de plus de 20 lignes, comme par exemple, le tableau des djinns ici, 73 lignes), je vous conseille de sauter des lignes quand vous l'écrivez, mais de corriger lorsque le tableau est complet, ça permet de ne pas se perdre dans les lignes.

Style ;
Vous pouvez, comme pour les images, donner un style à TABLE, ainsi, vous pouvez gérer la taille du tableau entier, les bordures si vous en voulez, les espacement et les marges du tableau.

Pour gérer chaque cellule je vous conseille de faire un div style interne à chacune (ou une class en fait mais on verra ça plus bas) et de ne pas donner de style a un td ou tr sauf pour des modifications mineures comme une couleur de fond. Le reste mieux vaut le gérer avec des div.

Petite exercice intermédiaire

texte	texte	texte	texte
texte	texte	texte	texte
texte	texte	texte	texte
texte	texte	texte	texte

Solution en spoiler

Spoiler:

Vous avez compris ? Très bien o/ Maintenant, partie 2 !

PARTIE 2 : Fusion de cellules

Vous étiez peut-être en train de vous dire que les tableaux c'était nul et qu'on pouvait rien faire avec ?
Pour vous donner un petit indice de tout ce qu'on peut faire avec : le forum en entier est un tableau et… la page d'accueil du forum est aussi un tableau.
Pourtant on ne dirait pas n'est-ce pas ?

Voici un petit screen avec le fameux BORDER


Voilà, cette PA est donc un tableau o/

Vous voyez que plusieurs cellules sont fusionnées.
Les deux dernières lignes, on dirait qu'il s'agit d'une simple ligne tr /tr mais n'oubliez pas que vous ne pouvez pas, c'est une fusion de toute les colonnes sur une ligne !

Comment fusionner maintenant ?
Eh bien c'est juste deux simples mots :
rowspan fusionne les lignes pour créer des colonnes
colspan pour la fusion de cellules pour créer des lignes plus grandes
que vous mettez à la suite du td

vous devez aussi noter le nombre de cellules à fusionner avec un = ? Mais on va le voir de sutie.

Bon comme ça se voit que j'ai du mal à expliquer ces deux pauvres petites choses, passons à des exemples !

Titre du tableau
Element 1	Element 2

Code:

<table BORDER style="width: 200px;"> <tr> <td colspan="2"> <center> <b> Titre du tableau </b> </center> </td> </tr> <tr> <td> Element 1 </td> <td> Element 2 </td> </tr> </table> 

J'ai donc utilisé colspan pour fusionner les deux premières cellules de la ligne 1 et j'ai indiqué de fusionner 2 cellules.
Lorsque vous indiquez une fusion, il est important de vérifier que vous avez bien le même nombre de colonne sur chaque ligne et inversement ou bien vous aurez le droit à quelque chose comme ça :



En vrai, cela ne s'affichera pas( élément 3), cela s'affiche en bug juste parce que nous sommes sur forum actif.

Le bug ici c'est parce que j'ai indiqué sur la ligne 1 la fusion de 2 cellules et rien après, puis que sur la ligne 2, j'ai indiqué 3 cellules. Du coup, la cellule « Element 3 » ne sait pas ou se placer et bug.
C'est la raison pour laquelle je vous conseille de mettre BORDER, vous pouvez voir de telles erreurs, indiquée par une ligne plus fine et un vide.


En utilisant table style= vous pouvez évidemment mettre un arrière plan au tableau, uni ou image, configurer sa taille, vous amusez avec les bordures principales ect. …

Nous allons à présent voir les float et les positions !
Déjà c'est quoi un float ? Il permet de faire "flotter" un élément d'un certain côté, par exemple si vous voulez mettre une image et que vous voulez écrire à côté puis en dessous, vous allez utiliser un float. Si vous mettez juste l'image et bien ça va donner.

Je suis un petit canard.


Vous pouvez positionner des images un peu n'importe comment.

Par exemple, pour le code RP d'Hilel (ouai)



La vous pouvez voir la différence : le texte se met au niveau du haut et pas du bas directement. (c'est l'équivalent dans word/openoffice d'un renvoi relatif si y'a des connaisseurs dans le coin)

Comment on fait ça ?
On utilise simplement
float: ??; ?? étant la direction, left ou right par exemple

Voici le code utilisé précédemment

Code:

<div style="width: 500px; background-color: #4D4D4D; text-align: justify; color: white; border-radius: 200px 0px 30px 0px;"> <img src="http://s6.favim.com/orig/141015/adorable-anime-anime-boy-awesome-Favim.com-2154056.jpg" style="float: left; border: 7px solid black; width: 100px; height: 100px; border-radius: 1000px 1000px 1000px 1000px;">  <div style="font-family: 'LisbonScript'; font-size: 60px;"> titre du RP </div>  <br/> blablabla blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla blablabla  blablabla  blablabla  blablabla  blablabla  blablabla </div>

Voilà, maintenant c'est bien sympathique tout ça mais si vous voulez faire un truc plus compliqué ?
On va utiliser les positions!

Autant vous le dire tout de suite, je connais la théorie mais j'ai pas hyper l'habitude de l'utiliser, donc on va rester bah.. Dans la théorie quoi o/

Pour dire qu'un élément qu'il doit bouger ou vous le souhaiter, vous devez utiliser la propriété "position". (d'ou le titre, en fait)
Cette propriété peut prendre différentes valeurs
position: absolute; pour dire que votre élément va se placer au dessus de tout, vous pouvez le mettre n'importe ou.
position: fixed; c'est la même chose qu'absolute au final sauf que là il va rester fixe (c'est utilisé pour les menus par exemple)
position: relative; sert à déplacer plus un élément de type inline.

(je vous invite à faire vos essais)

/!\ RAPPEL Inline et block
Deux types de balises principales;
- inline; les span de l'autre tuto (et les tr td) qui n'induit pas de saut de ligne, c'est un petit élément, je le prends comme une balise plus faible
- block ; les div qui va induire un saut de ligne et qui cadre un élément
Par défaut vous verrez que certaines balises sont bloc ou inline.
vous pouvez néanmoins changer cette configuration en utilisant
display:block;
display: inline;

Revenons donc à nos moutons, les positions.
Une fois que vous avez décidé du type de position vous voulez utiliser il vous suffira de marquer à la suite
left: ?px;
top: ?px;
...
Bien évidemment vous marquez les positions dont vous avez besoin.

left: 50px;
top: 50px;
Signifie que l'objet sera deplacé de 50px en haut à gauche
(je vous invite aussi à tester ça)

N'oubliez pas de gérer les marges pour le côté esthétique et/ ou ergonomique de la chose.


J'avais pour projet de vous expliquer les transformations mais en fait, on va passer directions à la feuille de style et on verra une liste de propriétés, leurs balises et leurs valeurs (comme le code en vrac du premier tuto) par la suite.



B.A.BA ; CSS veut dire Cascading Style Sheets, soit "feuille de style en cascade."
D'un point de vue théorie, le HTML (HyperText Markup Language) est utilisé pour l'écriture, tandis que le CSS, pour la mise en forme.

Vous pouvez insérer une feuille de style dans chaque post (fiche externe) et chaque forum dispose de sa propre feuille de style interne (Panneau d'admin -> Affichage -> Couleur -> Feuille de style)

Si vous avez utilisé notepad++ vous savez à quoi ressemble une feuille de style.
Autrement, en voici une



Maintenant vous allez me demander; on peut mettre du CSS dans du HTML, ce que nous faisons avec style= alors pourquoi doit-on utiliser une feuille de style?
Tout simplement parce que style= permet en réalité très peu de choses, rend les codes souvent longs. Vous ne pouvez pas vraiment faire beaucoup d'effets.
Et comme on n'a pas tous une fiche de CSS à soi, on va devoir en importer une externe, grâce à archive-host notamment. (c'est gratuit, vous vous inscrivez sur le truc d'hébergement de fichiers pour particuliers)

POINT IMPORTANT
Comme vous l'avez vu dans l'exemple de feuille de style, on écrit pas de la même façon, sur forum que dans une vraie feuille de style!

Voici une feuille de style externe (C)CCCrush
https://sd-1.archive-host.com/membres/up/211183412958130190/RP/AZA_RP.css

Pour faire une feuille de style externe, ce n'est pas compliqué
Vous créez un nouveau fichier dans notepad (ou alors vous utiliez bloc note (et PAS WORD/open office/libre office) mais c'est moins ben ça n'affiche pas les couleurs.
Vous calibrer votre feuille en Langage > C > CSS

Normalement quand vous écrivez dans votre feuille CSS vous devrez voir des couleurs qui se distinguent un peu si vous écrivez une classe, une valeur, une propriété un id, un commentaire.. Je vais vous montrer tout ça et aussi comment les couleurs peuvent vous aider à voir si vous faites des fautes de code.

Tout d'abord, je vais vous expliquer les class et les id (qui servent à la même chose)



A quoi ça sert ?
Rien de mieux qu'un exemple ?

Code:

<div style="font-size: 3em; font-family: Calibri; border-bottom: #cc9f92 solid 3px; color: #cc9f92;  padding-bottom: 5px;"> Titre 1 </div>
<div style="font-size: 3em; font-family: Calibri; border-bottom: #cc9f92 solid 3px; color: #cc9f92;  padding-bottom: 5px;"> Titre 2 </div>
<div style="font-size: 3em; font-family: Calibri; border-bottom: #cc9f92 solid 3px; color: #cc9f92;  padding-bottom: 5px;"> Titre 3 </div>
<div style="font-size: 3em; font-family: Calibri; border-bottom: #cc9f92 solid 3px; color: #cc9f92;  padding-bottom: 5px;"> Titre 4 </div>

Bien évidemment, c'est autant chiant à écrire qu'à copier coller.
Cela prend de la place sur un code, parfois les div style sont très longs.
La solution ?
Utiliser une feuille externe en créant une class!

Par exemple :





HTML

Code:

<div class="titre"> Titre 1 </div>
<div class="titre"> Titre 2 </div>
<div class="titre"> Titre 3 </div>
<div class="titre"> Titre 4 </div>

CSS :


Vous remarquez qu'on n'a écrit qu'une seule fois la ligne (et d'une façon différente)
Les class servent donc à économiser le html/css et surtout, d'un point de vue pratiques sont vraiment bien !
Imaginez, vous avez écrit tout vos code comme le premier long exemple.
Vous avez envie de le changer.
Eh bah vous devrez vous retaper chaque ligne de code autant de fois qu'elle existe.
Avec un class ? Vous le changez une seule fois dans la feuille de style et PAF c'est changé partout.
Génial non ?

Je vous ait parlé de class et de id.
Quelle est la différence ?
Une ID ne pourra être que présent une seule fois sur une page !
Par exemple, le header (la bannière) et un ID!
Les CLASS elles pourront se répéter et peuvent s'appliquer à n'importe quoi. Vous pouvez appliquer une class à une image, un paragraphe, un tableau etc... et à deux éléments qui sont différents.
Vous pouvez aussi d'attribuer une class/id en meme temps qu'un style, cela dépend comment votre code est fait et ce que vous voulez faire mais cela ne vous empêche pas d'écrire

Code:

<img src="LIEN" class="rond" style="....;">

.rond
{
border-radius: 100%
}

Bon certes vous auriez pu l'écrire dans le style mais on sait jamais, cela peut être utile certaines fois si vous voulez que cette image là soit une sorte d'exception.

Comment on écrit une class ou un id ?
Pour marcher, ils doivent être écrit et dans le css et vous devez avoir la bonne appelation lorsque vous écrivez div class="?" ; cela arrive souvent de faire des erreurs d'appellation ou d'orthographe, si votre class ne marche pas du tout, c'est soit que vous vous êtes trompé de nom soit que vous l'avez appliqué à une balise de type inline et que celle-ci ne prend pas tout en compte.
Attention, je n'ai pas dis qu'on ne pouvait pas appliquer de class aux balises de type inline (span), vous pouvez mais cela doit être des modifications mineures; police, effet, couleur de fond etc... une taille et un overflow ça ne prend pas en général. Si jamais vous en avez néanmoins besoin, je vais vous apprendre ça plus bas. (on a déjà vu comment faire devenir une balise inline en block mais vous n'allez pas faire devenir tous vos span en block n'est-ce pas?)

Ca c'était la partie HTML.
Dans le CSS vous devez écrire comme ceci
.nomdelaclass
{propriété: valeur;}

#nomdelid
{propriété: valeur;}

Pour la class c'est un point, pour l'ID c'est un #.
Concernant le nom à présent, pas d'accent, pas d'apostrophe, par contre vous pouvez utiliser les _ par exemple
.titre_principal
.titre_categorie



Je vais vous montrer une série d'erreur tout d'abord :



J'ai essayé de regrouper les erreurs les plus courantes.

- une class doit toujours être en rouge. Ici il est bleu. C'est parce qu'il y a un espace en trop
- un code hexadecimal (la couleur) est par définition, muni de 6 chiffres, ici, un a été oublié (parfois on connait nos code hexa par coeur donc ça arrive)
Au niveau de la couleur vous voyez que font-size n'a pas la même. Pourquoi ? Parce que sur la ligne d'au dessus, il manque le ;.
De ce fait, la taille ne s'exprimera pas.
Tout à la fin le ; n'est pas obligatoire, c'est pour cela que ce n'est pas font-variant qui est en erreur mais bien l'autre.
Evidemment, la solution est de le mettre normalement à la fin de chaque valeur.

Ensuite vous voyez un /* je suis une quiche /
et tout le reste est en vert, y compris le code en dessous.
Le /* texte */ sert à rajouter un commentaire au CSS. Par exemple pour dire

/* codage page d accueil */
Histoire de se retrouve dans ce bordel mais aussi

font-size: 20px; /* ici cest la taille de la police */
lorsque l'on fait un tuto pour aider les gens à se souvenir
L'oubli de la fermeture correcte va handicaper tout le code.

Ensuite, détail mais blabla_3, oui vous pouvez mettre des chiffres par contre je vous déconseille de finir en blabla_2, blabla_3 parce qu'on s'y perd souvent sauf si la raison est légitime comme titre_1 (titre niveau 1) etc..

Voici le code juste :


Comment insérer une feuille de style ?
Vous savez comment en créer une, maintenant, comment l'insérer !
Rien de plus facile en vérité.

Code:

<link href="LIEN" rel="stylesheet" type="text/css">

Concernant le lien, vous devez prendre celui qui se fini par .css comme l'ancien que je vous ai donné.



Vous allez maintenant voir la deuxième importance de la feuille de style.

Cela sera la dernière chose que nous verrons dans cette partie o/

Vous pouvez dire au CSS de faire certaines choses lorsque vous passez votre souris, lorsque vous cliqué, ou avez cliqué sur un lien ou un élément.

:hover (passer sa souris dessus)
:selected (selectionné)
:active (quand vous venez de cliquer)
:visited (quand vous avez cliqué)

Alors les trois derniers s'appliquent surtout pour les liens.
C'est surtout le premier que nous allons utiliser.

Admettons, montre titre de toute à l'heure, j'ai envie que lorsque qu'un passe sa souris dessus, il devienne blanc et que la bordure soit en pointillés.
Comment je fais ?

HTML:

Code:

 <div class="titre"> Titre 1 </div>

.titre
{ font-size: 3em;
font-family: Calibri;
border-bottom: #cc9f92 solid 3px;
color: #cc9f92 ;
padding-bottom: 5px;
}

Soit, ce que nous avons déjà vu.
Il faudra rajotuer à la suite :


.titre:hover
{
border-bottom: white dotted 3px;
color: #white;
}

Vous ne mettez dans le hover que ce que vous voulez modifier (vous pouvez tout réécrire aussi parfois c'est mieux, mais gain de ligne)

Voilà!
Je vous laisse là pou le moment~

Dans le prochain tuto (qui sera séparé)
Nous verrons les codes plus complexes!