[Topic Unique]Programmation

par Kugaro le Dim 7 Jan - 20:22

Ice_Keese a écrit:
Kugaro a écrit:mdrrrr ça sera pas valide niveau W3C

Ah, le W3C...

Le W3C mange des enfants
Le W3C bat sa femme
Le W3C vous fait monter dans sa voiture
Le W3C cache des lames de rasoir dans les pommes
Lam el tse C3W
etc...

Mais ça, c'est un autre sujet...

Faudrait tetre expliqué, nan ? Car le W3C est le mal... =_=

par *sakura* le Dim 7 Jan - 20:58

Je trouve que l'on dévie un peu du sujet (j'en avais peur, quand kugaro et moi on en a parlé: que les gens dévie largement). Bon, Kugaro à raison, expliquez vous ou ne postez pas. Je considère que ce forum pourrait aider pas mal de débutant en informatique pour faire de la programmation. Les commentaire n'ont leur place ici, que si ils servent pour aider à ce but. Les messages doivent êtres des questions, ou des réponses, ou des indices de réponses, ou des conseils et des indications. Sortit de là, les trolls (IE c'est caca, Mozilla c'est bien mieux), les commentaire sur windows, enfin bref, ne sont pas les bienvenus. Je trouve dommage qu'un sujet si prometteurs soit gachée si tôt.

Maintenant, c'est à vous de voir.

par luigi-wii-fi-ds le Dim 7 Jan - 21:39

debutant comme moi Rolling Eyes

par KaXz le Lun 8 Jan - 12:07

Je ne sais pas trop a quoi fait réference Ice Keese, seulement le W3C pas la peine de s'y conformer au poil de c** pres, le forum que vous parcourez actuellement n'est pas valide Smile

par *sakura* le Lun 8 Jan - 20:18

Je vous prépare un tuto sur la programmation en html pour les débutants. Si tout se passe bien, il sera suivi d'un autre sur le php, puis mon élève miku prendra la relève pour vous en faire un sur les tableaux en html.

par Kugaro le Lun 8 Jan - 20:20

Bubuche :

http://forum.forumactif.com/viewtopic.forum?t=102766

et pour PHP

, laisse... les voir le site du zéro xD

par *sakura* le Lun 8 Jan - 20:28

D'accord, miku va devoir laisser tomber. Mais je refuse de laisser tomber le php. Les bases peuvent être expliquée très simplement, et ça peut aider beaucoup de gens (la concaténation de chaine, l'attribution de variable, une présentation des fonctions, et une introduction sur les formulaires, juste de quoi leur donner les bases quoi. Et puis je pourrais même laisser tomber les fonctions. En fait j'attend juste le feu vert pour utiliser les couleurs dans mes exemples Wink

par kilian le Lun 8 Jan - 20:28

Kugaro a écrit:Bubuche :

http://forum.forumactif.com/viewtopic.forum?t=102766

et pour , laisse... les voir le site du zéro xD

pour le php y a le manuel en français qui est largement plus complet que le SdZ.

par Kugaro le Lun 8 Jan - 20:33

Il est largement plus complet, mais aussi moins bien expliqué et détaillé Laughing

par *sakura* le Lun 8 Jan - 20:33

C'est pour ça que je fais un tuto. Je resterait dans l'utile.

par Kugaro le Lun 8 Jan - 20:45

Bah non, ça sert à quoi de faire un tuto qui va plagier un tuto déjà fait ET celebre ? Neutral

par *sakura* le Lun 8 Jan - 20:50

Je n'ai jamais été sur le site du zéro, je fais mes tuto toute seul. Mes cours marchent très bien, j'en ai déjà donné, et mes "élèvesé sont revenu en disant qu'ils avaient réussi à coller les "experts". Bon, je ne compte pas aller jusque la, mais un ou deux post comme tuto précédent, ne peuvent pas faire de mal, si?

par luigi-wii-fi-ds le Mar 9 Jan - 20:04

moi je vais créé une annexe je pense

par *sakura* le Mer 10 Jan - 18:42

Bon, aujourd'hui, nous allons voir les différents type de balise. Ce cours est donné aux débutants, et les experts le trouverons surement inutile. J'aborderai ici donc aussi les liens.
Commençons:

Une page html est un fichier dont l'extension est "htm" ou "html". Pour le cours d'aujourd'hui, je prendrai deux fichier, "miku.htm" et "page_accueil.html". ^^
Je précise ici un point important: il n'est absolument pas nécessaire qu'une page soit sur un site web pour pouvoir être ouverte comme une page web.
Il suffit de l'ouvrir avec IE ou Mozilla (ou l'explorateur de votre choix), ou de la faire terminer par "html" ou "htm".
Cependant, pour le modifier, vous devrez l'ouvrir avec bloc note, ou avec un éditeur de text (les éditeurs de text microsoft ne conviennent pas. Prenez plutot bloc-note ou pspad editor)

Nos deux page ne diffèrent pas à l'origine: elle contiennent toutes les deux:

<html>
<head>
</head>
<body>
</body>
</html>

(Exemple 1)
Commencçons par la page "miku.htm". Lorsque nous l'ouvrons pour l'instant, nous n'avons qu'une page blanche :-(
Pas de panique, c'est normal. Notre page ne contient encore aucun text. Si vous marquez "bonjour" dans votre page entre <body> et </body> et que vous la réouvrez, vous aurez le mot bonjour en hauteur Smile

.

<html>
<head>
</head>
<body>

Bonjour

</body>
</html>

(Exemple 2)
Bien sur, ce n'est pas terrible comme ça, mais nous allons le perfectionner. Tous d'abord nopus allons centrer le text. Pour cela, et grace au crous précédent, vos savez que nous disposons de cinq méthode différentes. Mais nous délaisserons ici les méthodes du standard qui sont longue et compliquées pour ne garder que la plus simple. Vous aurez tout le temps de vous perfectionner par la suite.
Nous avons donc:

<html>
<head>
</head>
<body>

<center>Bonjour</center>

</body>
</html>

(Exemple 3)
Pour les utilisateur du BBcode, vous remarquerez que la syntaxe s'en rapproche. Une balise ouverte doit toujours être fermée ensuite (comme ici pour <center> qui est fermée par </center>).
Bon, nous allons maintenant rendre dela plus visible. Nous avons plusieurs méthode pour changer le style d'écriture (gras, italic, souligné, taille ect) mais nous ne retiendrons ici que les méthodes "données", c'est-a-ire que nous utiliserons les balise <h1>. Vous disposez des balise h1 à h6, les taille diminuant de 1 à 6. (Par soci de place, nous ne représenterons que le text entre les balise <body> et </body>, mais le reste est toujours présent.)

<body>

<center><h1>Bonjour</h1></center>

</body>

(Exemple 4)
<h1> est une balise pour mettre du text en valeur. Pour ceux qui snt curieux, cela reviens à lui donner une taille de 33 et à mettre le text en gras, mais vous n'avez pas à le savoir. Mettons maintenant un text en plus.

<body>

<center>Bonjour</center>

Salut Miku, comment ça va?

</body>

(Exemple 5)
(C'est un exemple ^^). Cependant lorsque vous ouvre votre page, le text s'affiche en face de "Bonjour" :-(. En effet, les sauts à la ligne ne sont pas pris en compte par les navigateurs. Il en va de même pour les double espaces (et les triple, etc...)qui ne sont considérés que commeun seul.
Cela ne vient pas du tout d'une erreur ou d'une "faiblesse" de l'ordinateur: c'est un moyen pour que les programmeur puissent écrire des pages aérées. Cela est très important, nous y reviendrons plus tard. Pour l'instant occupons nous de ce text.
Nous venons de voir que de mettre un saut à la ligne ne suffit pas pour afficher le saut de ligne. Nous allons donc pour cela utiliser une balise. Cette balise s'appelle "<br/>" (le slash defin est du au fait que br est une balise orphelines, mais ceci est anecdotique: écrivez le toujours avec, il n'y a pas d'exception.)

<body>

<center>Bonjour</center>
<br/>
<br/>
Salut Miku, comment ça va?

</body>

(Exemple 6)
Le text s'affiche correctement Very Happy

.

Bon, revenons a la nécessité d'aérer les pages. Reprenons le code précédent, et écrivons le d'une ligne, en mettant les balises html et head :

<html><head></head><body><center>Bonjour</center><br/><br/>Salut Miku, comment ça va?</body></html>

(Exemple 7)

C'est déjà moins clair :-(. Est vous n'avez là qu'une page html en somme fort courte. Imaginez un tableau html écrit en une ligne (si vous en avez déjà fait): cela diviens illisible.
Nous terminerons par la création d'un lien simple (sans fioriture). La balise utilisée est <a>, mais elle utilise un attribut. Ne vous souciez pas de ce que cela signifie pour le moment, nous le reverons plus tard très largement (vous le reverrez surtout avec miku qui vous prépare un petit tuto très complet ^^). Un lien s'écrit en fait:

<a href="le_nom_de_la_page_cible">Le text qui s'affiche pour le lien (par exemple "cliquez ici")</a>

(Exemple 8 )
Cela génèrera un lien qui ramènera à la page nommé "le_nom_de_la_page" qui aura l'apparence du text :"Le text qui s'affiche pour le lien (par exemple "cliquez ici")".
ATTENTION!
Vous devez toujours marquer l'extension du fichier, c'est à dire que si votre page html s'appelle "bonjour", le lien sera:

<a href="bonjour.htm">cliquez ici pour acceder à la page "bonjour"</a>

(Exemple 9)
ATTENTION!
Ceci est un lien relatif: cela ne marchera que si le document "bonjour.htm" est dans le même répertoire. Vous pouvez faire des liens absolus en copiant ce qui s'affichent dans la barre adresse dans votre lien (comme quand vous utilisez la balise "url"), ou en marquant l'adresse complete du document si vous travaillez en local (sur votre ordinateur):elle est aussi dans la barre adresse.

Voila. Faitent des essais, et revelisez là ou vous n'y arrivez pas.

P.S : miku viendra vous faire également un tuto complémentaire sur les tableaux, et je reviendrai ensuite pour voir les base du php. Bonne chance dans vos révisions d'ici là.

par miku le Mar 16 Jan - 20:09

Voici mon premier cours. Je vous demanderai de pas être trop méchant sur ma façon d'écrire en freancçais car je parle pas bien.
Je vais essayer de vous apprendre comment faire les tableaux, et surtout je vais completer le tutorial donné par le forum des forums.
Vous pouvez y acceder un cliquant ici
Je vous apprend ici le html, pas le Xhtml, qui est plus récent mais plus dur pour vous. La différence surtout c'est l'utilisation des CSS. Bubuche a dit qu'il ferait un tuto là-dessus "si il a le temps". Sinon, je le ferais peut-être moi ^^.

Petit rappel: un tableau c'est d'abord une balise <table> pour le commencer (vous mettrez la balise </table> à la fin, pour le finir).
Ensuite vous commencez une ligne avec <tr>, que vous finirez par </tr>
Puis vous indiquez les colonnes avec <td> et </td>.
Comme ça:

<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

</table>

(Exemple 1).
Mais pour l'instant vous ne pouvez pas voir votre tableau. En effet, comme il est tout vide, cela ne se met pas à l'écran. Vous devez mettre quelque chose dedans. Par exemple une lettre.
Commençons par la balise: <colgroup>. Je vous montre un exemple:

<table>
<tr>
<td>H</td>
<td>l</td>
<td>l</td>
<td>o</td>
</tr>

<tr>
<td>t</td>
<td>o</td>
<td>u</td>
<td>s</td>
</tr>

</table>

(Exemple 2).
Mais si vous voulez voir le bord des cadres, vous devez mettre border="border" comme attribut de <table>
Comme ça.

<table border="border">
<tr>
<td>H</td>
<td>l</td>
<td>l</td>
<td>o</td>
</tr>

<tr>
<td>t</td>
<td>o</td>
<td>u</td>
<td>s</td>
</tr>

</table>

(Exemple 3).
Vous voyez?^^
Maintenant, je précise plusieurs choses. Si vous mettez une balise td en trop quelque par, c'est pas grave, mais vous le verrez tous de suite. Essayez:

<table border="border">
<tr>
<td>H</td>
<td>l</td>
<td>l</td>
<td>o</td>
</tr>

<tr>
<td>t</td>
<td>o</td>
<td>u</td>
<td>t</td>
<td>e</td>
</tr>

</table>

(Exemple 4).
Votre page s'affiche normalement, elle ne "plante" pas, mais ce n'est pas très bien. Il vaut toujours mieux mettre le bon nombre de balises, même si vous laissez vide les cellules.

Voila pour les révisions.
Commençons maintenant la partie plus avancé des tableaux. Vous avez vu précédemment comment faire un tableau, mais nous allons voir comment faire des effets de style sur ce tableau. Pour creer un effet de style sur une cellule, il suffit de la mettre dans <td>.Par exemple:

<table>
<tr>
<td>Ceci</td>
<td>est</td>
</tr>

<tr>
<td>un</td>
<td style="color:red;font-weight:bold">exemple</td>
</tr>

</table>

(Exemple 5).
Pour mettre un effet de style sur un ligne, vous pouvez le mettre dans <tr>. Comme ça:

<table>
<tr>
<td>Ceci</td>
<td>est</td>
</tr>

<tr style="color:red;font-weight:bold">
<td>un</td>
<td>exemple</td>
</tr>

</table>

(Exemple 6).
Mais pour le mettre dans un colonne, vous devez utiliser une nouvelle balise (deux en fait): <colpsan> et <col />. Voici un exemple:

<table>
<colgroup>
<col />
<col style="color:red;font-weight:bold" />
</colgroup>

<tr>
<td>Ceci</td>
<td>est</td>
</tr>

<tr>
<td>un</td>
<td>exemple</td>
</tr>

</table>

(Exemple 7).
Je fais remarquer ici que <col /> est une balise orpheline, c'est-à-dire (je crois qu'on dit ça comme mot) que elle n'est pas autour d'un texte.
Je vais vous donner quelques balises orphelines:

Code:: <br />, pour un saut de ligne. <hr />, pour introduire un trait horizontal sur tout une ligne (pour faire de la séparation entre le titre et le reste par exemple). <img />, pour mettre des images. <input />, pour les formulaires. <col />, pour donner un style a toute une colonne. <colgroup />, dans certain cas, que je explique ensuite.

Vous pouvez définir tous les effets de style habituels avec colgroup et col, et aussi la largeur des colonnes. voici un petit exemple:

Code:: <table style="font-weight:bold" border="border"> <colgroup> <col style="background-color:blue;color:yellow;text-align:center" width="33%" /> <col width="34%" style="text-align:center" /> <col style="background-color:red;color:yellow;text-align:center" width="33%" /> </colgroup> <tr> <td>Voici</td> <td>Un</td> <td>exemple</td> </tr> <tr> <td>j'aime</td> <td style="font-size:30">programmer</td> <td>!!!!!!</td> </tr> </table>

Vous voyez ? ^^
Cette balise peut-être très utile.

Passons maintenant à un deuxième point, beaucoup plus facile: la balise <caption>. Je vais vous donner un exemple:

Code:: <table> <caption>Cours pour faire des tableaux</caption> <tr> <td><h1> Cours 1 <h2></td> </tr> <tr> <td><h2> Création de tableaux (complément du fdf)</td> </tr> </table>

C'est le titre du tableau, c'est important pour ceux qui utilisent un navigateur lisant à voix haute ce qu'il y a dans page.
Il se met avant colgroup.
Voila, c'est tout pour le deuxième point ^^.

Pour le troisième point, je vais vous parler du cadre. Vous avez vu qu'en mettant l'attribut border="border" dans la balise <table>, vous avez mis un cadre autour de votre tableau.
Cependant, vous pouvez faire mieux avec l'attribut frame, qui peut prendre les valeurs : vsides, lhs, rhs, above, below, border, insides, box, et void (je crois que c'est tout, mais je le fais de tête.)

visdes => affiche les bords de chaques coté mais pas en haut ni en bas.
lhs => n'affiche que le bord à gauche ("lhs" pour "left hand side", ce qui veut dire: "gauche main coté").
rhs => n'affiche que le bord à droit ("rhs" pour "right hand side", ce qui veut dire: "droite main coté").
above => n'affiche que le bord en haut.
below => n'affiche que le bord en bas.
border => affiche tout le cadre. C'est comme si vous n'aviez pas mis frame.
void => masque le cadre (je crois)
insides => semble avoir le même effet que void.
Box => ne laisse que le cadre (je crois, mais ne marche pas selon bubuche87).

A cela vous pouvez ajouter l'attribut rules, qui peut prendre les valeurs: cols roxs, all, none et groups.

cols => affiche les traits hotizontaux entre les cellules.
rows => affiche les traits verticaux entre les cellules.
all => affiche tous les traits entre les cellules (comme si vous n'aviez pas mis rules ^^)
none => n'affiche aucun trait entre les cellules, juste le cadre. Vous pouvez abtenir cet effet avec frame, vu juste avant.
groups => c'est une partie que nous n'avons pas encore vu. Sachez qu'il existe, mais vous ne serez pas interrogés la dessus.

Voila, nous passons maintnant à la quatrième partie, et qui sera la dernière pour aujourd'hui (je n'ai pas le temps d'aborder thead, tfoot et tbody aujourd'hui, car je dois réviser mon examen de php)
Il s'agit de la balise <th>

Cette balise sert pour les cellules titres, généralement les prmière d'une ligne ou d'une colonne. Elle offre un style prédéfinie (un peu comme <h1> ^^).
Vous devez la mettre a la place de la balise td pour la cellule concernée.

Voila, bonne chance.

EDIT: Ce que peu contenir une cellule.

Tout. Vous pouvez y mettre des images, du text... et même des tableaux!
vous mettez juste votre nouveau tableau dans la cellule.
Et vous pourrez mettre des tableaux dans les cellules du tableau lui même dans une cellule, et ainsi de suite.

Merci pour vos mp

par luigi-wii-fi-ds le Mar 16 Jan - 20:36

merci beaucoup beaucoup bubuche et miku je vais tester vos balises thumleft

par Ice_Keese le Mar 16 Jan - 20:41

Intéressant, mais...

D'abord, pour joindre en une seule colonne, on peut employer l'attribut colspan de la balise td:

Code:: <td colspan="2">Couvre deux colonnes</td>

Ensuite, malgré ce que tu as dis, les balises suivantes:

Code:: <br />, pour un saut de ligne. <hr />, pour introduire un trait horizontal sur tout une ligne (pour faire de la séparation entre le titre et le reste par exemple). <img />, pour mettre des images. <input />, pour les formulaires. <col />, pour donner un style a toute une colonne. <colgroup />, dans certain cas, que je explique ensuite.

Sont toutes des balises XHTML... Il me semblait pourtant qu'on apprendrais pas du XHTML dans ce tutoriel... Il n'est pas nécéssaire de mettre une barre oblique dans une balise orpheline pour être conforme au HTML 4.01.
Le XHTML n'est que les normes du XML appliquées au HTML. Il est plus facile à interpréter par les navigateurs (donc, temps de chargement plus court) mais n'incorpore aucune nouvelle fonctionnalité. Donc, il n'est pas plus complexe que le HTML. Le CSS est compatible avec le HTML, donc, pas besoin de XHTML pour s'en servir.

Voilà. Malgré cela, beau travail.

par Kugaro le Mar 16 Jan - 21:07

Le xHTML est plus récent, aussi.

par Tristou le Mer 17 Jan - 0:03

Sur le tuto de Bubuche, je dirais que si tu veux expliquer comment on fait, prends la version la plus récente et la plus fonctionnelle à savoir xHTML 1.0, ce qui implique donc de ne pas prendre de mauvaise habitudes comme les balises center et les retours à la ligne à tout va

par Ice_Keese le Mer 17 Jan - 1:55

Le mieux, c'est d'utiliser le moins de balises possibles et d'optimiser au plus leur utilisation, c'est-à-dire de profiter des attributs le plus possible.

D'ailleurs, dans ces turoriels, tout le monde code en XHTML en disant que c'est du HTML... Faudrait préciser, là.

par Tristou le Mer 17 Jan - 12:09

Bah les balises center ne sont par exemple plus utilisées depuis le passage au xHTML, ça peut se régler avec les feuilles de style et ls retours à la ligne avec <br/> faut pas en abuser, y'a aussi les paragraphes et les propriétés des blocs pour ça (encore feuilles de style)

par Ice_Keese le Mer 17 Jan - 15:48

Tristou a écrit:Bah les balises center ne sont par exemple plus utilisées depuis le passage au xHTML, ça peut se régler avec les feuilles de style et ls retours à la ligne avec <br/> faut pas en abuser, y'a aussi les paragraphes et les propriétés des blocs pour ça (encore feuilles de style)

Elles ne sont plus utilisées depuis l'apparition du CSS. En fait, y'a plus grand chose d'utilisé depuis l'apparition du CSS...

par luigi-wii-fi-ds le Mer 17 Jan - 15:56

je pense reprendre vraiment le codage pendant les vacance

par Tristou le Mer 17 Jan - 16:30

Bah on fait du xHTML un langage de contenu et plus de mise en forme ^^

par miku le Mer 17 Jan - 19:41

aujourd'hui, nous allons finir les tableaux, et fair l'attribut style. On m'a dit qu'ils n'était pas nécessaire d'aborder les balise thead, tfoot, et tbody en profondeur et qu'un rapide survole suffirait.
Je vais donc les évoquer birèvement maintenant.

Les balises thead, tfoot et tbody permettent de séparer le tableau en trois zones de style. Je vais vous donner un exemple et je ferais commentaires dessus ensuite.

<table>
<thead style="font-weight:bold">
<tr>
<td>Cours:</td>
<td>HTML</td>
</tr>
</thead>

<tfoot style="font-style:italic">
<tr>
<td>C'est facile.</td>
<td>Hein?</td<
</tr>
</tfoot>

<tbody style="text-decoration:underline">
<tr>
<td>Je suis en train de vous apprendre le html</td>
<td>d'accord?</td<
</tr>
</tbody>
</table>

(je n'ai pas représenté ici les balises html head et body, pour plus de clareté, mais elle devraient y être, d'accord? c'est important à comprendre, si vous comprenez pas, postez et je ferais des précisions);

Quand vous mettez ce tableau dans votre page web, vous avez:

Cours: HTML
Je suis en train de vous apprendre le HTML. D'accord?
C'est facile. Hein?

ATTENTION! Comme vous venez de le voir, vous devez déclarer les balise thead et tfoot (u]avant[/u] tbody. Mais ce qui s'affiche c'est d'abord thead, puis tbody et enfin tfoot. D'accord?

Voila pour le premier commentaires. Pour décrire ce que fais cette opération: en fait, toutes les cellules entre thead et /thead héritent du style que vous donnez à thead. Et il en vas de même pour les deux autres.

Pour le deuxième et dernier point que je voulais aborder concernant les tableaux, c'est la possibilité de mettre un ascenseur; Nous le reverrons dans ce cours, lorsque nous traiterons de l'attribut "style", mais je vais déjà vous donner la méthode:

<table border="border">
<tr>
<td>
<div style="overflow: auto; width: 100px; height: 150px">
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
</div>
</td>
</tr>
</table>

(j'ai mis ici que des "<br />", mais vous pouvez mettre du texte, bien sur).
Cela est particulièrement utile quand vous utilisez du php pour générer un pseudo système de cadre. cela vous permer de donner une apparence a vortre site, tout en gardant une bonne compatibilité.
Mais je le répète, nous le reverrons plus tard.
Voila, c'est tout pour les tableaux. nous allons pouvoir passer à la deuxième partie du cours, celle d'aujourd'hui.

Nous allons nous ibnterresser à l'attribut "style". De toue les attributs, c'est certainement lui qui peut prendre le plus de valeur, et c'est pouyr cette raison que nous lui consacrons un cours entier (et vous verrez que ce n'est pas de trop).
Parlons franchement: ce cours est beaucoup plus gros que celui sur les tableaux. si vous arrivez à l'apprendre en entier comme moi, vous avez de forte chance de ne pas avoir de problème par la suite. Sino, c'est pas trop grave, vous inquiétez pas Wink

.
Entrons directement dans le vif du sujet, comme dit bubuche.

j'ai listé ci-dessous une partie des valeurs qu'il peut prendre. Cette liste n'est pas complète, mais servira a vous donner un apperçu. Ne vous inqiétez pas, nous traiterons de tous ces éléments, dans ce cours:

[code]
font-size
font-family
font-weight
font-style
font-variant
color
float
overflow
text-decoration
text-align
text-transform
line-height
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.
[code]

Cette liste n'est pas complète, et je rajouterai des éléments si le besoin s'en fais sentir. Cependant, elle vous donne un aperçu.
Avant de commencer, je voudrais vous expliquer comment il faut utiliser ces arributs: prenons l'exemple de font-size, le premier de la liste. Il permet de décider de la taille de police d'un text. Il s'utilise comme suit:

<span style="font-size:50">Bonjour</span>

Comme vous le voyez, la balise span utilise l'attribut style qui prend la valeur font-size paramétrée sur 50. Le 50 est séparé de la valeur pas un deux points, et il en sera toujours ainsi. Pour séparer plusieurs valeurs, vous devez mettre des ";" entre, comme ça:

<span style="font-size:50;font-style:italic">Bonjour</span>

Il en sera de même pour tous les exemple donné ci après, mais tous ne vont pas dans la balise span (notamment la valeur text-align). Ne vous inquiétez pas, je vous indiqurez les principale balises compatibles.
Je vais lister ici les principales balises qui peuvent accpeter le style, mais cette liste n'est pas complète; Le meiux encore est que si vous avez un doute, vous essayez. Cela ne pourra pas fauire planter votre ordinateur, et vous aurez votre réponse plus rapidement qu'en cherchant si elle se trouve dans les balise que je vais citer, surout si elle n'y est pas ^^).

Code:: span div td tr table p a body col ul ol li

J'ai vraiment pris que les principales, il y en a surement d'autre. Intuitivement, vous devez comprendre que tout ce qui délimite un espace text accepte style, et nous verrons les exceptions ^^.
Commençons les explications.

font-size
Il s'agit d'un élément important, puisqu'il permet (comme nous venons de le voir) de remdimensionner un text. Il peut prendre les valeurs de 1 à 1638 (bien entendue, vous n'aurez surement pas besoin d'une police aussi grande ^^).
Il est compatible avec toutes les balise citées plus haut.

font-family
Il permet de changer la police de text; il sert àmettre son text en times new roman, arial, courier, etc, c'est-a-dire toutes les polices présentes sur l'ordinateur du client. Je crois que l'on peut aussi mettre dees polices que le visiteur n'a pas, mais je ne sais plus comment.
Il est compatible avec toutes les balise citées plus haut.

font-weight
Il défini la graisse de la police (c'est le terme officiel, si si ^^). Il peut prendre les valeurs par défaut:
bold => police en gras
bolder => police au maximum gras. Correspond à une graisse de 800 si mes souvenirs sont bon
light => police moins grasse que normal.
lighter => Police la moins grasse . Correspond à une graisse de 1.
x => "x" désigne un nombre de 1 à 800, et vous sert à donner une taille de graisse personnalisée.
Il est compatible avec toutes les balises citées plus haut.
Les tailles de graisse ne sont pas compatibles avec tous les navigateurs. Mais bold mettra toujours le texte en gras.

font-style
Il définit un text penché ou droit.
Il peut prendre les valeurs :
normal => par défaut, un text droit.
italic => met le text en italic.
oblique => semble avoir le même effet que italic, bubuche n'a pas trouvé la différence.
Il est compatible avec toutes les balise citées plus haut.

font-variant
Il permet un style particulier, celui des minuscules qui sont en ffait des majuscules mais en plus petit.
Il prend les valeurs:
normal => valeur par défaut du text, le text ne change pas.
small-caps => met les minuscules du text en majuscules plus petites.
Il permet notamment de mettre un text en évidence, sans devoir passer par d'autre polices.
Il est compatible avec toutes les balises citées plus haut.

color
Permet de changer la couleur du text. peut prendre toutes les valeurs du code héxadécimal. dans les navigateurs pas trop ancien, Il peut aussi prendre des valeurs qui sont en fait l'appelation anglaise de couleurs.
Je vous en ai listé ci dessous, de mémoire quelque unes. Je les aies mise dans leurs couleur, et j'ai mis en face leur code héxadécimal.
white => #ffffff (blanc)
black (noir)
red => #ff0000 (rouge)
blue => #0000ff (bleu)
lime => #00ff00 (melon)
magenta => #ff00ff (magenta)
cyan => #00ffff (cyan)
pink => #ffc0cb (rose)
darkblue (blue sombre)
mediumturquoise => #48d1cc (turquoise medium)
midnightblue = #191970 (bleu minuit)
chocolate => #d2691e (chocolat)
orchid => #da70d6 (orchide)
steelblue => #4682b4 (bleu acier)

Il en existe bien d'autre, mais vous pourrez aisément les trouver par vous-même. Rappelez vous quand même de red, blue, et lim, car c'est eux qui permettent la synthèse trichrome des couleurs.
Utilisé dans la balise a, il impose sa couleur au lien (celui-ci garde sa couleur qu'il ai été visité ou non).
Il est compatible avec toutes les balises citées plus haut.

float
Cette valeurs est très particulière. Elle permet lorsque vous inserez une image de faire que le text remplissent les lignes qu'il peut a coté de l'image; cela peut paraitre compliqué, mais en fait c'est très pratique (en particulier lorsque votre image est très grande. Sans le float, elle s'insérerai dans la ligne et laisserai un grand blanc de chanque coté vous pouvez obtenir le même effet avec un tableau à deux cellules.)
Elle peut prendre les valeurs:
left => pour mettre le text à droite
right => pour mettre le text à gauche
Si j'ai mis les deux mots précédents en gras, c'est pour bien souligner que vous devez préciser le coté où se trouve l'image, et non celui ou se trouve le text.
Il n'est compatible qu'avec la balise orpheline <img />, que vous reverrez quand nous traiterons des liens dans un cours suivants.

overflow
Comme nous l'avons vu en début de cours, il permet de faire un ascenseur. Il est généralement utilisé dans un tableau, mais il n'en fait pas vraiment partit (si je vous en ai parlé plus haut c'est pour vous introduire son utilisations la plus courante.)
Il peut prendre les valeurs :
scroll => pour afficher toujours l'ascenseur, même quand cela n'est pas nécessaire.
auto => pour afficher l'ascenseur quand cela deviens nécessaire (c'est a dire quand le text deviens trop grand pour l'espace délimité).
Vous devez déterminer l'espace dans le même style que celui où vous mettes l'overflow, comme dans l'exemple donné en début de cours, avec les attributs height et width.
Il existe également des sous attributs, qui peuvent remplacer overflow et qui sont:
overflow-x => pour ne mettre qu'un ascenseur dans la barre horizontal.
overflow-y => pour ne mettre qu'un ascenseur dans la barre vertical.
Ils prennent les même valeurs que overflow (auto et scroll).
Il n'est pas compatible avec les balise précédente, il ne semble pouvoir être mis que dans le div, et je crois dans le p, mais je ne suis pas sure. Dans les autres ils restent sans effet.

text-decoration
Il permet de souligner, de barrer ou de mettre un trait au dessus d'un text.
Il prend les valeurs:
underline => pour souligner le text.
overline => pour mettre un trait au dessus du text.
line-through => pour barrer le text.
none => pour ne pas mettre de décoration sur le texte.

"none", lorsqu'il est utilisé dans un lien permet de retirer le trait sous le lien.
Il est compatible avec toutes les balise citées plus haut.

text-align
Il permet de réaligner le text. Il peut prendre les valeurs:
right => pour aligner le text a droite
left => pour aligner le text à gauche (valeur par défaut).
center => pour mettre le text au centre.
L'effet s'apparente tout à fait à ce que vous pouvez voir sur le fdf, ou dans le word.
Il n'est pas compatible[b] avec les balise précédentes. Il ne peut aller qu'avec les balise intruduisant une nouvelle ligne (div, p, table, tr, td, co, mais pas a, ni span par exemple).
je suppose que la raison est assez logique, n'est-ce pas?

[b]line-height
Il définit l'espacement entre les lignes. Il peut prendre les valeurs de 1 a plus l'infini, en théorie, mais il est évident qu'au bout d'un certain moment, si vos lignes sont trop espacées, votre texte deviens illisible.
Il est compatibles avec toutes les balises citées plus haut.

Je continuerai plus tard. pour l'instant, je vous laisse avec ça.
J'éditerai ce post plus tard.

par luigi-wii-fi-ds le Mer 17 Jan - 20:22

vive miku !! j'ai pas vraiment la volonter de le lire maintenant -_-"

par Ice_Keese le Mer 17 Jan - 20:30

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

par Kugaro le Mer 17 Jan - 20:31

Si ca te fait plaisir Rolling Eyes

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

Bon, je viens préciser plusieurs chose, rapports aux divers message qu j'ai reçu sur ma boite mail:
1) d'abord, je ne prend pas d'élève. les raisons sont multiples, mais je ne les évoquerai pas ici.
2) après avoir discuté miku et moi, nous sommes tombés d'accord: il n'y aura pas d'examen de fin d'année sur la programmation. Les raison pratique autant qu'éthique nous empèchent de le faire.
3) je ne compte absolument pas faire de remarque à miku: elle gère son enseignement comme elle l'entend. Si je prévillégie la simplicité, elle privilégie l'exactitude, je ne peux lui en vouloir. C'est une façon de faire, et elle ne m'est ni supérieure ni inférieure.
4) je donnerai bien mon cours de php, mais je ne peux pas le faire pour le moment. C'est donc miku qui vous donnera cours jusqu'a nouvel ordre.
5) enfin rappelez vous que tout "professeurs" que nous sommes nous avons une vie hors du fdf, et que nous ne pouvons répondre à toutes vos questions, et qu'il est donc inutile de nous envoyer des mp pour nous relancer si nous restons silencieux.

bon, c'est tout pour le moment. J'éditerai ou reposterai surement plus tard.

par luigi-wii-fi-ds le Mer 17 Jan - 20:36

ok j'y penserais la prochaine foi avant de te MP.

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

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

Permission de ce forum: