SailorFuku est un jeu de mode où tu incarnes une jeune lycéenne, dans la ville de SailorCity, au Japon.
Rencontre d'autres joueuses, évolue dans ta carrière et drague les personnages de ton choix !

    Informations

    Présidente :
    Mari0n6
    Activité :
    0 connectée(s)
    871 membres
    5842 messages postés
    Date de création :
    le 08/04/2012 à 20:53

    Présentation
    Modifié le 06/01/2013

    Tout d'abord, qu'est ce que ce club ? A quoi ça va me servir ? Pleins de questions te tourbillonent dans ta tête ? Il est temps d'y remédier !

    Alors, tout d'abord si je créé ce club c'est bien pour différentes raisons :
    1) Parce que plusieurs fois on m'a demandé de faire ce club
    2) Pour partager nos codes HTML
    3) Pour que "Tatie Mari0n6" puisse t'aider à faire la présentation de tes rêves
    4) Et tout simplement car "Tatie Mari0n6" adore rendre service ! 

    A quoi ça va te servir ? Ben comme je l'ai dis précédemment, à faire la présentation de tes rêves, et à partager tes codes HTML !

    Bon, finis les bavardages, passons aux choses sérieuses ! Il se peux très bien qu'en venant sur ce club tu n'y connais absolument rien au HTML c'est pourquoi on va commencer de 0.

    Le HTML, qu'est ce que c'est ?
    Ce sont les initiales de Hyper Text Markup Language et cela te permet de faire des sites web, tout simplement. C'est un langage utilisant des balises, et cela te permet de structurer ton texte, d'inclure des ressources multimédias comme des images, des formulaires etc.

    Mais alors, comment décorer notre Code ?
    Et c'est là que généralement on tombe dans le piège car le HTML sert uniquement à ce que l'on a vus précédemment et non à faire des ombres au texte, ou mettre des couleurs d'arrière plan etc. tout ça c'est réservé au CSS (et oui, chacun a un role bien précis dans la programmation !) et c'est donc lui qui permet d'avoir des profils avec des bordures colorées, des ombres, des effets etc.

    Comment utiliser du code HTML sur SailorFuku ?
    C'est bien beau de savoir ce que c'est le HTML, mais si on ne sait pas l'utiliser ça ne sert à rien ! Nous allons donc voir comment ajouter ton texte HTML sur ton profil SF dans un petit tuto ici !


    Quel code pour quel rendu ?

    Et c'est maintenant que nous rentrons bien dans le vif du sujet, puisque nous allons voir les différents codes à utiliser pour tel ou tel rendu !
    /!\ LE CODE DONNE PAR LA SUITE DOIT ETRE MIS ICI div style="CSS": /!\
    Type Je veux... Le code Ce qui me donne... Commentaires
    HTML Un bloc simple div
    Texte

    Bien évidemment, là nous avons demandé un bloc simple donc on ne verra rien, pour voir ce bloc, il suffit simplement d'y ajouter du CSS que l'on va voir par la suite. 

    CSS De la couleur à mon texte color: red
    ou
    color: #FF0000 
    Texte en rouge

    On remarqueras que l'on a ajouté style=" avant le code CSS en question pour informer l'ordi que nous voulons mettre du CSS, ne pas oublier de fermer avec ". Il y a aussi 2 méthodes de mettre du texte en couleur, l'une avec le nom anglais de la couleur et l'autre avec son code HTML, ce qui nous donne le même résultats bien évidemment. Nous pourrons utiliser l'une de ces 2 méthodes à chaque fois que nous voudrons mettre une couleur en particulier. 

    CSS De l'ombre à mon texte text-shadow: 0px 0px red
    Texte

    Nous avons utilisé 0px 0px 5px red, si tu augmentes le premier 0px l'ombre seras plus éloignée vers l'arrière de ton texte, si tu augmentes le deuxième 0px, l'ombre seras éloignée vers le bas du texte, et enfin si tu modifies le 5px, l'ombre seras plus ou moins grande. (c'est un peu dur à comprendre comme ça mais pour savoir de quoi je parle, rien de mieux que d'essayer toi même !)

    CSS Un fond de couleur à un bloc background-color: red
    Texte

    Même remarque que pour la couleur du texte, ici nous pouvons utiliser les 2 méthodes : celle avec le nom anglais ou celle avec le code HTML de la couleur.

    CSS Une bordure à mon bloc border: 1px solid black
    Texte

    C'est là que ça se complique, enfin du moins, qu'on a plus de possibilitées ! Si l'on regarde le code, on remarque : 1px solid black. 1px représente la largeur de la bordure, plus vous rentrez un nombre grand et plus la bordure sera épaisse. solid représente le type de bordure, ici vous pouvez voir que différents types de bordures sont à disposition, pour les 4 derniers, il faut que la largeur de la bordure (1px) soit suffisamment grande pour pouvoir voir l'effet. et enfin, black (ou purple), qui représente la couleur de la bordure.

    border: 1px dashed black

    Texte

    border: 1px dotted black

    Texte

    border: 1px groove black

    Texte

    border: 1px inset black

    Texte

    border: 1px outset black

    Texte

    border: 5px double black

    Texte

    border: 5px ridge purple

    Texte
    CSS Une bordure arrondis border-radius: 10px
    Texte

    Nous utiliserons, border-radius, et si l'on veux que ce soit plus ou moins arrondis nous n'avons qu'à augmenter le nombre de px !

    CSS Des marges à mon profil padding: 10px
    Texte

    Ici, nous avons utilisé padding, ce qui nous permet d'espacer le Texte de la bordure intérieure noir.

    margin: 10px

    Texte

    Ici, nous avons utilisé margin, ce qui nous permet d'espacer le Texte entre la bordure noir et violette.

    CSS Une ombre à mon bloc box-shadow: 0px 0px 10px black
    Texte

    L'utilisation du box-shadow se fait comme pour le text-shadow, il fonctionne de la même manière donc si vous avez un problème, regardez au niveau du text-shadow.

    HTML Insérer un lien a href="LE LIEN">Cliques ICI Cliques ICI

    Pas grand chose à dire pour le lien, a par que comme pour le bloc on peux lui ajouter du CSS (style) comme ceci : a href="LE LIEN" style="CSS">

    HTML Sommaire Cliquable Toutes les informations se trouvent sur ce tuto réalisé par DarkHanako
    CSS Insérer une scrollbar overflow: scroll; height: 20px
    Texte
    Texte 

    Si l'on traduit ce que signifie overflow: scroll, height: 20px, en gros ça veux dire que la hauteur de mon bloc est de 20 pixels, mais si il y a trop de texte, au lieu d'agrandir le bloc, une liste apparait automatiquement (overflow: scroll). 

    HTML Mettre du texte en exposant sup TexteTexteTexte

    Code Proposé par Jonasla, pas vraiment d'explication à donner pour ce code ! 

    HTML Faire un Tableau LE CODE
    Case 1

    Si on déchiffre ce code, on remarque 3 balises différentes :
    - "table" : qui annonce qu'il y aura un tableau
    - "tr" : pour ajouter une ligne
    - "td" : pour ajouter une case à la ligne
    Ainsi, on ajoutera autant de cases ("td") au tableau ("table") que l'on veux sur différentes lignes 


    Tu peux désormais toi aussi proposé des petits bouts de codes pour les Sailors qui n'ont pas vraiment d'idée pour faire une belle présentation ! :)

    Sailor Code Ce qui me donne...
    Ninadu76 LE CODE
    Texte

    Etant donné que je t'ai appris pleins de nouveaux codes, ce serait sympa de mettre ma petite signature à la fin de ta fiche :
    tatie
    Et avec le lien du club c'est encore mieux ! x) 


    Si tu as besoin d'AIDE, tu peux contacter ces sailors directement: 

    Ramda



    Concours
    Pour animer un peu le club et pour que vous en appreniez encore plus j'ai décidé d'organiser des petits exercices sous forme de concours. Les gains ne sont pas encore choisis.

    Concours 1

    Le but de ce concours est simple, il s'agit d'essayer de retrouver le code utilisé dans la présentation suivante, en refaisant le profil, la Sailor qui aura réussi à refaire le profil le plus ressemblant à celui de base aura gagné le concours ! 

    PROFIL DE BASE 

    Participantes : 
    (moiiiiiiiiiiiiiii) 
    xSoYeon 
    Miimiko 
    Hazilys > OK ! 
    drewella 
    Concours 2

    Le but de ce concours est aussi très simple, puisque tu devras faire comme si tu recevais une commande de profil, et essayer de satisfaire le plus possible ton client, le profil qui aura reçu le plus de votes de la part des sailors remportera le concours. Voici la commande :

    Bonjour, j'en ai marre de mon profil monotone et fade, d'automne j'aimerais changer un peu, en plus, j'adore la prairie et tout ce qui est coloré, donc j'espère que tu pourras me faire quelque chose qui convient à mes attentes ! Pour ce qui est des catégories, je voudrais : Présentation, Conditions, Modération, Votes Quos. Voila ! J'espère que tu me surprendras !

    Participantes : 
    (Darkhanako) 
    xSoYeon
    Miimiko 
    drewella 
    Hattaway 
    Helio 

    Discussions