Bases HTML pour vos fiches personnages !!!

Messages : 4882 Date d'inscription : 06/02/2011 Age : 31

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

Messages : 4882 Date d'inscription : 06/02/2011 Age : 31

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 :

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

Messages : 12843 Date d'inscription : 06/02/2011

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

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">

Il manque le plus important, pour justifier le texte, sinon, c'est laid !!!
Ou alors j'ai mal lu ?

Messages : 4882 Date d'inscription : 06/02/2011 Age : 31

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.

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".

Haaaaaaaan le centré justifié **

Bon, ça bug sous IE, mais ... ça marche sous firefox ! J'aime **

Merci je trouve ça chouette

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...

Messages : 7335 Date d'inscription : 16/01/2012 Age : 35

&- 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.
Bases HTML pour vos fiches personnages !!! Tuto_b10

Bases HTML pour vos fiches personnages !!! Tuto_b10

Pour mettre l'image visible sur le forum:

- Ou tu utilise les balises Bases HTML pour vos fiches personnages !!! LIEN DE L'IMAGE

- 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

Ah merci, ça m'évitera de passer par un hébergeur externe pour les prochaines fois^^

Messages : 7335 Date d'inscription : 16/01/2012 Age : 35

De rien

Merci ^^

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.

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 ^^

Messages : 1031 Date d'inscription : 08/03/2011

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 ! è_é

Ok merci, je m'en vais jouer au apprentis sorciers avec "style div" merci.

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.

<*/div> pour fermer la balise, et tu en rouvres une autre avec une couleur différente pour commencer un autre fond ^^

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

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 ^^

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"> ?

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 =/

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.

Sujet: Re: Bases HTML pour vos fiches personnages !!!

» [été 2011] Les gagnants du concours 'Une Légende pour le Manoir de Novaya' pour la gazette Le Veilleur du Nord
» [Noël 2012] Les gagnants du concours 'Une Légende pour Noël' pour la gazette Le Veilleur du Nord
» Pour une desc toute choupie!
» Astuce pour les nouveaux PJs !
» Quizz pour Potterfan confirmé

Bases HTML pour vos fiches personnages !!!

Bases HTML pour vos fiches personnages !!!

Sujets similaires

Sujets similaires