Alors ici c'est le cours de Shivies dont le prof est moi //SBAAFF//
Mais tout le monde peut venir voir et demander des trucs.
Alors les bases, ya deux parties dan le codage: le HTML ET LE CSS
Le HTML c'est la base du codage, la structure, ce sont les balises comme "div" Il faut mettre la balise div au début et à la fin du codage, à la fin on n'oublie pas de mettre un slash ("/")
Le CSS cest à l'interieur du codage, les réglages que l'on introduit par un "style=" (à placer juste apres le div d'ouverture) Il faut bien mettre les réglages entre guillemets et séparer les différents réglages par des points virgules.
Capiche ?
On passe à la pratique.
On ouvre le code :

Code:

<div style=" truc"</div>

Prends le réflexe de mettre direct le div de fin pour ne pas l"oublier.
On rajoute ensuite les caractéristique du code (bords, fond etc)
On fait les bord, il y a différents types de bords :


Ce bord on peut choisir sa grosseur, en indiquant un nombre en pixel et sa couleur avec le code (#bidule) d'une couleur.
Ex:

Code:

<div style=" border: ridge 4px #cc00ff;">Texte</div>

Un petit plus pour les bords, on peut les arrondir Pour ça il faut utiliser "border-radius" et on met le dégré en pixel d'arrondissement. Facile
Donc ça donne:

Code:

<div style=" border: ridge 4px #cc00ff; border-radius: 7px;">Texte</div>

FOND
Alors le fond on peut ne pas le faire //POUTRE// Ou peut mettre de la couleur, ou une image. Pour la couleur cest bien c'est sobre et efficace. Pour un fond imagé, il faut faire attention, l'image ne s'agrandira pas selon la taille du code, elle se répetera. Donc ça peut faire moche selon les images. Je mettrais ptêt un exemple quand je serais sur ordi.
Donc il faut mettre "background-color" ou "background-color selon ton choix. Pour la couleur il faut mettre le code # de la couleur après: background-color: #cc00ff
Et pour l'image l"URL : background-image: url(URL de l'image)
Donc :

Code:

<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">Texte</div>

Voilà pour le fond. Je ferrais avec image dans une partie réservée pour les images. Autant tout faire ensemble x)

TEXTE
Le texte en mon Dieu, on peut faire tellement de choses, ça va être long x)
Alors déjà, mettre en page le texte, pour ça, on utilise: text-align :
On peut mettre "justify" pour que ça fasse un beau bloc carré
Center pour centrer /paf/
Left pour coller à gauche et right pour la droite.

Code:

<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center;">Texte</div></div>

Comme on peut le voir, j'ai rajouté un div, pour faire plus propre, un div pour le cadre (fond et bord etc) et un autre pour régler la police. Ca fait plus propre et on s'y retrouve plus.
On peut changer la taille de la police avec "font-size: Xpx" On met la dimension de la police en px. Très utile de changer la taille, pour que ça fasse plus lisible et mettre des gros titres qui pète.

Code:

<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center; font-size: 35px;">Texte
</div></div>

Après la taille ? La couleur ! Alors ça c'est simple, on met :"color: #XXXXX"
Oui c'est simple :D Enfin un truc simple
Aller, on va structurer un peu mieux notre fiche, avec un titre :D Donc, on rajoute un autre div pour le titre et on met une grosse taille avec un changement de couleur :D

Code:

<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff">Texte</div></div>

Petit truc: dans ton titre ou autre, tu peux souligner, mettre en gras ou en italique Grâce au bouton de mise en page du bloc d'écriture Ou bien tu écris direct les balises.
Gras

Code:

[b][/b]

Italique

Code:

[i][/i]

Souligné

Code:

[u][/u]

Donc on passe à plus gros. Police d'écriture et padding.
Alors le padding, c'est pour mettre un espace entre ton texte et la bordure, pour que ce soit lisible quoi Quand tu mets du padding, l'espace sera égale des deux côtés, après si tu veux faire un côté estplus grand et l'autre petit faut utiliser le margin mais ça on verra après. Sauf si je trouve la motivation, mais je préfère faire la police d'écriture avant.
Donc, tu mets "padding: Xpx" tu choisis ta valeur en pixel comme toujours. Tu places bien la balise dans tes réglages d'écriture.

Code:


<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte long pour te montrer ce que ça donne sinon c'est inutile, fin t'as compris. Peut-être pas en fait. Parce que mon cours c'est n'importe quoi.</div></div>

Voilà, et je viens de me rappeler d'un truc. Je t'ai pas montré comment on modifie la taille du codage.
Pour modifier la largeur c'est : width
Et pour la longueur: height
Le height on l'utilise plus souvent quant on met une barre défilante (j'vais te montrer ça tiens) La longueur s'agrandit automatiquement si tu ne définie pas de height. Et le width on le met tout le temps, la plupart du temps. (Fais gaffe à pas mettre des trucs trop gros )
Donc, t'a ton codage, et tu rajoute dans le div du cadre, ta taille.

Code:


<div style=" border: ridge 4px #cc00ff; background-color: #ffffff; width: 100px; height: 80px;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte<div></div>

¨
Pour mettre une barre défilante, il faute utiliser; "overflow: auto;" A mettre après le height, car défois ça marche pas sans ça. Oui c'est chiant

Code:


<div style=" border: ridge 4px #cc00ff; background-color: #ffffff; width: 100px; height: 80px; overflow: auto;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte<div></div>

Petit truc: Là, l'overflow est mit dans le div du cadre, ce qui fait que ton overflow englobe tout, et qu'il fait défiler tout. Si tu veux faire défiler seulement ton texte, il faut rajouter une taille (height/width) dans le div du texte. Oui, là on commence à entrer dans le compliqué. JE vais te faire un exemple, pour que tu visualises bien. Essaie de le faire

Code:


<div style=" border: ridge 4px #cc00ff; background-color: #ffffff; width: 170px;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style=" height: 90px; overflow: auto; text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte div></div>

Comme tu peux le voir j'ai enlevé le height du début, c'est plus pratique. Comme ça la taille se met direct à la taille de l'overflow.
Suite after. Tu peux me demander un truc en particulier que tu aimerais