Les tutoriels : apprendre à coder pas à pas

Un texte coloré peut parfois être très pratique pour la compréhension afin de distinguer les paroles de la narration ou encore des pensées. Cela rend aussi votre texte plus gai et plus accueillant. ATTENTION tout de même de ne pas mettre des couleurs flashy à vous décoller la rétine ou des couleurs similaires au fond du forum. En clair, des couleurs lisibles.
Vous présenter une palette de couleur c'est démodé. C'est pourquoi nous vous présentons un système que nous appellerons un sélectionneur de couleur.

» COMMENT L'UTILISER ?

Placez les doubles flèches du contraste couleur dans la zone que vous souhaitez (jaune, bleu, rouge, orange, vert etc.) Déplacez la bulle sur le sélectionneur et lorsque la couleur désirée apparait, cliquez. Son code sera affiché dans le champ "Code Hexadécimal", vous n'avez plus qu'à le copier et le placer à l'endroit opportun (c'est à dire [color=VOTRE CODE]). Vous allez voir, c'est super pratique.

La question est fréquente et pourtant relativement simple à résoudre : Comment créer une cellule colorée dans laquelle on peut écrire ? La réponse est simple et nous allons la rendre compréhensible étapes par étapes.

1 » METTRE EN PLACE LA CELLULE

Une cellule est définie par ce que l’on appelle une balise. Cette balise porte le nom de « div ». Pour la mettre en place, il suffit simplement de l’ouvrir, puis de la fermer pour éviter les bugs.

Pour ouvrir une div :

Pour fermer une div :

Ainsi, la balise entière correctement ouverte et fermée pour former une cellule prend cette forme :

Pour écrire à l’intérieur de la div, il suffit simplement de placer son texte entre les deux balises :

On remarque qu'une cellule mise en place sans couleur ne se voit donc pas. Il est donc nécessaire de colorer le fond.

2 » COLORER LE FOND DE LA CELLULE

Pour colorer le fond de la cellule, il faut donner un « style » à la balise div. Comment faire ? C’est très simple. Pour cela on prend la balise d’ouverture auquel on rajoute style (surtout n’oubliez pas l’espace entre le mot div et le mot style) :

C’est exclusivement grâce à ce style que la cellule va pouvoir être colorée. Mais pour que ce style soit effectif, il faut rajouter un égal ainsi que des guillemets, comme ceci :

Surtout n’utilisez pas ces guillemets : « » ils ne fonctionnent pas dans les codes. Vous remarquerez également qu’il n’y a pas d’espace entre le style, le égal et les guillemets.

Ensuite, afin de choisir la couleur de fond, il est nécessaire de définir le style qu’on veut donner à cette div – elle ne va pas deviner toute seule quand même. Dans notre cas, nous souhaitons mettre un fond, il est donc normal que nous lui indiquions cet aspect. Il faut savoir que le langage que nous utilisons actuellement – le HTML – comprend l’anglais. Ainsi, pour mettre un fond coloré, il faut mettre un background-color entre les guillemets, comme ceci :

Evidemment, il ne faut pas oublier de lui spécifier la couleur. C’est pourquoi à ce background-color, vous avez le choix entre ajouter le code de la couleur – voir tutoriel précédent – ou directement le nom de la couleur. Encore une fois, n’oubliez pas, le HTML ne comprend que l’anglais. Ainsi pour un vert clair, nous ajouterons un lightgreen à notre background-color comme ceci :

Comme vous pouvez le voir, après le background-color, nous avons rajouté deux points, c’est une façon de signaler au background-color qu’il doit prendre les propriétés que l’on va inscrire après ces deux points. Ensuite vous avez aussi remarqué qu’après le nom de la couleur, il y a un point-virgule. Ce dernier signifie la fin de la personnalisation de la couleur de fond, il est très important et à ne surtout pas oublier. :panic:Si votre code ne fonctionne pas, pensez donc à regarder s'il ne manque pas ce point-virgule !

3 » CONCLUSION

Le code entier pour avoir un texte dans une cellule à fond coloré, ressemble à ceci :



NB ; Il faut savoir que la cellule prend la place qu'on lui donne, il est donc normal que cette dernière prenne la longueur de votre post. Pas de panique, c'est personnalisable mais pour cela, rendez-vous au prochain tutoriel !

Précédemment, dans le tutoriel n°2, vous avons vu qu’il était possible de créer une cellule à fond colorée dans lequel on peut écrire. Dans ce tutoriel, nous allons aller plus loin pour définir la couleur du texte, la couleur du contour de cette cellule, sa taille et pour ceux qui le souhaitent, nous allons lui mettre des bords arrondis. C’est parti !

1 » COLORER LE TEXTE DE LA CELLULE

Dans le précédent tutoriel, nous avons vu que le point-virgule sert de fin à la personnalisation, mais ce dernier sert aussi de séparateur. C’est pourquoi, la prochaine personnalisation – ici la couleur du texte – se trouve après le point-virgule. Egalement dit dans le précédent tutoriel, le HTML comprend l’anglais, ainsi pour la couleur du texte, il suffit de rajouter un color suivi du nom ou du code de la couleur, comme ceci (reprenons volontairement le résultat final du précédent tutoriel et mettons le texte en noir) :

Remarquez qu’il y a un espace entre le premier point-virgule et le color. Il n’est pas obligatoire mais cela permet un code plus aéré, plus agréable et surtout plus compréhensif.

2 » METTRE UNE BORDURE DE COULEUR A LA CELLULE

A partir du résultat précédent, nous allons rajouter une bordure. Il existe plusieurs propriétés obligatoires pour personnaliser la variante de la bordure. Ici nous allons nous contenter d’une bordure de 3 pixels pleine de couleur orange. Pour ceci, il faut rajouter un border suivi de trois propriétés différentes. La première étant l’aspect de la bordure – en trait, en point, pleine, double etc – la deuxième concerne l’épaisseur de la bordure exprimée en pixels et enfin la troisième concerne la couleur. Chacune des trois propriétés sont séparées par un simple espace, comme ceci :



Comme précédemment dit dans le tutoriel n°2, une cellule mise en place sans fond coloré ne se voit pas. Mais il est possible, pour la définir, de mettre simplement une bordure, comme ceci :




Comme vous pouvez le voir, chaque variante (background-color, color, border et les autres propriétés nommées plus loin ou dans d'autres tutoriels) sont indépendantes les unes par rapport aux autres, vous pouvez très bien les utiliser seule.

Ensuite, afin d'améliorer votre bordure, voici une liste des aspects que vous pouvez lui donner :

- solid : bordure pleine.
- dotted : bordure en point.
- dashed : bordure en tiret.
- double : bordure double.
- groove : bordure en 3D intérieur (dépend de la couleur de la bordure).
- ridge : bordure en 3D extérieur (dépend de la couleur de la bordure).
- inset : bordure en 3D intérieur (dépend de la couleur de la bordure).
- outset : bordure en 3D extérieur (dépend de la couleur de la bordure).

Voici un exemple avec la même bordure que précédemment, mais en point à la place d'être pleine :



Encore un exemple mais avec groove (effet 3D) :



Il est également possible de personnaliser, par exemple, la bordure du bas différemment de celle du haut. Il faut pour cela remplacer la variante border, par border-right (bordure droite), border-left (bordure gauche), border-bottom (bordure du bas), border-top (bordure du haut). Quand il s'agit de modifier qu'une seule bordure, on peut laisser border et définir la bordure différente un peu plus loin.

Par exemple, en reprenant le précédent code, je souhaite que toutes les bordures soient oranges sauf celle du haut. Je défini donc les bordures avec border puis je défini la bordure bleue :



Toujours en reprenant le code d'origine, je souhaite que la bordure de droite soit jaune, celle du haut bleue, celle de gauche rouge et celle du bas rose. On remarque que chaque bordure est différente, donc on remplacer le border par chacune des personnalisations pour chaque bordure, comme ceci :



Vous remarquerez qu'à chaque fois, l'aspect, l'épaisseur et la couleur de la bordure sont précisés. Vous pouvez donc vous amusez en mettant, la bordure du haut en point, celle du bas en tiret et garder le reste des bordures pleines. Ce qui donne ceci :



De plus, cette façon de personnaliser une par une les bordures permet d'en retirer une sans affecter les autres. Par exemple, je souhaite ne pas avoir de bordure en haut. En reprenant le code précédent, il suffit simplement de retirer la partie corresponde à la bordure du haut comme ceci :

3 » DEFINIR LA TAILLE DE LA CELLULE

Vous trouvez que votre cellule est trop grande et/ou pas assez épaisse ? Pas de problème, sa taille est aussi définissable simplement avec la variante width (largeur) et la variante height (hauteur). Comme les précédentes, ces variantes sont indépendantes l'une de l'autre, vous pouvez très bien définir seulement la largeur ou seulement la hauteur. Pour ceci, reprenons notre code avec le fond vert, l'écriture noire et la bordure pleine orange. A ce code, il suffit de rajouter un width et/ou un height.

Comme ceci pour le width :



Comme cela pour le height :



Comme ceci pour les deux :

4 » ARRONDIR LES COINS DE LA CELLULE

Enfin, il est possible d'arrondir les coins de la cellule. Pour cela il faut rajouter une variante nommée border-radius (border étant la bordure et radius le degrés de l'arrondi) exprimée en pixels. Elle peut varier de 1 pixel (très léger arrondi) à 90 pixels (qui forme donc un rond) :

 

Comme précédemment avec les bordures, vous pouvez définir un degré d'arrondi différent pour les quatre coins. Pour cela, il suffit simplement de faire suivre les valeurs en pixels après le border-radius comme ceci :



Dans l'exemple, la première valeur (20px) correspond à l'angle en haut à gauche. La seconde valeur (10px) correspond quant à lui à l'angle en haut à droite. La troisième valeur (50px) correspond à l'angle en bas à droite, et enfin la quatrième valeur (0px) définie l'angle en bas à gauche.

5 » CONCLUSION

Ainsi vous l'aurez compris, je l'espère, tout est absolument modifiable sur une variable div. Jouer avec les couleurs, les formes, les bordures n'est plus un obstacle, alors amusez-vous ! Voici quelques exemples de personnalisation en mélangeant à la fois le fond coloré de la cellule, la couleur du texte, les bordures, les arrondis de bordure et la taille de la cellule.