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

Sam 1 Mar 2014 - 21:08

Fortuna

Age : 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>Votre magnifique titre</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>Votre magnifique titre</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>Votre magnifique titre</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>Votre magnifique titre</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>Votre magnifique titre</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>Votre magnifique titre</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>Votre magnifique titre</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:: Votre magnifique titre

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>contenu</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:: contenu

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>Ceci est un titre</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>Ceci est un titre</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::

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>Ceci est un titre</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>Ceci est un titre</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>Ceci est un titreet même pas peur, j'mets un sous-titre!</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>Ceci est un titre et même pas peur, j'mets un sous-titre!</center>

Il suffit simplement d'intercaler une balise

Code::

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>Ceci est un titre et même pas peur, j'mets un sous-titre!</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>Titre

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>Titre

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>Titre

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>Titre

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%">Titre

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">Titre

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; ">Titre

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; ">Titreun petit sous-titre?

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; ">Titreun petit sous-titre?

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!

Mer 7 Mai 2014 - 14:01

Neytiri-Navi

Age : 35Messages : 31

Mer 7 Mai 2014 - 14:01

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

Mar 13 Mai 2014 - 13:48

Satsuki-ss

Age : 36Messages : 25

Mar 13 Mai 2014 - 13:48

Merci

super ton tuto. je ne comprend pas ce display: block, c'est pour faire un bloc ?

Mar 13 Mai 2014 - 14:36

Satsuki-ss

Age : 36Messages : 25

Mar 13 Mai 2014 - 14:36

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

2nd loveOnce upon a lie

Mar 13 Mai 2014 - 18:16

A-Lice

Age : 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.

Mer 14 Mai 2014 - 17:56

Satsuki-ss

Age : 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

Mer 14 Mai 2014 - 23:11

A-Lice

Age : 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 >.

Jeu 15 Mai 2014 - 8:40

Sparrow-style

Age : 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)

Mer 4 Juin 2014 - 19:08

Angie Harkness

Age : 41Messages : 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

Sam 7 Juin 2014 - 17:53

CactusBarbu

Age : 32Messages : 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)

Lun 16 Juin 2014 - 12:36

Nanou0001

Age : 40Messages : 50

Lun 16 Juin 2014 - 12:36

Merci beaucoup pour cette mise en pratique ton tuto et très clair Very Happy

Jeu 19 Juin 2014 - 23:31

Valinwë

Age : 33Messages : 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

Mer 25 Juin 2014 - 17:06

Fortuna

Age : 31Messages : 4636

Mer 25 Juin 2014 - 17:06

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

Mer 25 Juin 2014 - 17:31

Glow

Age : 25Messages : 94

Mer 25 Juin 2014 - 17:31

Merci beaucoup pour ce tutoriel, c'est génial (:

Mer 25 Juin 2014 - 18:48

Syel

Age : 27Messages : 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

Lun 28 Juil 2014 - 21:25

Ayameko

Age : 47Messages : 36

Lun 28 Juil 2014 - 21:25

Merci infiniment pour cet excellent tutoriel : une très bonne introduction au codage !

Ven 19 Sep 2014 - 19:14

Wysteria

Age : 27Messages : 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 ^-^ !!

Dim 21 Sep 2014 - 19:38

Angy38

Age : 54Messages : 233

Dim 21 Sep 2014 - 19:38

Mon premier codage grâce à toi !

Caem Ignatus O'Learyton addiction, babe !Miss Emi

Lun 29 Sep 2014 - 13:28

Ikigami

Age : 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:

Sam 4 Oct 2014 - 10:59

Celte

Age : 35Messages : 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

Dim 5 Oct 2014 - 21:06

Hopli

Age : 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

Ven 7 Nov 2014 - 18:12

Nemesyss

Age : 34Messages : 31

Ven 7 Nov 2014 - 18:12

Merci pour ce tuto. J'ai tout compris ^^

Ven 7 Nov 2014 - 23:50

Sakuya-chan

Age : 25Messages : 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:

Mer 19 Nov 2014 - 15:42

Daryel

Age : 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é :)

Ven 19 Déc 2014 - 0:13

Athos

Age : 29Messages : 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é

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

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

Simple entête "titre du rp"

le texte, police, couleur et effets.

Soulignement du titre

Entête en titre + citation

le titre

Le sous-titre!

Entête avec sous-titre et images

Les images

Le titre

Le sous-titre

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée