Rappel du premier message :
Suite à l'étape 2 et à l'étape 3 de la partie 1 de ce cursus, vous voici confronté à un nouveau TP pour tester dans un exemple concret ce que vous avez appris. Je vous conseille d'avoir les tableaux sur les différents éléments qu'on peut mettre dans les balises. Ces derniers sont présents dans les étapes 1 & 2.
Voici le règlement auquel on va arriver à la fin de ce TP.
On va commencer par l'intérieur pour venir terminer par l'extérieur. Pour dégrossir un peu tout ça, on débutera avec le titre de notre règlement. Et pour prouver que ce qui a été vu dans les étapes et TP précédents ne doit pas être oublié, on va utiliser un span pour le titre. À l'intérieur de cette balise, on va tout d'abord demander au span de se transformer en bloc. Sans ça on se verrait dans l'impossibilité d'aligner notre titre comme on le souhaiterait. Ici on va le centrer. Ensuite, pour mettre ce titre en avant on va changer sa taille et ainsi le rendre plus visible, plus tape-à-l'oeil. De la même manière, on va lui donner une couleur différente de celle du reste du texte. Pour terminer sur ce titre, on peut le souligner, le mettre en italique ou en gras, ou même les trois en même temps.
Oui, cependant ce n'est pas 'bien'. Idéalement, il ne faut pas mélanger le html et le css. Pour donner un autre exemple, pour mettre le texte en italique on utilise font-style:italic dans un span ou une div. On ne met pas les balises < i > < /i >.
Règlement
Okay, pour le titre, rien de nouveau.
Poursuivons, on va se servir d'un texte bien pratique évoqué dans l'étape 2, le Lorem Ipsum. Ce dernier va remplacer le règlement qui sera présent par la suite dans la fiche. Il nous servira donc pour avoir un aperçu réel de ce que donnera la fiche. Mais maintenant il va nous aider pour la mise en page de nos sous-titres.
Donc, un sous-titre, c'est comme un titre. Il est juste un peu moins tape-à-l'oeil. Comme pour le titre, on va transformer le span en bloc. Cette fois ce ne sera pas pour le centrer, mais pour pouvoir décaler la première ligne. De manière générale, quand on veut ajouter un style qui contient l'attribut text-quelque chose dedans, il faut transformer le span en bloc. Après le décalage, on va choisir une taille qui sera entre celle du titre et celle du texte. Et pourquoi pas une couleur différente du texte également ?
Le 1° point
Comme je l'ai dit, on va utiliser le Lorem Ipsum pour voir ce que vont donner les sous-titres une fois en place. Il suffit donc de générer un Lorem Ipsum ici et d'y intégrer nos sous-titres.
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
Là se trouve le plus gros morceau de ce TP, le fond. Parce que c'est maintenant qu'on va faire la "décoration" de la fiche du règlement. Ici on va utiliser une div puisque nous allons créer un bloc. La première chose à faire est de lui donner une largeur, de préférence en pourcentage pour s'habituer à utiliser la largeur de cette manière. 90% me semble être une bonne largeur puisque ça laisse un espace entre notre fiche et les bords du forum. À cet endroit se pose le problème de l'alignement, il faut donc centrer cette fiche. Ensuite, on va ajouter un bord à notre fiche. Les différents bords possibles sont présents dans l'étape 1.
Ici j'ai volontairement différencié les bords haut/bas des bords gauche/droite.
Au fond que nous avons déjà avec les bords on va ajouter une image. Rien de bien compliqué puisque c'est une image de fond. Pour en choisir une, il y en a dans l'étape 3 du cursus.
Parce qu'il faut toujours garder le plus facile pour la fin, c'est plus motivant ! Ici on va reprendre notre fond avec l'image et y ajouter les derniers éléments, pourquoi pas une taille, une police, une couleur, une espacement entre les lettres...? Pour ce TP on va se contenter de justifier le texte et de mettre une couleur.
Maintenant et c'est le plus simple on assemble tous les éléments codés. On prend donc notre fond complet auquel on ajoute notre titre et nos sous-titres avec le lorem ipsum. Et ça nous donne ceci :
Règlement
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
Oui et c'est normal. Il faut ajouter un attribut plutôt sympa et pratique, le padding. Définition, le padding insère une marge entre tous les éléments présents dans la balise dans laquelle il est ajouté, en l'occurence dans notre div.
Règlement
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
La fiche pourrait rester comme ça, après tout c'est un règlement. Néanmoins, dans certains cas, comme ici sur Never-Utopia, il faut se présenter avant de faire quoique ce soit d'autre.
Donc, pourquoi ne pas simplifier l'accès à la partie présentation en ajoutant un lien dans notre fiche ?
Parce qu'un exemple est toujours plus clair, vous avez probablement remarqué que depuis le début de ce TP je vous renvoie à différentes étapes déjà vu. Et bien c'est en utilisant une balise, bien précise et qui ne sert qu'à ça, que c'est possible.
Bien sur comme ça elle ne nous emmène nul part. Il faut donc ajouter un lien entre les guillemets. Mais pas seulement, si vous ne faites qu'ajouter un lien entre les guillemets, ça ne vous mènera toujours nul part. Il faut également ajouter un mot entre la balise d'ouverture et celle de fermeture. D'ailleurs, au passage, on peut faire un lien avec autre chose qu'un mot, une image par exemple.
Le mot qui contient le lien n'est pas obligatoirement au début ou à la fin de la phrase.
Ici, je vais vous renvoyer à l'index des étapes du cursus codage.
C'est possible, cette balise fontionne comme la div. On peut donc lui ajouter un style quelconque, comme une couleur ou mettre le texte en italique.
Mon lien est bleu et en italique.
Et bien, pour que le style de ce lien ait plus d'importance que celui de la feuille de style css, il suffit de lui ajouter le suffixe !important. De cette manière même si vous utiliser :
Avec lien qui a comme couleur rose, le lien s'affichera en bleu.
Je vous ai perdu ?
Pour en revenir à notre fiche, on voudrait ajouter un lien donc, qui s'affiche en bleu même si la feuille de style css impose des liens roses. Et on veut que notre lien soit placé sur ipsum (le 2° mot du Lorem ipsum).
ipsum
Maintenant il suffit d'ajouter cette partie du code à la fiche du règlement pour obtenir un règlement complet.
Voici donc notre fiche finale.
Règlement
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
Simple et à la portée de tous. Si néanmoins, un point ne serait pas suffisamment clair pour vous ou que vous vous êtes perdus en cours de route, n'hésitez pas à demander des précisions et de l'aide. Et pour reprendre la phrase de Narja, c'est en forgeant qu'on devient forgeron. Il ne faut donc pas se priver de faire vos propres essais pour tout assimiler.
TP – Création d'une mise en forme de règlement
Suite à l'étape 2 et à l'étape 3 de la partie 1 de ce cursus, vous voici confronté à un nouveau TP pour tester dans un exemple concret ce que vous avez appris. Je vous conseille d'avoir les tableaux sur les différents éléments qu'on peut mettre dans les balises. Ces derniers sont présents dans les étapes 1 & 2.
Voici le règlement auquel on va arriver à la fin de ce TP.
- Spoiler:
Règlement
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
Le titre
On va commencer par l'intérieur pour venir terminer par l'extérieur. Pour dégrossir un peu tout ça, on débutera avec le titre de notre règlement. Et pour prouver que ce qui a été vu dans les étapes et TP précédents ne doit pas être oublié, on va utiliser un span pour le titre. À l'intérieur de cette balise, on va tout d'abord demander au span de se transformer en bloc. Sans ça on se verrait dans l'impossibilité d'aligner notre titre comme on le souhaiterait. Ici on va le centrer. Ensuite, pour mettre ce titre en avant on va changer sa taille et ainsi le rendre plus visible, plus tape-à-l'oeil. De la même manière, on va lui donner une couleur différente de celle du reste du texte. Pour terminer sur ce titre, on peut le souligner, le mettre en italique ou en gras, ou même les trois en même temps.
Une minute... Comment ça on peut pas centrer si le span est pas devenu un bloc ? Pourtant dans le TP1 on l'a fait avec un center.
Oui, cependant ce n'est pas 'bien'. Idéalement, il ne faut pas mélanger le html et le css. Pour donner un autre exemple, pour mettre le texte en italique on utilise font-style:italic dans un span ou une div. On ne met pas les balises < i > < /i >.
Règlement
- Code:
<span style="display:block; text-align:center; font-size:25px; color:seagreen; font-style:italic; text-decoration:underline;">Règlement</span>
Okay, pour le titre, rien de nouveau.
Les sous-titres
Poursuivons, on va se servir d'un texte bien pratique évoqué dans l'étape 2, le Lorem Ipsum. Ce dernier va remplacer le règlement qui sera présent par la suite dans la fiche. Il nous servira donc pour avoir un aperçu réel de ce que donnera la fiche. Mais maintenant il va nous aider pour la mise en page de nos sous-titres.
Donc, un sous-titre, c'est comme un titre. Il est juste un peu moins tape-à-l'oeil. Comme pour le titre, on va transformer le span en bloc. Cette fois ce ne sera pas pour le centrer, mais pour pouvoir décaler la première ligne. De manière générale, quand on veut ajouter un style qui contient l'attribut text-quelque chose dedans, il faut transformer le span en bloc. Après le décalage, on va choisir une taille qui sera entre celle du titre et celle du texte. Et pourquoi pas une couleur différente du texte également ?
Le 1° point
- Code:
<span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 1° point</span>
Comme je l'ai dit, on va utiliser le Lorem Ipsum pour voir ce que vont donner les sous-titres une fois en place. Il suffit donc de générer un Lorem Ipsum ici et d'y intégrer nos sous-titres.
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
- Code:
<span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 1° point</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
<span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 2° point</span>
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
<span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 3° point</span>
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
<span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 4° point</span>
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
Le fond : les bords
Là se trouve le plus gros morceau de ce TP, le fond. Parce que c'est maintenant qu'on va faire la "décoration" de la fiche du règlement. Ici on va utiliser une div puisque nous allons créer un bloc. La première chose à faire est de lui donner une largeur, de préférence en pourcentage pour s'habituer à utiliser la largeur de cette manière. 90% me semble être une bonne largeur puisque ça laisse un espace entre notre fiche et les bords du forum. À cet endroit se pose le problème de l'alignement, il faut donc centrer cette fiche. Ensuite, on va ajouter un bord à notre fiche. Les différents bords possibles sont présents dans l'étape 1.
On peut agir de différentes manières sur les bords. Le plus important est de ne pas oublier de leur donner une taille en pixel pour qu'ils apparaissent. Après, on peut ajouter une couleur ce qui est apprécié.
Une autre chose, les bords peuvent être dissociés. Celui du haut n'est pas obligatoirement le même que celui du bas, de gauche ou de droite. Il suffit de préciser après le border de quoi il s'agit, comme ceci : Border-left.
On peut également arrondir les angles avec cet attribut. Par exemple : Border-radius:25px.
Une autre chose, les bords peuvent être dissociés. Celui du haut n'est pas obligatoirement le même que celui du bas, de gauche ou de droite. Il suffit de préciser après le border de quoi il s'agit, comme ceci : Border-left.
On peut également arrondir les angles avec cet attribut. Par exemple : Border-radius:25px.
Ici j'ai volontairement différencié les bords haut/bas des bords gauche/droite.
- Code:
<div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C;">
</div>
Le fond : une image
Au fond que nous avons déjà avec les bords on va ajouter une image. Rien de bien compliqué puisque c'est une image de fond. Pour en choisir une, il y en a dans l'étape 3 du cursus.
- Code:
<div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg);">
</div>
Le fond : les finitions
Parce qu'il faut toujours garder le plus facile pour la fin, c'est plus motivant ! Ici on va reprendre notre fond avec l'image et y ajouter les derniers éléments, pourquoi pas une taille, une police, une couleur, une espacement entre les lettres...? Pour ce TP on va se contenter de justifier le texte et de mettre une couleur.
- Code:
<div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); text-align:justify; color:black;">
</div>
Assemblage
Maintenant et c'est le plus simple on assemble tous les éléments codés. On prend donc notre fond complet auquel on ajoute notre titre et nos sous-titres avec le lorem ipsum. Et ça nous donne ceci :
Règlement
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
- Code:
<div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); text-align:justify; color:black;">
<span style="display:block; text-align:center; font-size:25px; color:white; font-style:italic; text-decoration:underline;">Règlement</span>
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 1° point</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 2° point</span>
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 3° point</span>
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 4° point</span>
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
</div>
D'accord mais il y a un problème qui reste. Le texte est collé aux bords...
Oui et c'est normal. Il faut ajouter un attribut plutôt sympa et pratique, le padding. Définition, le padding insère une marge entre tous les éléments présents dans la balise dans laquelle il est ajouté, en l'occurence dans notre div.
Règlement
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
- Code:
<div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); padding:20px; text-align:justify; color:black;">
<span style="display:block; text-align:center; font-size:25px; color:white; font-style:italic; text-decoration:underline;">Règlement</span>
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 1° point</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 2° point</span>
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 3° point</span>
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 4° point</span>
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
</div>
Les liens
La fiche pourrait rester comme ça, après tout c'est un règlement. Néanmoins, dans certains cas, comme ici sur Never-Utopia, il faut se présenter avant de faire quoique ce soit d'autre.
Donc, pourquoi ne pas simplifier l'accès à la partie présentation en ajoutant un lien dans notre fiche ?
Parce qu'un exemple est toujours plus clair, vous avez probablement remarqué que depuis le début de ce TP je vous renvoie à différentes étapes déjà vu. Et bien c'est en utilisant une balise, bien précise et qui ne sert qu'à ça, que c'est possible.
- Code:
<a href=""></a>
Bien sur comme ça elle ne nous emmène nul part. Il faut donc ajouter un lien entre les guillemets. Mais pas seulement, si vous ne faites qu'ajouter un lien entre les guillemets, ça ne vous mènera toujours nul part. Il faut également ajouter un mot entre la balise d'ouverture et celle de fermeture. D'ailleurs, au passage, on peut faire un lien avec autre chose qu'un mot, une image par exemple.
Le mot qui contient le lien n'est pas obligatoirement au début ou à la fin de la phrase.
Ici, je vais vous renvoyer à l'index des étapes du cursus codage.
- Code:
Ici, je vais vous renvoyer à l'<a href="http://www.never-utopia.com/t47703-index-du-cursus-codage">index</a> des étapes du cursus codage.
C'est bien joli tout ça mais moi je veux que mon lien soit différents des autres.
C'est possible, cette balise fontionne comme la div. On peut donc lui ajouter un style quelconque, comme une couleur ou mettre le texte en italique.
Mon lien est bleu et en italique.
- Code:
<a href="http://www.never-utopia.com/t48890-partie-1-tp-2-creation-d-une-mise-en-forme-de-reglement" style="color:blue; font-style:italic;">Mon lien est bleu et en italique.</a>
Oui d'accord, mais dans ma feuille de style css j'ai dit que je voulais que tous mes liens soient roses, comment lui mettre une autre couleur à celui-là ?
Et bien, pour que le style de ce lien ait plus d'importance que celui de la feuille de style css, il suffit de lui ajouter le suffixe !important. De cette manière même si vous utiliser :
- Code:
<a href="adresse du lien" class="lien" style="color:blue !important;">www</a>
Avec lien qui a comme couleur rose, le lien s'affichera en bleu.
Je vous ai perdu ?
Pour ajouter un lien :
-il faut utiliser la balise
-on peut y mettre la forme que l'on souhaite comme dans une div
-on peut également forcé le style à être prioritaire par rapport à la feuille de style css avec le suffixe !important
-il faut utiliser la balise
- Code:
<a href=""></a>
-on peut y mettre la forme que l'on souhaite comme dans une div
-on peut également forcé le style à être prioritaire par rapport à la feuille de style css avec le suffixe !important
Pour en revenir à notre fiche, on voudrait ajouter un lien donc, qui s'affiche en bleu même si la feuille de style css impose des liens roses. Et on veut que notre lien soit placé sur ipsum (le 2° mot du Lorem ipsum).
ipsum
- Code:
<a href="http://www.never-utopia.com/" style="color:blue !important;">ipsum</a>
Maintenant il suffit d'ajouter cette partie du code à la fiche du règlement pour obtenir un règlement complet.
Un autre détail, on est pas limité dans le nombre de lien qu'on fait.
Voici donc notre fiche finale.
Règlement
Le 1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
Le 2° point
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
Le 3° point
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
Le 4° point
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
- Code:
<div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); padding:20px; text-align:justify; color:black;">
<span style="display:block; text-align:center; font-size:25px; color:white; font-style:italic; text-decoration:underline;">Règlement</span>
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 1° point</span>
Lorem <a href="http://www.never-utopia.com/" style="color:blue !important;">ipsum</a> dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 2° point</span>
Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 3° point</span>
Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.
<span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 4° point</span>
Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
</div>
Simple et à la portée de tous. Si néanmoins, un point ne serait pas suffisamment clair pour vous ou que vous vous êtes perdus en cours de route, n'hésitez pas à demander des précisions et de l'aide. Et pour reprendre la phrase de Narja, c'est en forgeant qu'on devient forgeron. Il ne faut donc pas se priver de faire vos propres essais pour tout assimiler.
Dernière édition par A-Lice le Lun 5 Mai 2014 - 22:33, édité 3 fois
Réglement 
Encore un code réussie 
