Pokémon Script Project Index du Forum

S’enregistrer | Rechercher | Connexion
 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]
Aller à la page: 1, 2, 3  >
 
Poster un nouveau sujet   Répondre au sujet    Pokémon Script Project Index du Forum -> Game Making -> Ressources techniques -> Tutoriels
Sujet précédent :: Sujet suivant   
Auteur Message
Brendan75
Ex-staff


Inscrit le: 24 Mar 2008
Messages: 1 827
Localisation: Paris
Masculin

MessagePosté le: Mar 30 Nov - 20:53 (2010)    Sujet du message: 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



Dernière édition par Brendan75 le Mar 21 Déc - 16:43 (2010); édité 5 fois
Revenir en haut
Publicité






MessagePosté le: Mar 30 Nov - 20:53 (2010)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Speed
Ex-staff


Inscrit le: 04 Jan 2008
Messages: 1 701
Localisation: Marseille (13)
Masculin

MessagePosté le: Mar 30 Nov - 21:10 (2010)    Sujet du message: 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 !
Revenir en haut
Cypmars
Membre


Inscrit le: 02 Mar 2010
Messages: 636
Localisation: Marseille

MessagePosté le: Mar 30 Nov - 21:27 (2010)    Sujet du message: Présentation en HTML/CSS [en cours]

oui c'est exelent brendan Imbécile heureux
j'attend la suite 42
Revenir en haut
Nuri Yuri
Administrateur
Administrateur


Inscrit le: 15 Oct 2008
Messages: 6 383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

MessagePosté le: Mar 30 Nov - 21:47 (2010)    Sujet du message: 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 ...
Revenir en haut
Facebook Twitter
Brendan75
Ex-staff


Inscrit le: 24 Mar 2008
Messages: 1 827
Localisation: Paris
Masculin

MessagePosté le: Mer 1 Déc - 07:13 (2010)    Sujet du message: 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
Revenir en haut
Nuri Yuri
Administrateur
Administrateur


Inscrit le: 15 Oct 2008
Messages: 6 383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

MessagePosté le: Mer 1 Déc - 13:32 (2010)    Sujet du message: 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é.


Dernière édition par Nuri Yuri le Dim 26 Déc - 22:06 (2010); édité 1 fois
Revenir en haut
Facebook Twitter
Qwerty
Animateur
Animateur


Inscrit le: 29 Oct 2009
Messages: 1 411
a.k.a. Walven Masculin

MessagePosté le: Mer 1 Déc - 13:36 (2010)    Sujet du message: 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 "

Revenir en haut
Nuri Yuri
Administrateur
Administrateur


Inscrit le: 15 Oct 2008
Messages: 6 383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

MessagePosté le: Mer 1 Déc - 17:35 (2010)    Sujet du message: 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.
Revenir en haut
Facebook Twitter
Soul Matt
Membre


Inscrit le: 13 Mai 2010
Messages: 464
Localisation: Quelque par dans le monde ...

MessagePosté le: Mer 1 Déc - 19:50 (2010)    Sujet du message: Présentation en HTML/CSS [en cours]

Cher moi ça marche
pas  :^^:
Revenir en haut
Visiter le site web du posteur Skype
RevengeOfShadow
Membre


Inscrit le: 10 Jan 2009
Messages: 652
Localisation: Devant son PC
ID Steam: RL77LUC

MessagePosté le: Jeu 2 Déc - 07:30 (2010)    Sujet du message: Présentation en HTML/CSS [en cours]

Oui, il faudrait autoriser plus de balises, mais alors attention aux failles éventuelles ^^'.
Revenir en haut
Visiter le site web du posteur
Soul Matt
Membre


Inscrit le: 13 Mai 2010
Messages: 464
Localisation: Quelque par dans le monde ...

MessagePosté le: Jeu 2 Déc - 19:30 (2010)    Sujet du message: Présentation en HTML/CSS [en cours]

PHP est autorisé sur le forum  :?  ?
Revenir en haut
Visiter le site web du posteur Skype
Nuri Yuri
Administrateur
Administrateur


Inscrit le: 15 Oct 2008
Messages: 6 383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

MessagePosté le: Jeu 2 Déc - 20:54 (2010)    Sujet du message: 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 ...
Revenir en haut
Facebook Twitter
RevengeOfShadow
Membre


Inscrit le: 10 Jan 2009
Messages: 652
Localisation: Devant son PC
ID Steam: RL77LUC

MessagePosté le: Ven 3 Déc - 18:39 (2010)    Sujet du message: 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.
Revenir en haut
Visiter le site web du posteur
Nuri Yuri
Administrateur
Administrateur


Inscrit le: 15 Oct 2008
Messages: 6 383
~Entity~
Localisation: Nancy
Non renseigné (Visible...)
ID Steam: Nuri_Yuri

MessagePosté le: Ven 3 Déc - 21:09 (2010)    Sujet du message: 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 ...
Revenir en haut
Facebook Twitter
RevengeOfShadow
Membre


Inscrit le: 10 Jan 2009
Messages: 652
Localisation: Devant son PC
ID Steam: RL77LUC

MessagePosté le: Sam 4 Déc - 16:36 (2010)    Sujet du message: 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
Revenir en haut
Visiter le site web du posteur
Contenu Sponsorisé






MessagePosté le: Aujourd’hui à 16:58 (2017)    Sujet du message: Présentation en HTML/CSS [en cours]

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Pokémon Script Project Index du Forum -> Game Making -> Ressources techniques -> Tutoriels Toutes les heures sont au format GMT + 1 Heure
Aller à la page: 1, 2, 3  >
Page 1 sur 3

 
Sauter vers:  

Index | Creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une 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)
Traduction par : phpBB-fr.com