- Gazu Gazu

Yo !
Dis-moi ce que tu veux apprendre/ce que tu sais déjà faire, et si tu as déjà fait deux/trois codes montre-les moi, en les mettant entre

Code:

[code][/code]

Je t'écoute.

Alors, déjà, en gros j'aimerais savoir faire une signature et après approfondir si j'y arrive, ensuite j'ai déjà fait quelque chose mais je ne pense pas qu'on puisse appeler ça du codage, j'ai juste fait du copier-coller et changer quelques chiffres : (www) / (www)
Et je sais rien faire c:

Pour toi faire une signature c'est quoi ? Une signa codée ?
Si c'est le cas c'est assez complexe, donc plus quand on cherche à approfondir qu'on fait une signa codée.
Après on peut toujours "analyser" une signa codée dans son intégralité et s'arrêter à chaque chose nouvelle & l'expliquer. Par contre, il va falloir t'accrocher parce que tu vas devoir assimiler pas mal de chose. A toi de voir si tu as le courage de supporter mes pavés ou non. ;D (Dans les deux cas tu vas bouffer du pavé tfaçon.)

Rofl, j'aime pas lire !
Mais c'est quoi le plus simple ?

Mec, si tu commences comme ça tu t'en sortiras jamais. è_é
T'as l'air vraiment démotivé alors qu'on a même pas commencé rien que de dire "ah bah jpréfère choisir le plus simple et le moins chiant" prouve que t'es pas prêt à te donner corps et âme dans mes cours de qualitay.
Non, sérieusement, il faut pas que tu te dises que tu dois coder juste pour faire plaisir aux gens, "psk c joli é stilé", te prouver quelque chose à toi-même ou une connerie dans le genre.
Sinon c'est les bases, mais si tu commences avec des réflexions comme ça on va pas aller extrêmement loin. :\

Putain, je me fait engueuler !xD
Mais je suis motivé, sinon je t'aurais pas demandé en prof :$ Et pusi je préfère commencer par le plus simple, j'ai pas dit le moins chiant, je sais que le codage c'est chiant.

C'était pas vraiment mon intention mais ouais un peu, c'est pas un état d'esprit que j'aime beaucoup (ou alors si j'ai mal interprété ce que t'as dit, prouve moi le contraire. è_é #motiversesélèves) mais np, on va y arriver. 8D
Okay. Alors jte laisse le choix. Soit je fais un pavé méchant ou je t'expliques le b.a.-ba du codage ou soit on fait des petits exercices après chaque micro pavé. C'est un peu plus long mais ça peut être plus simple et moins chiant.

+ contente de voir que tu es motivée. \o/

J'ai fais le pile ou face et c'est tombé sur micro pavé   ! Mais je choisi quand même un gros pavé pour le début apprendre bien tout et après des micros pavés c:

Et puis c'est motivé*, s'il te plaît !èé

Ah oui omg. La fatigue désolée. xD
Bon, commençons par le commencement, on va commencer par créer une boîte, parce que les boîtes c'est coul.

On va faire un truc dans ce genre:

Code:

<div style="width: 380px; height: 250px; background: url(http://shizoo-design.de/stuff/patterns/455.jpg); border-left: #313b45 double 14px; padding: 6px; color: #313b45; text-shadow: 1px 1px 0px #ded4b9; font-size: 15px; font-family: Times New Roman; text-align: center;">Bloup.</div>

Alors, on va pas faire ça tout d'un coup tkt, on va y aller étape par étape.

I - L'HTML LE BA-B.A
On va commencer par apprendre les bases de l'html, l'html c'est un langage informatique qui se compose de balise, c'est assez chiant et illisible c'est pour ça qu'on le couple souvent avec le CSS mais ça c'est une autre histoire.

On va commencer par faire la base de notre petit bloc.  

Code:

<div></div>

Voilà, là on a la base de notre petite boîte, mais elle est nulle, rien, c'est le NEAAANT.
Du coup on va lui donner vie, une couleur etou parce qu'on est gentils tu vois.

Code:

<div style="propriété: valeur;"></div>

Les propriétés on va les apprendre au fur et a mesure, parce que c'est plus simple et j'ai la flemme d'en écrire beaucoup.
On va commencer par définir une largeur, une hauteur et un fond, et normalement si t'as bien acquis les bases du CP en anglais ça devrait aller. 8D

Code:

<div style="width: 380px; height: 250px; background: #fff;">YAH.</div>

Donc, width= largeur, height= hauteur & background=fond.
Pour la couleur du fond tu peux mettre des noms de couleur anglais (red, blue, green) ou alors des codes couleurs html

Voilà, toutes les propriétés sont séparées d'un ;, et essaye d'espacer comme je l'ai fait, c'est plus visible. c:
J'attend ton essai.

c trau koul !.

Argh, ça marche pas
EDIT: Ah bah si :° J'avais mis deux "#"

J'up c:

Génial ton co! *-*
Maintenant on va rajouter une bordure, un cadre & une marge. 8D
Reprenons notre code ! (Ou refais-en si tu te sens l'âme d'un warrior mais c'est pas ultra utile)

Code:

<div style="width: 380px; height: 250px; background: #fff;">YAH.</div>

On va commencer par le background, la propriété qu'on va utiliser c'est :

Code:

background: url(URL)

On la place donc à la place de notre background de couleur !

Code:

<div style="width: 380px; height: 250px; background: url(http://shizoo-design.de/stuff/patterns/455.jpg);">Bloup.</div>

C'est plus présentable, hein ? :]
Par contre, deux trois petits trucs.

On ne peut pas mettre n'importe quelle image en background, si tu mets par exemple ... Ton avatar. La largeur de ton bloc étant supérieur à la largeur de ton avatar ton avatar va automatiquement se répéter (à part si tu utilises une propriété pour éviter la dite répétition, mais à ce moment là ce sera juste moche vu que t'auras une partie non backgroundé. (oui c'est un verbe è_é) )
Dooonc. On utilise des patterns motifs en anglais, ce sont des petites images qui peuvent se répéter à l'infini sans que l'on puisse voir une marque de séparation, génial hein ? :D

Par exemple: Pattern


Pas Pattern:
(l'avatar n'est pas de moi en passant. o/)

Je pense que c'est clair. C:
Et là tu vas me dire, ou je trouve ses choses magiques ? D:
Eh bien partout, Deviantart, Google image -lel-, pour ma part j'ai trouvé le mien sur Shizoo Design

MAINTENANT LA BORDURE 8D
Alors le code d'une bordure a 3 valeurs.

Code:

border: #couleur solid Xpx

La première valeur, c'est la couleur, on utilise toujours des couleurs en code html ou des noms en anglais (ça change pas ça et ça changera jamais. xD).
Le deuxième c'est le type, ici il est "solid, les différents type :

Solide :

Code:

<div style="width: 500px; border: #000 solid 2px;"></div>

Pointillés :

Code:

<div style="width: 500px; border: #000 dotted 2px;"></div>

Tirets :

Code:

<div style="width: 500px; border: #000 dashed 2px;"></div>

Doublé :

Code:

<div style="width: 500px; height: 40px; border: #000 double 20px;"></div>

C'est les principales y'en a quelques unes en plus ici ou la différence est très mince si tu veux aller looker. o/

Note aussi que tu peux dire sur quel côté tu voudrais la bordure

Code:

border-right/border-left/border-top/border-bottom

Moi j'ai choisi un border-right en doublé comme tu peux le voir. C:

Code:

<div style="width: 380px; height: 250px; background: url(http://shizoo-design.de/stuff/patterns/455.jpg); border-left: #313b45 double 14px;">Bloup.</div>

Comme tu peux le voir, notre texte colle à la bordure. Et c'est très moche donc on va rajouter une marge ! 8D
Rien de compliquer, c'est juste un code à connaître:

Code:

padding: XXpx

Comme pour le border-left, tu peux ici choisir ou faire ta marche (à droite, à gauche, en haut en bas ...)

Code:

<div style="width: 370px; height: 260px; background: url(http://shizoo-design.de/stuff/patterns/455.jpg); border-left: #313b45 double 14px; padding: 10px;">Bloup.</div>

Tu peux noter que j'ai enlever 10px au width, c'est parce que j'ai mit une marge de 10 px, et la marge "pousse", si tu préfères au niveau de la largeur ça fait 380 de largeur + 10 de marge.
Pour garder la même largeur j'ai donc enlevé 10px. Voilà, voilà.

A TOI DE JOUER 8D
N'oublis pas de me mettre ton code entre

Code:

[code][/code]

Have fun !

PS : Le cours est immense, mais c'est beaucoup de code. ;D

Bloup.

Je sais que les couleurs c'est pas ça mais tout à l'heure ça marchais pas, j'comprend pas pourquoi ><"

Miss Key, j'up c:

Nyaaah désolée. D:
Marchait pas c'est à dire ? o: Sinon oublie pas de mettre le code à la fin (oui jsais jpeux édit, mais euh voilà, hein. D: *fuis*) Alors, sinon c'est génial t'es sur la bonne voie !

Alors maintenant on passe à la typo' !
Reprenons notre code ! o/



Si ça ne marche pas ou si t'as pas compris dis-le moi & bonne chance !