Tout d'abord, il faut prendre en compte deux choses : - Il est en anglais (width = largeur, tr = table row, etc ) - Il s'agit d'un codage, tout comme le BBCode du forum, mais bien plus poussé. Par exemple, imaginez que dans une balise BBCode, vous puissiez mettre [color:8b89=red;size=18;border double solid], ne serait-ce pas super ? Et bien le HTML le permet (avec des balises et des propriétés différentes)
Remarques : - N'oubliez pas de fermer les balises, certains gros problèmes de buguage de code peuvent venir de là ! - N'oubliez pas les caractères tels que : " ou ; ou < > car ils sont très importants. - Il est possible de combiner les éléments. A contrario du spoiler de forumactif par exemple, qui ouvre tous les spoilers à l'intérieur de lui-même.
Une div emboîtée dans une div, emboîtée dans une div, emboîtée dans une div :evil: :evil:
Les couleurs
Il existe trois méthodes :
1 - La première est l'hexadécimal (vous savez, le #ffccff ou bien le #009966). C'est tout bête.
3 - La troisième méthode est le rgba (vive le HTML !). Elle consiste à utiliser rgba(x,y,z,A), sauf que x y z et A sont des nombres. x y et z sont des entiers entre 0 et 256, et A un décimal compris entre 0 et 1. Ainsi, pour avoir du gris semi transparent : rgba(20,20,20,0.5) plus ou moins. Très pratique pour donner de la transparence et permettre de rendre certaines couleurs moins flashy.
× Il existe ce site ( Cliquez ici ) qui vous permettra de multiples utilisations, dont : - Trouver une correspondance rapide entre l'hexadécimal (#ffccff) et le rgba. - Rechercher vous même la couleur voulue sur une palette de couleur, de sorte à avoir le code hexadécimal (#ffccff par exemple) de la couleur que vous rechercher. Très pratique donc.
× Une liste des couleurs hexadécimales et en RGB est disponible ici pour vous faciliter la vie.
Indications de mesures
Echelle : % => pourcentage in => inch (pouce) cm => centimètre mm => millimètre em => 1em vaut la taille de police actuelle. 2em signifie deux fois la police actuelle. Exemple : Si un élément est affiché avec une font de 12 pt, alors '2em' est 24 pt. Très utile parce que permettant de s'adapter automatiquement au font que le lecteur utilise. pt => point (1 pt = 1/72 inch) pc => pica (1 pc = 12 points) px => pixels (un point sur l'écran)
Vous pouvez voir l'émargement de 20px, et ceci aussi bien sur la gauche que sur la droite (enfin si ma phrase est assez longue pour pouvoir vous le montrer évidemment )
Vous pouvez aussi remarquer que la balise < font > que j'utilisais pour réduire la taille du texte subit les mêmes problèmes que le p style, placée avant un élément tel que [ center ], [ code ] ou autre, elle n'influe plus une fois que cet élément s'achève.
Evidemment, que ce soit le padding ou le margin, pour les valeurs, vous pouvez les modifier et remplacer 1cm par 10px ou 2em (dans le padding j'avais mis 30px par exemple).
La balise < div > et la balise < span >
Qu'est ce que le div ? Et bien le div, c'est un contenant de type display : block. Le span est un contenant de type display : inline. L'un sert pour mettre du contenu dedans, l'autre sert lorsqu'on veut modifier la taille de police ou la couleur sans faire de retour à la ligne (car le bloc oblige un retour à la ligne).
Il existe une troisième propriété, le display : inline-block, qui combine les deux avantages des deux types d'affichage, que nous verrons plus bas dans ce tutoriel.
Passons donc à leurs propriétés, les plus utilisées ici seront les suivantes : width / height / margin / padding / border / border-radius / background-color / background-image / font-size / color / font-family / font-weight. Bien sûr, il existe toute une multitude de propriétés que vous pourrez inclure dans une div ou autre élément, mais il est à noter que toutes les propriétés ne fonctionneront pas avec tous les éléments. Certaines sont propres à certains éléments.
- width:500px; => Ici, il s'agit d'indiquer la valeur en pixels de la largeur. La valeur idéale pour un code qui remplit presque toute la page sur ce forum sans le déformer est d'environ 742px. - height:60px; => Il s'agit d'indiquer la valeur en pixel de la hauteur.
A noter que pour width et height, vous pouvez, au lieu de mettre une valeur en pixels, mettre "auto". Je vous conseille de définir une valeur en width mais de mettre auto en height. Simple conseil.
Résultat :
Vous ne le voyez pas parce que je n'ai pas défini de bordure ni de couleur de fond, pourtant le retour à la ligne va être visible. Et dans l'élément d'après, vous verrez qu'il existe bel et bien.
- border:3px double dimgrey => Border... bordure... Il s'agit d'indiquer la taille de la bordure en px, le style de la bordure et enfin la couleur. La couleur peut être celle des trois méthodes citées plus haut dans la partie appropriée. Pour les styles de bordure, consultez ce site qui vous en apprendra plus sur les différents styles.
Résultat :
- border-radius:0px 0px 20px 20px. => Pas grand chose à dire si ce n'est la logique : border-radius représente un arrondissement. La première valeur concerne l'arrondissement du coin supérieur gauche, la seconde le coin supérieur droit, la troisième le coin inférieur gauche et enfin la quatrième le coin inférieur droit.
Résultat :
- Cette fois, dans cette div, j'y ai mis "background:rgba(100,100,100,0.5)". Qu'est-ce que cela représente ? Très simple. De l'anglais, cela signifie "fond". rgba est une des trois méthodes cité plus haut pour gérer les couleurs. Résultat :
Les trois méthodes citées dans la partie " Couleurs " sont applicables pour la couleur du background.
Mais admettons que je préfère une image : "background-image:url('https://2img.net/image.noelshack.com/fichiers/2012/36/1347213868-mel-sign02.png')
Résultat :
Et hop vous avez une image de fond !
Admettons que je veuille une hauteur fixe mais du texte qui puisse défiler volontairement via une barre latérale : j'utilise l'overflox. Attention, il faut définir le paramètre "height" de la div avec une valeur.
Je remarque que le cadre est trop petit en hauteur et se fait mordre sur la marge : j'agrandis le " height " et j'ajoute le padding ("padding-left:10px;padding-right:10px;") :
Petite précision : le padding étire. Si vous mettez un padding-left de 10px, la largeur (width) totale de votre div ne vaudra plus 500px mais 510px. Et si on prend en compte le padding-right, qui vaut aussi 10px, la div vaut alors 520px en largeur.
- Je désire changer la taille, la couleur et la police d'écriture : "font-size:10pt;color:slategrey;font-family:Arial;" donnera :
- Je désire centrer ou décaler mon élément, comment faire ? Pas de panique, vous n'avez pas besoin d'utiliser un quelconque < center >, il suffit juste d'indiquer le margin. Le "margin : auto ;" vous servira pour centrer votre élément. Si vous désirez ne pas le centrer, mais simplement le décaler de la gauche, il vous suffit de faire "margin-left : 10px ;" pour le décaler vers la droite de 10px.
La balise < font >
Nous attaquons ensuite le font style. Le font style, c'est une balise qui permet de personnaliser le texte sans devoir créer une div, un peu comme une [ color=red ] ou [ size=16 ] de BBCode, mais version HTML bien sûr.
Démonstration :
< font style="font-size:11px;color:#ffcc99;font-family:Arial Black;letter-spacing:1px;" > donnera :
Ce résultat là
Comme dit dans les indications de mesure, ne confondez pas pt et px, le px étant plus petit que le pt et donc plus précis.
Démonstration entre 12 pt et 12 px < font style="font-size:12pt;color:rosybrown;" > // Et avec le BBCode en size=12... C'est un poil plus petit \\
- Il est aussi possible de choisir la police d'écriture. Nous reprenons notre font et nous lui ajoutons ceci : « font-family:'Courier New'; » < font style="font-size:12pt;color:rosybrown;font-family:'Courier New';" >
Remarque importante 1 : Il est possible que vous utilisiez des polices " personnalisées " (par exemple si vous utilisez Photoshop et que vous avez téléchargé une police d'écriture) puis vous testez par hasard et vous remarquez que la police Inception par exemple, est utilisable. Le petit bémol se situe ici : vous verrez la police personnalisé parce que vous l'avez installé sur votre ordinateur, mais ceux qui ne l'ont pas installés ne la verront pas. Pour ceux qui ne pourront pas la voir, une des polices d'écriture " de base " sera déterminée. Il existe néanmoins un certain nombre de polices d'écritures dites " par défaut " qui se trouvent sur tous les types d'ordinateurs, tel que l'Arial, le Comic sans MS, le Courier New, bref, celles de la liste de Forumactif (Arial - Arial Black - Comic sans MS - Courier New - Georgia - Impact - Times New Roman - Trebuchet MS - Verdana)
Remarque importante 2 : Cette balise, tout comme le < p style=... > subit le même problème : l'utilisation de certaines balises comme le [ center ], le quote, le code, " annulent " cette balise.
Remarque importante 3 : On préférera indiquer directement dans la div ou span la font-family, la color et la font-size, afin d'éviter d'utiliser la balise font.
Le display : inline-block et le tableau
Là, ça devient intéressant. Commençons par le display inline-block.
Le display inline-block combine les atouts des éléments de type inline et de ceux de type bloc : ils forment des blocs qui peuvent être positionnés sur une même ligne, ce qui évite ainsi de devoir utiliser un tableau. Il est vrai que si un tableau semble plus facile d'utilisation, il tend a être déprécié par les nouvelles versions HTML, bien que restant valide.
Comment marche le inline-block ? Très simplement ! Imaginons que vous voulez 3 blocs sur une même ligne, d'abord, il faut comprendre que pour les avoir sur la même ligne, leur largeur totale doit être inférieure à la largeur maximale (pour le forum par exemple, il faut éviter de dépasser 742px de largeur dans les posts, donc toute la largeur, à la fois celle des width, de vos paddings, de vos margins, doit être prise en compte.
Il est aussi moins " pénible " à comprendre que le tableau, puisque, si vous voulez d'abord un grand élément puis saut de ligne et trois alignés,
Mise en pratique : il suffit d'indiquer " display : inline-block ; " dans votre balise.
Une div de width 200px et de margin-right : 10px ;
Une div de width 200px et de margin-right : 10px ;
Une div de width 200px et de margin-right : 10px ;
A noter que pour aérer votre code tout en faisant fonctionner le display : inline block, vous pouvez utiliser la balise de commentaire qui est la suivante :
Code:
<!-- VOTRE COMMENTAIRE, pas forcément obligé de marquer quelque chose, mais vous pouvez
sauter deux lignes et terminer votre commentaire avec -->
[color:8b89=red;size=18;border double solid]
Ceci évite de vous retrouver avec
Code:
<div style="display : inline-block ; width : 200px ; border : 2px solid blue ; margin-right : 10px ;">Une div de width 200px et de margin-right : 10px ; </div><div style="display : inline-block ; width : 200px ; border : 2px solid blue ; margin-right : 10px ;">Une div de width 200px et de margin-right : 10px ; </div><div style="display : inline-block ; width : 200px ; border : 2px solid blue ; margin-right : 10px ;">Une div de width 200px et de margin-right : 10px ; </div>
[color:8b89=red;size=18;border double solid]
et permet d'obtenir :
Code:
<div style="display : inline-block ; width : 200px ; border : 2px solid blue ; margin-right : 10px ;">Une div de width 200px et de margin-right : 10px ; </div><!--
--><div style="display : inline-block ; width : 200px ; border : 2px solid blue ; margin-right : 10px ;">Une div de width 200px et de margin-right : 10px ; </div><!--
--><div style="display : inline-block ; width : 200px ; border : 2px solid blue ; margin-right : 10px ;">Une div de width 200px et de margin-right : 10px ; </div>
[color:8b89=red;size=18;border double solid]
Attention : Il est très important, pour que le display inline-block fonctionne, que les div ne soient pas séparées par un saut de ligne (c'est pour ça que la méthode d'utiliser un commentaire est bigrement pratique, grâce à elle vous pouvez faire plusieurs sauts de ligne sans craindre de perdre le display : inline-block)
Le tableau maintenant : Tout d'abord, insérez la balise < table > puis la balise < tbody >. Maintenant, nous passons à ce qui va être intéressant. Comprendre comment fonctionne le tableau. Pour le montrer, je vais le mettre en pratique. Je vais créer le tableau.
Je viens de marquer ceci (sans les espaces) : < table border=2 > (La bordure du tableau vaut donc 2)< tbody >< tr >< td >. Ce qu'il faut comprendre, c'est que tbody désigne l'ensemble, tr désigne la ligne et td la colonne. Ainsi, si je ferme la td par < /td >
en en ouvrant une autre juste derrière par < td > a nouveau, j'ai une seconde colonne qui apparaît ! (Mettre < /td > et < td > côte à côte, ne pas les séparer par du texte, c'est très important aussi !). Maintenant, je désire fermer la ligne : je ferme d'abord la td puis la tr
pour réouvrir une tr et une td comme cela.
Et si vous voulez un tableau uniforme, je vous invite à utiliser une div style en définissant la largeur et éventuellement la hauteur si vous n'avez pas peur d'utiliser un overflow dans le tableau (comme je viens de le faire pour la colonne de la ligne où j'écris.
Vous pouvez noter que le padding marche aussi. Bah oui logique, c'est du HTML, je l'ai dit, le HTML permet d'énormes possibilités et peu de contraintes (sauf des contraintes techniques comme créer un arrondi " cassant " et non plus arrondi justement
Ah voila une autre propriété intéressante d'un tableau HTML : le colspan. S'appliquant aussi bien au td qu'au tr, il permet d'insérer le nombre de valeur que la ligne ou la colonne prendra. Si vous mettez < td colspan="2" >, ce que je viens de faire, vous indiquez en réalité que cette colonne prendra la place de deux colonnes. Evidemment, vous pouvez allez au delà de deux. Et vous pouvez aussi l'appliquer pour les lignes (tr). Néanmoins, si vous désirez mettre une colonne prenant la place de 3 colonnes, donc avec td colspan="3", il vous faudra créer au moins une troisième colonne dans une des autres lignes. (En tout cas, j'ai essayé avec seulement deux colonnes et cela n'a pas fonctionné pour colspan="3")
Pour fermer le tableau, vous fermez évidemment la colonne et la ligne, puis vous fermez le tableau en faisant < /tbody > puis < /table > Vous avez aussi pût remarquer qu'à la deuxième colonne de la deuxième ligne, je n'ai rien mis. En fait, je n'ai ouvert qu'une colonne dans la seconde ligne, que j'ai refermée puis ouverte une nouvelle ligne. Vous pouvez faire l'effet inverse : choisir, dans une ligne précise, de mettre trois colonnes au lieu d'une. Petite info : td = Table Data = Colonne. Tr = Table Row = Ligne (Row vous donnera aussi rangée en traduction, mais ici il s'agit de la ligne et non pas de la rangée, qui désignerait la colonne). Petit moyen mnémotechnique : Je veux tracer une ligne droite devient (D)ro(i)w(te).
Remarque importante : Ne pas inverser l'ordre ! Vous ouvrirez toujours < tr > en premier puis < td > et lorsque vous fermerez, ce sera le miroir, vous ferez < /td > puis < /tr >. (Le tout sans les espace bien sur)
Code HTML
Mise à disposition un code classique de RP, le code initialement créé par Lleyton Benam qui a si gentiment accepté de le mettre à disposition de tous Conformément à ce que je vous ai dit, n'oubliez donc pas de prendre tout le code et de ne pas prendre simplement que la première partie sinon des déformations1 pourraient survenir.
)