La classe de Saphy (2/2)

(Je sais que j'ai la classe   ) Trêves de plaisanterie (comme si j'en étais capable Enfin bref!), je vous ouvre donc la porte de ma salle de cours (et je sors juste après...) :p. Je me propose donc comme prof' pour vous apprendre le code. Non vous ne pourrez pas conduire de voiture après ça! Mais vous pourrez faire de belle fiche pour vos Rp's ou autre :p.

Comment ça va se passer?

Je ne prendrai qu'un élève à la fois (oui je fais du cours particulier ;) ). Vous me direz ce que vous savez déjà sur le code, et je vous aiderai de mon mieux pour compléter tout ça. Après avoir expliqué et vu s'il y avait des questions, je vous donnerai quelques exercice pour vous apprendre quelques techniques, et si tut va bien, vous serez diplômé et ça sera le tour d'une nouvelle recrue ;) (Diplôme non reconnu par l'état) .

Règles:
1: Tu ne riras point.
2: Tu ne pleureras point.
3: Tu n'éternueras point... Bon j'pense qu'on peut se passer du guide du parfait bourreau

Donc!
1: Le respect et la politesse sont INDISPENSABLES!
2: Pas ou Très Très peu de langage sms, par exemple "ty" pour "thank you :p" est accepté ;).
3: Je répond aux questions directement pendant l'apprentissage, mais lors des exercices, je préfère répondre par question afin de vous amener à trouver la réponse par vous même. Si vraiment vous n'y arrivez pas, je vous aiderai à vous corriger.
4: Il est possible de faire des fautes, que ce soit moi ou vous (Non je mens je suis trop parfait). J'accepte donc les conseils, mais dans la limite du raisonnable.
5: Toutes les créations que vous faites ici vous appartiennent, je vous dirais comment mettre un copyrith dessus, vous serez donc en droit de demander réparation si quelqu'un vous pique l'une de vos œuvres.
6: Être présent, ce n'est pas sympa de demander à réserver, puis de venir une fois par semaine et encore.

BON! La première promotion est donc ouverte ;).

Je m'inscriit !

Bien :p On commence les cours demain :p, je te ferai un résumé des premiers paramètres importants :p.

Oui Chef !

Bon, commençons par les balises (le plus simple ). La chose la plus importante à savoir c'est la façon de les ouvrir et les fermer.

Exemple:

Code:

<center> </center>

J'ouvre une balise center et je la ferme, tout ce qui se trouvera entre sera centré. Si tu dois mettre plusieurs balises, il faut que tu les ouvres et les fermes comme des poupées russes, exemple:

Code:

<center> <div> </center> </div>

Ne marchera pas, il faut donc faire :

Code:

<center> <div> </div> </center>

.

Les principales balises se mettent entres "<" ">", les principales sont : Center, Div, Span. Bien que tu puisses mettre aussi

Code:

<blockquote>Test</blockquote>

pour faire un alinéa,

Code:

<i>Test</i>

pour l'italique,

Code:

<b>Test</b>

pour mettre en gras, etc.

Pour faire les fiches, on utilise plus souvent le div style. Il se forme de cette façon :

Code:

<div style="paramètre">Test</div>

. Je t'expliquerai ce que sont les paramètres après, as-tu une question?

Code:

<center> <div> </div> </center>

Pour ce code là, il faut écrire entre les "div" ?

Yep, Si tu écris avant

Code:

<div>

ou après

Code:

</div>

ça ne sera que centré.

Ha d'accord ! :D

Au tour des paramètres, pour commencer, je vais t'apprendre à faire un arrière plan :p.

Donc : Il faut commencer par ouvrir un

Code:

<div style=";"> Test </div>

. Les paramètres se placent entre les ", et il faut toujours mettre un ";" après chaque paramètre.

Pour mettre un arrière plan, on va commencer par la couleur, le paramètre pour ça est background-color: COULEUR ou CODE COULEUR.

Exemple:
background-color: blue
OU
background-color: #FFFFFF

A toi d'essayer ;).

Bien. Si tu laisses comme ça, la fiche grandit automatiquement suivant le nombre de ligne. Tu peux mettre une image en fond grâce au code "background-image: url(URL);"

Exemple:

Code:

<div style="background-image: url(http://arbre-a-chat-pas-cher.fr/wp-content/uploads/2014/09/Chat-1.jpg);"> Test </div>

Dans le cas d'une image, sauf si tu en fais une avec motif répétitif, il vaut mieux mettre une taille défini. Tu as donc "height: Npx" pour la largeur et "width: Npx" pour la longueur. N correspond au nombre que tu mets et px = pixel. Exemple:

Code:

<center><div style="background-image: url(http://arbre-a-chat-pas-cher.fr/wp-content/uploads/2014/09/Chat-1.jpg); height: 450px; width: 600px;"> Test </div></center>

Donnera:

Test

Parfait :p. Tu peux mettre "auto" au lieu de "Npx" après height ou width, ce qui a pour effet de faire ce que la taille s'adapte. Nous allons continuer avec une fiche de couleur pour le moment. Tu peux y ajouter des bords avec le paramètre "border", pour l'utiliser il faut marquer "border: Npx TYPE COULEUR ou CODE COULEUR.

Exemple :

Code:

border: 5px solid #000000

Il y a 8 bordures:

SOLID

DOUBLE

DOTTED

DASHED

INSET

OUTSET

RIDGE

GROOVE

Tu peux aussi arrondir les angles avec "border-radius" qui s'utilise de cette façon : "border-radius: Npx Npx Npx Npx;". Si tu veux arrondir les 4 d'un coups, tu peux mettre uniquement "border-radius: Npx;".  Voici des exemples plus concret:

border-radius: 10px 0px 0px 0px

border-radius: 0px 10px 0px 0px

border-radius: 0px 0px 10px 0px

border-radius: 0px 0px 0px 10px

border-radius: 10px

Moi, je préfère tout les arrondis *-* Mais après c'est bien les bordures :D

Tu peut m'expliquer comment mettre à une fiche une bordure aussi ? :D

Hello mon pitit saph'! Je sais que c'est complet mais j'aimerais m'améliorer (tu connais déjà mon niveau de codage ^^') Donc si je peut et bien, je réserve la prochaine session! J'ai soif d'apprendre monsieur!

Sans problème :) Lune a réussi à faire sa fiche, donc j'ouvre la salle, mais elle participera aux exercices pour mieux comprendre :p.

Okiiiiii! Merci monsieur! (Moi j'ai pas encore réussis ^^')

Suite à un arrangement, la classe est de nouveau ouverte :3

je peux etre ton eleve?

Bien sur :p

j'ai jamais fais de code tu m'apprend ?

Pour commencer on va reprendre le système de balise que j'ai expliqué à la page d'avant :p

Une balise c'est par exemple

Code:

<center> <div> <span>

. Chaque balise doit être refermé par un code, comme

Code:

</span> </div> </center>

.

Elles doivent s'emboîter comme des poupées russes, c'est à dire que si tu commences par un center, tu dois finir par le center :p. Exemple

Code:

<div> <center> </center> </div>

.

Tout ce que tu mettras entres sera appliqué, par exemple dans l'exemple d'avant, si je mets quelque chose après le div mais avant le centre, ça ne sera affecté que par le div, et non centré. Si je le mets au milieu, ça sera affecté par les deux ;). Tu suis jusqu'à là?

oui je suis!

Pour commencer, on va utiliser la balise div (à savoir que ce qui est entre <> est une balise, ce qui est entre " " ou entre [ ] est un paramètre). Lorsque tu veux faire un code, il faut commencer par

Code:

<div style=" "> Texte </div>

. Tout ce qui est mit entre les deux balises aura les paramètres du div.

Pour les paramètres, il faut les mettre entre les " " du div. Passons au premier, tu comprendras mieux. Pour faire un fond de couleur, le paramètre est background-color: color. Si tu as compris, tu dois savoir où il faut le mettre dans le code du dessus :p. Tous les paramètres doivent être fermés par un point virgule ;. (Petite précisions pour faire le fond de couleur, à la place du deuxième "color" il faut mettre le nom de la couleur en anglais, ou le code couleur héxa comme #000000.

A toi d'essayer ;).