Bonjour, Aujourd'hui je vous propose un tutoriel qui vous permettra d'alléger grandement vos présentation et de les rendre aisément modifiable : le Code. Il ne s'agit pas du tout d'apprendre le code html (bien que cela puisse être utile pour approfondir) mais de voir différent code simple pour arriver à un résultat assez vite. Voici les différents point que nous allons aborder : les "blocs", les bordures, les fonds et le texte. 1. Les "Blocs" Commençons par définir ce que j'appelle un bloc, il s'agit d'une boîte dans laquelle on peut mettre du contenu et que l'on peut "décorer" d'où son grand intérêt, pour schématiser, la plupart du temps, il s'agit du cadre avec fond dans lequel est toute la présentation. Nous allons utiliser les tableaux pour faire des boites, mais des tableaux HTML et non BBcode, avant tout, sachez que les balises HTML fonctionnent par paire comme celle du BBcode, mais qu'elles sont entre "< ". Voici le code pour un tableau en HTML :
Maintenant que nous savons changer le bloc, voyons comment le mettre où l'on veut, pour cela, voyons l'alignement. Tout d'abord, il existe deux type d'alignement : vertical et horizontal, l'alignement vertical ne vous servira pas vraiment sur un forum donc je vais passer outre pour aborder directement l'alignement horizontal. L'alignement horizontal est aussi un attribut comme les dimensions : "align", il peut prendre prendre les mêmes valeurs que pour le texte, c'est-à-dire : left, center et left, ce qui donne [table align="center"] par exemple. Là aussi, je vous laisse le plaisir de faire vos tests, passons à plus dur, avec du CSS. Le CSS doit être intégré dans le tableau, en tant qu'attribut, l'attribut "style", comment ? Cela vous dit quelque chose ? En effet, c'est celui que j'ai utilisé pour rendre le fond rouge, vous en avez donc déjà un exemple. Entre les guillemets, il y a directement les attribut CSS (attention, à ne pas vous mélanger les pinceaux entre les attributs HTML et CSS), il fonctionnent un peu différemment, prenons l'exemple du fond : "background: red;", ici, pas de "=" mais deux points et pas de guillemets non plus en revanche, à la fin de chaque attribut, il faudra un point-virgule, voilà tout. Il existe des attribut CSS pour les dimensions, height et width (comme de par hasard...) en revanche, ça ne marchera pas pour l'alignement, mais il y a les marges ! Une marge, vous savez tous ce que c'est : une blanc laisser sur un côté, et bien en CSS c'est pareil. Mais attention, il y a quatre côtés et si vous ne lui dîtes pas duquel vous parler, le code, ne le saura pas, il faut donc préciser et pour cela, il existe 4 attributs : margin-top, margin-left, margin-bottom et margin-right, vous n'avez qu'à leur donner une valeur (relative ou absolue) et vous aurez un jolie marge où vous le souhaitez. Mais attention, les marges sont extérieurs ! Pour les marges intérieur, il faudra utiliser les attributs padding. Je vous laisse tester, la partie sur les blocs est finie ! 2. Les Bordures Les bordures ou contours sont le cadre qui entoure le bloc, on peut en choisir l'épaisseur, la couleur et même le style. Avant tout, il faut savoir que si on ne voit pas de cadre pour l'instant, ce n'est pas qu'il n'existe pas, mais parce que sont épaisseur par défaut est 0. Ainsi pour faire apparaitre les contours, il suffit de changer cette valeur, pour cela il y a la méthode HTML et la méthode CSS. Commençons par le HTML, il existe l'attribut "border" auquel vous pouvez donnez la valeur que vous voulez. Le CSS permet d'aller un peu plus loin, l'attribut "border" prend des valeurs de la forme "1px #000000 solid", on repère trois éléments : l'épaisseur en pixel, la couleur et le style. Pour la couleur, il y a plusieurs façons de procéder, le code hexadécimal avec le symbole "#" devant comment dans l'exemple, les valeurs RVB de la façon suivante "rgb(0,0,0)" (à noter qu'il existe aussi rgba(r,g,b,a) où a est la transparence entre 0 et 1) ou le nom de certaines couleurs comme "white", "grey", etc. Pour le style, c'est un peu plus complexe, voyons tout cela dans le prochain paragraphe, mais avant cela, encore une précision, il existe des attributs CSS "border-left", "border-right", "border-top" et "border-bottom" qui ne gère qu'un côté.
Voilà un petit récapitulatif des principaux styles, sachez seulement que pour la plupart il faudra mettre une certaine épaisseur afin d'admirer le style : à 1px de large, les contours seront toujours comme "solid" sauf pour les pointillés. Ce paragraphe étant un peu court, je vous propose une petit complément pour les utilisateurs de Firefox, Safari ou Chrome : les ombres. AVant tout, il faut savoir que les ombres sont des attributs CSS qui n'existe pas sur le CSS "de base", c'est à chaque navigateur de faire son propre attribut ce qui explique qu'il en existe un pour Firefox, un autre pour Chrome et Safari et aucun pour Internet Explorer. Le bon côté des choses, c'est qu'ils marchent tous pareil : "8px 8px 0 #000000", 8px pour le décalage à droite et en bas, 0 pour le flou (c'est 0 sans unité parce que c'est 0, mais sinon, il faut préciser "px") et enfin la couleur. Maintenant, il n vous reste plus qu'à mettre un attribut "-moz-box-shadow" pour firefox, et un autre "-webkit-box-shadow" pour Safari et Chrome. Suite à venir Surtout n'hésiter à poser toute vos questions et/ou à demander des infos sur les codes et attributs. |
Texte |
D'hier ... |
Texte |
Code: |
<div>texte</div> <span>texte</span> |
Code: |
param, object, div, span, table, tr, th, td, img, li, ul |