Sujet n°8628
Posté par Brendan75 le 30 Nov - 20:53 (2010)
Titre : Présentation en HTML/CSS [en cours]

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 :
Code:
<table><tr><td>Texte</td></tr></table>
(vérifier bien que vous avez activer le HTML sans quoi cela ne marchera pas.)Pour l'instant, hormis un texte un peu gros, vous ne voyez rien, normal, le tableau n'a ni contour ni fond, mais nous verrons tous cela plus tard, pour l'instant je vous donne un code déjà fait qui vous permettra de voir le tableau :
Code:
<table><tr><td>Texte</td></tr></table>
Ce n'est pas beau, mais nous allons pouvoir observer le résultat de nos manipulation grâce à ça. Bien, maintenant, voyons comment modifier la taille de notre petit bloc car pour l'instant, elle est ajusté à celle du texte. Pour cela, il suffit d'ajouter les attributs width (largeur) height (hauteur) au notre "table", on les ajouter entre les "< " de cette façon : [table width="100px"] (en remplaçant les "[ ]" par "< "), vous remarquerez que l'unité est précisée et que le tout est entre guillemets, vous pouvez préciser la taille avec une valeur absolue, un nombre de pixel, ou relative, avec un pourcentage en mettant l'unité "%". Je vous laisse faire des essais, bien sûr, mais pour aller vite, passons à la suite.
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é.

solid
dashed
dotted
double
groove
ridge
inset
outset

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. Clin d'œil foireux


Posté par Speed le 30 Nov - 21:10 (2010)
Oh, c'est parfait tout ça !
Pas trop dur à prendre en main, et entièrement personnalisable ! Ça pourra servir à beaucoup de monde !

Merci et bravo !

Posté par Cypmars le 30 Nov - 21:27 (2010)
oui c'est exelent brendan Imbécile heureux
j'attend la suite 42

Posté par Nuri Yuri le 30 Nov - 21:47 (2010)
Ce tuto peut être utile ... Le seul problème c'est que le HTML est Désactivé sur PSP donc on auras beau comme l'atteste l'image ci-dessous mettre du HTML dans nos préso ça ne donneras pas le résultat souhaité.


Il doit pas y avoir beaucoup de balises autorisées sur PSP ...

Posté par Brendan75 le 1 Déc - 07:13 (2010)
De quand date ton test ? Car chez moi ça marche :
Texte


Merci aux deux autres, je continues tout ça cette après midi. Imbécile heureux

Posté par Nuri Yuri le 1 Déc - 13:32 (2010)
D'hier ...


Normalement si la case Désactiver le HTML n'est pas coché le html doit être actif, mais je pense que sur le Forum seul les "Admins" peuvent utiliser le html si il est désactivé.

Posté par Qwerty le 1 Déc - 13:36 (2010)
<table style="background: red;"><tr><td>D'hier ...</td></tr></table>

Moi ça marche pas... Peut-être que les admins effectivement.


EDIT: Je me suis permis d'éditer le titre du topic car je ne sais pas ce que c'est une "Présenation "


Posté par Nuri Yuri le 1 Déc - 17:35 (2010)
Faudra regarder dans le PA et mettre les balises qu'il faut pour une prés (comme dans le screen d'au dessus) et voir si un membre peu les utiliser.

Posté par Soul Matt le 1 Déc - 19:50 (2010)
Cher moi ça marche
Suite
pas  :^^:

Posté par RevengeOfShadow le 2 Déc - 07:30 (2010)
Oui, il faudrait autoriser plus de balises, mais alors attention aux failles éventuelles ^^'.

Posté par Soul Matt le 2 Déc - 19:30 (2010)
PHP est autorisé sur le forum  :?  ?

Posté par Nuri Yuri le 2 Déc - 20:54 (2010)
Le php n'est pas autorisé dans les templates alors il faut pas rêver pour qu'il le soit dans un message.
Et le php n'a pas de très grande utilité dans une présentation ...

Posté par RevengeOfShadow le 3 Déc - 18:39 (2010)
Euh ben y'a l'include quoi ^^.
Donc ça peut être utile pour ça Clin d'œil foireux.

Posté par Nuri Yuri le 3 Déc - 21:09 (2010)
Non utiliser include en php vers un autre serveur est pas très intelligent ... autant copier le code(propre) ou utiliser object/iframe ...

Posté par RevengeOfShadow le 4 Déc - 16:36 (2010)
C'est sûr mais bon ... je crois que ce qu'il voulait dire c'était ça ^^. Sinon iframe = bouhouhou ! Imbécile heureux

Posté par PiVa le 5 Déc - 18:50 (2010)
Je confirme, il faut y être autorisé pour l'utiliser.

Posté par Nuri Yuri le 5 Déc - 19:02 (2010)
Il a pas légèrement fumer celui qui a mis ce tuto en annonce globale ?
Ce tuto n'a rien a faire dans la section ressources ou role play ._.

Posté par RevengeOfShadow le 8 Déc - 08:00 (2010)
Non non il a pas fumé légèrement, beaucoup plus Imbécile heureux ...

Posté par Brendan75 le 21 Déc - 16:22 (2010)
Bonjour à tous,

Tout d'abord, je vais remettre ce sujet à sa place, ensuite, je vous annonce que le HTML/CSS est désormais accessible aux membres (en théorie) et que je vais donc continuer et finir ce tutoriel.

Posté par Moy le 21 Déc - 16:39 (2010)
Texte

Je teste...
Edit : ça fonctionne 

Posté par Nuri Yuri le 21 Déc - 17:06 (2010)
Il l'est en partie effectivement ...(Il manque quelque balises mais c'est déjà ça)
On attends la suite alors ^^

Posté par Ram' le 21 Déc - 19:06 (2010)
Certaines balises ne seront pas ouvertes aux membres, Youri, en raison des dangers qu'elles pourraient entraîner pour le forum.
Renseignez vous auprès de Brendan pour savoir lesquelles sont autorisées.

Posté par Nuri Yuri le 21 Déc - 19:36 (2010)
<big> n'a rien de dangereux XD
C'est vrai que object / iframe / script / style pourraient être potentiellement dangereuses ...

Edit : Les styles ne fonctionne pas(ils sont formaté pas de couleurs pas de centrage et autre on as le droit qu'a la taille).

Posté par Brendan75 le 21 Déc - 22:50 (2010)
Pour <*big*>, elle ne sert à rien, donc on ne l'a pas ajouté. Comment ça les style ne marche pas ? ça te donne quoi ?

Posté par Nuri Yuri le 22 Déc - 08:23 (2010)
Code:
<div>texte</div>
<span>texte</span>

texte

texte
Normalement il y a style="width: 650px; font-size: 16px; color: rgb(51, 204, 0);" dans les balise div et span.
Le forum l'a certainement manger ...
Si le style ne fonctionne pas ça sert pas a grand choses de faire une présentation en html, peut être pour les tableaux qui serons transparent mais c'est tout ...

Posté par Lock's le 16 Jan - 20:36 (2011)
Certaines balises ne sont pas encore activées.
Regardez par vous-même, sachant que j'a entré exactement les même codes :
http://rebg.xooit.fr/t7-pres.htm#p7
./8014.html

Posté par RevengeOfShadow le 31 Mar - 06:37 (2011)
Génial, je vais peut-être rédiger ma présentation de projet comme ça mais le tuto est pas super avancé, même si je m'y connais en HTML/PHP/CSS.
Ah et juste pour le fun, les ombres en CSS, c'est du CSS3, d'où son incompatibilité avec IE. Tu peux aussi faire des dégradés en CSS3, des coins arrondis ...

EDIT: Je voulais savoir, ce tuto va être continué ou laissé tel-quel ?

Posté par Brendan75 le 2 Avr - 12:43 (2011)
J'avais arrêté ce tuto parce qu'apparemment, seul les admins peuvent utiliser le HTML sur le forum, mais si ce n'est plus vrai,je vais le continuer.

Posté par Nuri Yuri le 2 Avr - 12:59 (2011)
Test

Ça aurais du être : Test
Les admins sont toujours les seuls à pouvoir utiliser le HTML, ceci dit on peut toujours leur demander d'éditer la présentation Coupable

Posté par Sphinx le 5 Avr - 18:42 (2011)
Yuri, la balise DIV utilisée sans attribut ne va certainement pas te colorer ton texte en rouge :!


Puis le HTML n'est pas vraiment plus facile à utiliser que le BBCode xP

Posté par Nuri Yuri le 5 Avr - 18:47 (2011)
Heu, pour info le forum à censuré l'attribut.
C'est ce que je veux dire par là.
HTML presque Ok | CSS => Interdit.

Posté par Pαlвσlѕку le 5 Avr - 20:38 (2011)
Je viens d'aller faire un tour dans le panneau d'administration.
Le HTML semble bien être activé pour tout le monde, mais seules les balises suivantes semblent être autorisées sur le forum :

Code:
param, object, div, span, table, tr, th, td, img, li, ul

Posté par Nuri Yuri le 5 Avr - 20:46 (2011)
Oui mais le HTML sans le CSS (style=) ça sert pas à grand choses dans une présentation.

Posté par RevengeOfShadow le 22 Avr - 00:27 (2011)
Et j'ai eu une idée ... Ce serait pas possible de dire aux membres de faire leurs présentations sur une page HTML, de faire passer ça par une équipe de validateurs HTML bénévoles (je suis là au besoin Clin d'œil foireux) et si c'est valide, de le passer sur le forum ?
Après c'est juste une idée comme ça hein ...

Posté par Pαlвσlѕку le 22 Avr - 18:21 (2011)
Très peu de membres savent coder en html, donc je pense que ça ne serait pas très utile.

Posté par RevengeOfShadow le 24 Avr - 12:12 (2011)
Dommage, j'aurais adoré faire ma présentation en HTML :/, l'avantage c'est qu'on peut ajouter du contenu dynamique (vidéos ...), la modifier très facilement et tout, mais bon, tant pis :(.

Posté par Sphinx le 27 Avr - 13:31 (2011)
Tu peux déjà mettre des vidéos avec le BBCode, RL77LUC xP

Vous devez savoir que le BBCode n'est ni plus ni moins qu'une version simplifiée de l'HTML, et qu'il permet déjà pas mal de choses :

Posté par RevengeOfShadow le 27 Avr - 15:10 (2011)
Je connais le BBCode, mais faire une présentation en HTML offre bien plus de possibilités qu'en BBCode tout de même.

Posté par Pαlвσlѕку le 27 Avr - 19:54 (2011)
Mais sans CSS, le HTML ne sert pas à grand chose. Clin d'œil foireux

Posté par Nuri Yuri le 27 Avr - 20:16 (2011)
Donc le HTML du forum sert à rien et ce tuto n'a pas le bon titre.

Posté par Sphinx le 27 Avr - 21:50 (2011)
Clin d'œil foireux Certes le (x)HTML (avec CSS) est plus puissant, mais le BBCode est bien plus facile à utiliser, et pour des en dehors des tables où - je le consens - BBCode aurait bien des progrès à faire, niveau rendu BBCode vaut pratiquement HTML pour moins d'efforts ^^