Pokémon Script Project Forum Index

Manuel | Search
 Information des admins 
Si vous désirez parler de PSP ou obtenir du soutient là dessus, merci d'aller faire un tour sur https://pokemonworkshop.com/forum/index.php Imbécile heureux

Présentation en HTML/CSS [en cours]
Goto page: 1, 2, 3  >
 
Post new topic   Reply to topic    Pokémon Script Project Forum Index -> Game Making -> Ressources techniques -> Tutoriels
Previous topic :: Next topic   
Author Message
Brendan75
Ex-staff


Joined: 24 Mar 2008
Posts: 1,827
Localisation: Paris
Masculin

PostPosted: Tue 30 Nov - 20:53 (2010)    Post subject: 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



Last edited by Brendan75 on Tue 21 Dec - 16:43 (2010); edited 5 times in total
Back to top
Publicité






PostPosted: Tue 30 Nov - 20:53 (2010)    Post subject: Publicité

PublicitéSupprimer les publicités ?
Back to top
Speed
Ex-staff


Joined: 04 Jan 2008
Posts: 1,701
Localisation: Marseille (13)
Masculin

PostPosted: Tue 30 Nov - 21:10 (2010)    Post subject: Présentation en HTML/CSS [en cours]

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 !
Back to top
Cypmars
Membre


Joined: 02 Mar 2010
Posts: 636
Localisation: Marseille

PostPosted: Tue 30 Nov - 21:27 (2010)    Post subject: Présentation en HTML/CSS [en cours]

oui c'est exelent brendan Imbécile heureux
j'attend la suite 42
Back to top
Nuri Yuri
Team SDK


Joined: 15 Oct 2008
Posts: 6,383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

PostPosted: Tue 30 Nov - 21:47 (2010)    Post subject: Présentation en HTML/CSS [en cours]

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 ...
Back to top
Facebook Twitter
Brendan75
Ex-staff


Joined: 24 Mar 2008
Posts: 1,827
Localisation: Paris
Masculin

PostPosted: Wed 1 Dec - 07:13 (2010)    Post subject: Présentation en HTML/CSS [en cours]

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
Back to top
Nuri Yuri
Team SDK


Joined: 15 Oct 2008
Posts: 6,383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

PostPosted: Wed 1 Dec - 13:32 (2010)    Post subject: Présentation en HTML/CSS [en cours]

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é.


Last edited by Nuri Yuri on Sun 26 Dec - 22:06 (2010); edited 1 time in total
Back to top
Facebook Twitter
Qwerty
Animateur
Animateur


Joined: 29 Oct 2009
Posts: 1,411
a.k.a. Walven Masculin

PostPosted: Wed 1 Dec - 13:36 (2010)    Post subject: Présentation en HTML/CSS [en cours]

<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 "

Back to top
Nuri Yuri
Team SDK


Joined: 15 Oct 2008
Posts: 6,383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

PostPosted: Wed 1 Dec - 17:35 (2010)    Post subject: Présentation en HTML/CSS [en cours]

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.
Back to top
Facebook Twitter
Soul Matt
Membre


Joined: 13 May 2010
Posts: 464
Localisation: Quelque par dans le monde ...

PostPosted: Wed 1 Dec - 19:50 (2010)    Post subject: Présentation en HTML/CSS [en cours]

Cher moi ça marche
pas  :^^:
Back to top
Visit poster’s website Skype
RevengeOfShadow
Membre


Joined: 10 Jan 2009
Posts: 652
Localisation: Devant son PC
ID Steam: RL77LUC

PostPosted: Thu 2 Dec - 07:30 (2010)    Post subject: Présentation en HTML/CSS [en cours]

Oui, il faudrait autoriser plus de balises, mais alors attention aux failles éventuelles ^^'.
Back to top
Visit poster’s website
Soul Matt
Membre


Joined: 13 May 2010
Posts: 464
Localisation: Quelque par dans le monde ...

PostPosted: Thu 2 Dec - 19:30 (2010)    Post subject: Présentation en HTML/CSS [en cours]

PHP est autorisé sur le forum  :?  ?
Back to top
Visit poster’s website Skype
Nuri Yuri
Team SDK


Joined: 15 Oct 2008
Posts: 6,383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

PostPosted: Thu 2 Dec - 20:54 (2010)    Post subject: Présentation en HTML/CSS [en cours]

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 ...
Back to top
Facebook Twitter
RevengeOfShadow
Membre


Joined: 10 Jan 2009
Posts: 652
Localisation: Devant son PC
ID Steam: RL77LUC

PostPosted: Fri 3 Dec - 18:39 (2010)    Post subject: Présentation en HTML/CSS [en cours]

Euh ben y'a l'include quoi ^^.
Donc ça peut être utile pour ça Clin d'œil foireux.
Back to top
Visit poster’s website
Nuri Yuri
Team SDK


Joined: 15 Oct 2008
Posts: 6,383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

PostPosted: Fri 3 Dec - 21:09 (2010)    Post subject: Présentation en HTML/CSS [en cours]

Non utiliser include en php vers un autre serveur est pas très intelligent ... autant copier le code(propre) ou utiliser object/iframe ...
Back to top
Facebook Twitter
RevengeOfShadow
Membre


Joined: 10 Jan 2009
Posts: 652
Localisation: Devant son PC
ID Steam: RL77LUC

PostPosted: Sat 4 Dec - 16:36 (2010)    Post subject: Présentation en HTML/CSS [en cours]

C'est sûr mais bon ... je crois que ce qu'il voulait dire c'était ça ^^. Sinon iframe = bouhouhou ! Imbécile heureux
Back to top
Visit poster’s website
Contenu Sponsorisé






PostPosted: Today at 18:06 (2019)    Post subject: Présentation en HTML/CSS [en cours]

Back to top
Display posts from previous:   
Post new topic   Reply to topic    Pokémon Script Project Forum Index -> Game Making -> Ressources techniques -> Tutoriels All times are GMT + 1 Hour
Goto page: 1, 2, 3  >
Page 1 of 3

 
Jump to:  

Index | Free forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Thème par Thomas et l'équipe de la refonte PSP 2012 (version 1.0)