Wikini

FoXparleXhtml

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-54-196-72-162.compute-1.amazonaws.com
code source de cette p@ge wiki XHTML in WikiNi For English version: FoXspeaqsXhtml HTML in WikiNi WiKis
@ide-mémoire des codes XHTML valides dans les WiKis WikiNi
et leurs équivalents en FoXmatageWikiNi FoXmattinG :
pour les p@rticipants, @rtisans, j@rdiniers des WiKis WikiNi.

Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info
01. (Haut) 02. 03. 04.

Avec WikiNi, pour allumer l'encodage HTML,
et éteindre le FoXmatageWikiNi FoXmattinG,
simplement écrire deux paires de guillemets doubles ; voici un guillemet double : "

Tout ce qui se trouve entre ces deux paires
répondra alors à l'encodage HTML,
mais ne répondra plus au FoXmatageWikiNi FoXmattinG.


Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info
01. (Haut) 02. 03. 04.

2. Un WiKi WikiNi est un endroit idéal où se familiariser avec le HTML,
parce qu'un changement de ligne, en cliquant "Enter", quand on édite en HTML
n'en crée pas un dans la p@ge WiKi publiée, comme c'est le cas
dans plusieurs forums phpBB et blogues, et aussi, avec le FoXmatageWikiNi FoXmattinG :

conséquemment, chaque balise HTML peut avoir sa propre ligne,
sans pour autant créer une ligne vide dans la p@ge publiée.

Le code XHTML <br /> crée un changement de ligne :
ainsi, à l'édition d'une p@ge WiKi, que l'on écrive
(entre des paires de guillemets doubles, au lieu d'un seul ")


ou bien ou encore
"
voici la première ligne<br />
et voici la deuxième,
"
"
voici la première ligne
<br />
et voici la deuxième,
"
dans la p@ge WiKi publiée, on lira :
Voici la première ligne
et voici la deuxième.


Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info
01. (Haut) 02. 03. 04.

3. Pour changer de ligne entre deux paires de guillemets doubles, on peut utiliser le code <br /> ;

les codes ~ <hr /> ~ <div align="x"> ~ <blockquote> ~ <table> ~ <h1> à <h7> ~

Notez qu'avec le HTML 4.0 transitionnel, excepté pour les trois codes
<br>, <hr> et <img src="URL_@ddress of Im@ge">,


Notez également qu'avec le XHTML 1.0 transitionnel,


lesquels sont fermés à l'intérieur même de leur balise d'ouverture, avec un espace et une barre oblique.

Notez aussi qu'avec le code img, l'attribut "alt" est obligatoire, en XHTML 1.0.


Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info
01. (Haut) 02. 03. 04.

4. Prendre également note que lorsqu'on utilise ensemble plusieurs codes,


par exemple, si on met le texte en retrait, et qu'on le justifie et le colore en bleu, on écrit,


<blockquote>
<div align="justify">
<font color="#3333ff">
avant le texte, puis, on ferme les balises dans l'ordre inverse de leurs entrées:
</font>
</div>
</blockquote>

Un autre exemple

<b><i><u>Texte gras, italique, souligné.</u></i></b> = Texte gras, italique, souligné.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

a. Pour les caractères Gras

Avec WikiNi, entre deux paires de guillemets doubles,

écrire <b>avant le texte et</b> après.

Équivalent en FoXmatageWikiNi FoXmattinG : **Gras** = Gras


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

b. Pour les caractères en italique

Avec WikiNi, entre deux paires de guillemets doubles,

écrire <i>avant le texte et</i> après.

Équivalent en FoXmatageWikiNi FoXmattinG : //Italique// = Italique


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

c. Pour les caractères soulignés

Avec WikiNi, entre deux paires de guillemets doubles,

écrire <u>avant le texte et</u> après.

Équivalent en FoXmatageWikiNi FoXmattinG : __Souligné__ = Souligné


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

d. Pour "effacer" du texte

Avec WikiNi, entre deux paires de guillemets doubles,

écrire <s>avant le texte et</s> après.

Équivalent en FoXmatageWikiNi FoXmattinG : @@biffé@@ = biffé


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

e. Police Couleurs Types Formats Surlignage
Pas d'équivalent en FoXmatageWikiNi FoXmattinG, sauf ici.

Pour colorer un texte court, écrire (dans WikiNi, avec des paires de guillemets doubles, au lieu d'un seul ")

"<font color="#009900">au choix, avant le texte vert et après : </font>"

donnera

au choix, avant le texte vert et après :

Pour les textes plus longs, donner une ligne à chaque balise et écrire, au choix,

"
<font color="#009900">
avant le texte,
qui répondra au HTML,
et après :
</font>
"
"<font color="#009900">"
avant le texte,
qui ici répond au
FoXmatageWikiNi FoXmattinG
,
et après :
"</font>"

Pour choisir un numéro de couleur.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Police Couleurs Types Formats Surlignage

Avec WikiNi, entre deux paires de guillemets doubles,


<font face="comic sans ms">Exemple Comic Sans MS.</font> = Exemple Comic Sans MS.

<font face="arial"><b>Exemple Bold Arial.</b></font> = Exemple Bold Arial.

<font face="arial">Exemple Arial.</font> = Exemple Arial.

<font face="times new roman"> Exemple Times New Roman.</font> = Exemple Times New Roman.


<font color="#0000ff" face="comic sans ms" size="4">Exemple</font> = Exemple


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Police Couleurs Police Formats Surlignage

Avec WikiNi, entre deux paires de guillemets doubles,

<font size="1">Format #1</font> = Format #1

<font size="2">Format #2</font> = Format #2

<font size="3">Format #3</font> = Format #3

<font size="4">Format #4</font> = Format #4

<font size="5">Format #5</font> = Format #5

<font size="6">Format #6</font> = Format #6

<font size="7">Format #7</font> = Format #7


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Polices Couleurs Types Formats Surlignage

Voici un arc-en-ciel chromatique de codes XHTML pour surligner (et colorer) du texte. De A à O.
Rappel : dans un WiKi WikiNi, ces codes HTML doivent être entre deux paires de "

Surlignage _A B C_ _D E F G_ _H I J K_ _L M N O_

A
<font style="background-color: #000000" color="#ffffff">~Texte blanc avec fond noir</font>
=
~Texte blanc avec fond black


B
<font style="background-color: #cc99ff" color="#660099">~Texte violet avec fond mauve</font>
=
~Texte violet avec fond mauve


C
<font style="background-color: #660099" color="#ffffff">~Texte blanc avec fond violet</font>
=
~Texte blanc avec fond violet

Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Surlignage _A B C_ _D E F G_ _H I J K_ _L M N O_
D
<font style="background-color: #99ffff" color="#0000ff">~Texte bleu avec fond bleu ciel</font>
=
~Texte bleu avec fond bleu ciel


E
<font style="background-color: #0000ff" color="#99ffff">~Texte bleu ciel avec fond bleu</font>
=
~Texte bleu ciel avec fond bleu


F
<font style="background-color: #33cc33" color="#003300">~Texte vert avec fond vert pale</font>
=
~Texte vert avec fond vert pale


G
<font style="background-color: #003300" color="#33cc33">~Texte vert pale avec fond vert</font>
=
~Texte vert pale avec fond vert

Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Surlignage _A B C_ _D E F G_ _H I J K_ _L M N O_
H
<font style="background-color: #cccc33" color="#333300">~Texte foncé avec fond jaune</font>
=
~Texte foncé avec fond jaune


I
<font style="background-color: #333300" color="#cccc33">~Texte jaune avec fond foncé</font>
=
~Texte jaune avec fond foncé


J
<font style="background-color: #FF9900" color="#663300">~Texte brûlé avec fond orange</font>
=
~Texte brûlé avec fond orange


K
<font style="background-color: #663300" color="#ff9900">~Texte orange avec fond brûlé</font>
=
~Texte orange avec fond brûlé

Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Surlignage _A B C_ _D E F G_ _H I J K_ _L M N O_
L
<font style="background-color: #ff99cc" color="#990000">~Texte rouge avec fond rose</font>
=
~Texte rouge avec fond rose


M
<font style="background-color: #990000" color="#ff99cc">~Texte rose avec fond rouge</font>
=
~Texte rose avec fond rouge


N
<font style="background-color: #cccccc" color="#000000">~Texte noir avec fond gris</font>
=
~Texte noir avec fond gris


O
<font style="background-color: #ffffff" color="#000000">~Texte noir avec fond blanc</font>
=
~Texte noir avec fond blanc


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

f. Pour justifier du texte habituellement long
Pas d'équivalent en FoXmatageWikiNi FoXmattinG !

Écrire (dans WikiNi, avec des paires de guillemets doubles, au lieu d'un seul ")

"
<div align="justify">
avant votre texte, qui ici répondra au HTML, et ensuite :
</div>
"

ou encore

"<div align="justify">"
avant votre texte, qui ici répondra au FoXmatageWikiNi FoXmattinG, et ensuite :
"</div>"

Quand on justifie du texte, on l'aligne aux deux marges, celle de gauche et celle de droite.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

g. Pour centrer du contenu textuel ou graphique
Pas d'équivalent en FoXmatageWikiNi FoXmattinG!

Avec un texte court, écrire (dans WikiNi, avec des paires de guillemets doubles, au lieu d'un seul ")

"<div align="center">avant votre texte et ensuite :</div>"


"<div align="center">
avant votre texte, qui ici répondra au HTML, et ensuite :
</div>"

ou

"<div align="center">"
avant votre texte, qui ici répondra
au FoXmatageWikiNi FoXmattinG, et ensuite :
"</div>"


Texte centré.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

h. Pour aligner à droite du contenu textuel ou graphique
Pas d'équivalent en FoXmatageWikiNi FoXmattinG !

Pour du texte court, comme la date, écrire (dans WikiNi, avec des paires de guillemets doubles, au lieu d'un seul ")

"<div align="right">avant votre texte et ensuite :</div>"

ou, pour du texte rarement plus long, écrire

"
<div align="right">
avant votre texte, qui ici répondra au HTML, et ensuite :
</div>
"

ou

"<div align="right">"
avant votre texte, qui ici répondra
au FoXmatageWikiNi FoXmattinG, et ensuite :
"</div>"
Les signatures peuvent être alignées à droite.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

i. Pour mettre en retrait du texte habituellement long

Écrire (dans WikiNi, avec des paires de guillemets doubles, au lieu d'un seul ")

"
<blockquote>
avant votre texte et ensuite :
</blockquote>
"

ou encore

"
<blockquote><div align="justify"><font color="#0000ff">
avant votre texte; ensuite, écrire les balises de fermeture, dans leur ordre inverse d'entrée.
</font></div></blockquote>
"

Ce paragraphe est en retrait :
L'équivalent en FoXmatageWikiNi FoXmattinG est possible en insérant un, deux, ou trois espaces, au début de ligne ou de paragrahe ; on peut aussi insérer des "tabs", mais pas les deux ensemble : un ou l'autre.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

j. Pour changer de ligne ou retour de ligne forcé

Le code XHTML <br /> crée un changement de ligne, alors qu'un simple changement de ligne, en cliquant "Enter", lors de l'édition, n'en crée pas un dans la p@ge WiKi publiée, où le FoXmatageWikiNi est fermé. Conséquemment, dans WikiNi, pour une meilleure visualisation des p@ges (longues), quand on les modifie, le code <br /> n'a pas à toucher le dernier mot de la première ligne et le premier mot de la deuxième :
(dans WikiNi, avec des paires de guillemets doubles, au lieu d'un seul ")

"ceci est la première ligne<br />et cela, la deuxième"

pourrait donc être remplacé par ou encore, par
"
ceci est la première ligne<br />
et cela, la deuxième
"
"
ceci est la première ligne
<br />
et cela, la deuxième
"
pour le même résultat dans la p@ge publiée:
ceci est la première ligne
et cela, la deuxième

Équivalent en FoXmatageWikiNi FoXmattinG :
a) si on écrit ---, ce qui suit sera à la ligne suivante. =
si on écrit
, ce qui suit sera à la ligne suivante.
b)Simplement cliquer "Enter" and changer de ligne.



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

k. Pour créer un ligne, ou séparateur horizontal, comme celle dans et sous ce paragraphe "k"


si on écrit jusqu'à<hr />puis, qu'on continue d'écrire juste après,


Si on écrit jusqu'à
puis, qu'on continue d'écrire juste après,


on termine le paragraphe, on change de ligne et écrit
<hr />
puis, on change de ligne et on continue d'écrire ...


Équivalent en FoXmatageWikiNi FoXmattinG :
Écrire 4 tirets, "-", crée une ligne.



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

l. Pour insérer une im@ge 1/3, 2/3, 3/3. Explanations, en anglais, on URL @ddresses and Im@ges.

Dans WikiNi, entre deux paires de guillemets doubles, écrire

<img src="the_URL_@ddress_of_im@ge" alt="obligatoire" title="facultatif" />

Dans le code balise img, l'attribut alt est obligatoire.

Pour créer une im@ge centrée qui est un lien, écrire

<div align="center">
<a href="http://www.wikini.net/wakka.php?wiki=LogoPourWikiNi#djo" title="WikiNi">
<img src="adresseURLdeLimage" alt="obligatoire" />
</a>
</div>
crée

WikiNi

Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Im@ge1/3, 2/3, 3/3.

Pour empêcher la bordure de 2 px

qui apparait par défaut autour des images liens,

ajouter border="0px" dans la balise img:

<img src="adresseURLdeLimage" alt="WikiNi" border="0px" />

crée

WikiNi

Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Im@ge1/3, 2/3, 3/3.

Si l'im@ge n'est pas un lien, mais
qu'on veut ajouter une bulle d'information qui apparait quand l'im@ge est pointée,
ajouter title="le titre en minuscule" dans la balise img:

<img src="adresseURLdeLimage" alt="bulle minuscule" border="0px" title="bulle minuscule" />

crée

bulle minuscule
Bien sûr, ces recettes XHTML pour créer des im@ges liens impliquent que l'im@ge soit déjà @ccessible sur le Web. Faire apparaître dans une p@ge Web ou WiKi une im@ge qui est dans un autre esp@ce Web, utilise la bande passante de cet Esp@ce : il semble donc éthiquement souhaitable de demander la permission au(x) propriétaire(s) de l'esp@ce Web, avant d'utiliser une im@ge, à moins que ce ne soit pour un temps limité...

Équivalent en FoXmatageWikiNi FoXmattinG :
écrire l'@dresse entre deux paires de parenthèses [ et ]



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

m. Pour créer un lien direct

à une autre p@ge Web ou WiKi, dans WikiNi, entre deux paires de guillemets doubles, écrire

<a href="adresse_URL_dela_p@ge">Texte lien ou Im@ge lien</a>
ou
<a href="adresse_URL_dela_p@ge" title="bulle d'information">Texte lien ou Im@ge lien</a>
ou, par exemple :
<a href="http://www.wikipedia.org" title="Le plus grand WiKi du Monde">Wikipedia</a> = Wikipedia

à une @dresse courriel, entre deux paires de guillemets doubles, écrire

<a href="mailto:adresse.fictive@sympatico.ca">Texte lien ou Im@ge lien</a>
ou
<a href="mailto:adresse.fictive@sympatico.ca?subject=FoXparleXhtml" title="envoyer un em@il">Lien courriel</a>
=

Lien courriel
Équivalent en FoXmatageWikiNi FoXmattinG :
a) NomWiKi ou MotWiki
b)Lien automatique externe : http://www.wikipedia.org
c) Liens forcés externes : [[http://www.wikipedia.org]] = http://www.wikipedia.org
[[http://www.wikipedia.org Le WiKi de Wikipedia]] = Le WiKi de Wikipedia
d) Liens forcés courriel : [[toto@example.org]] = toto@example.org
[[toto@example.org Adresse de toto]] = Adresse de toto



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

n. Pour créer un lien target="_blank" à une autre p@ge WiKi ou Web
Pas d'équivalent en FoXmatageWikiNi FoXmattinG !

Un lien target="_blank" ouvre dans une nouvelle fenêtre ou dans un nouveau "tab".


<a href="adresse_URL_dela_p@ge" target="_blank">Texte lien ou Im@ge lien</a>


<div align="center">
<a target="_blank" href="http://www.wikipedia.org" title="Le plus grand WiKi du Monde">Wikipedia</a>
</div>

crée :

Wikipedia

Il est convivial d'indiquer quand un lien est un lien target="_blank".


Haut Gras-Italik Soulign-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

o. Pour créer un lien interne dans la p@ge même
Pas d'équivalent en FoXmatageWikiNi FoXmattinG !

Avec WikiNi, entre deux paires de guillemets doubles,

a) créer une cible :

<a name="nom_dela_cible">La cible peut être rien, du texte, ou une im@ge</a>


b) créer un lien vers la cible :

<a href="#nom_dela_cible">Le lien peut être du texte ou une im@ge.</a>



Chaque barre de liens, au dessus de chacun des codes XHTML de cette p@ge,



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

p. Pour créer une liste à puces

Avec WikiNi, entre deux paires de guillemets doubles, écrire

<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>

crée :


Équivalent en FoXmatageWikiNi FoXmattinG : voir FoXmatageWikiNi #Listes-Retrait.
Pour ce qui est des listes à puces, le FoXmatageWikiNi est plus simple que le HTML.



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

q. Pour créer une liste numérotée Avec WikiNi, entre deux paires de guillemets doubles, écrire
<ol>
<li>Item # 1</li>
<li>Item # 2</li>
<li>Item # 3</li>
</ol>
crée
  1. Item # 1
  2. Item # 2
  3. Item # 3
<ol style="list-style-type: lower-alpha;">
<li>Item # a</li>
<li>Item # b</li>
<li>Item # c</li>
</ol>
crée
  1. Item # a
  2. Item # b
  3. Item # c
<ol style="list-style-type: upper-alpha;">
<li>Item # A</li>
<li>Item # B</li>
<li>Item # C</li>
</ol>
crée
  1. Item # A
  2. Item # B
  3. Item # C
<ol style="list-style-type: lower-roman;">
<li>Item # i</li>
<li>Item # ii</li>
<li>Item # iii</li>
</ol>
crée
  1. Item # i
  2. Item # ii
  3. Item # iii
<ol style="list-style-type: upper-roman;">
<li>Item # I</li>
<li>Item # II</li>
<li>Item # III</li>
</ol>
crée
  1. Item # I
  2. Item # II
  3. Item # III
Équivalent en FoXmatageWikiNi FoXmattinG : voir FoXmatageWikiNi #Listes-Retrait


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

r. Tableau r1 r2 r3 r4 r5 r6 r7

To Create Fancy TABLES est en construction. Pour choisir un numéro de couleur
Pas d'équivalent en FoXmatageWikiNi FoXmattinG, excepté ici.

Les tableaux sont l'encodage XHTML le plus complexe dans cette p@ge ;

il y a trois balises principales : <table>, <tr> pour les lignes, et <td> pour chaque cellule.

Voici un code XHTML, où insérer du contenu dans un tableau bleu pale ;


<table align="center" bgcolor="#99ffff" border="2px" width="555px">
<tr><td>
votre contenu, qui ici répondra au HTML.
</td></tr></table>


votre contenu, qui ici répondra au HTML.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

r. Tableau r1 r2 r3 r4 r5 r6 r7

Le code précédent fonctionne parfaitement,


Voici un code encore plus simple et gr@phiquement sécure : le tableau, par défaut,




<table bgcolor="#99ffff" width="555px">
<tr><td>
votre contenu, qui ici répondra au HTML.
</td></tr></table>


votre contenu, qui ici répondra au HTML.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

r. Tableau r1 r2 r3 r4 r5 r6 r7

Si le WiKi a un menu vertical, ajuster la largeur du tableau, pour ne pas élargir la p@ge.

Les fonds et largeurs de chaque cellule peuvent être définis dans la balise <td>;

on peut aligner, ici à droite, les contenus des cellules d'une rangée dans la balise <tr>.


<table align="center" border="0px" bgcolor="#000000" width="540px">
<tr align="right">
<td bgcolor="#cccc33" width="190px">Première colonne /fond jaune</td>
<td bgcolor="#ff9900" width="160px">Deuxième colonne /fond orange</td>
<td bgcolor="#ff9999" width="190px">Troisième colonne /fond rose</td>
</tr>
</table>


Première colonne /fond jaune Deuxième colonne /fond orange Troisième colonne /fond rose


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

r. Tableau r1 r2 r3 r4 r5 r6 r7

La balise <table> du code XHTML pour les tableaux peut aussi inclure les deux attributs C :
cellpadding="#px" cellspacing="#px" EXAMPLES.

Avec le HTML 4.0, la balise <table>, a ± neuf attributs, alors qu'avec le XHTML 1.0, on peut se débrouiller avec six :

les attributs "background", "cols" et "height" ne sont pas du XHTML 1, mais plutôt du HTML 4.

1. TABLEAUX ~ Aide-mémoire pour la balise <table> : (a, bb, cc, w)


Suggestion : écrire systématiquement les attributs de la balise <table> en ordre alphabétique.

Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

r. Tableau r1 r2 r3 r4 r5 r6 r7


2. <tr> (la ligne ou rangée)




3. <td> (la cellule)






Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

r. Tableau r1 r2 r3 r4 r5 r6 r7 DjO ai créé ce gr@phe pour le HTML 4.0 transitionnel avec MOT 2.3 et Paint.

HTML tables


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

r. Tableau r1 r2 r3 r4 r5 r6 r7
Avec MOT 2.3 et Paint, DjO ai créé cet autre gr@phe, spécifiquement pour le XHTML 1.0,
vu que les attributs "background", "cols" et "height" ne sont pas du XHTML transitionnel valide.
xhtml tables in wikini
Somme toute, le résultat est beaucoup plus aéré et digestible.

--DjO 13jan2005.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

s. Pour créer des TITRES + Affiche de BIENVENUE (et bogue)

Pour les TITRES, avec WikiNi, entre deux paires de guillemets doubles, si on écrit

<h1>Titre #1</h1>
<h2>Titre #2</h2>
<h3>Titre #3</h3>

on crée :

Titre #1

Titre #2

Titre #3


Équivalent en FoXmatageWikiNi FoXmattinG :
======Titre #1====== (6 "-")
=====Titre #2===== (5 "-")
====Titre #3==== (4 "-")

Titre #1

Titre #2

Titre #3



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

s2. AFFICHE de BIENVENUE dans un tableau, avec une bordure de 3 px, un fond violet, et une police mauve.

Prenez note qu'avec WikiNi, dans les tableaux construits par XHTML, il y a un bogue :
les codes <h1> et <font size> ne sont pas interprétés par les Netscape Navigators 4x :
ainsi, dans un tableau, on voit le texte avec le format par défaut de la police,
même quand les codes <h1> à <h7> et /ou <font size="1"> à <font size="7"> sont utilisés.
Cependant, les balises <font face> et <font color> sont lues correctement par NN4x.

Avec WikiNi, entre deux paires de guillemets doubles, si on écrit

<table align="center" border="3px" bgcolor="#993399" width="199px">
<tr>
<td>
<div align="center">
<h1><font color="#ffccff" face="comic sans ms">BIENVENUE</font></h1>
</div>
</td>
</tr>
</table>
on crée :

BIENVENUE



Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Contenu de cette p@ge WiKi en ordre alphabétique

  1. Affiche
  2. Alignements à droite, centré, et justifié.
  3. Changer de ligne.
  4. Effacer.
  5. Gras.
  6. Im@ges.
  7. Italique.
  8. Lignes séparatrices horizontales.
  9. Liens directs.
  10. Liens internes.
  11. Liens target="_blank".
  12. Listes /Puces.
  13. Listes /Numéros.
  14. Polices : couleurs, formats, surlignage, types.
  15. Retrait.
  16. Tableaux.
  17. Titres.
  18. Souligner.


Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info

Spécificités sur cette p@ge WiKi et les codes XHTML qui y sont présentés

  1. * Le contenu de cette p@ge WiKi est du HTML 4.0 transitionnel et du XHTML 1.0 transitionnel valides.
  2. * Les codes présentés dans cette p@ge WiKi sont du XHTML 1.0 transitionnel.
  3. * Tous les attributs de balises sont définis dans une paire de guillemets doubles :
    • par exemple, <div align="center">
  4. * Mieux vaut court que long ; the shorter, the better : par exemple, <b> versus <strong>.
  5. * Tous les codes, (excepté le s2, avec NN4x), sont interprétés par Internet Explorer 6,
    • et aussi Netscape Navigators 4x et 7x.
  6. * Tous les codes sont en minuscules.
  7. * Ne mettre qu'une seule balise HTML par ligne, fonctionne dans un WiKi WikiNi,
    • car un changement de ligne à l'édition n'en crée pas un dans la p@ge WiKi publiée.
  8. * Les codes HTML suivants, issus de cette liste, ne sont pas inclus plus haut dans cette p@ge :
    1. o <em> mis en valeur</em>
    2. o <strong> fortement mis en valeur </strong>
    3. o <tt> télétype</tt>
    4. o <pre> préformaté </pre>
    5. o <ins> inséré </ins>
    6. o <del> effacé </del>
    7. o <sup> exposant </sup>
    8. o <sub> indice </sub>
    9. o <cite> citation </cite>
    10. o <q> citation en ligne </q>
    11. o <code> entrée de code </code>
    12. o <samp> sortie de code </samp>
    13. o <kbd> saisie clavier </kbd>
    14. o <var> variable </var>
    15. o <dfn> définition </dfn>
    16. o <abbr> abbréviation </abbr>
    17. o <acronym> acronyme </acronym>
    18. o <p> paragraphe </p>
  9. Avertissement :
    Netscape Navigator 7x et Internet Explorer 6 acceptent d'interpréter certaines erreurs HTML ; cependant, si on @ccède une p@ge WiKi avec Netscape Communicators 4x, incluant la dernière version 4.8 de 2002, que vous pouvez télécharger gratuitement,
    • vous pourriez voir une p@ge blanche sans contenu visible.
    • Cela peut être à cause d'une seule balise HTML oubliée ou en trop. Pourquoi ?
    • Conséquemment, on peut suggérer que c'est notre responsabilité de méthodiquement vérifier les modific@tions HTML à une p@ge WiKi, avec Netscape Navigator 4.8, avant de fermer boutique.
  10. Finalement, pour les perfectionnistes, il est esssentiel de vérifier l'intégrité du XHTML 1.0 transitionnel de la p@ge modifiée avec le validateur XHTML du W3C ; pour les perfectionnistes méthodiques, il apparait logique de vérifier le XHTML avant et après.
  11. Cette p@ge WiKi présente deux gr@phes et huit im@ges, hébergées par djo.ca, et designées par
  12. Joseph Deneault, Djeault, DjO, qui est le j@rdinier, @rtisan, cré@teur
    1. de la p@ge BambaFox,
    2. de la p@ge FoXmatageWikiNi,
    3. de sa version anglaise FoXmattinG,
    4. de cette p@ge-ci, FoXparleXhtml,
    5. de sa version anglaise FoXspeaqsXhtml,
    6. de la p@ge BambaFoxInstaller,
    7. de sa version anglaise BambaFoxInstall.
  13. Des deux dernières p@ges, on peut @ccéder le code source des sept p@ges de BambaFox.
  14. Cliquer BambaFox.gif, en haut à gauche des sept p@ges de BambaFox, vous @mènera au code source de cette p@ge.
  15. Ces sept p@ges WiKi forment un système bilingue, anglais et français, interconnecté visant à communiquer l'information pratique et utile sur le formatage dans un WiKi WikiNi, soit par "FoXmatageWikiNi", soit par Encodage XHTML.
  16. Ces sept p@ges ne peuvent ni être modifiées, ni commentées : pour les critiquer ou les commenter, ou encore pour suggérer des améliorations, demander des explications, et /ou signaler des erreurs, DjO vous invite à le faire dans les p@ges :
    1. WikiNi:DiscussionsBambaFox (interwiki)
    2. WikiNi:DiscussionsFoXparleXhtml (interwiki)
    3. WikiNi:DiscussionsFoXspeaqsXhtml (interwiki)
    4. WikiNi:DiscussionsFoXmatageWikiNi (interwiki)
    5. WikiNi:DiscussionsFoXmattinG (interwiki)
    6. WikiNi:DiscussionsBambaFoxInstaller (interwiki)
    7. WikiNi:DiscussionsBambaFoxInstall (interwiki)
  17. Excluant cette section finale, cette p@ge WiKi offre 37 écrans, tout comme sa version anglaise.
  18. En tout, excluant les sections finales d'Info,
    • l'@ide-mémoire BambaFox présente 13 im@ges et plus de 111 écrans.
  19. BambaFox version01d découle de cette discussion (interwiki).

--DjO 11fev2005

WikiNi:PagePrincipale

Haut Gras-Italik Souligné-Effacé Police Justifié Centré Droite Retrait ChLigne Ligne Im@ge Lien Target LienIn Liste #Liste Tablo Titre Index Info
BambaFox version01d
is licensed under
the CC-GNU LGPL.

Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]