Flamiou
Ose à peine montrer le bout de son nez
Messages : 26
Puf : Marsun
 |  Sujet: Faire un beau titre Mar 22 Mar - 17:01 | |
| Faire un beau titre Qui n'a jamais tenté de faire des titres originaux ? Qui n'en n'a jamais eu marre de ces balises classiques de Forumactif : grand, gras, italique... Je vous propose de voir ensemble quelques trucs pour embellir vos textes.
Tout d'abord, il faut savoir que nous avons 2 méthodes. La première uniquement composée de HTML, la deuxième utilise le CSS. Allons-y !
1ere méthode : HTML
Pour ici, nous allons utiliser les "div". Cette balise permet d'appliquer des propriétés à un bloc, à un ensemble de mots. Il faut savoir que tout code HTML commence par < et se termine par >. Plus précisément pour les balises doubles (une d'ouverture, une de fermeture) cela s'écrit comme ceci :
- Code:
-
<balise>texte</balise>
Pour créer un titre sympa, il vous suffit donc d'utiliser une div et d'appliquer les propriétés que vous voulez ! Oui mais comment. Comme ceci :
- Code:
-
<div style="propriété: valeur; propriété: valeur;">Texte ici</div>
Oui mais quelles propriétés mettre et quelles valeurs ?
Ca je ne pourrais jamais répondre entièrement car il existe quantité de possibilité que je ne connais pas ! Cependant en voici quelques propriétés :
- font-size : permet de modifier la taille du texte. Exprimé plus souvent en pixels (ex : 25px)
- font-family : permet de définir la police (ex : georgia, arial...)
- text-align : permet de positionner le texte (ex : left, center ou right)
- font-variant : permet de mettre le texte en petite capitale. Dans ce cas il faut mettre font-variant: small-caps;
- letter-spacing : permet de gérer l'espacement des caractères, entre chaque lettre. Exprimé là aussi en px (ex : 3px)
- color : juste la couleur du texte. Dans ce cas il faut soit indiqué le code de la couleur #...... soit mettre son nom en anglais : black, white, red...
- width : largeur de quelque chose. Exprimé soit en % de la page soit en pixels (ex : 60%, 400px)
- background-color : le fond de votre bloc. Là aussi soit avec le code de la couleur soit avec son nom en anglais
- padding : permet d'indiquer les marges intérieures au bloc, pour éviter que le texte ne soit collé aux bords. Exprimé en pixels aussi.
Maintenant, voici le code entier de mon titre dans le cadre vert :
- Code:
-
<div style="background-color: #30BD1B; font-size: 25px; font-family: georgia; font-variant: small-caps; letter-spacing: 4px; text-shadow: 2px 2px 2px white; color: black; text-align: center; width: 70%; height: 30px; padding-top: 6px;">Faire un beau titre</div> Détaillons tout ça... Déjà on voit bien la balise ouverture div. Puis le style commence. J'ai mis le fond du bloc de la couleur : #30BD1B. Ensuite j'ai mis la police en taille 25 pixels. J'ai poursuivi en choisissant georgia comme police d'écriture. Puis j'ai mis le tout en petites majuscules avant d'appliquer à mon titre un espacement de caractères de 4 pixels. text-shadow correspond à l'ombre blanche autour de mon texte. Comme vous le voyez il y a 3 valeur 2px. Ensuite, j'ai centré le texte. Width correspond à la largeur de mon encadré vert. Si je ne l'avais pas mis, il ferait toute la page. Height, c'est la hauteur du bloc. Enfin padding (marges intérieures) a été appliqué uniquement à la marge intérieure du haut.
2e méthode : CSS
Ne vous en faites pas, on a vu le plus dur ^^ Pour cette méthode, c'est encore plus simple ! Il suffit d'utiliser une class. Ce petit attribut renvoie au CSS. Cela s'écrit comme ça :
- Code:
-
<div class="nom">Texte</div> Pour que cela fonctionne, il va falloir vous rendre dans la feuille de style de votre forum ! Pour ça, on va dans le panneau d'admin puis Affichage => Couleurs et là il y a un onglet Feuille de style. Pour entrer les propriétés de votre class cela se présente comme ceci :
- Code:
-
.nom {
propriété: valeur;
propriété: valeur; }
Attention le nom doit être exactement le même que dans votre code HTML. Exemple si vous mettez div class=titre dans votre CSS vous devrez impérativement mettre .titre
Et voilà, ça marche tout seul ^^
Si vous avez des questions ou si je n'ai pas été claire, n'hésitez pas à me le dire. Ceci est mon premier tutoriel ^^
Et maintenant, à vous d'essayer !
© Marsun - ne pas copier sans autorisation
Dernière édition par Flamiou le Mar 22 Mar - 18:07, édité 1 fois |
|
Efiàltis
Membre Très Important du forum
Messages : 631
Age : 26
Puf : Efiàltis
Professeur : Xiumi
| | Sujet: Re: Faire un beau titre Mar 22 Mar - 17:15 | |
| Merci beaucoup pour ce tuto !
Et j'ai une quetion, la police, il faut l'avoir dans installée dans son ordi pour qu'elle aparaisse ? Et si oui, est ce que ceux qui ne l'ont pas peuvent la voir ? |
|
Flamiou
Ose à peine montrer le bout de son nez
Messages : 26
Puf : Marsun
| | Sujet: Re: Faire un beau titre Mar 22 Mar - 17:51 | |
| Très bonne question, je me suis posée la même question l'autre jour. Mais je pense que si tu as une police mais qu'un autre membre ne l'a pas, il ne la verra pas ^^
*vient de me rendre compte que j'ai oublie ma 2e méthode ! J'édite ça ce soir en mettant la 2e* |
|
_Louzii
Vétéran du forum
Messages : 1161
Puf : By Loulou ou _Louzii
Professeur : Xiumi
| |
Contenu sponsorisé
| | Sujet: Re: Faire un beau titre | |
| |
|
