AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Partie 1 - Etape 1 : TP - création d'une entête de RP simple

    Partagez
    Ehawee
    FémininAge : 24Messages : 4512

    le Sam 1 Mar 2014 - 21:08

    Rappel du premier message :

    TP - création d'une entête de RP simple.



    Vous voici au premier TP du cursus codage, c'est donc que vous avez brillamment (j'insiste) survécu à la première étape. Vous pourriez vous demander "ouais, c'est bien beau tous ces "span", là, mais bon... concrètement, je ne vois pas trop ce que je peux faire UNIQUEMENT avec ces "span", parce que les fiches que je vois sur Never Utopia ou ailleurs, bah, y'a pas que du "span", y'a même l'air d'avoir beaucoup de balises "div". Eh bien voyons donc ce qu'on peut faire avec cette étape de cursus....

    Commençons par le commencement "que faire?" Eh bien comme le titre nous l'indique nous allons faire quelques variations sur une entête de RP. Plutôt que de vous proposer une seule entête de RP, je vais plutôt vous proposer des structures que vous serez en mesure de customiser vous-même une fois que vous aurez saisi le principe.

    sommaire:

    C'est parti donc pour la première!

    Simple entête "titre du rp"



    Nous allons apprendre à faire ceci :
    Votre magnifique titre

    le texte, police, couleur et effets.


    Commençons peu, commençons bien, commençons par le début, à savoir les balises et le texte. C'est un titre, il est donc normal de le vouloir centré, et mis en forme, après tout, c'est bien pour cela que vous consultez le site, pas vrai? Du coup, on va commencer par encadrer un texte de "center" de façon à centrer le texte, et de "span" qui nous permettra une mise en forme.

    Votre magnifique titre

    Code:
    <center><span style="">Votre magnifique titre</span></center>

    Cela étant posé, que nous reste-t-il à faire? eh bien remplir l'emplacement du style, bien entendu! Commençons par le commencement, police et couleur, afin de donner un peu de cachet à tout ceci. Quand aux couleurs, on ne conseillera jamais assez le site code couleur ou bien la bonne vieille technique qui consiste à faire une capture d'écran de votre fenêtre internet, et d'aller chercher une couleur avec la pipette sur votre avatar, sur la bannière du forum pour harmoniser au maximum votre texte. Tiens, décidons arbitrairement d'une couleur et d'une police pour notre texte...

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; ">Votre magnifique titre</span></center>

    Mais quelle police puis-je utiliser?
    C'es une bonne question, quelle police utiliser pour ce "font-family", si vous vous hasardez à utiliser une jellyka castle queen par exemple, trouvable sur dafont, vous vous rendrez vite compte que... ça marche pas! Pourquoi? Tout simplement parce que, même si elles sont installées sur votre ordinateur, elles ne font pas partie des polices de base des autres ordinateurs. C'est un peu comme lorsque vous filez un ficher word écrit dans une police téléchargée sur le net à quelqu'un qui n'a pas cette police sur son ordinateur : la police est automatiquement remplacée par une autre, gérée cette fois par l'ordinateur. Alors comment faire pour avoir un titre un peu évolué, me demanderez-vous, quelles polices marchent?

    Les polices sont classées par familles. il y a les sans-serif les polices normal sans évasement, arial, helvetica, verdana, en sont les exemples les plus connus. Il y a ensuite les serifs polices standard toujours, avec évasement cette fois-ci. Citons les times new roman, palatino, et autre bookman. Bon, et c'est tout? Bien sur que non, il y a aussi les polices monospace où chaque caractère a la même largeur. L'exemple le plus frappant est sans doute courrier, ou courrier new. Quoi d'autre? Les polices cursive qui donnent l'impression d'une écriture manuscrite, le honni comic sans ms, florence, coronetscript ou même mistral, monotype corsiva et vivaldi en font partie. Et enfin les polices fantasy comme le impact, ou oldtown.

    Notez que les titres des catégories "sans-serif", "serif", "monospace", "cursive" et "fantasy" peuvent être utilisés comme police, précisément, si vous utilisez ces familles, elles afficheront la police par défaut de chaque catégorie, par exemple le courrier pour les "monospace".


    Voici donc que nous sommes OK pour la couleur et pour la police, mais on ne va pas laisser ça comme ça, pas vrai? Nous allons donc augmenter la taille de la police au moyen d'un "font-size" et d'une taille en pixels.

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px">Votre magnifique titre</span></center>

    ça, c'est fait, mais c'est toujours un peu simple, non? tiens, et si on faisait une petite ombre sur le texte?

    Réaliser une ombre sur un texte nécessite la propriété "text-shadow" qui signifie littéralement "ombre du texte", et qui se présente de la façon qui suit "text-shadow: décalageXpx décalageYpx Rayonpx #couleur" le décalage X définit le décalage horizontal de l'ombre mettez un nombre POSITIF pour un décalage vers la droite, et un nombre négatif pour un décalage vers la gauche. Le décalage Y définit ledécalage vertical de l'ombre, mettez un nombre positif pour un décalage vers le bas, et un nombre négatif pour un décalage vers le haut. Le rayon définit le degré de "flou" de l'ombre, 0 pixels pour une ombre nette, et un nombre supérieur pour une ombre floutée. La couleur... ma foi, c'est la couleur, je ne vais pas répéter le cursus sur ce point.

    Quelques exemples tout de même... j'utilise deux couleurs, un bleu #4B35CA, et du gris #808080.

    color: #4B35CA; text-shadow: 0px 0px 0px #808080

    color: #4B35CA; text-shadow: 1px 1px 0px #4B35CA

    color: #4B35CA; text-shadow: 0px 0px 2px #4B35CA

    color: #4B35CA; text-shadow: 100px 0px 0px #808080

    color: #4B35CA; text-shadow: -100px 0px 0px #808080


    Ainsi qu'on le remarque, tout est possible (comme toujours en codage) attention cependant à la lisibilité!

    Revenons-en donc à notre texte, et à la petite cuisine qu'on lui réserve...

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;">Votre magnifique titre</span></center>

    Tout cela est bien beau, mais peut-être voudriez-vous quelque chose d'un peu plus classouille? Tiens, et si on mettait la première lettre du titre dans un bleu-vert plus foncé? Comment faire? Bon, je vous laisse chercher, et je ne vous répond pas... comment? vous voulez savoir? Vous êtes surs? Vous voulez que je vous gâche la surprise de la découverte? Bon, allez, mais c'est bien parce que c'est vous! Nous allons tout simplement mettre un "span" dans le "span"... illustration!

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;"><span style="color: #338E75">V</span>otre magnifique titre</span></center>

    ainsi que vous le voyez, je n'ai modifié dans le deuxième "span" que la propriété de la couleur. Pourquoi? Tout simplement parce que la taille et l'ombre portée sont gérées par la première "span" et s'applique par défaut à son contenu. Inutile de tout modifier... Et tiens, pour la peine, je vais faire d'autres modifications sur cette initiale... Si je changeais la police et la taille aussi?


    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;"><span style="color: #338E75; font-family: monotype corsiva; font-size: 50px; font-style: italic">V</span>otre magnifique titre</span></center>

    Notez que la propriété "font-style" permet d'appliquer divers effets, notamment le "italic", c'est toujours bon à savoir!


    Soulignement du titre


    Et pour souligner l'effet dramatique de notre titre (sisi, l'effet dramatique, on y croit... vous là, au deuxième rang, je vois bien que vous n'y croyez pas!) on va... souligner notre titre! Le cap'taine vous a expliqué la méthode, appliquer une border-bottom pour faire l'effet de soulignement et un padding-bottom pour que le soulignement soit bien au dessous du texte, et non à cheval, c'est parti!
    HEP! attendez avant de vous précipiter, sur quel span allez vous appliquer cet effet? Sur le premier bien sur! sinon il n'y aurait que la première lettre qui serait soulignée! C'est bien, vous avez bien répondu, vous pouvez vous lancer!

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;border-bottom: 1px dotted #338E75; padding-bottom: 1px"><span style="color: #338E75; font-family: monotype corsiva; font-size: 50px; font-style: italic">V</span>otre magnifique titre</span></center>

    Moui, vous ne semblez pas convaincu... Comment? ce serait bien que le soulignement fasse toute la longueur de la page plutôt que cette seule ligne, et qu'il passe sous le texte? Aucun problème, regardez:

    Votre magnifique titre
    Code:
    <span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;border-bottom: 1px dotted #338E75; padding-bottom: -6px; display: block; text-align: center; "><span style="color: #338E75; font-family: monotype corsiva; font-size: 50px; font-style: italic">V</span>otre magnifique titre</span>

    Comment ai-je réussi ce tour de passe-passe, me demanderez-vous. Commençons par le plus simple à comprendre, le "padding-bottom" auquel j'ai mis une valeur négative pour faire "remonter" la bordure vers le texte.

    Non mais ça on avait compris, la vraie question, c'est comment as-tu fait pour que toute la largeur de page soit prise en compte? La réponse est simple, j'ai utilisé ce display: block. Cette magie du codage (sisi, on a dit magie) est rendue possible grâce à une catégorisation des balises. le "span" que l'on utilise traite les données par lignes, c'est à dire que si on met des span de différentes couleurs les uns à côté des autres, ils se suivront, tenez, voici un exemple de succession de "span" en somme on peut dire que les balises "span" s'utilisent comme des balises de bbcode, vous les glissez dans votre texte, paf, ça fait la mise en forme, la largeur de votre "balise" s'adapte donc automatiquement au contenu. MAIS si je vous dit que ces balises traitent les données en ligne c'est qu'il en existe des qui traitent les données en bloc...
    Ce qui veut dire qu'à chaque nouvelle balise
    Vous revenez automatiquement à la ligne
    Parce que les informations sont traitées en bloc qui se positionnent les uns en dessous des autres!

    Cependant, la propriété "display" permet de modifier cela. ainsi "display: inline" vous permet de transformer une balise de type "bloc" en type "ligne", alors qu'à l'inverse, le "display: block" vous permet de transformer une balise de type "ligne" (comme le span) en balise de type bloc... Et comme notre balise est devenue un bloc, eh bien elle fait toute la largeur de page, et comme elle fait toute la largeur de page, eh bien la "border-bottom" fait AUSSI toute la largeur de page, ce qui explique qu'on ait cet effet!


    En bref? display: block vous permet de faire une bordure de la largeur de votre page/zone de texte pour votre titre! (ouais, tout ça pour ça)


    Vous noterez dans le code précédent également que j'ai, à volonté, supprimé les balises "center" pour les remplacer par une propriété du premier span à savoir le "text-align: center". Cela est du au fait que le display que l'on a appliqué a transformé la balise span en bloc. Du coup, il n'y a plus besoin d'utiliser une balise extérieure pour centrer le bloc, il suffit d'utiliser une propriété pour centrer son contenu. Et afin d'être certaine que vous avez bien compris la subtilité...

    contenu

    Code:
    <center><span style="color: black; background-color: grey; font-weight: bold;">contenu</span></center>
    Le "center" centre la balise, et non son contenu, c'est donc l'ensemble de la balise span qui s'en retrouve modifiée.

    contenu
    Code:
    <span style="color: black; background-color: grey; font-weight: bold; display: block; text-align: center">contenu</span>
    ici, il n'y a que le contenu qui se retrouve modifié. le display: block permettant de transformer la balise ligne en balise bloc.

    Et voici donc qui clôt cette première partie. Vous êtes toujours motivés? Très bien, passons à la suite!

    Entête en titre + citation



    Et nous voici repartis dans le monde merveilleux des entêtes de RP, comme vous avez beaucoup révisés dans l'exercice ci-avant, nous allons désormais passer un peu plus rapidement sur la technique (les codes) et parler un peu plus d'esthétique, de couleurs, d'harmonies, bref, de trucs beaux! Et pour parler de trucs beaux, nous allons agencer un titre et un sous-titre. Si, comme ça, paf, à blanc, direct. Nous allons faire... ceci :

    Ceci est un titre
    et même pas peur, j'mets un sous-titre!


    le titre


    Nous voici donc partis pour de nouvelles aventures codesques, nous voulons faire un titre ET un sous-titre, pour cela, nous allons commencer par le commencement, à savoir le titre. Comme précédemment, nous allons commencer doucement la mise en forme par la couleur, la police et la taille...

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 40px">Ceci est un titre</span></center>

    Bon, ça prend forme, mais c'est pas encore tout à fait ça... Personnellement, je trouve que de l'italic, ça serait plus classe, et puis les lettres sont assez espacées, et puis un petit gras, ça ferait bien aussi... Alors? on teste?

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 40px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 0px #A86D53">Ceci est un titre</span></center>

    On a déjà vu le text-shadow je ne reviens donc pas dessus. Le font-weight correspond à l'épaisseur de la police, allant du très fin au très gras. Le font-style vous permet de faire l'italic bien que les balises
    Code:
    <i></i>
    vous le permettent également. Ces dernières s'emploient comme les balises correspondantes en BBcode.


    Ceci étant posé, nous pouvons donc passer à la suite. Comme vous aimez bien faire des initiales, vous allez à nouveau en mettre une. Alors? Heureux?

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 40px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B">C</span>eci est un titre</span></center>

    Bon, là, vous me dites "mouais, l'inversion des couleurs entre le texte et l'ombre, c'est pas mal, mais par contre, l'italic, c'est pas top sur l'initiale, et surtout, elle est trop petite par rapport au titre... Allez, zou, je vais vous expliquer comment contrer l'italique sur l'initiale!

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span></center></textarea>

    Eeeeh oui, il suffisait de supprimer le font-style: italic du premier span pour mettre des balises italique autour du reste du texte, ne prenant donc pas en compte le "C" que nous voulions exclure de l'italique.

    Passons à la suite, maintenant que nous avons cela, un sous titre!

    Le sous-titre!

    Vous l'attendiez, hein? (dites-moi "oui", ça me fera plaisir xD) Eh bien le voici, ce sous-titre. Nous allons donc l'ajouter à la suite, tout simplement, faire une nouvelle balise "span" juste avant la balise "center", Et là, c'est le drame!

    Ceci est un titreet même pas peur, j'mets un sous-titre!

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span><span style="">et même pas peur, j'mets un sous-titre!</span></center>

    Eeeeh oui, le "span" est une balise de type "ligne", il est donc normal que les deux textes se mettent à la suite. Comment faire pour faire un retour à la ligne? (non, pas la peine d'utiliser le retour à la ligne de votre clavier, ça sera pris en compte par un forum, mais pas par un site internet, alors autant apprendre directement à coder proprement, non? OUI! là, le p'tit gars au troisième rang a la réponse, on va utiliser une balise de retour à la ligne!

    Ceci est un titre
    et même pas peur, j'mets un sous-titre!

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span><br /><span style="">et même pas peur, j'mets un sous-titre!</span></center>

    Il suffit simplement d'intercaler une balise
    Code:
    <br />
    entre la clôture du "span" de titre, et l'ouverture de celui du sous-titre. Facile non?

    Eh bien, qu'attendons-nous? Une petite mise en forme s'impose pour le sous-titre. Gardons en tête qu'il vaut mieux qu'il soit discret, pas trop surchargé, et assorti au titre. Le tout est qu'il ne lui fasse pas d'ombre.

    Ceci est un titre
    et même pas peur, j'mets un sous-titre!

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span><br /><span style="color: grey; font-variant: small-caps; font-size: 10px; ">et même pas peur, j'mets un sous-titre!</span></center>

    Et... voici. Quoi? Vous vous attendiez à autre chose?

    Bah ouais, moi j'aimerai bien mettre des icônes pour les différents protagonistes, et puis des liens, et puis une mise en forme spéciale, et puis...
    tut, tut tut! une chose à la fois, petit panda!

    Entête avec sous-titre et images



    Nous voici à la dernière partie de ce TP (oui, déjà!) Il se fera lien entre la première et la seconde partie du cursus, un peu d'attention, donc. Nous allons réaliser ce qui suit :

     
    Titreun petit sous-titre?

    Les images


    Commençons directement par choisir deux icônes de taille 100*100 pixels. J'ai créé la mise en forme à partir de la même image, une texture de cette taille là, cependant, vous pouvez bien sur prendre n'importe quelle icône de votre choix. Nous allons donc les utiliser comme base de création. Pour cela, il suffit simplement d'utiliser la balise d'image:

     

    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center>

    On remarquera que j'ai appliqué trois espaces entre les deux images pour éviter qu'elles ne soient trop collées l'une avec l'autre. C'est un peu barbare, et une fois la prochaine leçon du cursus, vous ne ferez plus cela, mais en attendant, soyons barbare! La balise "center" permet de centrer tout ça joliment, en somme rien de très complexe sur cette partie là! Passons à la suite!

    Le titre



    A présent nous allons mettre en forme le titre. On va commencer par créer un nouveau span.

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="">Titre</span>

    Et le mettre en forme, police de caractère, couleur, taille, ombre sur le texte...

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036;">Titre</span>

    Je ne reviens pas sur le détail de la mise en forme, c'est une étape qui vous est connue si vous avez lu et appliqué les deux mises en formes précédentes.

    De la même façon, on va faire une lettrine, et créer donc un "span" encadrant notre première lettre.

     
    Titre

    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036;"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Ceci étant posé, on va créer, comme dans notre première mise en forme, un soulignement en pointillés, et centrer notre titre. les "text-align: center" et "display: block" sont vos amis!

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Mais, ça ne suffit pas, n'est-ce pas? Moi je voudrais bien que mes pointillés ne fassent pas toute la largeur de page, qu'ils soient plus hauts, et que le texte aussi soit plus haut. On va donc apprendre quelques petites choses. Votre "span" est désormais un bloc grâce au "display: block" on peut donc lui assigner une largeur et une hauteur. En guise de largeur, je vais lui mettre un pourcentage qui s'adaptera à la largeur de page. Je vais donc lui mettre un "width: 50%". C'est une propriété qui définit la largeur d'un bloc, celle-ci sera donc de 50% de la largeur totale de son contenant, ici, la zone de texte du forum.

    On obtient ceci :

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Petit problème, le bloc "titre" est positionné n'importe comment, il faudrait qu'il soit centré, sous les images, et aussi, comme nous le disions plus haut, un peu plus haut aussi, pour qu'il "empiète" sur les images. Pas de problème, nous allons utiliser d'autres marges.

    Vous avez vu dans ce TP le padding, qui sont des marges à l'intérieur du bloc, voici le temps des margin, qui sont des marges à l'extérieur du bloc (elles ne s'appliquent donc QUE sur les balises de type bloc! Pas la peine de les essayer sur un simple "span" sans "display: block" ça ne marchera pas) .

    Ces "margin" on va donc les appliquer à notre "span" de titre qui est devenu un bloc grâce au "display: block". (oui, il faut faire du codage pour lire des phrases surréalistes comme celle là!)

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Tout comme pour le padding, on peut influer soit sur les quatre marges extérieures (en utilisant "margin") soit sur une seule d'entre elles (margin-top, margin-bottom, margin-left, margin-right). Ici on a utilisé "margin-right: auto" et "margin-left: auto" pour centrer le bloc, et "margin-top: -15px" pour remonter le bloc vers les images.

    Et pour remonter le trait en pointillés? Eh bien on fait comme dans l'entête simple, on utilise le padding!

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px; padding-bottom: -25px; "><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Et voila qui clôt le gros morceau de notre entête de RP. Quoi faire à présent? Mais le sous-titre, bien sur ^^

    Le sous-titre



    Pas souci de lisibilité, restons simple en terme de police et d'effets. On va créer un nouveau "span" pour le sous-titre.

     
    Titreun petit sous-titre?
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px; padding-bottom: -25px; "><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span><span style=" ">un petit sous-titre?</span>

    A ce sous-titre, on va ajouter une mise en forme, couleur, décoration du texte...

     
    Titreun petit sous-titre?

    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px; padding-bottom: -25px; "><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span><span style="display: block; text-align: center; font-size: 11px; color: #E44573; font-family: times new roman; font-style: italic; ">un petit sous-titre?</span>

    le "display: block" couplé au "text-align: center" permet d'aligner le sous-titre avec le reste de l'entête, tandis que le reste des propriétés permet de mettre en forme le sous-titre de façon harmonieuse.

    Et voici qui clôt ce premier TP. J'espère m'être montrée suffisamment exhaustive et claire sans vous paumer en cours de route. N'hésitez pas à demander de l'aide si vous en ressentez le besoin, et à la revoyure, peut-être, au détour d'un autre TP ou d'une étape de cursus, qui sait! N'hésitez pas à vous entraîner, et à créer vos propres entêtes, c'est en forgeant qu'on devient forgeron!





    gif1gif2
    Eloolie
    FémininAge : 19Messages : 3

    le Ven 26 Déc 2014 - 18:15

    Génial, vraiment bien expliqué ! ^^
    Grapherleo
    MasculinAge : 22Messages : 13

    le Dim 4 Jan 2015 - 17:44

    Merci pour ce TP et toutes ces explications ! Very Happy
    wiise
    FémininAge : 23Messages : 36

    le Mar 24 Mar 2015 - 12:46

    Super ce tp ! Merci beaucoup !



    Pikabouh
    FémininAge : 15Messages : 115

    le Mar 19 Mai 2015 - 22:00

    Coucou ! ^-^
    Déjà merci pour le TP♥
    Ensuite j'ai réussi les deux premières parties du TP en revanche je n'arrive pas du tout le troisième. En fait je n'arrive pas à afficher les deux images du début ._.
    M'enfin bon ... Ça doit être la fatigue ^^'
    Bisous ♥
    A-Lice
    FémininAge : 22Messages : 4939

    le Mer 20 Mai 2015 - 10:43

    Hello Pika (:
    Si tu as un problème avec le TP ce n'est pas tellement ici que tu obtiendras de l'aide mais plutôt dans "Problème avec mon code" (:

    Chimik Girl
    FémininAge : 22Messages : 60

    le Dim 24 Mai 2015 - 17:45

    Super tuto/tp, c'est la première fois aussi que j'arrive à coder un truc.

    Titre du sujetpseudo & pseudo
    Yukimura Esuki
    MasculinAge : 20Messages : 106

    le Lun 25 Mai 2015 - 11:36

    *poste une réponse en retard* Je vous remercie pour ce tuto'. Facile à comprendre et avec quelques pointes d'humour. :)
    Elegna
    FémininAge : 21Messages : 16

    le Mar 14 Juil 2015 - 16:48

     
    Merci pour le TP!
    Par contre j'arrive pas a remonter les pointillés,
    même avec un padding.
    stubbornEmpire
    FémininAge : 16Messages : 38

    le Sam 18 Juil 2015 - 15:24

     

    TITRE Ceci est un sous titre

    Merci pour ce tuto ♥ Mais de même, je n'arrive pas à remonter mes pointillées ainsi que mon titre plus que ça. Au bout d'un moment, ça refuse de monter plus haut :c
    Shyonia
    FémininAge : 21Messages : 3

    le Ven 24 Juil 2015 - 4:21

    Waw très bien expliqué, j'adore Very Happy j'ai encore un peu de mal avec tout le vocabulaire (ca veut pas rester dans ma tête x) ) mais je pense pouvoir reproduire ce que j'ai envie de faire comme titre maintenant ^^

    Merci beaucoup Very Happy
    Jinny
    FémininAge : 32Messages : 253

    le Mer 2 Sep 2015 - 7:15

    C'est vraiment très bien expliqué.
    Le tout, c'est vraiment d'apprendre le vocabulaire lié au codage. Parce que ce n'est pas si difficile au final. :)
    J'me suis bien amusée faire des titres. Et je commence à bien comprendre les principes de bases du codage.
    Me restera à mettre en pratique plus souvent, histoire de ne pas oublier. ^^

    voici mes résultats :

    Le magnifique titre de mon épopée !



    Ceci est un titre !
    Et même pas peur, que j'te mets un sous-titre !




       
    Titre
    Un sous-titre


    Pour le dernier, avec les images, j'ai eu du mal à bien comprendre comment je pouvais coller le sous-titre... puis, j'ai finalement compris qu'il fallait absolument en faire un bloc et ajouter les margin right auto, left auto et bottom avec -16px pour enfin mieux coller le texte.

    Merci pour ces cours et ces TP qui sont vraiment superbes. ^^



    luc4s
    MasculinAge : 16Messages : 37

    le Dim 13 Sep 2015 - 20:36

    Merci pour le tuto ^^
    Invité

    le Lun 14 Sep 2015 - 20:33


    Yop,

    Bon bah, je me suis lancée xD
    Merci Ehawee pour le tutoriel :hug:


    Entête simple

    Il était une fois



    Entête + sous-titre

    Il était une fois
    Un chaton magique ♥



    Entête + sous-titre et images

     
    Il était une fois
    Un chaton magique ♥
    En ligne
    Cruelly
    FémininAge : 23Messages : 2418

    le Sam 19 Sep 2015 - 8:37

    Grace a ton cursus j'ai réaliser ceci ^^
    Le titre
    et même pas peur, j'mets un sous-titre!



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    Okhmhaka
    FémininAge : 31Messages : 31713

    le Sam 19 Sep 2015 - 14:52

    Pas mal du tout ! Si j'avais juste un conseil ça serait de faire attention aux ombres des textes, ça peut être super joli et apporter vraiment quelque chose à celui-ci...tout comme ça peut totalement gêner sa lecture. En plus c'est pas évident à gérer en cas de changement de couleur de fond, si c'est dans un message par exemple mais que les admins changent le thème et passent du foncé au clair ou inversement, on n'a pas du tout le même rendu^^



    elfyqchan
    FémininAge : 20Messages : 46

    le Sam 17 Oct 2015 - 21:15

    Merci pour ce tuto, tout est très bien expliqué !

    Voilà ce que ça donne pour moi, arrangé pour un rp à plusieurs.

    La Rencontre
     
    Feat.
    Double JeuLa Rencontre - Acte I
    Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
    ArronGot
    MasculinAge : 19Messages : 325

    le Mer 28 Oct 2015 - 20:23

    Merci pour ce TP Wink

    Voila ce que ça done pour moi :

    Tasse   Tasse
    tea time !
    prenez votre tasse



    Les images sont pas super mais je n'ai pas réussi à faire mieux que les redimensionner ... Le graphisme viendra plus tard XD

    ... Maintenant on redouble d'effort et on continue le cursus !

    ( Au fait ou est passé l'étape 5 du cursus  :euh: ?
    Invité

    le Ven 27 Nov 2015 - 8:15

    Merci pour votre générosité et cette partie 1-1 ! Wink
    Raeden Liddell
    MasculinAge : 24Messages : 177

    le Ven 18 Déc 2015 - 23:19

    Merci beaucoup pour ce tuto! Je l'ai suivi pas à pas et je suis contente du résultat. Une petite victoire, même si je suis sur que je devrai revenir plusieurs fois pour m'en souvenir
    Raeden Liddell
    MasculinAge : 24Messages : 177

    le Mer 30 Déc 2015 - 13:35

    Merci pour ce tuto
    Et voici ma création :

    La Famille Liddell
    Histoire et Legende
    Geekoupa
    MasculinAge : 29Messages : 20

    le Jeu 3 Mar 2016 - 15:41

    Merci pour ce cours et ce TP !
    Voici mon résultat (assez fier de moi xD)

    Ceci est un poulpequi ne sait pas nager

    Bon ok, c'pas une image de poulpe, m'enfin xD On a compris x)
    simonriou
    MasculinAge : 21Messages : 46

    le Dim 3 Avr 2016 - 16:50

    Merci pour ce TP ^^

    voici mon (humble) résultat


     
    Titreun petit sous-titre?
    Sideris
    FémininAge : 21Messages : 92

    le Ven 15 Avr 2016 - 17:52

    Bonjour,

    Voici ce que j'ai fais à partir de ton premier TP. Bon, ces titres ne sont d'aucune utilité mais je ne savais pas trop quoi faire, alors j'ai choisi de mettre mon pseudo et je ne me suis pas trop foulée pour les couleurs, ahah.

    En tout cas, j'ai pu "faire" mon tout premier code grâce à toi et je te remercie. Merci d'avoir pris le temps d'avoir écrit tant d'explications autant pour la théorie que pour la pratique.



    FuryOfLiving





    FuryOfLiving
    my thoughts are dangerous




     
    Mimbulus MimbletoniaThe world is full of magic things, patiently
    waiting for our senses to grow sharper
    MortimerFire
    FémininAge : 16Messages : 24

    le Mar 19 Avr 2016 - 22:41

    Merci beaucoup
    Encrine
    FémininAge : 18Messages : 42

    le Mer 20 Avr 2016 - 1:15

    Eh voici les miens ! J'ai pris les vrais titres de certains RP, parce que flemme d'inventer xD

    Sonate au Clair de Luneft. noa nishimura


    gif logan lerman
    An empty place without a spaceft. l. eve rosenbach
    Contenu sponsorisé

    Aujourd'hui à 11:09


      La date/heure actuelle est Mar 6 Déc 2016 - 11:09