html
SAILOR FUKU
I - METTRE UNE IMAGE EN TANT QUE FOND
Voici le code HTML qui vous permettra de mettre une image en tant que fond :
<div style="background-image: url(adresse du fond); text-align: center;"> Test
NB : Ce qui est souligné doit être changé sinon, vous n'aurez rien.
Pour utiliser ce code, il suffit de l'insérer tout en haut du tableau réservé au HTML. Si vous ne l'insérez pas tout en haut, votre fond risque d'apparaître seulement sur une partie de votre présentation.
La question qui se pose est : Que faut il mettre à la place de adresse du fond ?
Notez déjà qu'il est impératif que le fond utilisé soit hébergé sur SF pour que ce code marche. Vous trouverez dans mon club des liens pour trouver des fonds déjà hébergés.
​
Par exemple, prenons le lien de ce fond qui est bien sûr, hébergé sur SF :
http://www.sailorfuku.com/temp/1361995523.gif
Voyez vous la partie soulignée/colorée ? C'est celle qu'il faut copier et coller à la place de adresse du fond. Votre code ressemblera donc à ceci:
​
<div style="background-image: url(temp/1361995523.gif); text-align: center;"> Test
Si vous insérez ce code dans votre HTML, vous aurez ceci :
Comme vous pouvez le voir, j'ai inséré mon code. Maintenant, il me suffit juste de mettre à jour mon HTML.
Pour mettre à jour votre HTML, cliquez ici.
Et voilà, le tour est joué ! Maintenant, vous avez un fond.
Tout ce qu'il vous reste à faire est de commencer à écrire à la place du Test.
Attention : Si vous effacez le Test directement, votre fond risque de partir vu qu'il n'y a rien d'écrit dedans . Ce que je vous conseille de faire, est d'écrire normalement votre texte, puis de l'effacer.
Aussi, sachez que pour retourner à la ligne, il est impératif de cliquer sur Shift et Entrer en même temps, sinon votre fond risque de se casser.
Petite comparaison avec ce même fond :
En cliquant sur Entrer seulement :
En cliquant sur Shift et Entrer :
Conseil : Ne rajoutez le code HTML de votre fond qu'une fois que vous aurez fini tout le reste. Cela évitera qu'il se casse, ou qu'il donne un mauvais effet.
II - METTRE UNE COULEUR EN TANT QUE FOND
Si vous savez mettre une image en tant que fond, mettre une couleur est pratiquement pareil. Le code que vous devrez utiliser change et devient celui-ci :
<div style="background-color: #Couleurdefond; text-align: center;">Test
Cette fois-ci il faut changer le couleurdefond.
Pour le remplacer, vous avez deux choix. Soit écrire la couleur en anglais, ce qui vous donnera - par exemple - ce code là :
<div style="background-color: #pink; text-align: center;">Test
Ou alors, trouver le code de la couleur pour plus de précision. J'ai mis sur mon club un lien qui vous conduira au code de toutes les couleurs possibles, mais je vais le remettre ici.
Prenons toujours le rose. Il y'en différents types et je vais de mon coté choisir le pastel ( son code : #ffd1dc ), j'aurai ce code là
<div style="background-color: #ffd1dc; text-align: center;">Test
Voilà ! Rien de plus simple. C'est exactement les mêmes étapes qu'une image en fond.
Voici la couleur que je vais utiliser. Je copie le code sans le # et je le colle à la place de couleurdefond
Et voilà ! Vous insérez comme le premier et pouf ! Une jolie couleur en fond de votre présentation.
Si vous avez une couleur en tant que fond, vous n'êtes pas obligés de cliquer sur Shift et Entrer en cas de retour à la ligne. Elle ne risque pas de se casser vu qu'elle est uniforme.
Par contre, même conseil que pour le fond. Il est préférable d'insérer son code en tout dernier, après avoir finit le reste de votre HTML.
III - METTRE UN GRADIENT DE COULEURS EN TANT QUE FOND
Voici le code HTML qui vous permettra de mettre un gradient de couleurs en tant que fond :
<div style="background-image: linear-gradient(COLOR, COLOR); text-align: center;">test
Là encore deux choix s'offrent à vous.
Vous pouvez soit changer COLOR par le nom de la couleur souhaité en anglais.
​
Exemple :
<div style="background-image: linear-gradient(white, pink); text-align: center;">test
​
Ou alors, pour plus de précision, vous pouvez remplacez COLOR par les codes des couleurs désirées.
​
Exemple :
<div style="background-image: linear-gradient(#f0f8ff, #5d8aa8); text-align: center;">test
NB : Dans le second cas, n'oubliez pas de mettre le "#" avant les codes des couleurs!
NB : Vous pouvez mettre autant de couleurs que voulu, il n'est pas nécessaire que ce soit seulement deux.
EXEMPLES :
Gradient de deux couleurs:
<div style="background-image: linear-gradient(#f0f8ff, #5d8aa8); text-align: center;">test
Gradient de trois couleurs:
<div style="background-image: linear-gradient(#e97451, #deb887, #cc5500); text-align: center;">test