Clou' t'aide avec le HTML o/ ♥

Bienvenue o/

Si tu viens ici, c'est que tu as un peu de mal a comprendre comment faire

du HTML, que tu as envie d'apprendre a en faire, te perfectionner peut etre,

pour juste demander des conseils pour une présentation, ou tenter

de résoudre des problèmes que tu rencontre sur ta présentation HTML

que tu ne sait pas ou n'arrive pas a régler :3

Hé ben ça tombe bien, je suis la pour t'aider o/

Initiation

Le HTML, c'est quoi?

C'est en fait un système de codage qui permet de mettre un fond sur une présentation,

de pouvoir changer la police, la couleur, la taille d'un texte et bien d'autre choses encore ! :D

Un code HTML se compose de balises : Une balise, c'est comme un ordre que tu donne

à ton code. Il ne doit comporter aucune erreur, sinon le code ne comprend pas l'ordre

et fait tout foirer x)

Voici la barre d'outils qui sert a modifier une présentation sur SailorFuku :

(clique sur l'image pour mieux voir)

En noir, c'est l'éditeur de tableau. On s'en sert notamment pour réaliser des blocs

alignés, ou des présentations cachées.

En bleu, c'est l'icone d'ancrage. Elle permet de réaliser des sommaires cliquables.

Et enfin en rouge, le plus important, l'éditeur de code HTML. C'est en cliquant la-dessus

que tu va pouvoir écrire toutes les balises qui vont former ton code.

Astuce : Lorsque tu crée ton code HTML, pense a soit enregistrer la page de temps

en temps, soit a sauvegarder ton code dans un document Word : Les bugs de

connexion ou les accidents arrivent vite et c'est mieux de ne pas recommencer a 0 ;)

(J'en suis maintenant la preuve vivante : J'ai eu un bug et j'ai perdu toutes les

données du club ! J'ai du tout recommencer, et je peux vous dire que c'est

absolument pas agréable =/)

Quelques Balises...

Voici quelques balises simples qui vont permettre de modifier la couleur, la police, la

taille, etc... Enfin tous les trucs simples :3

! ATTENTION ! LES CODES DONNÉS ONT ÉTÉ MODIFIÉS AVEC DES

POINTS AU DEBUT ET A LA FIN DE CHAQUE BALISE AFIN DE

POUVOIR LES AFFICHER SANS QUE LES BALISES NE SE TRANSFORMENT !

DONC : QUAND VOUS VOYEZ → <.p>&nbsp;<./p> IL FAUT QUE

VOUS RECOPIEZ LE CODE ET QUE VOUS ENLEVIEZ LE POINT JUSTE

AVANT LE PREMIER p ET CELUI JUSTE AVANT LE SLASH A LA FIN

DE LA BALISE POUR QUE VOTRE CODE FONCTIONNE !

• Passer une ligne :

<.p>&nbsp;<./p>

Ou pour les barbares et ceux qui veulent aller vite, soit ENTRÉE et si ça marche pas

Shift+ENTRÉE. Le code donné plus haut, c'est pour ceux qui veulent un code propre :3

• Changer la couleur :

<.span style="color: #000000;">TON TEXTE<./span>

Ne pas oublier le <./span> derrière, c'est ce qui ferme la balise !

La couleur est donnée par le # et les 6 chiffres ou lettres derrière. Ici, les 6 zéros

donnent noir. Pour avoir un code couleur, je vous conseille ce site → code-couleur.com

• Changer la taille :

<.span style="font-size: xx-large;">TON TEXTE<./span>

Ici, c'est la formule après 'font-size:' qui change la taille. Voici les codes pour chaque

taille, dans l'ordre croissant (plus petit au plus grand pour ceux qui savent pas) :

xx-small x-small small medium large x-large xx-large

• Changer la police :

<.span style="font-family: comic sans ms;">TON TEXTE<./span>

Tu peux mettre a la place de 'comic sans ms' toutes les polices que tu veux, mais

avant il faut que tu TELECHARGE cette police sur ton ordi. Sinon tu ne la verra pas :)

• Mettre de l'ombre au texte :

 <.div style=”text-shadow: #000000 1px 0px 4px; text-align: center;”>

 <.p>TON TEXTE<./p>

 <./div>

La couleur de l'ombre est indiquée par le # et les chiffres derrière (ici, c'est noir). Pour

la changer, c'est comme pour changer la couleur d'un texte : Tu remplace

le dièse et les chiffres par le code d'une autre couleur :3

Chaque taille en px (pixel) dans la balise correspond a un paramètre :

1px → La profondeur sur la droite

0px → La profondeur sur la gauche

4px → L'intensité du flou

• Mettre en gras, italique, souligné, rayé :

Ok, vous allez me dire qu'on a le bouton pour les faire, mais c'est tellement mieux

de savoir le faire en HTML et ça vous permet de savoir a quoi ça correspond

dans un code, donc je les donne :

Gras : <.strong>TON TEXTE<./strong>

Italique : <.em>TON TEXTE<./em>

Souligné : <.span style="text-decoration: underline;">TON TEXTE<./span>

Rayé : <.span style="text-decoration: line-through">TON TEXTE<./span>

• Composer un code avec plusieurs balises :

Il y a une méthode pour ajouter des balises ensemble dans le code pour une même phrase.

Mettons, je veux écrire : Ceci est un exemple; en mettant en taille moyenne, bleu,

italique, comic sans ms et avec de l'ombre.

Voici le code que je vais utiliser :

  <.div style="text-shadow: #000000 1px 0px 2px; text-align: center;">

  <.p><.em><.span style="color: #357EC7; font-size: medium; font-family: comic

sans ms;">Ceci est un exemple<./span><./em><./p>

  <./div>

Je pense donc a mettre les <.p> et <./p> pour la ligne, ainsi qu'a fermer le

code de l'italique avec le <./em>, celui de l'ombre avec le <./div> a la fin, et

pour les changements de police-taille-couleur avec le <./span>.

On a donc regroupé ainsi dans la meme balise, la taille, la couleur et la police

en ne séparant leurs balises respectives que par un point virgule, et on ne 

retrouve à la fin qu'un seul <./span> au lieu de 3 si on les avait séparés :D

Voila donc ce que donne ce code :

Et voila o/

Mettre un fond sur une présentation

Ça peut paraitre compliqué, mais c'est pas si dur que ça en fait. On part d'un

code brut, et on y apporte toutes les modifications voulues avec chaque balise.

Code de fond d'exemple (c'est celui de cette présentation) :

  <.div style="border: 6px double #000000; background-image: url(temp/1362859338.gif); width: 650px; height: 1570px; text-align: center; border-radius: 0px 0px 0px 0px; box-shadow: 0px 1px 10px #000000; overflow: auto; margin: auto;">

  <.p>&nbsp;<./p>

  <./div>

Les différentes balises sont mises en couleur pour une meilleure compréhension.

• Le div style et le /div : C'est un des 2 impératifs ! Pas de fond sans un div, c'est

la règle. Ne pas oublier le /div de fin, sinon le fond ne se ferme pas.

A la place du passage de ligne, voir meme entre ce passage de ligne et

le div de fin, c'est la que tu va mettre les codes qui vont te servir a faire ta

présentation (blocs, texte, images, etc...)

• Le border : 6px double #000000 : Comme son nom l'indique, en anglais border =

bordure. Elle va permettre te faire un cadre a ton fond.

Ici, 6px = la taille de la bordure. A régler selon la taille voulue.

double = double trait de bordure. Il existe aussi solid (trait continu), dotted (trait en

pois → 'dot' = pois en anglais) et dashed pour un trait en pointillés.

Et enfin #000000 = couleur de la bordure. Pour le code c'est le même principe que pour

la couleur d'un texte (voir la balise de couleur dans le bloc plus haut).

• Le background-image : Voila l'autre truc le plus important ! Si il n'y est pas, pas de fond !

Un background-image: est toujours suivi d'un url de l'image et l'url doit être entre

parenthèses. Dans le code d'exemple, il est souligné.

Pour fonctionner, il doit être hébergé sur SailorFuku. Lorsque vous mettrez le lien

de votre fond hébergé, il contiendra www.sailorfuku.com dans son adresse, et

après enregistrement des modifications il se changera par ex en temp/6216256625.gif.

Donc si vous remarquez ça, pas la peine de vous inquiéter, c'est normal.

Pour obtenir un fond hébergé sur SF, je vous conseille ce club :

Les Nouveaux Fonds Hébergés qui contient une tonne de fonds et a 2 clubs suite.

Et si rien ne vous plait là-bas, vous pouvez toujours demander a ce qu'on vous

héberge sur SF une image de votre choix dans ce club :)

Si a la place d'un fond sous forme d'image, vous voulez une couleur, au lieu de

background-image vous mettez background-color et a la place de l'url

suivi des parenthèses, vous remplacez par un # et les 6 chiffres derrière.

Ça donne donc, avec un fond de couleur blanche → background-color : #ffffff

• Le width et le height : Ces 2 balises correspondent a la largeur (width) et la longueur

ou hauteur (height) de ton fond. Ils se règlent en pixels.

• Le text-align : Va permettre d'aligner ton texte dans le fond, comme son nom l'indique.

• Le border-radius : Il va servir a mettre des arrondis autour de ton fond.

Les 4 chiffres avec px derrière correspondent chacun a un coin de ton fond.

Le premier = Le coin en haut a gauche

Le second = Le coin en haut a droite

Le troisième = Le coin en bas a droite

Le quatrième = Le coin en bas a gauche

Ici j'ai mis 0px partout pour ne pas avoir d'arrondis :3

• Le box-shadow : Permet de mettre de l'ombre a ton fond.

Dans cet exemple, chaque taille correspond a un paramètre :

0px = Profondeur de l'ombre sur la droite

1px = Profondeur de l'ombre sur la gauche

10px = Intensité du flou

Et pour la couleur, c'est la même histoire que quand il s'agit de mettre de la

couleur a un bloc ou un texte, il faut changer les chiffres qui suivent le #.

• L' overflow : C'est en fait la barre de défilement, vous savez, ça → ♥

Mettre overflow: auto signifie que l'on aura toujours une barre de défilement qui

se créera si on dépasse la taille du bloc avec le texte.

Lorsque l'on fait une présentation cachée, l'overflow est alors non pas en mode

auto mais en mode hidden, c'est a dire caché. Cependant ne vous prenez pas

la tête avec ça, j'expliquerais la présentation cachée plus tard ^^

• Le margin : Margin, c'est en fait l'espace autour d'un bloc. C'est ce qui permet

en quelque sorte de les déplacer. Lorsqu'il est en position auto (comme dans

l'exemple), il va se régler de telle façon a etre centré sur la présentation.

Voila, vous venez d'apprendre a mettre un fond :D Si vous avez des problèmes

pour le mettre, n'hésitez pas a demander :3

Créer un Bloc

En fait, c'est exactement la même histoire que pour le fond !

On utilise d'ailleurs le même code :D Il suffit juste de régler la taille du bloc de manière

à ce qu'il soit plus petit que le fond :3

Exemple : Je veux mettre le même fond que celui de cette présentation, et

dedans je veux y mettre un bloc blanc.

Voila le code que je vais utiliser :

  <.div style="border: 6px double #000000; background-image: url(temp/1362859338.gif); width: 650px; height: 1570px; text-align: center; border-radius: 0px 0px 0px 0px; box- shadow: 0px 1px 10px #000000; overflow: auto; margin: auto;">

  <.p>&nbsp;<./p>

  <.p>&nbsp;<./p>

  <.div style="border: 1px solid #000000; background-color: #ffffff; width: 550px; height: 167px; text-align: center; border-radius: 0px 0px 0px 0px; box-shadow: 2px 2px 5px #000000; overflow: auto; margin: auto;">

  <.p>&nbsp;<./p>

  <.p><.span style="color: #000000; font-size: large; font-family: girls have many secrets;">Ton Texte<./span><./p>

  <.p>&nbsp;<./p>

  <./div>

  <.p>&nbsp;<./p>

  <./div>

Les différentes parties sont mises en couleur pour une meilleure compréhension.

L'explication ci-dessous suit les couleurs utilisées dans l'ordre. Donc si je parle

pour la 2éme fois de VIOLET, ça veut dire que je parle du 2éme morceau

qui a été mis en violet. Soit dans le cas présent, le 2éme passage de ligne

en violet :3 Si c'est toujours pas compris, venez demander en com's ^^

• En NOIR : C'est le code du fond. On le place au début, et on oublie

SURTOUT pas de le fermer tout a la fin avec un /div. J'en reparle a la fin.

• En ROSE : Des passages de lignes qui permettent au bloc blanc de ne pas arriver

directement après le début du fond. Parce que faut l'avouer, ça fait moche

sinon x) J'en met généralement 2 pour que ça fasse un bel espace ^^

• En ROUGE : Un nouveau code → C'est celui qui va créer le bloc.

Comme vous pouvez le remarquer, le code est EXACTEMENT le même que celui

du fond. A quelques détails près, qui sont le fond (qui n'a pas d'url,

mais une couleur. #ffffff = Blanc. Conclusion, mon bloc sera blanc), la

largeur du bloc (qui est plus petite que celle du fond : 550px < 650px), et la

hauteur du bloc (qui elle aussi est plus petite pour pouvoir rentrer dans le fond).

Et c'est tout ! On ne change rien, sauf si on veut modifier la bordure, l'ombre du

bloc, les coins ou la position du texte.

• En VIOLET : Un nouveau passage de ligne, qui va permettre la meme chose

que ce qui est expliqué dans le point sur la partie rose (voir plus haut).

• En BLEU : La balise qui va me permettre d'écrire mon texte, avec une taille,

une couleur et une police choisies au hasard dans cet exemple.

• En VIOLET : Encore un passage de ligne, pour faire un espace entre l'arret

du texte et la fin du bloc (Oui je sais, souci esthétique mais ça fait bien mieux ! :D)

• En ROUGE : On trouve ici le /div de fin du bloc et non du fond.

IL EST A NE PAS OUBLIER SINON LE BLOC N'A PAS DE FERMETURE ET ÇA NE MARCHE PAS !

• En ROSE : A nouveau un passage de ligne, pour éviter que le bloc ne se termine

pas juste avant la fin du fond, parce que ça fait moche.

(Chloé et l'esthétique, le retour xD)

• En NOIR : La balise de fin /div qui va cette fois-ci fermer le fond.

Voila, vous venez d'apprendre a créer un bloc :D Si vous n'avez pas compris,

n'hésitez pas a demander, je suis la pour vous aider :3