Aide au HTML - Libre Service et Petit Cours

HTML
Cours et Libre Service

Bonjour à tous et à toutes.

J'avais proposé ce sujet, et bien le voici, le voilà, enfin le début uniquement, dans ce sujet, je vais proposer des codes en libre service, de petites explications simples et autres choses, étant une novice, je ne sais pas tout sur l'HTML ou même le CSS, donc je peux me tromper sur certains points (ça ne fera que m'aider à progresser) et je peux réaliser des commandes simples à un peu plus compliqués (je préviens d'avance si jamais quelqu'un souhaite un PA en onglet pour son forum, je peux le faire mais vu qu'il me faut 2-3 jours minimum pour les structures, je ne pourrais le faire que lorsque je n'aurais plus aucun travail, enfin bref...)

Alors alors, je pense que tout le monde connais les bases du BBCode, pour ceux à qui cela ne dit rien, je vous invite à lire le 'Guide du BBCode'

Enfin, je vais d'abord fournir quelques codes de quelques lignes pouvant être utiles et utilisables dans les signatures, posts ou PA

• Texte avec un Halo Lumineux •

Votre Texte

Code:: <div style="text-shadow: 0px 0px 4px blue;">Votre Texte </div>

Pour changer la couleur, il vous suffit de changer 'blue' par un code couleur. ( voir palette couleur )
Pour changer la taille du halo lumineux, changer le '4' du '4px' par un autre chiffre.

• Texte avec une ombre •

Votre Texte

Code:: <div style="text-shadow: 3px 3px 4px black;">Votre Texte </div>

Pour changer la couleur, il vous suffit de changer 'black' par un code couleur.
Les '3px' et '4px' servent à 'orienter l'ombre.

• Texte avec espacement •

VOTRE TEXTE

Code:: <div style="letter-spacing:4px;">VOTRE TEXTE</div>

Pour changer l'espacement des lettres, changez le '4px'.

--

Pour le moment, c'est tout vu que je dois finir un autre code plus complexe, je pense que beaucoup de gens connaissent ces codes, mais cela sert toujours, de plus, je préfère prendre mon temps et détailler ce que l'on peut changer (même si cela est répétitif) pour ceux qui n'y ont vraiment jamais touché, en tout cas, j'attaquerais les cadres, texte superposé, scrollbar, menu déroulant, tableaux dès que j'aurais fini mon code et mon petit travail, si vous avez des questions ou déjà quelques petites demandes simples, n'hésitez pas =3

Merci je viens d'apprendre un truc *w*

On peux mettre des codes? Bon bah:

Code:

<fieldset>exemple</fieldset>

exemple

Si vous voulez mettre quelque chose en haut il faut rajouter "legend", comme ça:

Code:

<fieldset><legend>Titre</legend>exemple</fieldset>

Titreexemple

Vous pouvez aussi mettre une image à la plage de "Titre", il suffit juste de mettre les balises images[img][/img ]

Et vus que je vais dormir[OSEF] j'en mets d'autre demain~

Je te remercie,grâce à toi je pourrai embellir mon texte.

Merci vous deux J'adore c'est très pratique ^^

Je poste là étant occupée, ce code peu être utilisé dans un code HTML, j'éditerais quand j'aurais plus le temps pour le rajouter à mon premier message.

• Changer la hauteur d'un tableau •

height est utilisé pour la hauteur d'un tableau (ou autre)
Exemple avec un tableau de 200px de hauteur :

exemple

Code:: <table height="200" border="1">
<td>exemple</td>
</tr>
</table>

• Changer la largeur d'un tableau •

Cette fois, c'est width qui est utilisé.

exemple

Code:: <table width="200" border="1">
<td>exemple</td>
</tr>
</table>[/center]

Invité

On peut aussi utiliser les codes de base:

exemple

Code:

<b> exemple </b>

exemple

Code:

<i> exemple </i>

exemple

Code:

<u> exemple </u>

C'est vraiment de base~

Tu as fait une erreur dans la 2e balise du premier code, c'est

Code:: </b>

(je pense que c'est une erreur d'inattention)

avec les < et >, c'est du HTML, mais c'est pareil avec les crochés du BBCode =3

Invité

Mon clavier à mangé la lettre -0-"
J'ai corrigé l'erreur xD

Age : 28 Messages : 172 Arrivé(e) sur MMD le : 25/07/2011

Merci infiniment pour ce tuto je cherchais justement à faire ça pour un forum dont je suis chargée du "design".
EDIT: si vous avez d'autres codes ou un site regroupant des codes dans ce genre ce serait gentil de partager ^^' j'arrive pas à différencier le CSS et le reste alors je suis un peu perdue...

Partie 1

Ce tuto vas vous servir à apprendre à faire une carte MAP. Un exemple de carte MAP >CLIQUE<
Bon première chose tu fais ton image qui vas te servir de base, ok? Après ça on passe à la partie 2! =D

Partie 2

Bon, t'as fais ton image, c'est bon t'es content du résultat? Alors passons à la 2° partie! =D
Ouvre ton bloc note et colle ça au début de ton code:

Code:

<img src="Lien de ton image" usemap="#acceuil" width="Largeur" height="Hauteur">

Bon, tu sais lire normalement donc c'est bon t'as compris quoi mettre ou? Alors on continue!

Partie 1

Passons à la suite du code, la voilà:

Code:

<map name="acceuil">
<area shape="rect" coords="X1,Y1,X2,Y2" title="Description du lien" href="Mets ton lien ici!">

J'imagine déjà ta tête avec les X et Y. C'est tout simple, tu as besoin de ton logiciel de graphisme! Encadre la partie 1° partie que tu veux sélectionner. Normalement en bas apparaisse les points sélectionné.
Au pif ça vous fais: 496,485 ==>811,295
Bon je sais pas si ces chiffres sont possibles ou pas mais on s'en fout!
Là il faut faire comme ça: 1°chiffre X1, 2° Y1, 3° X2, 4° Y2.

Maintenant vous n'avez qu'à copier ça et changer pour chaque zones.:

Code:

<area shape="rect" coords="X1,Y1,X2,Y2" title="Description du lien" href="Mets ton lien ici!">

Partie 3

Pour finir votre code finissez par

Code:

</map>

Partie 4

Voici le code complet:

Code:

<img src="Lien de ton image" usemap="#acceuil" width="Largeur" height="Hauteur">
<map name="acceuil">
<area shape="rect" coords="X1,Y1,X2,Y2" title="Description du lien" href="Mets ton lien ici!">

</map>

Des questions?

Prochain tuto -si j'ai pas la flemme- faire une signa comme la mienne-si j'ai la flemme je met juste mon code en libre service-

Invité

Merci beaucoup Silia chérie ♥
C'est vachement simple en fait O_O

De rien~ ♪
Simple, mais j'ai quand même bien galéré avant de comprendre =/

Invité

Euh en fait c'est mon cas aussi ._.
Heureusement que tu m'aide sur msn!

Je ferais une image pour mieux expliquer =)

Oui j'ai un peu compris, mais avec des images c'est encore mieux ! Merciiii silia pour ce tuto !!!

De rien ^^

Oh c'est super pratique tout ces exemples de codes *-*

Personellement je vais sur le site Candids ( http://mycandids.tk/ ) Il y a pas mal de codes, et c'est vraiment magnifique pour faire des présentations (en particulier sur les forum de RPG) ._.

J'y vais souvent aussi, quand j'ai la flemme de coder moi même[et parfois je pique des base de code /POUTRE/]

XD moi aussi, mais faut pas oublier de créditer quand même =3='

Moi je prend que certains bout et j’enlève tout le reste. Mais je crédite pas sauf quand je garde le code entier.

Merci Silia =3

De mon côté, étant encore dans des codes, je n'ai pas trop le temps, donc encore une petite astuce de tableau toute simple et comment créer des infobulles :

1. Infobulles

Pour créer les infobulles, c'est un peu plus 'compliqué' vu qu'il faut en plus toucher le CSS (Panneau d'Administration > Affichage > Couleurs > Feuille de Style CSS) et rentrer ce code :

Code:: .infobulle{
position: relative;
z-index: 0;}

.infobulle:hover{
background-color: transparent;
z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{
border: 2px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

Et ce code HTML dans votre message ou PA

Code:: <div class="infobulle"><img src="lien image ou apparait l'infobulle"><br /><span>Contenu de la bulle</span></div>

Pour aligner correctement les infobulles, placez les dans des tableaux.

2. Les encadrements

Il y a deux styles d'encadrements, solid qui est utilisé pour les encadrement d'un seul trait et dashed qui est utilisé pour les encadrements en pointillés.

Vous pourrez changer sois dans votre message, sois dans le CSS pour certains codes (comme les infobulles) et dans les templates (mais je ne veux pas dire de bêtises, dans je ne suis pas sûre, j'ai un doute)

--

Bon, ce sont encore deux petits trucs, mais ils peuvent être utiles =3

Merci c'est très pratique ^^

Tridou t'es géniale merci ^^

Invité

Silia touche pas ma poutre ou je prend tes bus!

Les infos bulles ont l'air plus complexes @w@

Oh merci Koop *.* Enfin... derien .W.' Pour une fois que j'ai l'air géniale 8D