Laisse ton imagination déborder

Forum de graphisme ET de flood
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Faire un beau titre

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Flamiou

Ose à peine montrer le bout de son nez


Messages : 26
Puf : Marsun

MessageSujet: 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
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Efiàltis

Membre Très Important du forum


Féminin
Messages : 631
Age : 20
Puf : Efiàltis
Professeur : Xiumi

MessageSujet: 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 ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://warriorslgdc.forumactif.fr/
avatar
Flamiou

Ose à peine montrer le bout de son nez


Messages : 26
Puf : Marsun

MessageSujet: 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*
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
_Louzii

Vétéran du forum


Féminin
Messages : 1161
Puf : By Loulou ou _Louzii
Professeur : Xiumi

MessageSujet: Re: Faire un beau titre   Mer 23 Mar - 13:01

    Merci ! C'est super ! ♥️

    J'espère pouvoir l'appliquer sur mon forum Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

Contenu sponsorisé





MessageSujet: Re: Faire un beau titre   

Revenir en haut Aller en bas
 

Faire un beau titre

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Laisse ton imagination déborder :: Codes hlm :: Tutoriaux-
Sauter vers: