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
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 |
|
Si on déchiffre ce code, on remarque 3 balises différentes : |
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 :
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 |