Pseudo ; Vivaraise
Niveau estimé CSS ; Frolant le zéro je dois a peine savoir ce que c'est.
Niveau estimé HTML ; Frolant peut-être un peu moins le zéro.
Souhaitez-vous un professeur en particulier ; Non
Avez-vous quelque chose en particulier que vous désirez apprendre ; Tout...
Un mot de motivation ? J'en ai marre de pas savoir faire XD.

Coucou Vivaraise =D
Est-ce que tu es toujours intéressée pour prendre des cours ? ^^

Oui toujours et toujours motivée à fond XD.

Cool :D
L'avantage du HTML et du CSS est qu'il faut comprendre en gros comment cela fonctionne et le reste est du "par-coeur". :D Y a une logique à avoir mais une fois qu'on l'a c'est assez automatique. ^^

Est-ce que tu as un but précis ? Je veux dire attends-tu un truc particulier de ce ptit cours ? ^^

Oui j'aimerai bien faire une fiche de RP et lien sur un autre forum et créer un fond pour mes textes sur ce même forum.

Fiche de liens/RP pour exemple

Fond de texte pour exemple. (le dernier je l'aime bien).

Coucou ^^
Aucun problème alors, c'est dans mes cordes x)

On va d'abord commencer par le html pour ensuite voir comment rajouter des styles à un texte, une image, un bloc via le CSS.

Première chose, sais-tu à quoi ressemble une balise html ? ^^ Connais-tu un peu le fonctionnement ?

Les balises HTML sont entre < > non?

Le fonctionnement je connais pas du tout XD

Coucou ^^

Effectivement, les balises html sont entre <> (chevrons quoi). Le fonctionnement est le même que pour le BBCode (qui est en fait un dérivé simplifié du html).

Il existe deux types de balises en html : les balises simples et les balises doubles. Les balises doubles sont les plus courantes : une sert à indiquer que c'est à cet endroit que l'on commence, l'autre sert à préciser que c'est ici que cela se termine. Concrètement cela apparaît comme ça :

Code:

<balise>blablabla</balise>

La plupart sont comme ça.

Toutefois, la seconde catégorie, un peu plus rare, est représentée par une seule balise. C'est notamment le cas de la balise image, celle pour réaliser un retour à la ligne.
Cela ressemble à :

Code:

<balise />

Le slash est très important car il indique la fin de la balise. C'est également une convention typographique. ^^

Est-ce que c'est clair tout ce que j'ai expliqué ? ^^ Si tu as des questions n'hésite pas. Après nous allons enchaîner sur les balises principales et essentielles en html, qui te serviront pour mettre en page des fiches rp :D

Ok pour l'instant je te suis.

Petit up?

Donc, comme convenu la semaine dernière, voici quelques balises html souvent utilisées et dont tu auras besoin. Je n'ai pas tout mis car ce sont celles auxquelles je pense à l'instant. Celles non mentionnées viendront après.
Y a pas de miracle, à force de les utiliser elles finissent rentrer.

Code:

<p>ton texte (assez long)</p>

Grâce à cela tu crées des paragraphes. Ceci a pour conséquence un retour à la ligne par rapport à ce qui précède et permet d'appliquer un style particulier au paragraphe ou général à tous les paragraphes.
Ces balises structurent donc ton texte sans avoir à indiquer un retour à la ligne séparément.

Code:

<br />

Voici un exemple de balise unique qui permet de faire un retour à la ligne. On l'utilise en général à l'intérieur d'un paragraphe

Code:

<a href="lien où tu souhaites que ton texte dirige" target="type de cible">ton texte cliquable</a>

Voici la balise qui te permet d'appliquer un lien à un texte. Après href=" il faut inscrire le lien. Après target=" tu peux indiquer un type de cible : en gros tu peux choisir si le lien s'ouvre ou non dans un nouvel onglet. Pour que lors du clic un nouvel onglet s'ouvre il suffit de mettre : _blank
Ce qui donne :

Code:

target="_blank"

Si tu veux qu'au clic rien ne s'ouvre, il suffit de rien mettre :

Code:

<a href="lien">ton texte</a>

Code:

<img src="lien direct de ton image" alt="titre alternatif" title="titre de ton image" />

Encore une autre balise unique et qui sert à afficher une image. Après src=" il faut indiquer le lien direct de ton image. Il se termine par l'extension : .png / .jpg / .gif et j'en passe. Pour aider au référencement et afficher un texte dans le cas où l'image est cassée, il faut mettre un ptit texte après alt="
=> Pour ce cas-ci, il s'agit d'une convention syntaxique qu'il faut respecter sinon le W3C estime que le code est erroné.
Enfin, si tu souhaites ajouter un titre à ton image, comme une légende, tu peux le faire après title=" Comme ça, au passage de la souris, une infobulle apparaît.

Code:

<a href="lien où tu souhaites que ton image dirige" target="type de cible"><img src="lien direct de ton image" alt="titre alternatif" title="titre de ton image" /></a>

Ce que tu vois juste au-dessus est le code permettant à une image de pointer vers une autre page. Le principe est le même que pour les liens textes sauf qu'entre, il s'agit d'une image.


As-tu des questions jusque là ? Ou tout est clair ?

Pour l'instant ça va je suis toujours.

Okay, passons donc à la suite. Je vais voir si j'ai d'autres balises à te montrer sinon on attaquera le css.

ok.

Me revoici avec d'autres balises utiles.

Code:



Ces balises servent à mettre un texte en exposant.

Code:



Contrairement aux précédentes, celles-ci permettent de mettre un texte en indice.

Code:

<h1></h1>

Grâce à ces balises, tu peux créer un titre de niveau 1, le titre principal. Tu peux aller jusqu'à 6 niveaux de titres (h1 jusqu'à h6 => du plus important au moins important). Cela aide au référencement, de même que cela permet de créer une hiérarchie dans ton document.
Bien sûr ce n'est pas obligatoire et mieux vaut ne pas s'en servir si on ne voit pas d'utilité dedans. ^^

Code:

<hr />

Autre balise unique. Celle-ci permet d'insérer une ligne horizontale.

Pour réaliser des listes, tu as deux possibilités :
♦ liste à puces non ordonnée : les balises qui détermineront l'endroit où sera créée la liste sont

Code:

<ul></ul>

Après, pour chaque élément de la liste, il faut insérer les balises

Code:

<li></li>

Concrètement cela donne ceci :

Code:

<ul><li>1 élément</li><li>2 éléments</li></ul>

• 1 élément
• 2 éléments

♦ liste ordonnée : le principe est le même que la liste non ordonnée sauf que les balises qui seront employées sont

Code:

<ol></ol>

Code:

<ol><li>1 élément</li><li>2 éléments</li></ol>

1. 1 élément
2. 2 éléments

Avant de parler des tableaux puis ensuite le css, je voudrais être sûre que pour ces balises ce sera bon. Elles ne seront pas forcément utilisées pour tes fiches de personnages mais ça te donne des éléments pour faire d'autres choses. :)

Oui effectivement ça peut toujours servir. Merci.

Aucun problème. ^^ Voici quelques explications concernant les tableaux.

Le principe est le même que pour le bbcode. Basiquement un tableau se construit comme ceci :

Code:

<table><tr><td>cellule 1</td><td>cellule 2</td></tr><tr><td>cellule 3</td><td>cellule 4</td></tr><tr><td>cellule 5</td><td>cellule 6</td></tr></table>

cellule 1	cellule 2
cellule 3	cellule 4
cellule 5	cellule 6

Les deux balises qui servent à définir que ce qui est situé entre est un tableau sont :

Code:

<table></table>

Les balises

Code:

<tr><tr>

servent à insérer différentes lignes à ton tableau.
Dans chaque ligne tu peux intégrer un nombre de cellules infini (bon pas trop non plus xD).
Pour mettre une cellule, ce sont les balises

Code:

<td></td>

Là nous avons vu un tableau basique. Si maintenant on le complexifie, on peut par exemple régler sa taille en largeur (de manière générale) ou celle de ses cellules. On peut également déterminer s'il y aura une bordure ou non (c'est pas vraiment beau les bordures XD
On peut aussi fusionner des cellules ou des lignes (verticalement ou horizontalement).

Pour régler la taille générale du tableau, c'est dans la balise table qu'il faut se situer. Il faut rajouter un élément : width="largeur en px ou en %" soit en pourcentage soit en valeur. Dans ce cas, par défaut, la taille est en pixels. (je mets une bordure pour que tu voies le résultat)

cellule 1	cellule 2
cellule 3	cellule 4
cellule 5	cellule 6

Code:

<table width="450"><tr><td>cellule 1</td><td>cellule 2</td></tr><tr><td>cellule 3</td><td>cellule 4</td></tr><tr><td>cellule 5</td><td>cellule 6</td></tr></table>

Pour la largeur d'une cellule c'est dans une balise td qu'il faut rajouter l'élément width="largeur en px ou en %", sachant que cela détermine la largeur des autres cellules des lignes suivantes.

cellule 1	cellule 2
cellule 3	cellule 4
cellule 5	cellule 6

cellule 1	cellule 2
cellule 3	cellule 4
cellule 5	cellule 6

Code:

<table width="450"><tr><td width="40%">cellule 1</td><td>cellule 2</td></tr><tr><td>cellule 3</td><td>cellule 4</td></tr><tr><td>cellule 5</td><td>cellule 6</td></tr></table>

On peut également ajuster la hauteur d'une ligne en passant par la balise tr (celle qui crée des lignes). Il faut rajouter l'élément : height="hauteur en px ou en %"

cellule 1	cellule 2
cellule 3	cellule 4
cellule 5	cellule 6

Code:

<table width="450"><tr height="80px"><td width="40%">cellule 1</td><td>cellule 2</td></tr><tr><td>cellule 3</td><td>cellule 4</td></tr><tr><td>cellule 5</td><td>cellule 6</td></tr></table>

Attention à ne pas oublier d'ouvrir et de fermer les guillemets pour chaque valeur, sinon la syntaxe n'est pas correcte. ^^

Ensuite, pour ajouter une bordure, comme pour la taille, on se place dans la balise table pour rajouter un élément. On rajoute donc : border="X" (chiffre de la largeur de la bordure principale du tableau)
Plusieurs éléments de ce type peuvent se cumuler sans aucun souci ! Et leur ordre importe assez peu.

cellule 1	cellule 2
cellule 3	cellule 4
cellule 5	cellule 6

Code:

<table border="1" width="450"><tr height="80px"><td width="40%">cellule 1</td><td>cellule 2</td></tr><tr><td>cellule 3</td><td>cellule 4</td></tr><tr><td>cellule 5</td><td>cellule 6</td></tr></table>

Généralement quand on ne met rien, aucune bordure ne se fait. A la place du 1 on peut donc mettre 0 pour signifier qu'on ne veut aucune bordure.


J'utilise un autre post pour les fusions de cellules et de "colonnes". ^^

Donc maintenant attaquons la dernière partie des tableaux (dans le html).

On verra les deux cas de manière séparée.


Alors, pour ce qui est des cellules fusionnées, c'est donc d'un point de vue horizontal qu'on se place et c'est l'attribut "colspan"

De la même manière que la taille, on place l'attribut colspan dans une balise préexistente du tableau. Ce sont seulement les td à qui l'on attribue ce colspan.
Par contre, il faut faire attention à ce que l'on ait le même nombre de colonnes partout. Car certes là où on mettra la fusion des deux cellules, on aura un td de moins. Mais pour les autres lignes, il faut faire comme si y avait ce td.
En gros, si un tableau a trois paires de td chaque ligne et que sur la première on a fusionné deux cellules, alors sur la première il y aura seulement deux paires de td mais pour les autres lignes on en aura trois.

Le plus simple c'est un exemple (trois colonnes, deux lignes) :

cellules fusionnées		blablabla
blablabla	blablabla	blablabla

(j'ai mis des couleurs pour que l'on voie la fusion ^^)

Code:

<table><tr><td colspan="2">cellules fusionnées</td><td>blablabla</td></tr><tr><td>blablabla</td><td>blablabla</td><td>blablabla</td></tr></table>

Pour les lignes fusionnées, on se place d'un point de vue vertical cette fois-ci. L'attribut qui rentre en jeu s'appelle "rowspan".
Il fonctionne de la même manière que le colspan : c'est dans la balise td que l'on souhaite qu'il faut placer cet attribut.
Là aussi il faut faire attention à ce que le nombre de lignes soit le même partout.

Voici ce que je veux dire :

cellules fusionnées	blablabla	blablabla
	blablabla	blablabla

Code:

<table><tr><td rowspan="2">lignes fusionnées</td><td>blablabla</td><td>blablabla</td></tr><tr><td>blablabla</td><td>blablabla</td></tr></table>

Dernier point pour un autre type de balises : les balises de titre.

blabla	blablabla	blablabla
blablabla	blablabla	blablabla

Si tu souhaites mettre en forme ton tableau pour que des cellules soient des titres, tu peux rajouter des balises spéciales :

Code:

<th></th>

Elles remplaceront les balises de cellules td ^^

Code:

<table><tr><th>blabla</th><th>blablabla</th><th>blablabla</th></tr><tr><td>blablabla</td><td>blablabla</td><td>blablabla</td></tr></table>

Est-ce que ça va pour cette partie sur les tableaux ? J'ai peut-être été parfois pas très claire, alors n'hésite pas à me demander de plus amples explications. ^^

Ce que j'ai expliqué n'est pas exhaustif, loin de là. ^^

J'ai compris et je doit pouvoir réussir à faire un tableau. XD

x) Désolée pour le pavé vraiment. Mais bon pas le choix. XD

Alors maintenant, on va commencer le CSS \O/

Ok si j'ai compris comment faire un tableau au milieu du charabia (non je rigole c'est très bien expliqué) je devrai comprendre le CSS XD. Le pavé étant compréhensible ça va XD mais faut pas que ça devienne une habitude ;p.

Non t'en fais pas ^^ Je ne compte pas récidiver. XD

Petit up?

Coucou ^^
Pour cette partie consacrée au CSS, nous allons d'abord voir comment cela s'utilise : syntaxe, où mettre les propriétés css.


Petit rappel préalable : le CSS permet de modifier l'apparence d'une page html ou d'un ensemble quelconque. Tu peux ajouter un style à une balise, une class, une id... Ces deux attributs permettent d'ajouter un style à l'ensemble des éléments que tu souhaites. Je t'en parlerai plus longuement après. ^^

Par exemple, pour mettre en forme des titres, j'ai utilisé cette technique.

La syntaxe d'un élément css est comme suit :

Code:

balise {
propriete: valeur;
propriete: valeur;
}

.nom_class {
propriete: valeur;
propriete: valeur;
}

#nom_id {
propriete: valeur;
propriete: valeur;
}

Le point virgule est obligatoire sinon le style ne s'appliquera pas. De même que l'absence d'espace avant les deux-points doit être respecté.
Il faut toujours une accolade qui ouvre et une qui ferme. ^^


Il existe trois façons d'insérer du CSS : soit directement au sein d'une balise html, soit dans une feuille à part mais qu'il faudra lier à la page html, soit entre balises

Code:

<style>....</style>

en tête de page. ^^
Pour l'utilisation que nous allons faire, je t'indiquerai seulement les deux premières méthodes, sachant que sur FA, une feuille de style est déjà intégrée, il n'y a donc pas besoin de la lier.

Est-ce que jusque là c'est bon ? ^^ Sachant que je n'ai pas tout expliqué car, on va rentrer dans du plus technique. Et pour éviter le pavé, on doit y aller étape par étape. Certaines choses peuvent paraître floues, c'est normal. ^^

FA?
Sinon je crois que j'ai compris.