Test HTLM pour mon profil

Informations

Présidente :: kiwiwi
Activité :: 0 connectée(s); 2 membres; 11 messages postés
Date de création :: le 04/07/2016 à 18:40

Présentation
Modifié le 31/05/2018

[La nouvelle fabrique à profil]

Bienvenue à toutes et a tous dans ma nouvelle fabrique à profil. Oui nouvelle, puisqu'en effet j'avais déjà un club de ce nom il y a maintenant plusieurs année. N'étant plus vraiment actif, ni à mon gout je me suis dit pourquoi ne pas recommencer de zéro ? Donc me voilà dans ce nouveaux club qui je l'espère sera utile !

Ce nouveaux club sera une nouvelle version (améliorer je l'éspère) de mon ancienne fabrique à profil, avec des nouvelles possibilités. En effet je souhaiterais que ce club soit un lieu de partage et d'entraide entre sailor, un lieu oiu l'ont pourrait apprendre le HTLM, se donner des conseils pour que chacun et chacune d'entre nous s'améliore.

(S'il vous plait ne faites pas attention à mes fautes je ne fais plus de français depuis un bout de temps et je sais que ce clubs doit être bourrés de fautes d'orthographes et de grammaires....)

Profil personalisé

Pour obtenir un profil personnalisé veuillez remplir ce formulaire le plus précisément possible, cela permettra au créatrices et créateurs de respecter au mieux vos attentes. Si toutefois vous n'avez pas d'idé précise vous pouvez également nous donner carte blanches en nous indiquant seulement un thème à suivre.

Formulaire :

Fond :
Nombre de bloc :
Disposition des blocs :
Description des bloc (font, taille, forme...) :
Sommaire cliquable / Page caché / Rien :
Autre précision :

Boîte à outils

Ici vous trouverez tous ce dont vous aurez besoin pour réaliser vos plus beaux HTLM !

Fond héberger sur sailor fuku

Palette de couleur HTLM

Profil pré-créer

Cette rubrique est réservé au sailor en manque d'inspiration. Ici se trouve des profils pré créer par les créatrices et créateurs de profils de ce clubs.

Créatrices et créateurs

Formulaire

Pseudo :
Disponiblité :
Je sait faire :
Délais pour créer un profils :

Créatrices / Créateurs

Kiwiwi
Disponiblité : Toute la semaine sauf les week end
Je sais faire : Fond (image/couleur/dégradé) ; blocs (carré, rond, oval, transparent, avec bordure, ombre, alignés...), sommaire cliquable, page cachés, mettre une image par dessus un bloc

Apprendre le HTLM

Comme expliqué dans la présentation, je souhaiterais que ce club ne soit pas uniquement un lieu de "commande de profil" mais également un lieu de partage. C'est pour cela que j'ai décidé de créer cette catégorie.

En effet passer commande pour avoir un joli profil est beaucoup plus simple et plus rapide que de créer son propre profil. Mais comprendre le language HTLM peut permettre de modier son profil soit même sans l'aide de personne, ça peut être satisfaisant de se dire que nous avons créer notre propre HTLM (et contre l'ennuie c'est vraiment une bonne solution je vous assure).

Avant tout, ou devons nous écrire notre code HTLM ?

Ici vous trouverez différents model de code "de base" pour débuter en HTLM.

Mettre un fond de couleur uni :
<div style="background-color: #CODE COULEUR">texte</div>
(le code couleur doit être remplacé par un code HTLM, vous trouverez un lien de palette de couleur dans la boite outils)

Mettre une image en fond :
<div style="background-image: url(LIEN DE L'IMAGE)">texte</div>
(Le lien de l'image doit être le lien d'une image héberger sur SF, vous trouverez le lien d'un club hébergeant des fond spécialement sur SF dans la boite à outils)

Créer un bloc :
<div style="background-color: #ffffff; width: 400px; height: 400px; margin: auto; text-align: center; overflow: auto;">lll</div>
Dans ce bloc, "width" signifie la largeur et "height" la hauteur, pour changer les dimenssion il faut modifié les pixels définissant la hauteur et la largeur. Vous pouvez également mettre une image de fond dans un blocs en remplaçant "background-color: #CODE COULEUR" par "background-image : url(LIEN DE L'IMAGE)

Créer des bloc alignés :
<table style="margin: auto;" border="0">
<tbody>
<tr>
<td>
CODAGE D'UN BLOC
</td>
<td> </td>
<td>
CODAGE D'UN BLOC
</td>
</tr>
</tbody>
</table>

Après avoir acquis et compris les principes de bases du HTLM, voici quelques exemple de codage plus "compliqué".

Personalisé un bloc :
→ Arrondire les angles : box-shadow: 2px 0px 5px #000000
→ Rajouter une bordure : border: 5px #000000 solid
(trait continu : solid ; pointillés : dotted ; tirets : dashed ; en relief : ridge ou groove ; double bordure : double)
→ Ajouter de l'ombre : border-radius: 10px 10px 10px 10px
→ Gérer l'opacité : opacity: 0.8
Pour ajouter ces différentes option au codage d'un bloc il suffit de rajouter un point virgule et un espace avant de refermer les guillemet.
Exemple : <div style="background-color: #ffffff; width: 400px; height: 400px; margin: auto; text-align: center; overflow: auto; opacity: 0.8; box-shadow: 2px 0px 5px #000000;">lll</div>

Fond de couleur dégradé :
<div style="background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CODE COULEUR), to(#CODE COULEUR));">texte</div>
Ici, les % permettent de régler le degradé et les deux CODES COULEUR sont les deux couleurs de votre débragé.

Cet onglet est pour celles et ceux qui souhaterais aller encore plus loin dans l'apprentissage du HTLM. C'est vraiment compliqué d'expliqer le HTLM à travers quelques exemples et c'est impossible d'expliquer en une simple phrase comment faire des pages cachées par exemple, c'est pourquoi j'ai voulu avoir cet onglet.
Ici vous pourrez prendre des genres de "RDV" avec d'autres membres du club qui vous expliquerons ou vous aiderons à créer un codage HTLM. Cela permettra au personnes doué en HTLM mais ne souhaitans pas créer de profils d'échanger avec les débutants ainsi que de les aider.
Pour que cela soit possible, j'ai penser que la personne voulant suivr un "cours" créer un club de test HTLM, les personnes souhaitant l'aider s'insrciraientt dans ce clubs et pourrait ainsi communiquer en toute liberté. Il n'y aurait pas de proffesseur attitrer et tout le monde pourrait s'inscrire dans le clubs d'une personne demandant de l'aide pour partager ses idées et son savoir.
Je ne sais pas si mon idée est très claire, ça l'était dans ma tête mais c'est plus compliqué à expliquer que ce que je pensais aha.

Pour vous inscrire en tant "qu'apprentis" veuillez remplir ce formulaire, je vous ajouterais ensuite à la présentation du club pour être visible par tout le monde :

Pseudo :
Besoin :
Lien vers le clubs d'entraide :

FAQ

Comme son nom l'indique cette onglet sera réservé au question revenant le plus souvent.

@kiwiwi | ~Les nouveaux fond hébergers~

Nouvelles membres
2 membres

Asor300

kiwiwi

Discussions

kiwiwi

Profil 5

<div style="background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EACFB8), to(#FFFCFA));"><br /><br /><br />
<div style="background-color: #ffffff; width: 700px; height: auto; margin: auto; text-align: center; overflow: auto; opacity: 0.6;"><span style="font-family: helvetica;"><br /></span><span style="font-size: small;"><span style="font-size: medium;"><span style="font-family: helvetica;"><strong>Kiwiwi</strong></span></span></span><br /><span style="font-size: small;"> </span></div>
<br /><br /><br />
<div style="margin: auto; width: 500px; height: 800px; text-align: center; overflow: auto; opacity: 0.6; background-color: #ffffff;">
<p style="text-align: center;"> </p>
<img src="http://noellegifmania.n.o.pic.centerblog.net/Titeuf6.gif" alt="" width="500" height="415" /><br /><br />tous ce qui fait battre ton coeur vaut la pein d'être fait</div>
</div>

à 19:36 le 19/06/2018

kiwiwi

Le club est ici : http://www.sailorfuku.com/club-111734-la-fabrique-nO-profil
Là c'est juste l'endroit ou je crée mes HTLM, je te laisse passer commande sur le club, j'essayerais de faire au plus vite, mais préparant des concours ça pourrait prendre plusieurs jours (3 ou 4 je pense)

à 18:34 le 19/04/2017

Asor300

Bonjour ! Je suis nouvelle et ton club m'intéresse énormément.
J'aimerai beaucoup apprendre le HTLM si c'est possible.
Je commençais à trouver mon profil un peu long mais avec des liens cliquables qui nous emmène vers la présentations, les clubs à voter, les votes à rendre et tout le trucs muches pas très importants, ça prends de la place quand même.

à 09:57 le 19/04/2017

kiwiwi

Fond couleur :
<div style="background-color: #CODE COULEUR">texte</div>

Fond image :
<div style="background-image: url(LIEN DE L'IMAGE)">texte</div>

Fond dégrader :
<div style="background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CODE COULEUR), to(#CODE COULEUR));">texte</div>

Bloc "normal" :
<div style="background-color: #ffffff; width: 400px; height: 400px; margin: auto; text-align: center; overflow: auto;">lll</div>

Bloc alignés :
<table style="margin: auto;" border="0">
<tbody>
<tr>
<td>
<div style="background-color: #ffffff; width: 230px; height: 230px; margin: auto; text-align: center; overflow: auto;">lll</div>
</td>
<td> </td>
<td>
<div style="background-color: #ffffff; width: 230px; height: 230px; margin: auto; text-align: center; overflow: auto;">lll</div>
</td>
</tr>
</tbody>
</table>

Bloc rond :
<div style="background-color: #ffffff; width: 250px; height: 250px; margin: auto; text-align: center; overflow: auto; border-radius: 250px 250px 250px 250px;"><span style="font-family: 'comic sans ms', sans-serif;"><br /><br />LLL</span></div>

Bordure :
border: 5px #000000 solid
trait continu => solid
pointillés => dotted
tirets => dashed
en relief => ridge ou groove
double bordure => double

Ombre :
box-shadow: 2px 0px 5px #000000

Angles arrondis :
border-radius: 10px 10px 10px 10px

Opacités :
opacity: 0.8

Pages cachés :
<div style="width: 400px; height: 300px; text-align: center; overflow: hidden; margin: auto;">
<div style="background-color: #ffffff; width: 400px; height: 300px; margin: auto; text-align: center; overflow: auto;"><a name="#sommaire"></a><br /><br /><span style="font-size: medium;"><span style="text-decoration: underline;">Sommaire<br /><span style="font-size: small;"><br /></span></span><span style="font-size: small;"><a href="##page 1">Page 1<br /></a></span><span style="font-size: small;"><a href="##page 2">Page 2</a></span><span style="text-decoration: underline;"><br /></span></span><a href="#bloc 3"></a></div>
<div style="background-color: #ffffff; width: 400px; height: 300px; margin: auto; text-align: center; overflow: auto;"><a name="#page 1"></a><br /><br />Page 1<br /><br /><a href="##sommaire">Retour au sommaire</a></div>
<div style="background-color: #ffffff; width: 400px; height: 300px; margin: auto; text-align: center; overflow: auto;"><a name="#page 2"></a><br /><br />Page 2<br /><br /><a href="##sommaire">Retour au sommaire</a></div>
</div>

Image par dessus un bloc :
<img style="margin-top: -250px; margin-left: 485px; width: 170px;" src=" "alt="" />

à 19:18 le 04/07/2016

kiwiwi

Profil n°4 :

<p style="text-align: center;"><strong><span style="text-decoration: underline;">Bienvenu sur mon profil !!</span><br /></strong><strong><em><br /><br /></em></strong></p>
<p style="text-align: center;"><strong><span style="text-decoration: underline;"><img style="vertical-align: baseline;" src="http://data1.whicdn.com/images/134719121/superthumb.jpg" alt="" width="300" height="250" /></span><br /></strong></p>
<p style="text-align: center;"><strong><span style="text-decoration: line-through;">Honnêtement ? Je ne sais pas, je suis née comme ça.</span></strong></p>
<p style="text-align: center;"><strong><br /><br /></strong> <em><strong>"Je sens que ma vie part dans tous les sens en ce moment. Comme si elle était faite de plein de petits bouts de papier et que quelqu'un venait de brancher un ventilateur. Mais quand je te parle, c'est comme si le ventilateur s'éteignait momentanément. Comme si les choses commençaient enfin à avoir du sens. Tu me rassembles, tu fais de moi un tout, et c'est très important pour moi." <br /></strong><strong>John Green</strong></em> <strong><br /></strong></p>
<p><span style="color: #333333; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px;"><br /></span></p>
<p style="text-align: center;"><span style="font-weight: normal;"><em>"La peur du changement nous pousse à l'inaction" <span style="text-decoration: underline;">Lori Nelson Spielman, Demain est un autre jour</span></em></span></p>
<p style="text-align: center;"> </p>

à 19:17 le 04/07/2016

kiwiwi

Profil n°3 :

<div style="text-align: center; background-image: url(temp/1362072654.gif);"><span style="font-size: xx-large;"><span style="color: #ffffff;"><span style="font-family: 'book antiqua', palatino;"><span style="text-decoration: underline;"><em>&hearts; Kiwiwi &hearts;<br /><br /></em></span></span></span></span>
<table style="margin: auto;" border="0">
<tbody>
<tr>
<td>
<div style="background-color: #ffffff; width: 250px; height: 250px; margin: auto; text-align: center; overflow: auto; border: 1px solid black; border-radius: 250px 250px 250px 250px;"><span style="font-family: 'comic sans ms', sans-serif;"><br /><em><span style="font-size: medium;"><span style="color: #000000;"><span style="font-family: 'book antiqua', palatino;"><span style="text-decoration: underline;">Présentation</span><br /></span></span></span><br /><span style="font-family: 'book antiqua', palatino;"><span style="font-size: small;"><span style="font-family: 'book antiqua', palatino;">Chiante<br />Lunatique<br />S'énerve facilement et vite<br />Bordélique<br />Sociable<br />Jalouse<br />Méchante<br />Gentille<br />Violente<br />Impulsive<br /></span></span></span><br /></em></span></div>
</td>
<td><em>   </em></td>
<td>
<div style="background-color: #ffffff; width: 250px; height: 250px; margin: auto; text-align: center; overflow: auto; border: 1px solid black; border-radius: 250px 250px 250px 250px;"><span style="font-family: 'comic sans ms', sans-serif;"><em><br /><span style="font-size: medium;"><span style="font-family: 'book antiqua', palatino;"><span style="text-decoration: underline;">Règles</span></span></span><br /><span style="font-size: small;"><br /><span style="font-family: 'book antiqua', palatino;"><span style="color: #ff0000;">Demandes de votes<br /></span><span style="color: #ff0000;">Demandes de cadeaux<br />Language sms<br />Flood<br />Plagia<br />Demandes d'amis</span><br /><br /><span style="color: #00ff00;"><span style="font-family: 'book antiqua', palatino;">Pub</span></span></span><br /> </span></em></span></div>
</td>
</tr>
</tbody>
</table>
<span style="color: #ffffff;"><span style="font-size: medium;"><span style="font-family: 'book antiqua', palatino;"><br /><img src="http://data1.whicdn.com/images/135791220/thumb.jpg" alt="" width="500" height="418" /><br /></span></span></span><br /> <br /><br /><span style="color: #000000;"><span style="background-color: #ffffff;"><span style="font-family: 'book antiqua', palatino;"><em>By kiwiwi~No plagia</em></span></span></span></div>

à 19:09 le 04/07/2016

kiwiwi

Profil n°2 :

<p style="text-align: center;"> </p>
<p style="text-align: center;"><strong><br /></strong></p>
<p style="text-align: center;">I love you a bit too much mum. And I love you forever.</p>
<p style="text-align: center;">My guardian angel, you shine more than all in the sky.</p>
<p style="text-align: center;">For you I fight against this world every day.</p>
<p style="text-align: center;">And I will win, I promise you.</p>
<p style="text-align: center;">Don't worry. </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><strong>Nobody knows me here.</strong></p>

à 19:05 le 04/07/2016

kiwiwi

Profil n°1 :

<p style="text-align: center;"> </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;">Je t'accompagnerai au bout de monde, et encore bien plus loin.</p>
<p style="text-align: center;">Dans cette cabine si triste, ce jour d'été un peu bizzard, dans notre folle jeunesse, un peu détruite aussi, je te l'ai promis.</p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><img style="vertical-align: middle;" width="500" src="http://data.whicdn.com/images/187823812/large.jpg" alt="" height="667" /></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;">Il n'y a que toi.<br />L.B</p>
<p style="text-align: center;"> </p>

à 19:05 le 04/07/2016

Informations

Présentation Modifié le 31/05/2018

Nouvelles membres 2 membres

Discussions

Présentation
Modifié le 31/05/2018

Nouvelles membres
2 membres