AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Nike : Jusqu’à 50% sur les articles de fin de saison
Voir le deal

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

    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Sam 1 Mar 2014 - 21:08

    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!




    Neytiri-Navi
    Neytiri-Navi
    FémininAge : 34Messages : 31

    Mer 7 Mai 2014 - 14:01

    Très bon TP, j'ai tout compris !



    Partie 1 - Etape 1 : TP  - création d'une entête de RP simple Mj1t92
    Satsuki-ss
    Satsuki-ss
    MasculinAge : 36Messages : 25

    Mar 13 Mai 2014 - 13:48

    Merci  Very Happy super ton tuto. je ne comprend pas ce display: block, c'est pour faire un bloc ?
    Satsuki-ss
    Satsuki-ss
    MasculinAge : 36Messages : 25

    Mar 13 Mai 2014 - 14:36

    scratch Comme ça ? Si je veux mettre le texte le plus à droite, comment fait-on ? s'il te plaît.

    2nd loveOnce upon a lie
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mar 13 Mai 2014 - 18:16

    Le display: block te permet de passer ton span d'une 'ligne' à un 'bloc', ça te permet de faire plus de chose dans ta balise. Et pour centrer ton texte il te suffit de remplacer le text-align:center par text-align:right ainsi il sera aligné à droite.

    Satsuki-ss
    Satsuki-ss
    MasculinAge : 36Messages : 25

    Mer 14 Mai 2014 - 17:56

    Merci pour ton explication. J'ai compris ça, je pense là.  Very Happy Est-ce que si on mettai la balise "hr" ça pourrait faire la même présentation  Question 
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 14 Mai 2014 - 23:11

    Je n'ai jamais vu/utilisé cette balise, et j'aurais tendance à te dire qu'utiliser le css c'est "mieux" pour la mise en forme. Néanmoins, je ne peux pas t'affirmer ou t'infirmer sur la présentation que fournirait le < hr >.

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 15 Mai 2014 - 8:40

    "hr" sert apparemment pour les séparations. On peut lui mettre la propriété "clear" d'ailleurs, plus logiquement que sur une div apparemment. Donc oui je pense que techniquement on aurait pu utiliser "hr", mais j'aime bien le "span" perso, c'est simple, classique, malléable... x)



    sign
    Angie Harkness
    Angie Harkness
    FémininAge : 40Messages : 725

    Mer 4 Juin 2014 - 19:08

    et bien merci Narja pour ce petit TP je sait faire un jolie titre en codé maintenant XD
    CactusBarbu
    CactusBarbu
    FémininAge : 31Messages : 11

    Sam 7 Juin 2014 - 17:53

    Le monde s'éclaire enfin *_* merci pour ce super TP auquel j'ai tout compris aussi (pour une fois)
    Nanou0001
    Nanou0001
    FémininAge : 39Messages : 50

    Lun 16 Juin 2014 - 12:36

    Merci beaucoup pour cette mise en pratique ton tuto et très clair Very Happy
    Valinwë
    Valinwë
    FémininAge : 32Messages : 120

    Jeu 19 Juin 2014 - 23:31

    J'ai tester et voilà le résultat. En tous cas, je tiens à remercier les codeurs qui travail dure pour nous aider à apprendre et se dépatouiller.

    Mon Gros Titre
    et là citation qui va bien en petit


    encore merci
    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Mer 25 Juin 2014 - 17:06

    Hey =) sympa le résultat ^^ je suis contente que ça te serve =)




    Glow
    Glow
    FémininAge : 24Messages : 94

    Mer 25 Juin 2014 - 17:31

    Merci beaucoup pour ce tutoriel, c'est génial (:
    Syel
    Syel
    FémininAge : 26Messages : 773

    Mer 25 Juin 2014 - 18:48

    Coucou ! Franchement super TP, c'est la première fois que je réussi à coder quelque chose  ham7 



    Partie 1 - Etape 1 : TP  - création d'une entête de RP simple 710946signat12
    Ayameko
    Ayameko
    FémininAge : 46Messages : 36

    Lun 28 Juil 2014 - 21:25

    Merci infiniment pour cet excellent tutoriel : une très bonne introduction au codage !
    Wysteria
    Wysteria
    FémininAge : 26Messages : 13

    Ven 19 Sep 2014 - 19:14

    Titre
    Et le sous-titre


    Merci pour ce superbe TP, mon tout premier "vrai" codage xD
    Ça donne envie de continuer, encore merci ^-^ !!
    Angy38
    Angy38
    FémininAge : 53Messages : 233

    Dim 21 Sep 2014 - 19:38

    Mon premier codage grâce à toi !

    Caem Ignatus O'Learyton addiction, babe !Miss Emi



    Partie 1 - Etape 1 : TP  - création d'une entête de RP simple Jvie
    Ikigami
    Ikigami
    FémininAge : 35Messages : 37

    Lun 29 Sep 2014 - 13:28

    Premier résultat en codage ! Merci pour ce super TP... j'ai tout compris, et on se rend compte que les possibilités sont vraiment énormes. Je suis vraiment ravie :love:
    Celte
    Celte
    MasculinAge : 34Messages : 63

    Sam 4 Oct 2014 - 10:59

    Merci pour ce TP vraiment bien expliqué et dans la suite de la partie 1. Un rappel nécessaire surtout sur les blocs. Et le must dans tout ça c'est que : CA FONCTIONNE Very Happy



    Partie 1 - Etape 1 : TP  - création d'une entête de RP simple 140918084111233846
    Hopli
    Hopli
    FémininAge : 35Messages : 2

    Dim 5 Oct 2014 - 21:06

    Merci pour ces TPs ! C'est super bien expliqué et qu'est-ce que ça fait plaisir de réussir des trucs quand on est novice en codage Very Happy
    Nemesyss
    Nemesyss
    FémininAge : 33Messages : 31

    Ven 7 Nov 2014 - 18:12

    Merci pour ce tuto. J'ai tout compris ^^
    Sakuya-chan
    Sakuya-chan
    FémininAge : 24Messages : 5

    Ven 7 Nov 2014 - 23:50

    Merci pour ce TP! En plus c'est vraiment joli **
    Sinon, mon forum ne prend pas les "-" devant mes nombres (ex: pour le padding). Est-ce que parce qu'il faut le faire avec une touche spéciale (j'utilise le tiret de la touche du 6) ou parce qu'il faut (encore x) activer quelque chose? o:
    avatar
    Daryel
    FémininAge : 37Messages : 358

    Mer 19 Nov 2014 - 15:42

    Hello,

    je ne sais pas si j'ai le droit de poster ici mais après lecture, je dois avouer que la chose ma parait tout de suite bien plus compréhensible malgré mon inénarrable nullité en la matière !
    Un grand merci pour ce tuto donc, il est vraiment clair et bien expliqué :)
    Athos
    Athos
    FémininAge : 28Messages : 49

    Ven 19 Déc 2014 - 0:13

    C'est super merci beaucoup pour ce tp ! (J'peux enfin apprendre à coder :hug: )

    Par contre j'ai une question. Est-ce qu'on peut modifier la hauteur d'un surlignement ? J'ai essayé en transformant le bottom en top ou même en le gardant, mais je n'y arrive pas. Autant j'arrive sans soucis à l'éloigner du texte, autant je n'arrive pas à le rapprocher comme l'exemple le fait avec le soulignement. Donc je voulais savoir si c'était possible, ou si pas du tout. :)


    Le Roi et la Reine ne savent pas
    ce que l'on dit tout bas...

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 21:19