Tutoriel : HTML et CSS pour usage sur forumactif [débutants]

Coucou les gens ! Ici je vais vous présenter un moyen de faire un petit peu vos codes RP (ou de journaux itout) vous même !
Ce tuto est pour les non initiés ou les novices ! Si vous êtes déjà intermédiaire il ne vous servira peut-être à rien.
Il est majoritairement destiné au codage sur les forums. Coder un site web ce n'est pas pareil, même si ces bases vous seront tout de même d'une grande utilité, il y a de nombreuses choses qui sont très différentes.

Est-ce que le codage c'est difficile ? Alors, oui, parfois on se casse la tête, mais les premières étapes de la réussite des codes c'est surtout le par coeur. Vous n'avez pas besoin de devenir un as en codage, d'ailleurs, au delà du par coeur si vous parlez anglais couramment ou non (vous apprendrez des mots, au pire) cela sera encore plus facile vu que le codage est uniquement en anglais.

Pour éviter d'avoir 150 balises "code" dans ce tutoriel et en faciliter la lecture, j'omettrais bien souvent les < et > des codages lorsque je donnerai des exemples peu concrets. Si cela vous perturbe n'hésitez pas à me le dire.

Ayant moi-même un niveau plutôt "intermédiaire" je n'ai pas les réponses à toutes vos questions, je souhaite juste mettre ce tuto pour aiguiller ceux qui en ont envie et besoin.

Voici ce que je vais aborder dans ce tutoriel :

Partie 1 : les bases
0. Bien s'outiller
1. Décomposons un codage
2. Faisons des arrière plans
3. Les bordures et les arrondis
4. Les marges
5. La taille
6. Des propriétés en vrac  
7. Les erreurs les plus courantes
8. Exercices





Coder ne demande pas vraiment de logiciel (du moins, pour les forums et pour les choses simples) par contre y'a des sites et des logiciels qui peuvent vous faciliter la vie.  

- http://www.faux-texte.com/ est un générateur de texte, lorem ipsum pour remplir vos codes et voir s'ils tiennent la longueur (des fois, c'est utile)

- http://www.01net.com/telecharger/windows/Multimedia/outils_internet/fiches/17864.html permet de télécharger la boite à couleurs. Vous pouvez utiliser pour créer vos couleurs en gérant tout un tas de paramètre mais il dispose aussi d'un compte goute. C'est un logiciel très petit. Vous pouvez aussi utiliser internet https://htmlcolorcodes.com/fr/

- https://notepad-plus-plus.org/fr/ je vous conseille ce logiciel pour écrire vos codes, vous ne pouvez pas utiliser word ou autre car ils mettent des espaces là où il ne faut pas et remplace certains caractères (notamment nos " très utiles en codages) Si vous le calibrez en langage > H > HTML il permet aussi de colorier les différentes balises et vous pourrez ainsi les distinguer plus facilement...  Vous pouvez aussi utiliser le langage C > CSS
Vous pouvez aussi prévisualiser mais attention il ne lit pas le BBCODE et certains autres codes.
Il existe aussi brackets (et certainement d'autres logiciels) qui a l'avantage de ne pas vous casser les burnes si vous ne sautez pas de ligne.

- https://openclassrooms.com/ anciennement, le site du zéro, c'est là ou j'ai appris mes débuts en codage o/

- http://www.w3schools.com/ un site en anglais !

Code:

<div style="margin: auto; background-color: white; width: 550px; border: #006699 solid 10px; padding: 10px; border-radius: 20px;"> blablabla  </div>  

Qui donnera :


Si vous avez l'habitude d'essayer de modifier des codes alors vous reconnaîtrez forcément quelques mots par ici comme : l'arrière-plan, la taille, les bordures...

La première chose à comprendre ici c'est ce qui permet d'entrer le code : le div. Le div n'a aucune propriété incluse. Si vous mettez juste quelque chose comme

Code:

<div> blabla </div>

il ne se passera pas grand-chose, excepté un retour à la ligne avant et après le div. Ces sauts de lignes qualifient toutes les balises html de type "block" ils créent une zone séparée du reste, contrairement aux balises de type inline (comme la mise en gras) qui ne créer pas de saut de ligne. Pour écrire un code, il faut mettre les balises inline à l'intérieur des balises blocks.
L'équivalent inline du div est le span, ainsi on écrire span style=

Par exemple, vous n'écrirez pas

Code:

<b> <div> </div> </b>

mais bien

Code:

<div> <b> </b> </div>

(même si, au passage, vous pouvez parfaitement mettre le gras dans le div directement, c'était surtout pour l'exemple).

Ainsi vous pouvez donner un "style" à ce div et venir insérer les propriétés que vous voulez (ou presque), ici, dans l'ordre : une marge extérieure automatique (c'est à dire égale de part et d'autre dans le but de centrer votre objet), un arrière-plan blanc, une taille (en largeur) de 55 pixels, une bordure de couleur bleue, uni, de 10 pixels de chaque côté, légèrement arrondie (20 pixels) ainsi qu'une marge intérieure de 10px de chaque coté pour que le texte ne colle pas à la bordure.

(X)HTML ? CSS ? BBcode ?

Sur forumactif vous retrouverez principalement ces trois types de codes. Le BBcode ce sont toutes les balises qui ont des crochets type [, il s'agit d'un langage propre aux forums qui ne sont, en général, pas lu par les différents logiciels.
Le HTML permet de structurer une page et d'en donner les grandes lignes. Le HTML commence par un <.
Le CSS c'est ce qui se trouve à l'intérieur du div style, c'est tout ce qui est entre "..." il permet d'apporter des éléments plus complexes de mise en page. Il existe d'autres moyens d'insérer du css que le div style mais nous les verrons plus tard.



Donc, revenons sur notre base de code. Vous avez donc repéré le fameux "background-color". Il permet d'insérer une couleur unie d'arrière plan. Vous pouvez déterminer cette couleur par différents moyens :
background-color: blue; → en donnant le nom de la couleur
background-color: #006699; → en donnant son code hexadecimal
background-color: rgb(valeur, valeur, valeur); → en donnant son code RGB (pas le plus utilisé)

Vous pouvez aussi mettre une image en arrière plan. Pour se faire vous devez utiliser background-image: ('URL'); /!\ n'oubliez pas les apostrophes sinon ça ne fonctionnera pas

Pour gérer la répétition vous pouvez utiliser:  background-repeat avec soit  no-repeat; (l'image ne se répète pas)  / x-repeat; (l'image se répète sur l'axe x)  /  y-repeat (l'image se répète sur l'axe y) / repeat  (l'image se répète tout plein).

Pour simplifier votre code vous pouvez utiliser la méga-propriété qu'est background, par exemple :
background: url('LIEN') no-repeat;

Si vous voulez qu'un arrière-plan s'affiche entièrement, vous devez lui donner une taille, en largeur ou en hauteur (voire, les deux).

Vous pouvez d'ailleurs placer un arrière plan sur un arrière plan, à la condition que l'arrière plan placé le plus au premier plan (cette phrase) soit au moins plus petit.

Par exemple, vous pouvez mettre une image en arrière plan qui se répète  (ou pas), puis, créer un deuxième style (il vous faudra les séparer) d'une taille plus petite, avec une couleur en arrière plan, ou une autre image.

Petit aparté concernant l'ordre de fermeture et d'ouverture des balises div. Vous pouvez en insérer autant que vous en avez besoin l'une dans l'autre. Néanmoins, la balise que l'on ouvre en premier, on la ferme en dernier.

Par exemple, si vous désirez faire ce que j'ai écris au dessus (c'est à dire un arrière plan l'un sur l'autre), on écrira PAS :

Code:

<div style="background-image: url('LIEN'); width: 600px; background-repeat: repeat; margin: auto;"> </div> <div style="background-color: white; width: 500px; margin: auto; padding: 10px;"> le texte du RP </div>

mais bien

Code:

<div style="background-image: url('LIEN'); width: 600px; background-repeat: repeat; margin: auto;"> <div style="background-color: white; width: 500px; margin: auto; padding: 10px;"> le texte du RP </div> </div>

Si vous fermez votre div, il n'aura plus effet et vous aurez simplement un petit block avec un arrière plan image, puis un autre en dessous avec un arrière plan uni.



Le border que nous avons vu tout à l'heure permet de créer des bordures.
Tout d'abord, vous pouvez le décomposer en border-top (dessus) , border-bottom (dessous), border-left (gauche) et border-right (droite). Néanmoins, si vous désirez, par exemple avoir toutes les bordures en blanc, excepté la bordure de gauche, vous n'êtes pas obligé de préciser chaque bordure, vous pouvez simplement écrire :
border: solid 3px white; border-left: solid 3px black;  

Vous n'avez certainement remarqué, lorsque l'on met le code pour une bordure, on doit lui donner 3 attributs : la couleur, l'aspect ainsi que la taille.

Concernant la couleur, comme l'arrière plan, elle peut-être donnée de multiples façons, concernant sa taille, elle varie en pixels, et son aspect lui peut prendre différents attributs :
dotted (pointillé)
dashed (tirets)
groove (sort de 3D)
relief (une sorte de cadre)
Vous pourrez en trouver d'autres en tapant sur internet !

Pour compléter les bordures, on peut utiliser border-radius qui va nous permettre d'arrondir la bordure soit, à tous les coins, soit à un ou plusieurs coins.

Si vous désirez une bordure avec des arrondis à la même taille vous pouvez utiliser
border-radius: ?px; ou bien border-radius: X%;
Sachant que pour les pourcentages 100% fera un rond. Pour les pixels, je vous laisse tester l'aspect visuel.

Les bordures arrondies ne s'appliquent pas seulement à la propriété border mais aussi aux images. Vous n'êtes pas obligé d'avoir une bordure pour arrondir une image ou à un arrière plan. Attention concernant les images, si vous voulez les rendre parfaitement ronde alors la taille de l'image en largeur doit être égale à celle en largeur (sinon vous aurez un ovale).

Si vous souhaitez mettre des effets d'arrondis différents il faudrait utiliser 4 valeurs distinctes.

Exemple :

Code:

<div style="margin: auto; background-color: white; width: 550px; border-radius: 30px 100px 200px 0px;"> texte
texte
texte </div>

Comme vous l'avez vu sur le premier exemple (il nous sert bien vous avez vu ?) il existe deux types de marges : intérieures et extérieures.
Ces marges peuvent être positives (ajouter de l'espace entre l'objet et le reste) ou négatives (diminuer cet espace).

Exemple en image (c'est le cas de le dire)

Sans marge	Avec marge intérieure positive (10px)	Avec marge extérieure négative (7px)

Comme vous le voyez, dans le premier exemple l'image est ronde et normale.
Dans le deuxième, l'espace a été augmenté entre l'objet et la bordure car c'est à l'image que l'on a mis cette marge.
Dans la troisième cas, la marge extérieure a été diminuée et l'objet a donc bougé un peu vers la gauche, empiétant sur la bordure du tableau.
Comme mentionné au dessus, pour centrer un élément (et non pas du texte) utilisez la marge automatique. Pour centrer du texte, utilisez le html center ou bien text-align: center; (qui peut se décliner en right, left, justify).
Et, pour pouvoir mettre de l'espace entre le texte et une bordure (ou d'autres objets), utilisez le padding.

Il ne faut cependant pas mettre les marges n'importe ou. Si vous voulez qu'elles ne s'appliquent qu'au texte, si vous avez d'autres éléments avant, vous devez créer un div spécialement pour le texte.



width: largeur
height: hauteur
S'expriment le plus souvent en pixel, mais vous pouvez l'exprimer en % (c'est très utile notamment pour les personnes qui ont des tailles d'écran différents)

Il peut aussi s'arriver que vous deviez travailler dans un espace restreint (si par exemple vous voulez n'avoir que 100pixel de hauteur pour pouvoir écrire une description juste à côté d'une image, dans un journal, notamment) mais que votre texte lui soit trop long.
Pour contourner ce problème, vous pouvez utilisez l'overflow.
overflow: auto; qui mettra automatiquement une barre défilante si le texte est plus grand (en largeur ou en hauteur)

Ici aussi je vous conseille un petit padding, ne serait-ce que 2 ou 3 pixels pour que votre texte ne touche pas la barre défilante et que cela soit plus esthétique. Néanmoins n'oubliez pas que le padding aura une influence sur la taille de votre zone.

Par exemple, si vous désirez faire une zone de 100px en hauteur et de 500px en largeur que vous ajoutez un padding de 5 pixel (partout) alors votre zone fera en réalité 110 pixel (5 pixel en haut, 5 en bas en plus avec la marge)  sur 510 (même chose pour la gauche et la droite). Il faudra donc supprimer la taille de votre marge de votre taille initiale et ainsi mettre 90px en hauteur et 490px en largeur.



Insertion d'une image  

Code:

<img src="LIEN" />

à laquelle vous pouvez ajouter un style comme ceci img src="LIEN" style="..."
Insertion d'un lien

Code:

<a href="LIEN"> Texte </a>

color: ???; gère la couleur du texte qui peut être déterminée par les valeurs précédemment vues.

font-size: gère la taille de la police
peut prendre comme valeur n'importe quel chiffre, exprimé en px ou en em ou %
1 em = 1x la taille normale de la police (rarement utilisé mais bon)
100% = taille normale (aussi rarement utilisée, surtout quand on ne gère pas la taille par défaut du forum)
exemple :
font-size: 14px;
font-size: 2em; vous pouvez mettre un 1.5em; aussi (c'est un point et non une virgule)
font-size: 50%;

font-family: type de police
attention, si vous avez une police qui est en plusieurs mots vous devez mettre des "
exemple
font-family: cambria;
font-familey: "New roman";

Vous pouvez aussi mettre plusieurs police, si jamais vous en avez une un peu spéciale, la première sera utilisée par défaut;
font-family: Scriptina, Cambria;
Si la personne n'a pas scriptina, alors ce sera Cambria qui sera affiché.

text-indent: ??px; est utilisé pour faire un aliéna d'un nombre de pixel déterminé au début du paragraphe

word-spacing: ?px; = espace entre les mots (en pixel)
letter-spacing: ?px; = espace entre les lettres

font-style: italic; met en italique
font-weight: bold; met en gras
(ou le html b et i entre < et > )

font-variant: c'est une propriété qui gère la police qui permet toute sorte de petite choses (vous trouverez une meilleure liste sur internet)
Exemple :
font-variant: small-caps; = met le texte en petites majuscules

text-transform: meme chose que la précédente et ses valeurs peuvent être
uppercase; tout en majuscule
lowercase; tout en minuscule
capitalize; premiere lettre en majuscule de chaque mot

text-decoration: gère le soulignement notamment
underline; souligné
ligne-trough; barré
overline; ligne au dessus
blink; clignote (attention ne marche pas sous certains navigateurs)



Voici une liste d'erreurs que je commets le plus souvent qui pourront vous aider à vous sortir de "haaaa pourquoi ça marche paaas". Cela dit, on apprend de notre propre erreurs et le codage passe d'un nombre incalculable d'essais et erreur. En écrivant ce tuto je me suis foirée en écrivant le tableau, par exemple, parce que j'avais oublié un petit machin alors que j'en fais souvent, haha.

• supprimer un ' d'un URL('') sans le faire exprès: votre background ne s'affichera pas

• vérifier les espaces
propriété: valeur; propriété: valeur; → forumactif est capricieux, des fois avec un espace en trop ou en moins ça ne marche pas, des fois ça fonctionne, allez savoir...  

• Mal mettre une balise, par exemple < div style="...;" > puis < /span > à la fin. (ça arrive plus souvent qu'on pense x'D)

• Oublier de fermer une balise, mal ouvrir une balise (oublier le <)
Votre code se prolonge jusqu'à votre signature ? C'est cette erreur là que vous avez faite ;)

• Ecrire div class="propriété: valeur;" à la place de div style=" → je ne vous ai pas encore expliqué ce qu'était les class et les id, mais, ça aussi, ça m'arrive bien souvent...

• Oublier ou se tromper entre les apostrophes ' et les guillemets " si une image ne s'affiche pas ou que votre code ne fonctionne pas du tout, c'est que vous avez fait cela

• Oublier un ; dans le css marqué dans votre div :  si vous ne voyez qu'une partie de votre codage s'afficher c'est que vous avez peut-être oublié ; En effet, le css sera pris en compte jusqu'à votre erreur. Si vous écrivez style="width: 500px; margin: auto; font-size: 20px background-color: white;"  alors ni la taille de police ni l'arrière plan ne s'afficheront correctement, c'est à ce moment que vous pouvez déduire que l'erreur se trouve à la taille de la police car c'est celle qui a été écrit le plus tôt dans l'erreur

• Mal orthographier une propriété et / ou sa valeur : arrive le plus souvent quand on débute (même si personne n'est à l'abri d'une faute de frappe) cela aura le même effet que l'erreur précédente, si ça ne s'affiche pas c'est que c'est mal écrit (ou impossible)



Je vous propose d'essayer de faire ces rendus (ou toute autre chose ressemblant)

Exercice 1 : la base

Vous devez arriver à ça :

Alors; j'ai utilisé une bordure en pointillé, et pour les couleurs des simples white, grey, black (vous pouvez les changer bien sûr ce n'est pas la forme pure qui compte)
Vous pouvez choisir vos tailles ( de marge, de bordure d'image etc...) , il faut juste imposer une largeur.
Le texte doit être en justifié et l'élément centré (c'est toujours mieux de lire un texte justifié..)  

Voici la solution qui correspond à l'exemple mais bien sûr y'en a plein

Spoiler:

 

Exercice 2 : Arrière plan simple  

Voici l'image de ce que vous devez faire:


voici le lien du fond : https://www.zupimages.net/up/17/06/qml2.png

Voici la solution en et spoiler

Spoiler:

Exercice 3 : arrières plans complexes



C'est sans doute le plus difficile des 3 exercices car il faut maitriser le 1 et le 2 pour le faire.
Comme les deux autres, vous avez totalement au choix les marges, les couleurs, vous pouvez même utiliser une autre image que celle que je vous propose !

La voici, d'ailleurs ;) https://thumbs.dreamstime.com/z/rptition-rose-de-fond-de-papier-peint-de-fleur-de-vintage-rose-62620917.jpg

Spoiler:

Si vous avez des questions, n'hésitez pas !

[partie 2 incoming, ne postez pas s'il vous plaît]

Voici une partie 2 consacrée à des choses qui font un peu plus d'effet /pan et qui permettent de faire des choses un peu moins simples que ce qu'on a vu précédemment :3

Voici un petit sommaire

1. Les saints tableaux
2. Le float
3. Insertion de CSS dans les jolies pages de forumactif (ou ailleurs)
4. Effets simples au passage de la souris
5. Position
6. Allons un peu plus loin dans la feuille de CSS
7. Liste de propriétés en vrac n°2



Création d'un tableau basique

Il existe quatre balises principales pour créer un tableau
- < table>  et < /table> pour ouvrir et fermer le tableau écrire BORDER entre table et le > permet d'afficher les bordures du tableau dans un style par défaut
- < th> et < /th> pour donner la ligne d'entête du tableau (elle sera automatiquement mise en gras, vous n'êtes pas obligé de l'utiliser)
- < tr> et < /tr> pour ouvrir et fermer une ligne
- < td> et < /td> pour ouvrir et fermer une cellule

L'ordre de ces balises est très important, tout d'abord, vous ouvrez le tableau (logique), puis vous en créez une ligne, et enfin, vous ajouter les cellules.
Néanmoins, avec ce genre vous ne pouvez faire des choses plutôt simples comme par exemple :

Ceci est un texte.   Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.

Code:

<table style="width: 550px; margin: auto;"><tr><td><img src="https://www.zupimages.net/up/17/06/8mx8.png" width="100"> </td> <td> <div style="overflow: auto; height: 90px; width: 450px;"> Ceci est un texte.   Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  </div> </td> </tr> </table>

Il s'agit d'un tableau avec une seule ligne et deux colonnes, dont la la taille a été délimitée.

Si vous ne donnez pas de taille a votre tableau il ne prendra que la taille minimale. Vous pouvez donner sa taille de plusieurs façon :

• en écrivant  table width="CHIFFRE" par défaut, cela sera des pixels, mais vous pouvez écrire aussi en % table width="70%" pour qu'il prenne 70% de l'espace disponible en largeur
Vous pouvez d'ailleurs aussi utiliser ceci pour les images (ainsi que le height) par exemple < img src="LIEN" height="100" width="100" />

• En ajout un style au tableau (ou au tr ou td) que vous exprimerez en % ou en px ; utile si vous voulez ajouter d'autres caractéristiques

A ce stade des explications (comme vu au dessus) vous pouvez choisir la taille d'une cellule (là cellule du texte est ici plus grande que celle où il y a l'image) en l'indiquant de la même façon avec un div style néanmoins vous ne pourrez pas donner des tailles différentes aux autres cellules des autres lignes.

1	2
1	2

Code:

<table BORDER width="200px"> <tr> <td> 1 </td> <td> 2</td> </tr>  <tr> <td> 1 </td> <td> 2</td> </tr> </table>

1	2
1	2

Code:

<table BORDER width="70%"> <tr> <td> 1 </td> <td> 2</td> </tr> <tr> <td> 1 </td> <td> 2</td> </tr> </table>

Petite précision, comme vous avez pu le voir, je n'ai pas sauté de ligne entre les différentes balises TR, en effet pour plus de lisibilité, j'aurai pu écrire ça comme ça:

Code:

<table BORDER width="200px">
 <tr>
 <td> 1 </td>
<td> 2</td>
</tr>
 <tr>
<td> 1 </td>
<td> 2</td>
 </tr>
</table>

Cependant, si vous le faites, il y aura le même nombre de saut de ligne au-dessus de tableau.

1	2
1	2

L'espace entre le tableau et le dernier paragraphe n'est aucunement voulu. C'est pour cela que vous devez écrire tout cela serré. En revanche, c'est une caractéristique inhérente à forumactif et à l'écriture dans les topics. Si vous créez une page HTML, si vous éditez la page d'accueil d'un forum alors vous pourrez sauter des lignes pour une meilleure visibilité parce que le saut de ligne n'est tout simplement pas lu. Ainsi, même si vous sautez une ligne pour séparer du texte, cela ne fonctionnera pas. Il faut utiliser la balise

Code:

<br />

pour aller à la ligne. Vous pouvez aussi parfaitement l'utiliser dans les topics de forumactif.

La fusion de cellules et de lignes

Avec les tableaux, on peut faire beaucoup de choses si on arrive correctement à fusionner les cellules ou les lignes. Cela demande un peu de dextérité mentale cela dit, haha.

Par exemple, cette-image de page d'accueil est un tableau, on peut le voir en utilisant border ( et il était chiant à faire je vous l'assure)

Au passage, le forum est aussi un immense tableau c'est pour cela que si un jour vous faites un tableau et que vous voyez le forum se déformer c'est que vous avez oublié de le fermer, ou un td ou un tr par ci par là.

Vous voyez que plusieurs cellules sont fusionnées.
Les deux dernières lignes, on dirait qu'il s'agit d'une simple ligne tr /tr mais n'oubliez pas que vous ne pouvez pas, c'est une fusion de toute les colonnes sur une ligne.

rowspan fusionne les lignes pour créer des colonnes
colspan pour la fusion de cellules pour créer des lignes plus grandes
que vous mettez à la suite du td

Rien ne vaut l'exemple dans ce genre de situation ou comme je les utilise pas souvent je les inverse une fois sur deux /pan

Titre du tableau
Element 1	Element 2

Code:

<table BORDER style="width: 200px;"> <tr> <td colspan="2"> <center> <b> Titre du tableau </b> </center> </td> </tr> <tr> <td> Element 1 </td> <td> Element 2 </td> </tr> </table>  

     

Titre du tableau
Element 1		Element 2
Element 3	Element 4	Element 5	Element 6

Code:

<table BORDER style="width: 400px;"> <tr> <td colspan="4"> <center> <b> Titre du tableau </b> </center> </td> </tr> <tr> <td colspan="2"> Element 1 </td> <td colspan="2"> Element 2 </td>  </tr> <tr> <td> Element 4 </td>  <td> Element 5 </td> <td> Element 7 </td>  <td> Element 7 </td> </tr></table>   

J'ai donc utilisé colspan pour fusionner les deux premières cellules de la ligne 1 et j'ai indiqué de fusionner 2 cellules.
Lorsque vous indiquez une fusion, il est important de vérifier que vous avez bien le même nombre de colonne sur chaque ligne et inversement ou bien vous aurez le droit à quelque chose comme ça :

Le bug ici c'est parce que j'ai indiqué sur la ligne 1 la fusion de 2 cellules et rien après, puis que sur la ligne 2, j'ai indiqué 3 cellules. Du coup, la cellule « Element 3 » ne sait pas ou se placer et bug.
C'est la raison pour laquelle je vous conseille de mettre BORDER, vous pouvez voir de telles erreurs, indiquée par une ligne plus fine et un vide.

En utilisant table style= vous pouvez évidemment mettre un arrière plan au tableau, uni ou  image, configurer sa taille, vous amusez avec les bordures principales ect. …



Le float n'est pas bien compliqué, je le place juste après l'explication des tableaux parce que si on souhaite faire un petit codage pour le journal (notamment pour les liens) il est possible d'utiliser les deux.

La propriété float va placer à gauche ou à droite un objet, souvent, une image.

Ceci est donc un tableau (j'ai délibéremment supprimé l'overflow pour que vous voyez la différence)  

Ceci est un texte.   Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.  Ceci est un texte.

ceci est un float:


[la différence de taille de police est sûrement due à une propriété du forum spécifique aux tableaux]

Vous voyez donc que le tableau, si vous placez quelque chose (ici) à gauche, lorsque le texte est plus grand que ce dernier, il va dépasser mais va rester dans sa propre colonne, car il se comporte logiquement comme un tableau où on a séparé les différentes cellules.

Le float, lui, par contre, dès que le texte dépasse l'objet qu'il entoure il va aller de nouveau en dessous.

Vous pouvez d'ailleurs jouer avec les marges pour faire quelque chose de plus esthétique (padding) ou bien pour bouger un peu votre image avec du margin notamment. Vous pouvez placer votre objet à gauche, à droite, au milieu...

Code:

<div style="border:1px solid #cccccc; width: 400px;"> Ceci est un chaton. <div style="float: left; border: 2px solid red;"> La maman est ici </div> <div style="float: right; border: 2px solid green;"> Le papa  là </div>  Et le chaton attend </div>

La bordure première est présente pour que vous puissiez voir plus précisément la position mais vous pouvez tout à fait l'enlever.

A vous de déterminer si vous voulez utiliser un tableau ou bien un float et de faire vos propres tests !

Accroché à des balises pré-existentes
Nous avons déjà vu qu'il existait la façon d'utiliser soit le div avec < div style="" /> qui est, je le rappelle, une balise qui n'apporte rien.

Vous pouvez aussi utiliser table style, tr style, td style, p style ( < p> détermine le paragraphe) img src="" style, cependant ils n'auront d'effet que sur ces balises-là.

Fréquemment, vous allez mélanger les deux. En effet, si vous voulez par exemple faire un code RP (admettons) avec plusieurs images rondes avec des bordures (sans vous faire chier à les détourer avec un logiciel de montage), mais que vous voulez mettre un arrière plan une taille, vous devrez utiliser un div style pour les propriétés concernant l'arrière plan, peut-être même un deuxième div (ou span) pour le titre, une date, un featuring, ainsi qu'un img style pour les propriétés concernant l'image.

Exemple :

Code:

<div style="margin: auto; background-color: black; width: 550px; border-radius: 500px 500px 0px 0px;"> <center> <img src="https://66.media.tumblr.com/1ae6524832ae02972e84a752b3a3163d/tumblr_pg14ih0aUf1xde1l9o1_250.png" style="width: 100px; height: 100px; border-radius: 100%; border: white 3px solid; padding: 2px; margin-top: 150px;"> <img src="https://66.media.tumblr.com/1ae6524832ae02972e84a752b3a3163d/tumblr_pg14ih0aUf1xde1l9o1_250.png" style="width: 100px; height: 100px; border-radius: 100%; border: white 3px solid; padding: 2px; margin-top: 150px; text-align: justify;"> <img src="https://66.media.tumblr.com/1ae6524832ae02972e84a752b3a3163d/tumblr_pg14ih0aUf1xde1l9o1_250.png" style="width: 100px; height: 100px; border-radius: 100%; border: white 3px solid; padding: 2px; margin-top: 150px;"> <img src="https://66.media.tumblr.com/1ae6524832ae02972e84a752b3a3163d/tumblr_pg14ih0aUf1xde1l9o1_250.png" style="width: 100px; height: 100px; border-radius: 100%; border: white 3px solid; padding: 2px; margin-top: 150px;">  </center>
<div style="margin: auto; width: 430px; color: black; background-color: white; padding: 10px;"> Texte </div>  </div>

Vous remarquerez qu'outre le fait de la répétition du lien de l'image, le même style est répété 4 fois à chaque fois, ce qui peut, quand il y en a plus, assez vite alourdir un code, et le rendre complexe.

L'insertion de CSS via la balise style : class et id

Dans l'exemple au dessus, il n'y avait que 4 répétitions, c'est pas vraiment la mort. Cela dit, mais admettons qu'il y en ait plus : comment rendre tout ça plus digeste ?

Prenons l'exemple de mon code pour les titres :


Voilà ce qui est écrit :

Code:

<div class="titre"> Ceci est un exemple </div>  

Vous remarquerez qu'il y a bien un div, mais qu'il n'est pas suivi de style mais bien de class, et qu'il y a un seul mot à la place du CSS. C'est parce que j'ai lié la class "titre" à ce CSS :

Code:

<style> .titre {border-bottom: white 3px solid; font-size: 24px; font-color: white; padding-bottom: 5px;} </style>  

Les balises style sont écrites tout en haut de ce sujet et me permettre d'écrire (à peu près) comme si j'avais une vraie feuille de style (que chaque forum possède).

Pour créer une class, qui est un élément qui va se répéter, vous devez donc d'abord le définir dans une feuille de style (on verra ça juste après) ou bien directement dans le topic entre balises styles. Pour indiquer qu'il s'agit d'une class on met un point avant le nom de la class (on ne réécrira pas le point dans le html).

L'unique différence avec l'id (div id="truc", ça s'écrit pareil) c'est que les class s'utilisent pour des éléments qui se répètent alors que l'id est pour un élément unique dans la page. Pour le noter dans une feuille de style on utilisera #truc {machin: blabla; machin: blabla;}

Vous remarquerez aussi qu'on écrit un peu différemment, on entoure le code d'accolades {} et non de guillemets "", le reste est similaire.

Vous pouvez utiliser une class partout ou vous utilisez un div. Ainsi vous pouvez mettre une class à une image, un tableau, un div, etc...

La feuille de style et l'insertion d'une feuille de style externe

Normalement, on trouve le CSS sur une feuille de style. Chaque forum possède sa propre feuille de style vierge qui peut-être complétée par tout un taaaas de modifications pour faire un forum personnalisé et unique.

En tant que simple membre, nous ne pouvons (heureusement) pas utiliser la feuille de style du forum. De ce fait, pour mettre des codes complexes ou pour rendre plus léger un code, soit on passe par la balise style déjà vue, soit on peut insérer nous-même une feuille de style.

Il existe (certainement) plusieurs hébergeurs de feuilles de style (que vous pouvez créer via notepad++ ou même sur un blocnote je pense dois y avoir moyen) qui devront être enregistrés en .css personnellement, quand ça me prend, j'utilise archive host qui. Vous devez créer un compte "fichier" et vous pourrez ainsi, comme sur un hébergeur d'image, héberger des fichiers.

Code:

<link href="LIEN" rel="stylesheet" type="text/css">

Comment écrire dans une feuille de style ?

Bien sûr vous pouvez aussi rester en ligne, ça ne change pas l'effet et c'est parfois pratique dans les feuilles de style de forum qui ont un nombre de lignes limitées.

Ce screen est tiré de notepad++ et vous remarquerez qu'il a un code couleur une class est en rouge, (je crois que les id sont en bleu de mémoire), les propriétés sont en violet pâle et les valeurs en noir. Vous pouvez voir aussi un magnifique texte "Je suis une quiche" entouré de /* et */ , en vert, ceci permet d'insérer un commentaire.
Il arrive parfois qu'on oublie un : ou un ; voire un } et à cela notepad ( et d'autres logiciels) sont assez pratiques car si j'ai fais une erreur, par exemple, en oubliant de refermer mon commentaire, eh bien tout le reste du css sera en vert.


Quand utiliser le simple div, style, class, la feuille de style externe... ?

Cela dépend de ce que vous désirez faire. Si on reprend notre exemple précédent, il y a éventuellement un intérêt à utiliser une class sur les images avec un < style> sur la page pour éviter de répéter 4 fois le même code. Et encore. C'est vous qui voyez. Le plus de la class c'est que si vous voulez modifier votre code, par exemple, vous désirez mettre  la bordure des rond à 4px à la place de 2, vous ne serez pas obligé de tout retaper, vous devrez juste le changer à un seul endroit. Et ça c'est tout l'avantage de la class.

Il y a cependant bien peu d'intérêt de mettre 4 lignes de codes sur une feuille externe. De plus, ce qui se trouve sur votre feuille externe, vous ne pourrez pas le modifier facilement, vous devrez modifier le fichier et le réhéberger et remplacer le lien. C'est donc plus à utiliser pour les codes lourds et complexes.

Vous pouvez parfaitement utiliser deux (ou les trois) méthodes en même temps, en mettant la partie la plus complexe et qui ne bougera pas sur une feuille externe, puis, le reste en style si vous pensez le changement fréquemment et que ce code se répète, puis, des div style pour des éléments uniques.



Maintenant que vous savez qu'on peut écrire sur une feuille externe ou ajouter un style, on va pouvoir parler de choses qu'on ne peut pas faire avec un simple div style.

Ne vous attendez pas à avoir un tuto sur comment faire disparaitre une image au passage de la souris pour afficher du texte, internet regorge d'exemples qui vous serons très utiles (et qui me le sont aussi). Je les ai très souvent utilisé mais je ne les ai encore jamais écris moi-même alors je ne préfère pas parler de ce que je ne maîtrise pas totalement.

Alors, pour pouvoir faire un effet au passage de la souris il faut utiliser :hover.

Pour cela, rien de mieux qu'un exemple.

Code:

<style> .exemple:hover {color: black; background: white;} .exemple {color: white; background: black; width: 200px; height: 40px; padding: 5px;} </style>
<div class="exemple"> Ceci est un bel exemple moche. Passez votre souris dessus sévépé. </div>

Comme vous pouvez le remarquer, dans le hover, je n'ai écris que les propriétés qui changent à savoir la couleur de fond et la police d'écriture. Bien sûr, vous pouvez tout réécrire, cela ne fera pas buger votre code, mais ça sera plus long ( et l'efficacité c'est bien !).

Vous pouvez faire ce genre d'effet à tout, vous pouvez faire des effets de changement de couleur, de rotation d'objet, etc. Je vous ferais une liste d'autres propriétés à la fin.



Cette partie-là sera un peu plus théorique, tout simplement parce que je n'en fais quasiment jamais, mais comme elle fait partie des bases, et qu'internet est une ressource élémentaire, alors je devais tout de même l'aborder.

La propriété position sert à positionner (merci) des objets. Dans le codage de RP ou de journaux, elle est assez peu utilisée (sauf si vous faites des machins complexes)  - j'l'ai utilisée une fois dans ma vie pour un code RP et j'ai galéré oui /pan

Et comme quand on galère un peu, on accepte l'aide des autres, voici l'extrait d'un site qui vous sera bien utile : https://developer.mozilla.org/fr/docs/Web/CSS/position

Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, fixed ou sticky.

Un élément positionné de façon relative  est un élément dont la propriété de position calculée est relative. Dans ce cas, les propriétés top ou bottom indiquent le décalage vertical à appliquer et left ou right indiquent le décalage horizontal.

Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute ou fixed. Dans ce cas, les propriétés top, bottom, right et left indiquent les distances entre les bords de l'élément et les bords du bloc englobant . Si l'élément possède des marges, elles sont ajoutées aux décalages.

En vrai je vous conseille simplement de tester, si cette fonctionnalité vous intéresse.

Exemple où je l'ai utilisé dans un code de RP :

 

Ceci est le titre du RP

Ceci est le texte du RP.

 

Code:

 <center><div style="width: 500px; background-color: white; margin-left: 100px; margin-bottom: 50px; text-align: justify; border-radius: 100px 50px 50px 50px; border-left: #ae9527 solid 10px; border-right: #ae9527 solid 10px; border-bottom: #ae9527 solid 2px; border-top: #ae9527 solid 2px;"> <img src="https://www.zupimages.net/up/17/01/f3xx.png" style="float: left; margin-left: -100px; position: absolute; -webkit-transform:rotate(-13deg)">  <div style="font-family: 'LisbonScript'; font-size: 40px; text-align: center; color: #ae9527"> Ceci est le titre du RP </div><br/> <br/> <div style="padding: 30px; padding-top: 50px; color: black;"> Ceci est le texte du RP. </div>  </div> </center>

Dans cet exemple, j'ai utilisé la position sur l'image, pour qu'elle ne bouge pas, et qu'elle soit au dessus du codage du RP. J'ai utilisé les marges et le float pour le positionner plus précisément. Sachez cependant que j'ai écris ce code y'a au moins 3 ou 4 ans et que si c'était à refaire, je l'aurai pas fais ainsi, on évolue tous et on voit les raccourcis et les fonctions se préciser en testant les différentes propriétés :D

En complément de position pour situer votre objet (vivement conseillé, pas comme moi, hein) vous pouvez utiliser :

Code:

 left : ?px;
right: ?px;
top: ?px;
bottom: ?px;

Vous n'êtes pas obligés de tous les utiliser et les valeurs peuvent être négatives ou positives.



Rien de bien folichon, cependant, ce sont des petits tips que je ne sais où placer mais qui sauront sans doute vous aider et vous donner des idées.

On n'utilise pas que les class dans une fiche css, on utilise toutes les propriétés. Par exemple

a
{color: black;
background-color: white;}

Va permettre de donner à tous les liens une couleur noire et un arrière plan blanc.

On peut cependant être encore plus précis.

.presentation b
{color: orange;
font-size: 14px;}

Ici, dans notre class qui s'appellera presentation (sans accent), tout ce qui est en gras (le b pour bold) va être en plus en orange et en taille 14. En dehors de notre class presentation, ils seront juste en gras standard.

Tout ce que nous avons mis précédemment dans notre style, on peut l'inclure, par exemple :

.presentation img
{border: 1px solid black}
Toutes les bordures des images dans la présentation seront noires, 1px et unies.

.cadre table
{background: url('LIEN') repeat;}
On peut aussi insérer des images de cette façon, ainsi, tous les tableaux auront cette même image d'arrière plan s'ils se trouvent à l'intérieur de notre class nommée cadre.



• z-index
Définit les plans, automatiquement, tout est au même plan, il s'utilise uniquement si un élément est positionné avant (position), le chiffre le plus grand est celui qui est le plus devant.
z-index: 1; s'affichera derrière z-index: 2;

• transform
- souvent utilisé avec rotate(?deg) pour faire tourner un objet, le nombre peut être négatif ou positif et s'exprime donc en degrés
- scale(de 0.1 à 1) permet de redimentionner à l'échelle, par exemple scale(0.5) permet de diviser par deux la taille ou bien de l'augmenter si le chiffre est plus grand que 1 mais faut-il que l'image le veuille bien

• opacity
Définit la transparence d'un élément de 0 (invisible) à 1 (totalement visible
opacity: 0.5;
Cette opacité s'applique à l'ensemble de l'objet. Si vous désirez rendre uniquement un fond moins opaque (et pas le texte qui viendrait éventuellement par dessus) il faudra coder la couleur de l'arrière plan en rgba.
Ou bien vous pouvez aussi mettre une image à moindre opacité en arrière plan, mais, c'est plus chiant.

• transition
Comme vous l'avez vu sur l'exemple avec le hover, le texte est devenu d'un coup noir et le fond d'un coup blanc.
On peut rendre cela plus esthétique en mettrant une transition, c'est à dire en voyant la couleur. Cela s'appliquera aussi sur les images qui tourneront si vous passez la souris dessus, par exemple, et qui ne passeront pas simplement de la position de vers le haut à vers le bas.
Il va montrer les étapes intermédiaires entre l'état initial et la transformation demandée.
On peut ainsi choisir la durée et le type de transition.
transition-duration: ?s; qui se détermine en secondes et qui concerne le temps que va prendre la transition
transition-delay: ?s; qui va déterminer à quel moment après la transition va commencer (de suite, automatiquement) notamment si vous avez utilisé un hover

Le problème de cette propriété c'est qu'elle n'est pas lue par tous les navigateurs, alors, lorsqu'on code un truc assez important (pour un thème par exemple) et qu'on veut s'assurer qu'il marche, il faut donner les indications aux différents navigateurs.
-o- pour Opera
-moz- pour Firefox
-webkit- pour Chrome, Safari et Androi
-ms- pour Microsoft / Edge
Avec le temps, les navigateurs ajoutent de plus en plus de propriétés, alors ce qui est vrai aujourd'hui ne le sera peut-être pas demain, fût un temps ou google chrome ne gérait pas la fonction border-radius...

• box-shadow
Définit les ombres d'un bloc, pour avoir l'explication dans son intégralité vous pouvez aller ici https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow
Autrement, il faudra définir la taille de l'ombre ainsi que sa couleur
box-shadow: 2px 2px black;

• text-shadow
même fonctionnement, mais pour le texte cette fois-ci



Fin.

Non j'déconne.

Il existe différentes manières de coder, développeur web c'est avant tout un métier dont le css et le html sont des bases. Restons donc humbles, d'autant que la façon de coder sur forumactif est assez artisanale et pas toujours correcte, on fait avec ce qu'on a.

Je terminerai avec un point qui m'est plutôt important : l'ergonomie. Coder des postes, des journaux ou autre, si ça vous plaît c'est une bonne chose, et ça vous entraîne. Cependant, il ne faut pas oublier que ça ne reste qu'une mise en page et que le mot d'ordre, de mon point de vue, c'est l'ERGONOMIE. Si votre code nous empêche de lire correctement un RP ou un journal ou qu'il le rend difficile d'accès (notamment avec plein d'overflow, d'images qui couvrent les textes) c'est qu'il n'est pas adapté à ce qui doit être.

Faites donc attention à ne pas "surcoder" dans le simple but de faire des choses, surtout si elles rendent vos réponses moins lisibles !