[Topic Unique]Programmation

par *sakura* le Mer 17 Jan - 20:42

Ice_Keese a écrit:Eum, ça vous dérange si je fais un tutoriel sur le CSS?

non, cela ne me dérange pas du tout au contraire, cela soulagerait miku.

luigi-wii-fi-ds a écrit:
ok j'y penserais la prochaine foi avant de te MP.

Ce n'est pas du tout à toi qsue je m'adressai, mais a une personne qui m'a envoyé 5 message sur mon mail, à 20 minute d'interval. un mp ne me dérange pas du tout, je suis là pour répondre à vos questions.

par Ice_Keese le Mer 17 Jan - 21:08

Le CSS

Le CSS signifie Cascading Style Sheet (Feuille de style en cascade, en anglais). C'est la méthode employée par les développeurs pour séparer le design du contenu. La balise "style", partiellement expliquée dans le précédent tutoriel de miku, sert à ajouter des styles CSS. Ce tutoriel se concentrera plus sur l'usage de feuilles de style, qui permettent de combiner plusieurs styles en un.

Le CSS se compose de trois éléments:

Code:: sélecteur { propriété: valeur; }

Les espaces sont ignorés. Donc, vous pouvez ajouter pleins d'espaces, des retours de ligne, peu importe, faites ce que vous voulez pour rendre le texte lisible.

On peut ajouter le CSS à une page HTML d'une des trois manières suivantes:

1) Dans une balise, à l'aide de l'attribut style:

Code:: <h1 style="color:#FFFFFF; font-size:12px;">Ce texte sera un texte blanc de taille 12</h1>

2) Dans une feuille de style interne, entre les balises <head> et </head>

Code:: <head> <style type="text/css"> body { background-color:#000000; color:#FFFFFF; } </style> </head>

Notez que chaque ligne se termine par un point-virgule ( ; )

3) Dans une feuille de style externe. Pour procéder de cette façon, insérer le code CSS voulu dans un fichier se terminant par l'extension .css. Aucune balise HTML ne doit se trouver dans ce fichier. Puis, faites un lien vers le fichier en insérant ceci entre les balises <head> et </head> de votre fichier HTML:

Code:: <link rel="stylesheet" type="text/css" href="nom_de_mon_fichier.css" />

Mais comment écrivons-nous cela? C'est très simple.
Dans le cas d'une feuille de style interne ou externe, on doit d'abord choisir un sélecteur. Comme son nom l'indique, il permet de "sélectionner" quelle balise sera affectée par les styles. Par exemple, disons que nous voulons que le contenu de chaque balise <p> soit en gras. Dans ce cas, nous écrirons (soit dans notre fichier .css, ou bien entre les balises <style>):

Code:: p {font-weight: bold;}

"p" est le sélecteur, "font-weight" est la propriété et "bold" est la valeur. Puisque vous avez probablement lu le tuto de miku, vous savez alors ce que ça signifie. Mais disons que vous voulez seulement qu'une partie des balises <p> sois en gras. Et bien, procédez comme si:

Code:: p.gras {font-weight: bold;}

Ce qui suit le point ( . ) est le nom de la classe qui est associée à ce style. Donc:

Code:: <p class="gras">Ce texte sera en gras, car cette balise appartient à la classe "gras"</p>

On peut donc utiliser l'attribut class pour attribuer une classe à un élément.
Mais si on veut être encore plus précis, on peut utiliser un id:

Code:: p#gras {font-weight: bold;}

Puis:

Code:: <p id="gras">Ce texte sera en gras, car cette balise possède l'id "gras"</p>

L'utilisation d'une balise n'est pas nécessaire. Ainsi, ceci:

Code:: .gras {font-weight: bold;}

Affectera toutes les balises appartenant à la classe "gras", peu importe la balise.

Il existe également des sélecteurs pré-existant. On retrouve body, qui permet de modifier tout ce qui a trait à la balise <body> de la page:

Code:: body {background-color: #000000;}

Ceci mettra le fond de la page d'une couleur noire.
Il existe également des pseudo-classes. Ce tutoriel, qui ne couvre que les bases, n'expliquera pas ce qu'elles sont. Néanmoins, si vous voulez modifier la couleur de vos liens, voici le code:

Code:: a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

Ils doivent absolument se trouver dans cet ordre.

Finalement, les commentaires. Les commentaires seront ignorés par le navigateur. C'est donc un bon moyen de laisser des notes. Voici comment on écrit des commentaires en CSS:

Code:: /*Ceci est un commentaire*/

Sur ce, merci de votre attention. Si vous avez des questions sur ce tutoriel, envoyez-moi un MP.

Pour une liste des propriétés en CSS, voir ceci:
http://www.siteduzero.com/tuto-3-1938-1-liste-des-proprietes-css.html

par *sakura* le Sam 20 Jan - 16:32

Nous allons aujourd'hui commencer le php. Nous verrons les commandes de base, les variables et nous introduirons les structure de contrôle.

Tout d'abord, pour pouvoir utiliser les exemples de ce cours, il est nécéssaire que le php soit installé sur votre ordinateur.
Si ce n'est pas le cas, ne paniquez pas, il vous reste trois solutions:
1) vous installez php sur votre ordinateur (^^)
2) vous télécharger easyphp a l'adresse suivante : http://www.easyphp.org/telechargements.php3
3) si vous diposez d'un hébergeur qui accepte le php, vous l'utilisez pour voir les exemples.

Voila. Si vous ne pouvez pas pour le moment (vous avez le php chez vous mais pas le net) ous pouvez toujours copier ce cours sur clé USB, puis le visualiser chez vous.

Avant de commencer, je vais vous donner quelques notions, qu'il est important de lire avant de commencer.

Les structures de controle a écrit:
"if" => si
"else" => sinon
"elseif" => sinon si
"for" => pour chaque. (créé une boucle).
"while" => tant que. (créé une boucle).
"==" => valeurs strictement égales.
"===" => valeurs et types strictement égaux.
"!=" => différent de.
"<" => strictement inférieur.
">" => strictement supérieur.
"<=" => inférieur ou égal (l'ordre des symboles est important).
">=" => supérieur ou égal (l'ordre des symboles est important).
"and" ou "&&" => et
"or" ou "||" => ou inclusif.

Il existe d'autre structures de controle, notamment "do" et "foreach", ainsi que le ou exclusif.
Nous les verrons plus tard. Ne vous prenez pas la tête, vous comprendrez tout cela facilement, et très vite.

Commençons. Vous avez vu dans les cours précédents ce qu'était une page html minimum. Et bien il n'existe pas de "page php minimum".
Si vous l'utilisez pour faire une page web, c'est la page html minimum. Sinon, une page toute vide est toput à fait conforme au php.

Mais soyons sérieux: pour que le langage soit interprété, il y a quand même un minimum de chose à faire: il faut mettre "<?php" en début et "?>" a la fin de l'execution de votre script.
Un court exemple vaut mieux qu'un long discours, en voila donc un:

Code:: <?php print ('Bonjour'); ?>

Pour etre tout à fait conforme, cet exemple aurait du contenir la page html minimum en plus du code, c'est à dire:

Code:: <?php print ('<html> <head> </head> <body> Bonjour </body> </html>');

Mais nous ne nous occuperons pas de ça pour une bonne raison: nous allons écrire la page html minimum et nous mettrons notre script dedans:

Code:: <html> <head> </head> <body> <?php print ('Bonjour'); ?> </body> </html>

En effet, lorsque le serveur tombe sur la "balise" <?php, il commence à interpréter le contenu. Mais tant qu'il n'en rencontre pas, il envoi le text directement. Ce qui veux dire que vous pouvez tout à fait creer une série de page dont l'extension est ".php" sans mettre une trace de php dedans (même si cela n'a du coup aucun interet et force le serveur à passer en revu vos page à chaque fois.)

Nous ne nous occuperons donc plus de ces basse contingences pour nous centrer sur l'art divin de programmer en php ( Razz

).
Comme vous avez pe le voir plus haut, la ligne se finit par un ";". C'est n'est pas pour faire joli, rassurez-vous Very Happy

.
En fait, en php, les commandes sont séparés pas des ";", et il en va de même pour une grande majorité des langages informatique (le html est plus l'exception que la règle).
Je ne vous expliquerai pas pourquoi ici, mais cashez le. De toute façno, vous prendrez très vite l'habitude lorsque vous coderez.
Revenons donc à ce "print".
Print permet d'afficher un text. En php, il a un équivalent, plus utilisé, qui est echo,et c'est celui là que nous utiliserons pour l'instant:

Code:: <?php echo ('Bonjour'); ?>

De plus, la commande echo n'a pas besoin des paranthèses (on peut les mettres mais ça sert à rien ^^).

Code:: <?php echo 'Bonjour'; ?>

En fait, les apostrophes (') servent à déterminer une chaine de caractère.
Mais echo peut aussi servir à écrire une variable.
Vous pouvez aussi définir une variable a l'aide du symbole "$" (à cotéde la touche Entrée, sur mon clavier):
[code]
<?php
$variable = 'Bonjour';
echo $variable;
?>
Une variable peut contenir des lettres, des symboles ou des chiffres. Vous pouvez donner n'importe quel nom a vos variable, tant qu'il ne commence pas par un chiffre, et qu'il ne comporte pas d'espace.

Bon, voici pour la base de base. Mais vous voyez bien que pour l'instant, cela ne nous sert strictement à rien de faire ça. Nous allons donc voir les applications à l'aide d'une structure de contrôle(/b]

Structure de contrôle a écrit:
Les structure de controle sont la base de tout langage de programmation (le html n'entre pas vraiment dans cette catégorie ^^).
Il permettent principalement de:
1) vérifier si quelque chose existe, ou est égal à ceci ou cela. (principalement représenté par if)
2) faire une action tant qu'une codition est vérifiée. ("while" et "for" en font partis).
for prend trois valeurs: la première défini un évènement qui va survenir juste avant que la boucle ne commence,c'est à dire une fois. Le deuxième permet de donner la condition à remplir pour que. Latroisième détermine l'action qui va se produire à la fin de chaque boucle.
Cela peut-paraître compliqué, mais ne vous prenez pas là tête. Vous n'aurez qu'a relire cette ligne lorsque nous ferons les exemples et vous comprendrez très vite.
Il est primordial que vous compreniez bien cela, c'est un point primordial de tout langage.
Je vais vous donner des exemples ci-dessous.

commentaire a écrit:
Les commentaire sont très utile en php. Imaginez un problème de math: lorsque vous le faite, vous voyez à peu près ceque vous faites, no problemo. Mais si vous deviez reprendre une feuille de brouillon deux mois plus tard, vous ne vous y retrouveriez plus. Pire, si vous deviez reprendre une feuille de brouillon de quelqu'un d'autre, vousn'y comprendrez sctrictement rien.
Voila pourquoi il est important de commenter votre code.
Les commentaires se délimitent par un "//", et ils font que tout ce qui setrouve après sur la ligne n'est pas interprété.
Vous le verrez juste ensuite.

Exemple 1: nous allons faire un programme qui va écrire tout les chiffres de 0 à neuf (9), à l'aide de for:
[code]
<?php
//Nous définnissons une variable x que nous définnissons comme étant égale à zéro.
//Nous disons que quand x sera égale à 10 il faudra sortir de la boucle.
//Nous faison augmenter la variable x de 1, a l'aide de "++".

for ($x = 0 ; $x < 10 ; $x++ )
{
echo $x;
echo ' ';
}
?>
[/code]
lorsque la boucle commence, la variable $x est égale à zéro. Les deux lignes s'affichent, une marquece que contient $x c'est à dire 0, et l'autre met un espace.
Nous arrivons à la fin de la boucle. le "$x++" s'éxecute => de "0" $x passe à "1".
Cela recommence: affichage du contenu de $x c'est-a-dire 1, puis un espace, puis fin de la boucle et $x passe à "2".
Ainsi de suite jusqu'à 9 ou nous avons:
affichage de $x, donc 9
affichage de l'espace
fin de boucle, $x passe à dix
comme $x est égal à dix, et qu'on a dit "$ < 10", la boucle s'arrète là.
Si on avait voulu jusqu'a 20, on aurait mis plutôt

<?php
for ($x = 0 ; $x < 21 ; $x++)
{
echo $x;
echo ' ';
}
?>

Bon, maintenant affichons tous les chiffres de 0 à 9, sauf le 5 (par exemple Wink

).

<?php
for ($x = 0 ; $x < 10 ; $x++)
{
if ($x != 5)
{
echo $x;
echo ' ';
}
}

Explication : la commande "!=" permet de voir si une variable et [u]différente[\u] d'une valeur. A chaque tour de boucle, nous vérifions que $x est différente de 5, et si c'est le cas on l'affiche.

C'est tout pour le moment. Vous apprendrez ensuite à coupler le php a des formulaire et alorsvous comprendrez tout l'interet de php.

A la prochaine.

En raison de raison indépendante de sa volonté, le professeur miku ne pourra répondre à vos questions cette semaines. Merci de me les adresser.

par Ice_Keese le Sam 20 Jan - 16:45

Si vous avez un Mac, vous pouvez utiliser MAMP qui fait la même chose que EasyPHP, mais en mieux (parce que c'est sur Mac Wink

):

http://www.mamp.info/en/index.php

par Kugaro le Sam 20 Jan - 17:32

Ou tout simplement vous faire chier pendant deux jours avec apache, PHP

, SQL, Phpmyadmin ...

par Tristou le Sam 20 Jan - 17:42

Nan mais toi t'es maso, c'est pas pareil Surprised

Je préconiserai plutôt un echo plutôt que print m'enfin bon c'est un détail ^^''

par Ice_Keese le Mer 24 Jan - 18:33

Ouais.
D'ailleurs, quelle est la différence entre echo et print?

par Kugaro le Mer 24 Jan - 18:41

print ça veut dire imprimer Mr. Green

par *sakura* le Mer 24 Jan - 20:28

Si mes souvenirs sont bons, il n'y a pas de différence, sauf peut-être (mais là je ne suis pas sure) que l'on peut transmettre à echo les différentes valeurs en utilisant "," et qu'on ne le peut pas dans print. Echo reste surtout une spécificité du langage php, à la défférence de print qui est plus généralisé. Pour terminer, si on ne note pas vraiment de différence entre echo et print, la commande qui est le plus classiquement utilisée est echo, donc utilisons celle-là. Wink

Ni moi ni miku ne pourrons donner de cours cette semaine, mais après mercredi prochains, les cours reprendrons surements sans problème. D'ici là, révisez bien, et bon courage pour la suite thumleft

P.S: vous pouvez bien sur essayer d'aller chercher vos renseignements sur le net, le site du zéro, ou dans des livres. Si vous ne comprenez pas un point, mp nous, et nous y répondrons dans les plus brefs délais possible pour nous.

Merci.

L'équipe enseignante: Bubuche87 & Miku

par ghz le Mer 24 Jan - 21:21

Je suis aussi codeur en xHTML, CSS et PHP

!

par *sakura* le Mer 24 Jan - 21:24

Alors tu peux faire des tutos, rien ne t'en empèche. Tu peux aussi nous corriger, bien sur. Adresse nousles remarques par mp. Wink

par Kugaro le Mer 24 Jan - 22:55

@µ®€|¡£N a écrit:Je suis aussi codeur en xHTML, CSS et !

ouais, spece de copieur d'avatar (ironie, tu l'avais compris...)

Sinon, si quelqu'un a b'zoin d'aide en php, sono qui Very Happy

par Ice_Keese le Sam 27 Jan - 5:21

Bubuche87 a écrit:Si mes souvenirs sont bons, il n'y a pas de différence, sauf peut-être (mais là je ne suis pas sure) que l'on peut transmettre à echo les différentes valeurs en utilisant "," et qu'on ne le peut pas dans print. Echo reste surtout une spécificité du langage php, à la défférence de print qui est plus généralisé. Pour terminer, si on ne note pas vraiment de différence entre echo et print, la commande qui est le plus classiquement utilisée est echo, donc utilisons celle-là.

[...]

Ben, echo est commun à à peu près tout ce qui est shell script dans Unix et ses descendants... Donc, ce n'est pas vraiment une spécificité.

C'est d'ailleurs la première fois que je vois "print" dans un langage. Ce qui s'en rapproche le plus, c'est le printf() du C.

par Kugaro le Sam 27 Jan - 18:27

Hey !

J'ai trouvé comment on peut créer un espaces membres avec permissions et groupes Very Happy

par Bappy le Dim 4 Fév - 18:03

Juste après de vos discussions ...

Je me suis mit au HTML et au CSS , j'avoue que j'aime bien la facon comment c'est codé Wink

par Invité le Ven 9 Fév - 19:27

j'ai également appris le HTML et le CSS apres avoir lu ce topic et en 8 jours j'ai appris mais aussi créé un très joli site pour mon équipe de traduction.

Ils sont tous (avec nos visiterus/lecteurs fidèles) très content alors je tenais a vous remercier I love you

par *sakura* le Sam 10 Fév - 21:10

Hum, désolé pour le retard, mais en raison de modifictation assez impromptue et perturbante nous n'avons pu que commencer à vous rédiger le cours suivant. Les cours reprendrons noramlement la semaine prochaine (je l'espère Wink

)

Amicalement, en s'excusant auprès des membres studieux ^^

par Invité le Lun 12 Fév - 15:57

c'est rien on (je tout du moins) comprend très bien Wink

merci beaucoup pour ce que vous faites !

par miku le Lun 12 Fév - 21:39

Bonjour, nous allons aujourd'hui voir les formulaires. Ils sont très important lorsque vous voulez faire un site dynamique, avec du php (mais le php n'est pas le seul langage).
Ils ne sont néanmoins pas indispenable, avec l'utilisations de la méthode get. Comme ce cours est très important pour le php, je le rédige avec bubuche, qui se chargera de commenter, voir de rajouter certains points.
Pour ce cours, vous pouvez donc adresser vos question a l'un de nous deux, celui que vous voulez.

Tout d'abord, un petit aperçu de leur utilité: quand vous remplissez votre profil, c'est un formulaire. Quand vous répondez sur le forum, c'est un formulaire. Quand vous postez sur la Chat-box, c'est un formulaire. Vous voyez un peu l'étendu que ça a. ^^

Je vais vous donner une liste des balises, et nous les reverrons ensuite. Bubuche viendra ensuite vous donner des exmples plus concret, et vous indiquera comment les utiliser.

<form>
<textarea>
<button>
<select>
<option>
<input />

(il n'y en a pas beaucoup hein? mais il y a un piège, vous verrez)
Bon, cela dit, commençons à les voir:

<form>
C'est la balise pour commencer un formulaire. Elle peut prendre plusieurs attribut, dont ceux de styles, et trois autres:
method => get, ou post, nous le reverrons, notamment avec bubuche en deuxième partie.
action => une adresse de fichiers. C'est là que serons envoyées les données du formulaires pour être traitées.
target => c'est un attribut que nous reverrons quand nous ferons les liens. Pour vous donner un rapide apperçu, je dirait qu'il permet d'ouvrir le lien dans une autre fenètre, ou dans un cadre. Nous le reverrons, il est très simple, ne vous inquiétez pas.
Exemple:

<form method="post" action="traitement.php">
</form>

<textarea>
Traduit litéralement, cela veut dire: "air de text". Comme sont nom l'indique, c'est un endroit pour mettre du text ^^. Elle se ferme par la balise </textarea>, et contiendra par défaut ce que vous aurez mis entre <textarea> et </textarea>; par exemple:
[quote]
<form method="post" action>
<textarea>Mettez votre nom dans ce champ</textarea>
</form>
[quote]
Cet exemple affichera un champ de text contenant "Mettez votre nom dans ce champ". (essayez, vous verrez).
La balise affiche par défaut le texte en monospance, dans l police courier (si mes souvenirs sont bons). Mais vous pouvez le changer avec les styles (comme vu dans les cours précédents).
Rappelez vous juste qu'aucune balise ne sera interprétée entre les balises <textarea> et </textarea> si vous mettez

<span style="color:red">Bonjour</span>

, c'est '<span style="color:red">Bonjour</span>' qui s'affichera (les balises seronts visibles.)
Elle peut également pendre l'attribut name, nous le reverrons plus tard, sur son utilité.
C'est le genre de chose que vous retrouverez quand vous remplissez un message, je crois (j'ai pas regardé le code source ^^).

<button>
Cette balise est une alternative à <input type="button">. Le text affiché sur le boutton sera celui compris entre <button> et </button>. Les boutons ainsi générés ne sont pas pris en charge par tous les navigateurs.
Il peut prendre les attributs de styles, et vous pouvez même mettre des images entre les balise <button> et </button>, mais il est préférable dans ce cas d'utiliser la balise input.
Exemple:
[quote]
<form action="traitement.php" method="get">

<select> et <option>
la balise select permet de faire une liste déroulante. Ceci est assez utile pour faire tenir de nombreux choix dans un petit espace. Les divers choix sont entourés par les balises <option> et </option>. Il faut mettre le name dans la balise <select>. Exemple:

<form method="post" action="traitement.php">
Quel est votre pays natal?
<select name="pays">
<option>Viet-nam</option>
<option>France</option>
<option>Chine</option>
<option>Japon</option>
</select>
</form>

Vous pouvez attribuer une valeur aux choix avec l'attribut value, dans le option. Vous pouvez aussi faire une liste de choix multiple avec l'attribut multiple, dans le select, en lui donnant la valeur true. J'ai mis les deux dernière phrases ci dessous, la première en bleu et la seconde et rouge

<form method="post" action="traitement.php">
Quel est votre pays natal?
<select name="pays" multiple="true">
<option value="vn" >Viet-nam</option>
<option value="fr" >France</option>
<option value="cn" >Chine</option>
<option value="ym" >Japon</option>
</select>
</form>

La valeur séléctionné par défaut est la première, mais vous povez la changer avec l'attribut selected, doté de la valeur selected.
Exemple :

<form method="post" action="traitement.php">
Quel est votre pays natal?
<select name="pays">
<option>Viet-nam</option>
<option selected="selected">France</option>
<option>Chine</option>
<option>Japon</option>
</select>
</form>

<input />
C'est sur cette balise que nous nous focaliserons durant ce cours. Elle est très important. C'est une balise orpheline, elle se termine donc par " /> " et n'a pas de balise fermante (vous saviez déjà ce qu'était une balise orpheline, ceci n'est qu'un rappel Very Happy

)
Ses attributs sont:
type => le plus important. La balise input n'existerai pas sans lui. Elle détermine le type de champ (cases a cocher, champ à remplir, champ pour les mots de passe ect)
name => permet de donner un nom à la variable qui sera envoyé. par exemple:

<form method="post" action="traitement.php">
Nom <input type="text" name="nom" />
Mot de passe <input type="text" name="password" />
</form>

Ce formulaire enverra deux variables, une nommé "nom" et l'autre nommée "password", qui contiendrons ce que le visiteur aura mis dans les champs (elle peuvent être vide, et n'aurons pas d'existence à la version php3, mais c'est un détail). Vous le reverrez avec bubuche.
value => sert pour les champs de cases a cocher, pour leur atribuer une valeur.
Les attribut de styles.

Voila pour la première partie. Je vais maintenant vous détailler un peu plus l'attribut type de la balise <input />.
Nommons les tout d'abord:
type="text" => c'est l'attribut par défaut, celui qui est utilisé si vous ne mettez rien. Il définit un champ d'un ligne, où l'on peut mettre du text.
Exemple:

<input type="text" name="prenom" />

--type="checkbox" => ceci permet de faire des choix multiple, comme lorsque vous creez un sondage a choi multiples.
Exemple:

Grand<input type="checkbox" name="big" /><br />
Gros<input type="checkbox" name="fat" />

--type="image" => permet de faire un boutton sous la forme d'une image. Attention, cela ne fera aucun animation supplémentaire sur votre bouton (comme par exemple le fait qu'il s'enfonce, ou des trucs comme ça), ce sera encore à vous de le faire, via la commande OnClick, notamment, mais ce n'est pas le propos de ce cours.)
Exemple:

<input type="image" src="image_de_moi.jpg" />

Pour en faire un bouton d'envoi, je vous le dis quand même, mettez:

<input type="image" src="image_de_moi.jpg" onClick="submit()"/>

--type="passeword" => permet de faire un champ pour les mot de passe, c'est à dir ou lorsque l'on écrit, ce ne sont que des petites étoiles qui apparaissent.
Exemple :

<input type="passeword" name="mot_de_passe"/>

--type="submit" => permet d'envoyer un formulaire.
Exemple :

<input type="submit" value="envoyer" />

Cet exemple fera un bouton d'envoi dont le texte sera "envoyer".

--type="reset" => réinitialise les champs.
Exemple :

<input type="reset" value="annuler" />

Cet exemple fera un bouton qui réinitialisera ( c'est-à-dire qu'il les remetra comme à l'ouverture de la page). tous les champs, et dont le texte sera "annuler".

--type="button" => créé un bouton sans valeur intrinsèque. Vous lui transmettez le text par l'attribut value.
Exemple

<input type="button" value="Ceci est un bouton, cliquez!" />

--type="radio" => créé un à choix unique, comme quand vous créez un sondage normal sur vos forum. Il est nécessaire que tous les input lié à ce choix ai le même nom. Je vous ai mis un exemple d'un formulaire avec deux question différente:

<form method="post" action="traitement.php">
<center><b>Pays d'origine</b></center>
France <input type="radio" name="choix_pays" value="fr" /><br />
Viet-nam <input type="radio" name="choix_pays" value="vn" /><br />
Chine <input type="radio" name="choix_pays" value="cn" /><br />
Japon <input type="radio" name="choix_pays" value="ym" /><br />
<center><b>Plat préféré</b></center>
Nouilles chinoise <input type="radio" name="choix_plat" value="nouilles" /><br />
Nems <input type="radio" name="choix_plat" value="nems" /><br />
Rouleaux de printemps <input type="radio" name="choix_plat" value="rouleaux" /><br />
</form>

--typee="file" => permet de faire un bouton "parcourir". Voici un exemple:

<input type="file" name="fichier" />

Le text de bouton parcourir ne peut pas être changé, et il n' a que en javascript qu'on peut agir dessu, mais c'est plus du bidouillage que de la technique "propre".

--type="text" => le plus utile Créé un champ de text. Vous pouvez lui attribuer une valeur par défaut avec l'attribut value. La largeur est définie par l'attribut size, et se mesure en nombre de caractères. La longueur maximale de saisie se fait avec l'attribut maxlenght.
Exemple:

<input type="text" name="nom" value="Tapez votre nom" size="20" maxlength="15" />

Voila, c'est tout pour moi.

Bon, bubuche et moi on a décidé de vous laisser avec ça pour le moment et de pas poser le reste tout de suite ^^. On éditera ce message ensuite.

par *sakura* le Mar 13 Fév - 19:52

Bon, a mon tour.

Vous savez maintenant comment faire un formulaire. Mais le formulaire ne suffit pas à lui tout seul. Vous comprenez bien que de faire un endroit ou mettre le nom de va pas l'enregistrer directement et le mettre ou vous le voulez. Cela ne se passe pas par l'intervention d'une entité bienfaisante et surnaturelle, c'est à vous de la faire (et je pense que vous n'êtes pas dans ce cas Very Happy

).
Voila ce que fait un formulaire, en gros: une fois que l'utilisateur l'a rempli et clique sur le bouton pour l'envoyer, les données dans les champs sont envoyés vers la page qu'on à choisit dans le action du form. Un petit exemple:

<form method="post" action="bonjour.php">

(Exemple 1)

Ce formulaire enverra ce que contienne les champs à la page "bonjour.php". Si on avait mit:

<form method="post" action="le_php_est_genial.php">

(Exemple [b)2[/b]

Cela l'aurait envoyé vers une page nommée "le_php_est_super.php". A supposer que cette page existe, mais même si ce n'est pas le cas, cela ne ferra rien planter du tout: les données que le client aura remplie seront perdu c'est tout. Ceci n'est pas sans importance, car le client après quelques essai laissera tomber, dégouté et furieux (eh oui, les gens ne se rendent pas compte à quel point il est difficile de faire une page web, et ils n'ont aucune patiente. Bon, supposons que cette page existe belle et bien (ce qui est généralement le cas, tant que vous n'essayez pas de créer des pages de traitement dynamiquement, ce qui ne sera surement jamais le cas).
Les données des champs seront donc transmises sous forme de variables. Il existe deux méthodes d'envoi: GET et POST. Par défaut la méthode utilisée et get. Cette méthode transmet les variables par la barre adresse. Prenons un exemple:

<form name="nom_prenom" action="traitement.php" method="get">
<p>Nom <input type="text" name="nom" /> <br />
Prénom <input type="text" name="prenom" /><br />
<input type="submit" value="envoyer" /><input type="reset" value="annuler" />
</p>
</form>

(Exemple 3)

vous devez déjà être familier avec ce genre de chose. Cependant, avant de continuer, je vais éclaircir deux points, que miku n'a pas mentionné mais qui n'ont pas vraiment d'importance, mais qui doivent être mentionnés.
D'abord, la valeur reset: vous ne l'avez pas encore vu, mais elle est mineur. Elle permet de remettre les champs du formulaire vides. Elle n'est absolument pas nécessaire.
Ensuite, l'attribut name, de la balise form. Il peut vous paraître insolite (ou pas) , mais il a son importance quand une page contient plusieurs formulaire, et que vous voulez les traiter avec du javascript.
Cela étant dit, vous pouvez oublier ces deux points pour l'instant, vous vous en souviendrez en temps voulu ^^.

Il est une chose qu'il est importante à noter: le type de formulaire n'a qu'une influence minime sur le traitement des données. En effet, les deux formulaires suivants enverrons les mêmes données.

Code:: <form method="get" action="traitement.php"> <input type="radio" name="bonjour" value="hello"/> <input type="submit" value="envoyer" /> </form>

Code:: <form method="get" action="traitement.php"> <input type="checkbox" name="bonjour" value="hello" /> <input type="submit" value="envoyer" /> </form>

De même si vous faites des champs de type "text", "file", et même avec un textarea. Encore plus fort, si le visiteur tape "salut" dans un champ de texte, cela équivaut à un "checkbox" avec la valeur "salut". Ceci n'aura de différence qu'au niveau du client, et n'aura absolument aucune influence sur le traitement des données (j'insiste sur ce point, vous ne pouvez pas faire confiance un un checkbox pour ne prendre qu'un nombre limité de valeur, vous devrez toujours vérifier ce qui est envoyé!)

Revenons à notre formulaire précédent (en 3. Il contient deux champs, "nom" et "prenom", dont les valeurs serons envoyés a la page "traitement.php" quand le visiteur cliquera sur le bouton d'envoi. Faite d'abord un fichier nommé "traitement.php", puis testez le formulaire (n'oubliez pas de l'inclure dans votre page html, c'est à dire avec les balises body, head, ect). Bon, cela étant fait, remplissez les formulaires (avec ce que vous voulez Wink

) et envoyez. Supposons que vous ayez rempli le champ "nom" avec "hello" et le champ "prenom" avec "world" ^^.
...
...
Une nouvelle page s'affiche. Elle est blanche, c'est normal, vous ne lui avait rien dit d'afficher. Mais regardez l'url (l'adresse quoi ^^). Cela affiche, en bout

Code:: traitement.php?nom=hello&prenom=world

.
(Exemple 4)

Cela peut vous paraitre familier. Eh oui, tout ces symboles bizarres que vous voyez dans les adresse ont un sens Wink

Notez que vous pouvez aussi laisser l'un des champ formulaire vide. Vous aurez alors:

Code:: traitement.php?nom=hello&prenom=

(Exemple 5)
(cela peut paraître évident après coup, mais c'est quand même bon de le préciser ^^).

Bon, cela dit, à quoi ça sert (se demande l'élève intelligent, comme vous j'en suis sur Razz

)?
Et bien, en php, les données envoyées de cet façon sont récupérée sous forme de variable. Par exemple, dans le cas ou vous avez rempli les deux variables, comme en 4, vous aurez deux variables. Je vais vous les donner, et nous les verrons ensuite. Elles sont:
$_GET['nom'] qui est égal à "hello" et
$_GET['prenom'] qui est égale à "world".

ATTENTION!
les majuscules sont importantes ! "GET" n'est pas "get", ni "Get".

Vous pouvez faire un test: ouvre votre fichier traitement.php, puis mettez dedans:

Code:: <?php echo 'Votre nom est '; echo $_GET['nom']; echo ', et votre prenom est '; echo $_GET['prenom']; ?>

(Exemple 6)
Actualisez votre page précédente (ou envoyez un nouveau formulaire si vous l'avez fermée ^^).

ATTENTION!
Pour que ce test marche, il est impératif que vous soyez soit sur un hébergeur qui accepte le php, soit sur votre serveur local (easyphp, par exemple). Dans tous les cas, il faut aussi que l'extension de votre fichier soit ".php". C'et asses compliqué à comprendre, puisqu'il ne suffit pas de l'avoir lancé, mais bien que le fichier soit inclus dans un dossier interprété par php. Faites le test.

Faite le test: si votre écran, affiche "votre nom est hello, et votre prenom est world", ça marche. si ça n'est pas le cas, il y a trois possibilité:
1) cela affiche un message d'erreur: ça ressemble à "undefined variable nom in traitement.php on line 4", avec peut-être des chiffres différents, ou l'adresse, mais c'est ça grosso modo. si c'est le cas, cela vient de votre formulaire vous avez du faire une erreur en l'écrivant, une lettre ne trop, ce qui fait par exemple: name="nomù" ou name="nim" ou quelque chose comme ça^^; Ce n'est pas grave corrigez l'erreur, et remplissez le formulaire une nouvelle fois.

2) cela le code, que vous avez mis dans votre page. cela veut dire que vous tombez dans le "attention" que j'ai cité plus haut. Je vous renvoi pour l'instant au manuel d'installation de php. si vous ne trouvez pas d'où viens l'erreur, écrivez moi. Je vous répondrez avec plaisir, et je ferai un tuto dessus, si les lettre sont trop nombreuse. Dans tous les cas, ne vous découragez pas! (cela peut aussi arriver si vous avez nommez votre fichier ".htm". si c'est le cas, modifiez le et modifiez aussi l'adresse dans le formulaire en conséquence, ils doivent absolument être ".php")

3) plus rare, mais ça arrive: c'est une page blanche qui s'affiche. Dans ce cas c'est que vous n'avez pas sauvé les modifications que vous aviez apporté à votre fichier "traitement.php". Sauvez le et actualisez Very Happy

Nous allons supposer que tout c'est bien passé. Votre page affiche maintenant "votre nom est hello et votre prénom est world". Si vous ouvrez le code source, vous vous apercevez qu'elle ne contient que ça. Faisons un nouvelle essai, vous allez comprendre Wink

. Rouvrez votre fichier traitement.php et mettez dedans:

<?php

echo '<html>
<head>
</head>
<body>
<p>Votre nom est <b>';
echo $_GET['nom'];
echo '</b> et votre prenom est <b>';
echo $_GET['prenom'];
echo '</b>

</body>
</html>';

?>

(exemple 7)

Sauvez, et actualisez. Il n'y a pas grand changement a l'écran, sauf que le nom et le prénom sont passés en gras. Ouvrez maintenant le code source. Il ne contient que ce que le code html que vous aviez envoyé. Bon, je pense que vous avez compris comment cela fonctionne (enfin, nous avons dépassé la simple étude du GET).
Cette méthode présente un avantage: si vous faite un lien, en mettant par exemple

Code:: <a href="traitement.php?nom=hello&prenom=world">Bonjour</a>

(exemple 7)
vous aller déclarer directement les variables nom et prénom, sans passer par des formulaires.

Mais vous voyez que cet méthode présente aussi un inconvénient: lorsque vous transmettez un message secret, celui-ci s'affiche en toute lettre en haut l'écran, ce qui n'est pas très confidentiel. Pour avoir ce caractère "secret", vous devez passer par la méthode "post".
Faisons un exemple: ouvrez votre fichier contenant le formulaire et remplacez get par post. Ouvrez ensuite votre fichier traitement.php et remplacez $_GET['nom'] par $_POST['nom'] et $_GET['prenom'] par $_POST['prenom']. (les majuscules sont importantes !).
Sauve les deux et faite un test. Rien ne change, tout s'affiche comme avant. Mais la barre adresse reste "propre" ^^.
Cette méthode ne possède pas la maniabilité de get, mais elle compense par sa confidentialité. Attention, elle ne vous assure pas du tout une protection contre les "faux formulaires": n'importe qu'elle formulaire peut envoyer des variables POST à votre page, il n'est pas nécessaire que celui-ci ai été généré par votre serveur. Mais nous verrons cet aspect en temps voulu, lorsque nous verrons la sécurité (qui est programmée pour être le derniers cours, mais vous pouvez déjà me poser vos questions ^^).

Pour finir, je vais vous indiquer un point important: lorsque vous marquez "$_POST['nom']", le "'nom'" n'est qu'une chaine de caractère. Vous pouvez la remplacer par une variable. Je vais vous donner un exemple (et ce sera le derniers pour cette fois). Ouvrez votre page traitement.php, et marquez:

<?php

echo $_POST[$_POST['choix']];

?>

Ouvrez ensuite votre page formulaire et mettez dedans:

Code:: <html> <head> </head> <body> <form name="nom_prenom" action="traitement.php" method="get"> <p>Lequel? <input type="text" name="choix" /> <br /> Premier mot <input type="text" name="premier" /><br /> Deuxième mot <input type="text" name="second" /><br /> <input type="submit" value="envoyer" /><input type="reset" value="annuler" /> </p> </form> </body> </html>

Maintenant, ouvrez votre formulaire, et marquez "premier" dans le champ "Lequel?" et ce que vous voulez dans les deux autres. Lorsque vous l'envoyez, vous voyez le premier mot que vous avez choisit s'afficher. si vous marquez "second", vous verrez le deuxième s'afficher. Enfin, si vous marquez autre chose, vous verrez un message d'erreur disant que le "autre chose" que vous aviez écrit n'est pas déclarée. Ce système, s'appel un pointeur. Nous le reverrons plus tard, alors ne vous prenez pas la tête la dessus.

par *sakura* le Mar 13 Fév - 19:53

Bon, maintenant vous allez pouvoir vous détendre en regardant un petit exemple, facile à comprendre et que je commenterai allègrement. Lisez, détendez vous.

On suppose que vous voulez faire un formulaire pour permettre à certaine personne d'accéder à certaine pages du site. Dans ce cas, vous allez faire un formulaire pour voir si elles connaissent le mot de passe (il n'y a qu'un mot de passe commun à tout le monde). Nous allons supposer que le mot de passe est ici "Igor", d'accord?
Commençons: nous créons une page html, ou nous mettons le formulaire:

Code:: <form method="post" action="traitement.php"> Mot de passe <input type="password" name="mot_de_passe" /><br /> <input type="submit" value="envoyer" /> </form>

Donc, pour traduire ce que nous venons d'écrire: nous faisons un formulaire (avec la balise form), nous lui disons que les données serons envoyées à "traitement.php", et nous précisons qu'il doit le faire par la méthode post, pour qu'elle ne soit pas visible dans la barre adresse. Dans ce formulaire, nous créons un champ de texte, ou quand l'utilisateur écrira, il n'y aura que des petites étoiles (pour qu'une personne qui regarderait par dessus son épaule ne voit pas le mot de passe à l'écran. Nous nommons ce champ "mot_de_passe" (nous aurions pu le nommer "schnoccombre" ou "galile", mais "mot_de_passe" nous parait plus indiqué ^^). Est-ce que tout vas bien jusque là?
Bon, maintenant, faisons la page traitement.php:

Code:: <?php if ($_POST['mot_de_passe'] == 'Igor') { echo 'bonjour, voici la page secrète!!!!!!'; } else { echo 'dégagez!'; } ?>

Bon, qu'avons nous écris? Tout d'abord "if": cela permet de savoir SI quelque chose est comme ça ou comme ci.
Ensuite $_POST['mot_de_passe']: il s'agit de la variable qui a été envoyé par le formulaire (vous reconnaissez son nom ^^). Comme elle a été envoyé par post, nous mettons $_POST. Si elle avait été envoyée par get, nous aurions mis $_GET. D'accord?
Ensuite, ce symbole bizarre "==" (eh non, ce n'est pas un faute de frappe). Il permet de voir si une variable est égale à quelque chose. Si vous n'aviez mis qu'un seul signe "=", vous auriez rendu la variable $_POST['mot_de_passe'] égale à "Igor". Cà n'aurait pas fait un test d'égalité, ça aurait changé la valeur de la variable.
Donc, pour cette première ligne, nous regardons si (if), la variable "mot_de_passe" envoyées par méthode post ($_POST['mot_de_passe']) à la valeur de "Igor" (=="Igor")
Nous ouvrons ensuite un accolade ({). cela permet de dire ce qu'il faut faire si le if est vrai, c'est-à-dire, dans le cas présent, si le mot de passe est bon.
La ligne suivante est "echo 'bonjour, voici la page secrète!!!!!!';". Le echo sert à afficher un texte. Dans le cas présent, nous affichons "bonjour, voici la page secrète!!!!!!". Le ";" finale indique que l'instruction est terminée (en fait, vous devez en mettre un quasiment à la fin de chaque ligne, sauf pour le structures de contrôles).
A noter que le texte à afficher ne contient pas de d'apostrophes ('). Si cela avait été le cas, nous aurions du utiliser les caractères d'échappement (je reviendrai la dessus dans un cours prochain, mais pour vous le dire en brute, vous devez mettre "\'" à la place de "'"). Nous fermons l'accolade, car nous avons dit ce qui doit se passer si le if est vrai.
Bon, nous passons maintenant au "else". En traduction littérale, c'est de l'anglais, et ça signifie "autre". En gros c'est ce qui se passe si le if est faux. Comme pour le "if", nous mettons des accolades pour dire quoi faire dans ce cas. Le echo sert à afficher le texte (eh oui, cela n'a pas changé ^^), ("dégagez!", dans le cas présent), et le ";" marque la fin de l'instruction. Nous fermons ensuite l'accolade, comme précédemment. Puis nous fermons la zone de php, avec "?>".
s
Et voila, c'est fait. Cet exemple est vrai, mais vous pouvez l'améliorer comme bon vous semble. Notez que le code que je vous ai donné ici est aéré, et lisible (je pense), mais que cela n'aurait pat fait de différences (pour l'ordi au moins^^) si j'avais écris tout à la suite, comme ça:

Code:: <?php if($_POST['mot_de_passe') == 'Igor') { echo 'bonjour, voici la page secrète!!!!!!'; } else { echo 'dégagez!'; } ?>

Mais vous voyez que c'est plus pénible à lire ^^. Et cette écriture plus succincte n'allège pas l'exécution ! Elle ne l'alourdi pas non plus, elle n'a aucune influence à ce sujet. Et en terme de place sur le disque dur, la différence est vraiment minime. Pensez donc à aérer vos pages, de façon à les rendre le plus lisible possible.

Le fois prochaine, Miku devrait venir vous faire un cours sur les "balises courtes", qui est un régal de simplicité et qui vous soulagera l'esprit.
En vous souhaitant une agréable soirée.

Bubuche & Miku

par *sakura* le Lun 19 Fév - 22:50

Je m'excuse d'avance, mais il semble que l'enseignement sera surement suspendu pour un moment, voir définitivement en ce qui concerne Miku.

Je suis en train de faire on possible pour le rétablir, mais je ne peux absolument pas promettre d'assurer un cours cette semaine.

Je vous remercie. Si l'un de vous veut se charger de cela à ma place, je lui laisse le post pour le moment et je le remercie.

Bien à vous.

En renouvelant mes excuses.

par *sakura* le Jeu 12 Juil - 19:44

Bon, cela fait un long moment que je n'ai pas posté ici.

Pour mettre les choses au point, Miku ne pourra plus donner de cours.

Elle m'a cependant demandé de finir ce qu'elle avait commencé.
Je vais donc essayer de reprendre le flambeau, mais je ne suis pas sur d'y arriver (Miku ayant tout appris par moi, cela devrait néanmoins être possible).

Alors, voila ce qu'il nous reste a traiter, concernant les css:

background
background-image
background-color
background-repeat
background-attachement
background-position
vertical-align
word-spacing
letter-spacing
text-indent
visibility
position
height
left
border
border-style
border-top
border-width
border-left
border-right
border-bottom
border-style-top
border-style-bottom
border-style-left
border-style-right
border-color
list-style-type
list-style-image
list-style-position
z-index
margin
margin-top
margin-left
margin-right
margin-bottom
padding-top
padding-left
padding-right
padding-bottom.

Pas beaucoup, hein? Razz

Ne faite pas cette tête: Miku avait tout appris par coeur sans se plaindre Smile

Bon, je ne vous demanderai pas d'en faire autant, mais lisez quand même.

Alors le premier groupe:

background
background-image
background-color
background-repeat
background-attachement
background-position

background
Il fait tout ce que les autres font. Je vous mettrai un exemple a la fin. Smile

background-image
il permet d'attribuer une image de fond. C'est ce qui est (souvent) utilisé pour mettre une image en fond de page ou de tableau. Sa syntaxe est ainsi:
background-image:url('mon_image.jpg')
par exemple:
(exemple 1)

Code:: <p style="[color=red]background-image:url('mon_image.jpg')[/color]">Bonjour <br /><br /><br /></p>

background-color
celui-ci permet de mettre une couleur en arrière fond. A priori, on pourrait croire qu'il ne présente pas d'avantage par rapport au backgrund-image, mais en fait, il est plussimple d'utilisation, et il sert aussi a colorier le fond d'un text. il peut avoir trois syntaxes:

syntaxes a écrit:
background-color:#ff00ff
background-color:fushia
background-color:rgb(255, 0, 255)

La première prend en paramètre les valeurs héxadécimal rouge/vert/bleu d'une couleur. Elle fonctionne sur les vieux navigateurs.
La deuxième prend le nom d'une couleur. Elle est plus facile pour nous a comprendre, mais elle présente une palette de couleur plus limitée, et certain navigateurs (avant) ne l'interprète pas ou mal.
La troisième prend les valeurs décimal rouge/vert/bleu d'une couleur. Elle a l'avantage de ne pas manipuler de valeurs hexadécimal qui sont souvent moins parlante.
Ci-dessous un exemple pour la seconde méthode.
(exemple 2)

Code:: <p style="[color=red]background-color:pink[/color]">Bonjour <br /><br /><br /></p>

background-repeat
cet argument défini la répétition de l'image de fond (il ne fonctionne donc que si vous avez également défini une image de fond). Si l'image de fond est plus petite que la page, elle peut être répétée pour prendre tout le fond ou pas. Il peut prendre les valeurs

repeat
no-repeat
repeat-x
repeat-y

Le premier défini une répétition verticale et horizontale. C'est la valeur par défaut.
le second empèche toute répétion: l'image est placé en arrière fond, et n'est pas répétée.

Le troisième défini un alignement horizontale: si l'image ne suffit pas a remplir toute la largeur de la page, elle sera repeté horizontalement. En revanche, si elle n'est pas assez haute, elle ne sera pas repetée dans ce sens.

Le dernier et l'opposé du troisième: il défini une répétition verticale, mais désactive la répétition horizontale.
Comme vous le voyez, toute les possibilités sont évoqueés.
(exemple 3)
<p style="background-image:url('mon_image.gif'); background-repeat:repeat-y"> Bonjour <br /><br /><br />

background-attachment
celui-ci permet de définir le comportement de l'image d'arrière plan. Elle peut défiler avec le text (le text ne bouge pas part rapport a l'image) ou rester immobile (seul le text défile). Il peut prendre deux valeur:
fixed: seul le text défile
scroll: le text et l'image défilent ensemble (valeur par defaut)
Ceci necessite bien sur que vous ayez aussi défini une image de fond Smile

(exemple3)

Code:: <p style="background-image:url('mon_image.png'); [color=red]background-attachment:fixed[/color]"> Bonjour <br /><br /><br /></p>

background-position
maintenant, voyons comment définir le position de l'image de fond. Pour cela nous allons utiliser background-position. Il peut prendre plusieurs valeur (je vous ai mis les valeurs équivalente sur une même ligne):
20px 30px | défini la position de l'image d'arrière fond au pixel près. Bien sur, 20 et 30 sont des valeurs que j'ai choisie et qui peuvent être n'importe quoi d'autre.
top left, left top ou '0% 0%' | position l'image en haut a gauche. C'est la valeur par défaut (les utilisateurs de la librairie GD l'aurons deviné).
top | position l'image en haut, sans définir son alignement horizontal. Par défaut, celui-ci est placé a gauche.
top center, center top, '50% 0%' | positionne l'image en haut au centre.
right top, top right, '100% 0%' | position l'image en haut a droite
left | positionne l'image a gauche, sans préciser son alignement vertical. Par défaut, celui-ci est plaçé en haut.
left center, center left, '0% 50%' | position l'image au milieu verticalement et à gauche;
center, center center , '50% 50%' | positionne l'image au centre de l'écran, verticalement et horizontalement.
right | positionne l'image a droite, sans définir son alignement vertical. Par défaut celui-ci est plaçé en haut
right center, center right, '100% 50%' | positionne l'image au centre verticalement, et a droite.
bottom left, left bottom, '0% 100%' | positionne l'image en bas a gauche.
bottom | positionnn l'image en bas, sans définir son alignement horizontale. Par défaut, celui-ci est placé à gauche.
bottom center, center bottom,'50% 100%' | positionne l'image au milieu horizontalement et en bas verticalement.
bottom right, right bottom, '100% 100%' | positionne l'image en bas a droite.
inherit | l'image de fond hérite de la valeur du "background-position" de son parent (si celui ci n'est pas défini, sa valeur par défaut est en haut a gauche).

Voila, comme ça vous avez de l'occupation.
(exemple 4)

Code:: <html> <head> </head> <body style="background-image:url('mon_image.jpeg'); [color=red]background-position: center[/color]"> <p>Bonjour</p> </body> </html>

Revenons maintenant sur la première valeur que nous avions sauté: background

background
En fait background fait tout ce que font les autres background-attachment, background-position ect que nous venons de voir. Les deux codes ci dessous sont tout a fait équivalents:

Code:: <html> <head> </head> <body style="background-color:pink; background-image:url('mon_image.PNG'); background-position: bottom right; background-attachment:scroll"> <p>Bonjour</p> </body> </html>

Code:: <html> <head> </head> <body style="background:pink url('mon_image.PNG') bottom right scroll"> <p>Bonjour</p> </body> </html>

La seule différence réside dans le fait que le premier est plus lisible.
Je vais être gentil et je ne vais pas vous demander d'apprendre le dernier, background.

Je vais vous laisser comme ça pour le moment (faut recommencer doucement, et puis c'est les vacances pour beaucoup Smile

)

Bonne révisions Razz

Raccourcis

Rechercher

Derniers sujets

Flux

Marque-page social

[Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation

Re: [Topic Unique]Programmation