Les bases de l'HTML

Tout d'abord, voici quelques infos importantes dont tu auras besoin tout au long de tes créations.

1 / L'HTML c'est long ! Plus tu veux un profil complexe, plus c'est long à faire.

2 / Si tu veux faire un profil avec présentation cachée ou alors avec des blocs alignés (côte à côte), tu auras besoin de le faire dans un club, donc être au moins au niveau 10.

3/ Pour passer à la ligne, tu dois appuyer en même temps sur les touches "Entrée" et "Caps" (c'est la touche avec la flèche vers le haut, juste en dessous de la touche Entrée et tu en as aussi une juste sous la touche Majuscule).

4 / Pour mettre en fond de profils, tu ne peux utiliser QUE des images qui sont hébergés sur Sailor Fuku. Il y a des clubs qui proposent pleins de fonds déjà hébergés, sinon il faut que tu demandes à une CdT, mais ça peut être beaucoup plus long car elles ont une vie, des créations à faire et beaucoup de demandes ^^

Cliques sur les étoiles pour accéder aux différents clubs pour les fonds hébergés :



5 / Si tu veux mettre une couleur, il faut mettre le code de la couleur mais pas son nom (voir partie 5 --> Changer les couleurs)

6 / Il peut arriver que quand tu veuilles écrire ton texte au milieu de ton bloc les écritures s'alignent à gauche alors que le bouton "Centré" est activé. Pas de panique. Mets ton curseur juste au début de ta ligne, clique sur le bouton " Aligné à gauche" puis clique à nouveau sur  "Centré" et ça se mettra au milieu ^^
( Les boutons sont les icônes qui se trouvent au dessus de la fenêtre, comme ceci :

Comprendre les différents codes

C'est important de comprendre les codes qui composent ton HTML pour savoir ce que tu modifies.

<div style ????? </div> = C'est la partie qui doit entourer ton code. S'il n'est pas à la place des ?????, il n'aparaïtra pas, ou alors tu verras ton code qui s'affiche, mais pas ton profil

border = c'est la bordure de ton fond ou de ton bloc, en fonction si elle est dans un code bloc ou un code fond.

px = c'est le nombre de pixel, donc la taille.

background-color = ce qui te permet de mettre une couleur de fond (comme pour ce bloc par exemple.

background-image = ce qui te permet de mettre une image en fond de profil ou en fond de bloc

width = c'est la largeur de ton bloc

height = la hauteur de ton bloc

text-align = l'alignement du texte

border-radius : ce sont les angles de ton fond ou de ton bloc

box-shadow : l'ombre de ton bloc ou fond

overflow : je sais pas ce que c'est, mais si ce n'est pas là, ton bloc n'apparait pas xD

margin : la marge de ton bloc (perso, j'y touche jamais)

/><br = les espaces entre deux textes / blocs : images


Il faut aussi savoir que chaque symbol " ;   > <   /  " est super important. Donc fais bien attention à les laisser ou les mettre là où ils doivent être !

Code pour mettre un fond (vide)

Voici un code pour mettre un fond, bien expliqué pour que tu comprennes ^^
Il faut que tu cliques sur le bouton HTML et que tu fasses un copier-coller de ce code, puis que tu le remplisses.
N'oublies pas de cliquer sur " Valider" en bas de la fenêtre HTML quand tu as fini de le remplir sinon tu auras fais tout ça pour rien !

<div style="width: 650px; background-image: url(ADRESSE URL DU FOND) ; border: 1px solid #000000;">tu écris ton texte</div>

650 : la largeur de ton fond
ADRESSE URL DU FOND : l'adresse URL du fond QUI DOIT OBLIGATOIREMENT ETRE HEBERGé ! (voir les clubs)
solid : le style de bordure tu as le choix entre :
- solid (ligne simple)
- dotted (poitillés)
- dashed (ligne discontinue)
- double (2 lignes)
- groove (en relief)
- inset (en relief éclairé par le bas)
- outset ( en relief éclairé par le haut)
- ridge (ombré)
000000 : le code de la couleur (tu peux trouver le code de la couleur de ton choix ICI)
tu écris ton ton texte : tu ne t'en occupes pas dans la partie HTML, tu écris directement dans ton profil et ton texte apparaîtra à la place

Code pour mettre un bloc (vide)

Idem que pour le code du fond. Tu le copies juste à la suite du code fond que tu as remplis (tu te mets à côté du dernier " > " du code fond et tu fais " Entrée " puis tu colles ce code bloc, puis tu le remplis.)

En rouge, les choses à changer
Souligné, tu dois faire un choix et supprimé en fonction de ce que tu veux

<div style="border: TAILLEpx TYPE #COULEURCADRE; background-color: #COULEURFOND; OU AUCHOIX background-image: url(LIENTEXTURE); width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; box-shadow: #COULEUROMBRE ?px ?px ?px; overflow: auto; margin: auto;">
blablabla
</div>

Changer les couleurs

Rien de plus simple. Partout ou tu voix écris le signe # avec une suite de 6 chiffres / lettres, c'est un code couleur ! Dans ce cas, tu remplaces le code déjà là par celui que tu veux.
tu peux trouver TOUS les codes de TOUTES les couleurs sur le site Code-couleur.com

Exemple : Si dans mon HTML j'ai le code : #96CA2D --> J'OBTIENS CETTE COULEUR

Et si je veux la changer, je remplace le code HTML #96CA2D par un autre, par exemple  : #DFB96C et J'OBTIENS CETTE COULEUR

Donc ensuite, si tu veux changer la couleur du texte ou du surlignage, comme j'ai fait au dessus, tu vas sur le bouton " Choisir la couleur du texte " (le A tout à droite) ou alors le bouton " ab " juste à côté et tu cliques sur la petit flèche vers le bas qui est juste sur la droite du bouton en question. Tu clique sur " Plus de couleurs " et en bas de la petite fenêtre tu verras écrit " Couleur : " avec un rectangle blanc et un code couleur, donc tu changes le code et tu valides :)

Faire un fond dégradé


C'est donc valable pour le fond du profil ou pour le fond d'un bloc.

Dans ton code " background-image: url(URL IMAGE) " tu remplaces le URL par le code du dégradé que tu veux :
linear-gradient : du hat vers le bas
ensuite, tu peux aussi rajouter " to left / to right / to top / to bottom " pour changer le sens du dégradé. Et tu le rajoutes là:
background-image: linear-gradient(to right, #CODECOULEUR, #CODECOULEUR, #CODECOULEUR)

Bien entendu, à la place de "CODECOULEUR" tu mets le code de la couleur qu tu souhaites, comme je te l'ai dis dans la partie précédente ^^ et n'oublie surtout pas le # sinon ta couleur n'apparaitra pas !

Aligner 2 blocs ou plus

Tu cliques sur le bouton " Insérer un nouveau tableau "
Et tu remplis le nombre de colonnes et de lignes en fonction du nombre de bloc que tu veux :)


Ensuite tu vas dans HTML, et tu verras le code " <td>&nbsp;</td> " est apparut. Tu remplaces la partie que j'ai mis en rouge par le code bloc que tu veux. Attention à ne pas dépasser la largeur de ton fond ! Exemple, si tu as un fond de 600px, et que tu alignes 2 blocs, il ne faut pas que la largeur total de tes 2 blocs fassent plus de 600px. Soit, maximum 300px par blocs.

Clique ensuite dans ta première colonne tout à gauche (donc dans ton bloc) et tu cliques sur le bouton " Insérer une colonne après " et la tu verras une colonne apparaitre entre tes deux blocs, tu cliques dans cette colonne et tu fais plusieurs fois espace pour espacer autant que tu le souhaites tes blocs ^^

Faire un sommaire cliquable
(= ancrer une préstation)

Ca paraît compliqué, mais c'est une des choses les plus simples à faire ^^
Le sommaire cliquable ça sert à créer des liens qui vont amener directement à une partie. Donc ça sert si ton profils contient plusieurs parties ^^.

D'abord, crées un sommaire.
Une fois que tu as créer ton tableau ou tes différents blocs, tu places ton curseur dans la première partie. Tu cliques ensuite sur le bouton " Insérer / Editer une ancre " (le bouton en forme d'ancre de bateau). Et la une toute petite fenêtre apparaît et tu écris le nom de ta partie et tu fais ça pour toutes tes parties. Puis tu vas dans ton sommaire, tu selectionnes (tu surlignes avec ta souris en maintenant le clique gauche) le titre de la partie correspondante et tu cliques sur " Insérer / Editer un lien ". Là tu vas dans "Ancre" et tu selectionnes l'ancre qui correspond.

Exemple :
Sommaire : Présentation / Regles

*Bloc Présentation*
-> " Insérer / Editer une ancre " : Présentation

*Bloc Regles*
-> " Insérer / Editer une ancre " : Regles


---- Retour au sommaire ----
Présentation : tu selectionnes (l'écriture devient blanche et le fond bleu comme ça)
" Ancre " : Présentation

Et idem pour l'autre partie ^^

Créer une présentation cachée

Bon, la coco(tte) on passe un niveau. Si tu ne sais pas faire le reste, entraîne toi, car tu auras besoin de TOUT ce que j'ai dit avant !

Donc, je ne te mets que les étapes pour ne pas réecrire 156 fois la même chose ^^ :

1 / Mettre un fond
2 / Créer un bloc
3 / Créer un sommaire
4 / Créer un tableau dans le bloc avec 1 colonne et autant de ligne que l'on veut de partie
5 / Ancrer chaque partie
6 / Coller le code du bloc dans le code HTML du tableau comme ça:
<td><a name="NOM DE TA PARTIE"></a>"CODE DE TON BLOC;">NOM DE TA PARTIE</div></td>

La partie en rouge c'est donc ton code bloc, dans lequel tu ne gardes que les dimensions (width + height) et overflow le reste (border, border radius, background-color/image) tu peux supprimer dans ces parties là, puisqu'elles sont déjà dans le code bloc principal !

7 / Ensuite, tu remplies tes parties, et enfin, tu retournes dans HTML, tu vas sur le code bloc principal (celui qui est entier) et dans "overflow" tu remplaces "auto" par "hidden" comme ceci :
overflow : auto
overflow : hidden
puis tu valides et TADDAAAAM ! Tu ne vois que ta première partie. Tu enregistre ensuite ton profil, et quand tu retournes dessus (mais sans rentrer dans le mode " Modification") tu n'as qu'à cliquer sur les liens de ton sommaire pour accéder à tes différentes parties ^^ et c'est ce que devront aussi faire les autres sailors :)

Faire un titre stylisé

Pour ça, c'est facile. Tu vas sur un des sites suivants :
Cool-Text
Textanim

Et tu crées tes titres (ou autre, tu en mets ou tu veux ^^).

ensuite, tu enregistres tes créas sur ton ordi, tu les héberges (voir partie suivante pour savoir comment faire) et tu les ajoutes à ton profil :)

exemple Cool-Text :



exemple textanim :

Ajouter une image

Pour mettre des images sur ton profil ou club, je te conseille de l'enregistrer sur ton ordi héberger sur NoelShack. Car si jamais l'image est supprimée du site sur lequel tu l'as trouvée, elle va disparaître de ta page... Grâce à l'hébergement, elle ne peut pas disparaitre car elle est enregistrée sur le site d'hébergement ^^ Il en existe d'autre, mais personnellement j'utilise celui ci et je n'ai jamais été embêtée :)

Ensuite, tu selectionnes le lien (le dernier de la liste de lien de l'image sur NoelShack) et tu le colles dans la première barre du bouton " Insérer / Editer une image ", tu valides, et voilà ! Fais toujours attention que l'image ne soit pa splus grande que ton profil sinon elle va dépaser ! Et si tu passes par un club poru faire ton profil, tu peux modifier les dimensions de l'image en allant dans l'onglet "Apparence" du bouton " Insérer / Editer une image ".

voilà :)

Ajouter des décors sur les côtés de la page

Fais un copier-coller du code que tu veux (ou des deux ^^) dans ton HTML et remplace ce qui est en rouge :)

pour à gauche :

<div style="position: absolute; left: 0px; bottom: 0px;"><img src="URL DE L'IMAGE" alt="" width="XX" height="XX" /></div>

pour à droite :

<div style="position: absolute; right: -30px; bottom: 0px;"><img src="URL DE L'IMAGE" alt="" width="XX" height="XX" /></div>