Partie 1 - Etape 8 : Savoir lire et modifier une mise en forme...

Dim 11 Mai 2014 - 20:34

A-Lice

Age : 30Messages : 4939

Dim 11 Mai 2014 - 20:34

Etape 8 : Savoir lire et modifier une mise en forme de message donnée

Il ne faut pas être effrayé par ce genre de sujet. Car c'est un excellent moyen de comprendre et d'avancer dans l'apprentissage du codage. Et puis, j'ai une bonne nouvelle ! Vous avez déjà lu et interprété plusieurs codes depuis que vous avez commencé à lire ce cursus. Finalement, cette étape pose déjà moins de problème en voyant les choses ainsi.

Commençons.

La lecture

Ça semble logique, puisque pour modifier un code il faut savoir le lire. Prenons un exemple :

Code:: <span style="display: block; border-bottom: 10px solid #2e4c6a; width: 100%; height: 20px; font-family: arial black; font-size: 20px; letter-spacing: 2px; text-align: center; color: #91b3d5; text-shadow: 2px 2px 0px #2e4c6a;">"Titre du topic" <table style="width: 300px; margin-left: auto; margin-right: auto; margin-top: -70px;"><tr><td></td> <td>&</td> <td></td> </tr></table> <a style="display: block; text-align: center; color: #35436b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -20px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Dans un premier temps nous allons décortiquer le code sans le voir, (ne trichez pas et jouez le jeu !).

On va faire ça balise par balise. Pour la première on voit ça :

Code:: <span style="display: block; border-bottom: 10px solid #2e4c6a; width: 100%; height: 20px; font-family: arial black; font-size: 20px; letter-spacing: 2px; text-align: center; color: #91b3d5; text-shadow: 2px 2px 0px #2e4c6a;">"Titre du topic"

Je ne reviens pas sur le span, le principe est comprit. On constate donc que ce span est passé de "en ligne" à "bloc" avec le display: block. Ça signifie donc qu'on ne travaille plus sur une ligne mais sur un bloc. Ce qu'il faut voir derrière ce terme c'est qu'on élargit nos possibilités d'actions.

Juste après on peut lire border-bottom: 10px solid #2e4c6a. On voit donc que la bordure ne prend pas en compte tout le tour du bloc, mais que le côté du bas. Tout ce qu'il y a derrière les ":" sont les spécificités de cette bordure. Là, le trait sera large de 10 pixels, il sera continu (donc pas de pointillés) et il sera de la couleur #2e4c6a.

What ? C'est quoi comme couleur ça ?

À vu de nez je dirais que c'est... Non bien sûr, personne ne vous demande de connaître la couleur que représente ce code en héxadécimal. Ce site réfléchira pour vous. (Oui c'est du bleu-gris).

Ouais non mais stop. Tu vas pas nous explique le code de A à Z comme ça ?

Non, on y serait encore là demain. Et puis, vous n'avez pas nécessairement besoin de connaître par coeur que width c'est la largeur que font-size c'est la taille de la police etc. Encore une fois je vous renvoie aux tableaux des étapes 1 & 2. Vous avez la définition des différents termes présents dans la balise span.

Le seul qui ne se trouve pas dans ces tableaux c'est le text-shadow qui ajoute une ombre autour du texte. La première valeur agit sur les X soit les absisses, la deuxième sur les Y soit les ordonnés, la troisième joue sur le rayon et enfin le dernier terme c'est la couleur.

Donc pour lire un code et le comprendre faut juste toujours avoir les tableaux des 2 premières étapes.

Je suis tentée de vous dire oui. Au fil du temps certains deviendront logique pour vous et vous n'aurez plus besoin de ces tableaux. Mais ce n'est pas une honte de s'y référer pour autant ! Et puis quand vous êtes face à quelque chose que vous n'avez jamais vu tonton google aussi peut vous dire sur quoi agit la propriété. Cependant, restons logique, quand il y a text- la propriété agit sur le texte, font- la propriété agit sur la police, letter- la propriété agit sur les lettres etc.

Bref, notre ligne de code, après l'avoir décortiqué et avoir vu qu'elle avait un bord en bas bleu-gris de 10 pixels, on constate qu'il s'agit du titre du topic, puisque c'est indiqué. On voit aussi que la balise span qu'on a détaillé n'agit que sur ce titre puisqu'elle se referme derrière lui.

Code::

Ouais on voit trois fois la même ligne et alors ?

Et bien ceux qui voient trois fois la même ligne ne sont pas assez attentifs. Vous pouvez constater que les pixels pour la taille de la bordure du bas changent. Oui c'est insignifiant comme différence pour nous qui ne voyons que du texte, mais pourtant ça a son importance. Je rebondis également sur le fait de faire très attention quand vous taper votre code. N'oubliez pas de fermer vos balises et/ou de mettre les guillemets quand il en faut !

Dans cette balise on constate que la marge du haut a une valeur négative. Ce n'est pas une erreur, c'est tout à fait possible. Ici on veut juste que notre balise soit remontée de 15 pixels.

Code:: <table style="width: 300px; margin-left: auto; margin-right: auto; margin-top: -70px;"><tr><td></td> <td>&</td> <td></td> </tr></table>

Voilà quelque chose qu'on ne peut pas dissocier pour l'analyse. On prend le tableau en entier ou on ne prend rien. Car comme expliqué dans l'étape 7, un tableau contient des données qui sont ordonnées en lignes et en colonnes. En retirer une partie mal définie revient à mettre le tableau sans dessus-dessous.

Ici grosso modo, on peut voir qu'il y a une ligne matérialisée pas la balise tr et trois colonnes matérialisées par les balises td. Et pour ce qui se trouve à l'intérieur de ses balises, pas de nouveautés. Néanmoins, prenez le temps de regarder ce qu'il y a et de vous demander à quoi ça sert. Ça vous sera toujours utile quand vous créerez votre propre code.

Et pour terminer sur la lecture, la dernière partie du code.

Code:: <a style="display: block; text-align: center; color: #35436b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -20px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

C'est quoi ce a ? Jamais vu.

Alors je veux bien mais, si vous ne voyez pas ce que c'est, c'est que vous ne suivez pas le cursus dans l'ordre avec les TPs. Parce que cette balise je l'explique précisément dans le deuxième TP sur la création d'un règlement. Je vous invite donc à aller faire un tour à la fin de ce TP si vous ne voyez pas à quoi correspond cette balise.

Donc oui, le a href représente un lien. Et donc, dans cette balise on a tout un tas de propriétés qui vont le styliser. Mais surtout, c'est un point important ici sur Never Utopia, c'est le crédit du créateur du code. On le voit grace à ceci : © Never-Utopia et au fait que le lien nous emmène sur N-U. Cette partie de ce code est donc indélébile. Bien sur, lorsque vous créerez votre propre code il n'aura pas lieu d'être présent si vous ne le partager pas sur le forum de N-U.

La modification

La lecture c'est bien, mais elle est souvent là en préambule d'une modification quelconque. Sauf si vous prenez plaisir à lire des codes, dans ce cas vous pouvez vous arrêtez ici !

Pour l'aspect théorique, je vous conseille de ne jamais faire vos modifications sur le code original, on est jamais à l'abris d'une fausse manipulation qui vous fait tout perdre et après laquelle vous ragez et vous abandonnez. Ensuite, pour la modification d'un modèle donné, il y a des choses qui ne se changent pas, comme le mot "style" dans la balise et les endroits où sont fermées les balises. Si vous supprimez une fermeture de balise pour la remettre ailleurs, il y a de fortes chances pour que le code ne fonctionne plus. Cependant, il y a à l'inverse plein de données modifiables. Tout ce qui se trouve après ":" peu importe ce que c'est est changeable puisque ça représente la donnée qui caractérisera la propriété.

Donc si je te suis bien, je peux changer tout ce qu'il y a après ":" ?

C'est exactement ça !

Je vous invite tout d'abord à regarder à quoi ressemble le code que nous utilisons depuis le début de l'étape.

"Titre du topic"

&

Et on était censé voir que c'est ça que ça représentait uniquement avec le code ?

Non pas spécialement, juste en avoir une vague idée. Après tout on ne vous demandera jamais de faire un code sans le tester pour voir ce qu'il donne.

Quasiment tout peut être modifié ici. Tout d'abord le plus simple la couleur, admettons qu'on aime pas le bleu-gris et qu'à l'inverse on aime les couleurs bien flashys. On peut transformer le code de cette manière :

Code:: <span style="display: block; border-bottom: 10px solid DeepPink; width: 100%; height: 20px; font-family: arial black; font-size: 20px; letter-spacing: 2px; text-align: center; color: MediumVioletRed; text-shadow: 2px 2px 0px DeepPink;">"Titre du topic" <table style="width: 300px; margin-left: auto; margin-right: auto; margin-top: -70px;"><tr><td><span style="display: block; width: 100px; height: 100px; border: 1px solid MediumVioletRed; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center;"></td> <td>&</td> <td></td> </tr></table> <a style="display: block; text-align: center; color: #35436b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -20px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Ici, j'utilise des couleurs avec un nom mais les couleurs en héxadécimales donnent une plus grande palette et donc plus de nuances. Donc j'ai remplacé tous les #2e4c6a par des DeepPink et les #91b3d5 par des MediumVioletRed. Ça nous donne ceci :

"Titre du topic"

&

© Never-Utopia

Maintenant, je voudrais changer les bords pour qu'ils soient en pointillés, aligner le titre à droite, changer les images, changer la taille des images et changer la taille de la bordure des images.

"Titre du topic"

&

Code:: <span style="display: block; border-bottom: 10px dashed DeepPink; width: 100%; height: 20px; font-family: arial black; font-size: 20px; letter-spacing: 2px; text-align: right; color: MediumVioletRed; text-shadow: 2px 2px 0px DeepPink;">"Titre du topic" <table style="width: 300px; margin-left: auto; margin-right: auto; margin-top: -60px;"><tr><td></td> <td>&</td> <td></td> </tr></table> <a style="display: block; text-align: center; color: #35436b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -20px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Voyez les modifications qu'on a déjà faites. Bien sur dans les modifications, il n'y a pas que les données présentes qu'on peut modifier. On peut également en ajouter. Admettons que je veuille transformer mes images en liens, que j'en ajoute une et soyons fous que je rende la première opaque.

"Titre du topic"

&

Code:: <span style="display: block; border-bottom: 10px dashed DeepPink; width: 100%; height: 20px; font-family: arial black; font-size: 20px; letter-spacing: 2px; text-align: right; color: MediumVioletRed; text-shadow: 2px 2px 0px DeepPink;">"Titre du topic" <table style="width: 300px; margin-left: auto; margin-right: auto; margin-top: -60px;"><tr><td><a href="http://www.never-utopia.com" style="display: block; width: 120px; height: 120px; border: 3px solid MediumVioletRed; opacity:0.5; background: url(http://img15.hostingpics.net/pics/866040icon120120.png) center center;"></a></td> <td>&</td> <td><a href="http://www.never-utopia.com" style="display: block; width: 120px; height: 120px; border: 3px solid MediumVioletRed; background: url(http://img15.hostingpics.net/pics/866040icon120120.png) center center;"></a></td> <td>&</td> <td><a href="http://www.never-utopia.com" style="display: block; width: 120px; height: 120px; border: 3px solid MediumVioletRed; background: url(http://img15.hostingpics.net/pics/866040icon120120.png) center center;"></a></td> </tr></table> <a style="display: block; text-align: center; color: #35436b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -20px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Vous voyez, ce n'est pas sorcier, il faut juste correctement repérer les données que l'on veut modifier. Bien sur il y a de multiples combinaisons possibles pour modifier un code, à vous de le personnaliser en fonction de ce que vous souhaitez.

Au passage je remercie Sparrow pour m'avoir autorisé à bidouiller le code que nous avons utilisé dans cette étape.