AccueilS'enregistrerConnexion

Partagez|

Bases HTML pour vos fiches personnages !!!

Voir le sujet précédent Voir le sujet suivant Aller en bas
Aller à la page : 1, 2  Suivant
AuteurMessage
Princesse pestouneMessages : 4719
Date d'inscription : 06/02/2011
Age : 24

Feuille de personnage
Classe: Septième année
Humeur: joueuse
Je suis...: a-do-ra-ble
avatar
Selenka
MessageSujet: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 16:43
Revenir en haut Aller en bas

Quelques bases pour une jolie fiche personnage


[n'hésitez pas à ajouter vos astuces!]

Tout d'abord, un petit rappel des codes les plus simples mais les plus utiles. ^^

I. Mettre en relief un texte:

En gras:
Code:
<b> </b>

En italique:
Code:
<i> </i>

Souligné:
Code:
<u> </u>

Une fin de ligne
Code:
<BR>

Un saut de ligne:
Code:
<BR><BR>

II. Afficher une image

Code le plus simple pour l'image:
Code:
 <IMG SRC="URL">

Si vous souhaitez placer votre image de façon spécifique sur la page:
Code:
<IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
(nb: top = haut, bottom = bas, middle = centré, left = gauche, right = droite)
Faire varier les dimensions de votre image:
Code:
 <IMG SRC="URL" WIDTH="?" HEIGHT="?">
(nb: les ? sont à remplacer par des chiffres qui seront les valeurs en pixels)

Une image avec une bordure:
Code:
 <IMG SRC="URL" BORDER=?>


III. Ajouter des couleurs

Couleur d'arrière-plan
Code:
 <BODY BGCOLOR="#XXXX">

Couleur du texte
Code:
 <BODY TEXT="#XXXX">

Pour trouver une couleur un peu particulière qui vous plait, je vous invite à vous rendre sur ce site: http://www.code-couleur.com/. Le code fourni par la couleur remplaçant les XXX précédents.

Pour ceux souhaitant plus d'informations, vous pouvez tenter ce site là: http://werbach.com/barebones/fr_barebone.html

_________________

Donneuse de EC certifiée ϟ « Ex-Uzem, Ex-préfète, Ex-peste, Ex... »

© COFFEE

Spoiler:
 
Revenir en haut Aller en bas
Princesse pestouneMessages : 4719
Date d'inscription : 06/02/2011
Age : 24

Feuille de personnage
Classe: Septième année
Humeur: joueuse
Je suis...: a-do-ra-ble
avatar
Selenka
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 16:55
Revenir en haut Aller en bas

Un peu plus de codes
Mettre de la musique dans sa fiche.


I. Une douce musique

Pour les personnes qui tiennent à avoir un lecteur qui ne se déclanche pas automatiquement, le mieux est de passer par youtube.

Code:
<object height="25" width="200"><param name="movie" value="http://www.youtube.com/watch?v=0put0_a--Ng?version=3=1&hl=fr_FR"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/0put0_a--Ng?version=3=1&hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="25" width="400"></object>

Ce qui donne ceci :


Pour la musique changez seulement le lien qui se trouve là :
Code:
 value="http://www.youtube.com/watch?v=0put0_a--Ng
par le lien de votre vidéo youtube.
Et mettez les chiffres/lettres qui se trouvent après le "v=" dans votre lien juste là après le "/v/" :
Code:
<embed src="http://www.youtube.com/v/0put0_a--Ng

Pour changer la longueur, c'est simple : vous changez le width="400" de la toute fin par le nombre (en pixel) que vous voulez.[/list]

II. Ajouter une image au-dessus du curseur
Pour embellir, vous pouvez ajouter une image juste au-dessus du code, si vous voulez (:
Comme ceci:



Réglez seulement la taille du lecteur par rapport à celle de votre image (;

III. Changer les coloris du curseur
Déjà le résultat:

Couleurs improbables vous l'aurez remarqué 8D /PAN/

Et le code:
Code:
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/watch?v=0put0_a--Ng?version=3=1&hl=fr_FR"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/0put0_a--Ng&color1=0x00FF00&color2=0xFFA500&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="25" width="400"></embed></object>

J'ai donc rajouté pour la couleur:
Code:
&color1=0x00FF00&color2=0xFFA500&

le color1 correspond aux contours (ici vert transgénique) et le color2 à la couleur générale (ici le jaune qui fait mal aux yeux).

Pour changer les couleur c'est simple, il faut utiliser des couleurs hexadécimales (si si vous savez les #FFFFFF & compagnie mais sans le # cette fois-ci 8D). Juste le code qu'il faut mettre ici à la place des étoiles:
Code:
&color1=0x*******&color2=0x******&

[Merci à Vlada pour cette explication détaillée rendons à César ce qui est à César

_________________

Donneuse de EC certifiée ϟ « Ex-Uzem, Ex-préfète, Ex-peste, Ex... »

© COFFEE

Spoiler:
 
Revenir en haut Aller en bas
Prêtresse miaouh =^-^=Messages : 12884
Date d'inscription : 06/02/2011

Feuille de personnage
Classe: Professeur
Humeur: débordée ^^'
Je suis...: au Japon @w@
avatar
NekoCitron
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 19:43
Revenir en haut Aller en bas

::like::
Revenir en haut Aller en bas
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 20:08
Revenir en haut Aller en bas

Des petits codes en plus ^^

Pour Justifier ET Centrer (à peu près) votre texte

Code:
<div style="text-align:justify; width: 80%; margin-left: 10%; margin-right: 10%;"> Bla bla bla </div>

Exemple :

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


Un autre code couleur pour le texte, à placer juste de chaque côté du texte. Le blablabla doit être remplacé par le nom de la couleur (black, red, seagreen, lightblue ...)

Code:
<font color=bbla bla bla></font>

Exemple :

Uzem and Proud of it !

Et bien sûr l'incontournable tableau :

Code:
<table style="width: 100%; border-collapse:separate; border: 1px double ;"><tr style="border: 1px solid ;"><td style="border:1px solid  ;">Bla bla bla</td></tr><tr style="border: 1px solid ;"><td style="border:1px solid  ;">bla bla bla</td></tr></table>

Ce qui donne ::

Bla bla bla
Bla bla bla

A quoi correspond qui ?

tr : nombre de lignes
td : nombre de colonnes

Ne pas hésiter à rajouter des td et des tr pour des tableaux plus grands !

Dans la balise "table"

width : la largeur qu'occupera votre tableau sur la page (ici, 100%, vous pouvez mettre moins)
border-collapse : le style de bordure extérieure du tableau : ici séparée (les bordure du tableau et des cellules sont disjointes)

Pour tous :

border : avant px : la largeur du tableau, "double" signifie ici que la bordure sera doublée, vous pouvée chosir "solid" pour simple, "dot" pour des pointillés, etc ...

Notez que pour avoir des cellules de tailles différentes, il vous faudra ajouter une balise "width" avec le pourcentage de la taille de la cellule pour le tableau dans la partie "td"

Code:
<td style="width: 40%; border: 1px solid;">

Pour des entêtes pour le tableau, utilisez "th" au lieu de "td".

Et pour finir les petites boîtes, on ne sait jamais :



Code:
<INPUT type="checkbox" name="choix1" value="1"checked="checked">



Code:
<INPUT type="checkbox" name="choix1" value="1">


Dernière édition par Elizabeth McAllister le Ven 18 Mai - 1:00, édité 5 fois
Revenir en haut Aller en bas
Grande gueule sanguin Marseillaise assuméeMessages : 13699
Date d'inscription : 06/02/2011
Age : 34
Localisation : Marseille / Rians

Feuille de personnage
Classe: Professeur
Humeur: Ténébreuse
Je suis...: ... ton pire cauchemar ...
avatar
Tabris Lahar
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 20:09
Revenir en haut Aller en bas

Il manque le plus important, pour justifier le texte, sinon, c'est laid !!!
Ou alors j'ai mal lu ?
Revenir en haut Aller en bas
http://levishei.tumblr.com/
Princesse pestouneMessages : 4719
Date d'inscription : 06/02/2011
Age : 24

Feuille de personnage
Classe: Septième année
Humeur: joueuse
Je suis...: a-do-ra-ble
avatar
Selenka
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 20:12
Revenir en haut Aller en bas

Merci Elizabeth. ^w^
Je me suis permise d'éditer le "blabla" pour que ça déforme pas la page. Mais je cherchais les boiboites ça tombe bien. **

édit pour shei> justifié c'est juste
Code:
<div style="text-align:justify>
, je crois, mais je l'ajouterai.

_________________

Donneuse de EC certifiée ϟ « Ex-Uzem, Ex-préfète, Ex-peste, Ex... »

© COFFEE

Spoiler:
 


Dernière édition par Selenka le Mar 20 Mar - 20:14, édité 3 fois
Revenir en haut Aller en bas
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 20:13
Revenir en haut Aller en bas

J'ai eu quelques soucis avec mes copier-coller, je rectifie en ce moment ^^'

*Les danger de la fleme de retaper ...*

Le justifier est dans le cide div => text-align=justify
On obtient ensuite le centré avec les marges (ici 10% de chaque côté)

On peut à loisir décaler à droite ou à gauche en changeant les marges, mais si on rétrécit la place du texte il faut penser à changer le "width" dans la balise "div".
Revenir en haut Aller en bas
A lancé un gemini incantato sur ses messagesMessages : 6617
Date d'inscription : 23/05/2011
Age : 24
Localisation : Anywhere, everywhere ...

Feuille de personnage
Classe: Septième année
Humeur: AFK from IRL
Je suis...: Contre la censure !
avatar
Elizabeth McAllister
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 20:24
Revenir en haut Aller en bas

Haaaaaaaan le centré justifié **

Bon, ça bug sous IE, mais ... ça marche sous firefox ! J'aime **
Revenir en haut Aller en bas
http://uzem-n-proud.tumblr.com
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Mar 20 Mar - 22:10
Revenir en haut Aller en bas

Merci je trouve ça chouette
Revenir en haut Aller en bas
Grande gueule sanguin Marseillaise assuméeMessages : 13699
Date d'inscription : 06/02/2011
Age : 34
Localisation : Marseille / Rians

Feuille de personnage
Classe: Professeur
Humeur: Ténébreuse
Je suis...: ... ton pire cauchemar ...
avatar
Tabris Lahar
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Lun 30 Juil - 13:06
Revenir en haut Aller en bas

Quelqu'un pourrait-il expliquer à Lilith (ici) comment héberger une image à partir du fo, s'il vous plait ? Moi je dois partir au travail depuis 5 minutes, et elle peine à charger des images...
Revenir en haut Aller en bas
http://levishei.tumblr.com/
MJ au coeur des élémentsMessages : 7368
Date d'inscription : 16/01/2012
Age : 28

Feuille de personnage
Classe: Septième année
Humeur: aventureuse
Je suis...: en train de fater
avatar
Colombina
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Lun 30 Juil - 13:50
Revenir en haut Aller en bas

&- aller sur l’icône "Héberger une image", dans la fenêtre de réponse. Puis cliquer sur "Parcourir" pour chercher une image sur votre ordinateur.


Pour mettre l'image visible sur le forum:

- Ou tu utilise les balises
- Soit, tu clique sur l’icône "Insérer une image" et tu y colle ton lien et tu clique sur "OK".

Voilà, des questions? Smile

Revenir en haut Aller en bas
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Lun 30 Juil - 13:54
Revenir en haut Aller en bas

Ah merci, ça m'évitera de passer par un hébergeur externe pour les prochaines fois^^
Revenir en haut Aller en bas
MJ au coeur des élémentsMessages : 7368
Date d'inscription : 16/01/2012
Age : 28

Feuille de personnage
Classe: Septième année
Humeur: aventureuse
Je suis...: en train de fater
avatar
Colombina
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Lun 30 Juil - 13:56
Revenir en haut Aller en bas

De rien Smile
Revenir en haut Aller en bas
Grande gueule sanguin Marseillaise assuméeMessages : 13699
Date d'inscription : 06/02/2011
Age : 34
Localisation : Marseille / Rians

Feuille de personnage
Classe: Professeur
Humeur: Ténébreuse
Je suis...: ... ton pire cauchemar ...
avatar
Tabris Lahar
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Lun 30 Juil - 14:21
Revenir en haut Aller en bas

Merci ^^
Revenir en haut Aller en bas
http://levishei.tumblr.com/
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Ven 3 Aoû - 18:45
Revenir en haut Aller en bas

Pour la couleur du texte c'est (font color="#ABCDEF") qui fonctionne et non "body color"

Et je n'arrive pas à changer la couleur du font, le code 'body bgcolor' ne donne aucun résultat sur ma fiche.
Revenir en haut Aller en bas
A lancé un gemini incantato sur ses messagesMessages : 6617
Date d'inscription : 23/05/2011
Age : 24
Localisation : Anywhere, everywhere ...

Feuille de personnage
Classe: Septième année
Humeur: AFK from IRL
Je suis...: Contre la censure !
avatar
Elizabeth McAllister
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Ven 3 Aoû - 19:01
Revenir en haut Aller en bas

Question idiote *pas taper* as-tu fermé la balise quand tu l'as essayée ? <*/BODY>

Si oui, eh bien il faudra passer par une balise "div" pour le fond, que je m'en vais chercher de suite dans mes dossiers =)

EDIT : <*div style="background-color:#ABCDEF"> sans le * bien sûr ^^
Revenir en haut Aller en bas
http://uzem-n-proud.tumblr.com
Faiseur de pavés certifiéMessages : 1030
Date d'inscription : 08/03/2011

Feuille de personnage
Classe: Troisième année
Humeur: ectoplasmique
Je suis...: liiibre. Dobby est un elfe liiiibre o/
avatar
Landrac
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Ven 3 Aoû - 19:20
Revenir en haut Aller en bas

Nan mais dans tous les cas, n'utilisez jamais de balise <*body> !!! O_____O"
C'est une balise de premier niveau (si vous savez pas ce que c'est, dîtes-vous juste que c'est indispensable à une page web et donc très important). Elle n'est pas là pour faire mumuse avec le css après coup ! Si vous voyez quelque chose sur votre écran, c'est qu'elle est déjà là, puisque c'est son rôle : ce qui est dans la balise body est affiché à l'écran. La remettre ne sert à rien... En plus, si vous vous ratez dans votre codage, vous risquez de faire planter toutes les pages où votre description est affichée. Si vous voulez avoir un fond d'une certaine couleur ou autres, ouvrez un div englobant toute votre desc et affiliez lui un style="background-color: #000000;" mais jouez pas avec body ! è_é
Revenir en haut Aller en bas
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Ven 3 Aoû - 20:01
Revenir en haut Aller en bas

Ok merci, je m'en vais jouer au apprentis sorciers avec "style div" merci.
Revenir en haut Aller en bas
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Sam 4 Aoû - 3:00
Revenir en haut Aller en bas

Merci ça m'a été utile le div Style background color="#oooooo" par contre je n'ai pas trouvé comment l'interrompre pour créer plusieurs blocs au fond de couleurs différentes.
Revenir en haut Aller en bas
A lancé un gemini incantato sur ses messagesMessages : 6617
Date d'inscription : 23/05/2011
Age : 24
Localisation : Anywhere, everywhere ...

Feuille de personnage
Classe: Septième année
Humeur: AFK from IRL
Je suis...: Contre la censure !
avatar
Elizabeth McAllister
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Sam 4 Aoû - 13:13
Revenir en haut Aller en bas

<*/div> pour fermer la balise, et tu en rouvres une autre avec une couleur différente pour commencer un autre fond ^^
Revenir en haut Aller en bas
http://uzem-n-proud.tumblr.com
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Sam 4 Aoû - 13:43
Revenir en haut Aller en bas

Ah ben c'est ce que j'avais essayé mais sans résultat. Faut dire que j'ai un Div pour le "justify" du texte déjà et quand y'en a deux différents, je ne sais pas trop comment les ouvrir et les fermer à ma guise sans que l'un des deux disparaisse.

(édit) Siii ! cheers ça maaarchhe ! merci Smile Smile Smile
Revenir en haut Aller en bas
A lancé un gemini incantato sur ses messagesMessages : 6617
Date d'inscription : 23/05/2011
Age : 24
Localisation : Anywhere, everywhere ...

Feuille de personnage
Classe: Septième année
Humeur: AFK from IRL
Je suis...: Contre la censure !
avatar
Elizabeth McAllister
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Sam 4 Aoû - 14:55
Revenir en haut Aller en bas

Il faut autant de balises de fermeture qu'il y en a d'ouverture Wink pour chaque div ouvert, il faut /div ^^

Le mieux, si ce que tu veux justifier est dans ton fond coloré, c'est de mettre le "text-align:justify" dans le div avec "background-color". Ca réduit le nombre de balise, ce qui est toujours plus plaisant quand on veut ensuite modifier ^^
Revenir en haut Aller en bas
http://uzem-n-proud.tumblr.com
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Sam 4 Aoû - 15:30
Revenir en haut Aller en bas

Oui c'est compliqué. Là j'arrive à changer la couleur de background mais pas à l'interrompre pour quelques lignes qu'on voit le fond d'origine entre deux "div" de couleur.

Sinon, je trouve pas non plus comment changer la police. je suppose que c'est quelque chose comme <*font style="nom de la police"> ?
Revenir en haut Aller en bas
A lancé un gemini incantato sur ses messagesMessages : 6617
Date d'inscription : 23/05/2011
Age : 24
Localisation : Anywhere, everywhere ...

Feuille de personnage
Classe: Septième année
Humeur: AFK from IRL
Je suis...: Contre la censure !
avatar
Elizabeth McAllister
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Sam 4 Aoû - 15:57
Revenir en haut Aller en bas

En gros, il faut que le texte sur fond coloré soit entre les balises "background-color", ensuite tu marques ton texte sur fond neutre et ensuite tu rouvres une balise. Exemple :

<*div style="background-color:#000000">Bla bla bla bla
bla bla bla
bla bla bla
bla bla bla<*/div>

Bla bla bla
blaaaaaaaaaaaaaaaaaa

<*div style="background-color:#000000">Bla bla bla bla
bla bla bla
bla bla bla
bla bla bla<*/div>

Ce qui, en vrai bon code donne

Bla bla bla bla
bla bla bla
bla bla bla
bla bla bla


Bla bla bla
blaaaaaaaaaaaaaaaaaa

Bla bla bla bla
bla bla bla
bla bla bla
bla bla bla


Pour la police, oui ! C'est tout à fait ça ^^ Le nom de la police doit être marqué avec une majuscule et EXACTEMENT le bon nom, sinon ça marche pas. De plus, il faut que la police soit acceptée par les feuilles internet, ce qui n'est pas le cas de tous ... Enfin je crois. De toute façon, si tu es sûre de ton écriture et que la balises est bonne, mais que ça marche pas quand même, c'est que c'est pas reconnu, tout simplement =/
Revenir en haut Aller en bas
http://uzem-n-proud.tumblr.com
Invité
Invité
MessageSujet: Re: Bases HTML pour vos fiches personnages !!! Sam 4 Aoû - 16:03
Revenir en haut Aller en bas

tiens c'est curieux quand je mets les <*/div> (sans le *) ça ne stoppe pas le fons coloré juqu'au prochaint div ouvert. Je vais rééssayer en vidant le cache. Merci ! Smile

(édit) : J'ai trouvé le souci !!! Il fait mettre autant de /div à la suite qu'on à de Div à interrompre. J'en ai mis un pour le lettrage justifié, un autre pour le BG, et un 3ème par précaution, et cette fois ça a marché, j'ai bien une interruption de la couleur du BG.

Je croyait qu'un seul /div arrêtterait tous les div ouvert au dessus. Mais non.


Dernière édition par Svétlana Novgorod le Sam 4 Aoû - 16:27, édité 1 fois
Revenir en haut Aller en bas
Contenu sponsorisé
MessageSujet: Re: Bases HTML pour vos fiches personnages !!!
Revenir en haut Aller en bas

Revenir en haut Aller en bas

Bases HTML pour vos fiches personnages !!!

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 2Aller à la page : 1, 2  Suivant

Sujets similaires

-
» Bases HTML pour vos fiches personnages !!!
» pour les rp
» Rp - Fiche de présentation
» Codes en libre service ✖ aka J'ai que ça à faire [FERMÉ]
» Signature codée, bases du code HTML, pour ceux qui se lassent du BB code.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Durmstrang Institute :: Quand on arrive en ville... :: Aide Personnage-