Rappel du premier message :
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.
C'est parti donc pour la première!
Nous allons apprendre à faire ceci :
Votre magnifique titre
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
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
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
ça, c'est fait, mais c'est toujours un peu simple, non? tiens, et si on faisait une petite ombre sur le texte?
Revenons-en donc à notre texte, et à la petite cuisine qu'on lui réserve...
Votre magnifique titre
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
Votre magnifique 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
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
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
contenu
Et voici donc qui clôt cette première partie. Vous êtes toujours motivés? Très bien, passons à la suite!
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!
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
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
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
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
Passons à la suite, maintenant que nous avons cela, un sous titre!
Ceci est un titreet même pas peur, j'mets un sous-titre!
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!
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!
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!
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 :
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:
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!
A présent nous allons mettre en forme le titre. On va commencer par créer un nouveau span.
Titre
Et le mettre en forme, police de caractère, couleur, taille, ombre sur le texte...
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
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
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
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
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
Et voila qui clôt le gros morceau de notre entête de RP. Quoi faire à présent? Mais le sous-titre, bien sur ^^
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?
A ce sous-titre, on va ajouter une mise en forme, couleur, décoration du texte...
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!
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.
- 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...
- 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".
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.
- 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é!
Quelques exemples tout de même... j'utilise deux couleurs, un bleu #4B35CA, et du gris #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...
- 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!
- 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?
- 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!
- 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...
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!
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é...
- Code:
<center><span style="color: black; background-color: grey; font-weight: bold;">contenu</span></center>
contenu
- Code:
<span style="color: black; background-color: grey; font-weight: bold; display: block; text-align: center">contenu</span>
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 :
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...
- 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?
- 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>
Ceci étant posé, nous pouvons donc passer à la suite. Comme vous aimez bien faire des initiales, vous allez à nouveau en mettre une. Alors? Heureux?
- 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!
- 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!- 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!
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 />
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.
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 :
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.
- 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...
- 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.
- 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!
- 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 :
- 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à!)
- 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!
- 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.
- 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...
- 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!
?
