WikiDjeault

FoXparleXhtml

HomE :: PlaN : FormaT : LastChanges : UserLogin :: Vous êtes ec2-54-80-211-135.compute-1.amazonaws.com
djo.ca
<< FoXmattinG IndexInitial FoXspeaqsXhtml >>

@ide-Mémoire : règles de formatage XHTML dans ce WiKi


code source de cette p@ge ouvre dans nouvelle fenetre XHTML in WikiNi For English version: FoXspeaqsXhtml
@ide-mémoire des codes XHTML valides dans les WiKis WikiNi
et leurs équivalents en FoXmatageWikiNi FoXmattinG :
Valid XHTML 1.0 Transitional

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 ")
"voici la première ligne<br />et voici la deuxième,"

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. Donc, pour changer de ligne entre deux paires de guillemets doubles,
on peut utiliser le code <br /> ; de plus, les codes
<hr />, <div align="x">, <blockquote>, <table>, <h1> à <h7>
créent eux aussi un changement de ligne.

Notez qu'avec le HTML 4.0 transitionnel, excepté pour les trois codes
<br>, <hr> et <img src="URL_@ddress of Im@ge">,
les autres codes HTML doivent tous être fermés :
par exemple, la balise <b>, pour les caractères gras,
est fermée par la balise </b>.

Notez également qu'avec le XHTML 1.0 transitionnel, la norme chez WikiNi,
tous les codes XHTML doivent être fermés, incluant

<br />, <hr />, <img src="@dresseURLdeLim@ge" alt="obligatoire" />,

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="x" 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,

qu'on devrait les refermer dans l'ordre inverse de leur entrée :

par exemple, si on met le texte en retrait, et qu'on le justifie et le colore en bleu,
on écrit, avec WikiNi, entre deux paires de guillemets doubles,

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

Finalement, les attributs sont toujours paramétrés entre 2 guillemets doubles,
par ex : <div align="center"> </div>, ou <font color="#0000ff" size="2"> </font>


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, dans ce Wiki.

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 HTML 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,

ces attributs <font face> créent ce qui suit :

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

Voici un exemple d'une balise <font>, avec trois attributs différents :

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

ou, avec un texte plus long,

"<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 l'ordre inverse.
</font></div></blockquote>
"

Ce paragraphe est en retrait :
L'équivalent en FoXmatageWikiNi FoXmattinG est possible en insérant un, deux, trois espaces, voire quatre, en début de ligne ou de paragraphe.


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"

Dans WikiNi, entre deux paires de guillemets doubles,

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

on crée :

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

Pour le même résultat, avec WikiNi,

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

Cela favorise une meilleure visualisation des (longues) p@ges quand on les modifie.

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



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

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


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

<img src="adresseURLdeLimage" 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/" 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@ges : Lien : Target : LienIn : Liste : #Liste : Tablo : Titre : Index : Info

Im@ges :: 1/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@ges : Lien : Target : LienIn : Liste : #Liste : Tablo : Titre : Index : Info

Im@ges :: 1/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 minuscules" dans la balise img:

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

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. Tout comme pour les citations textuelles empruntées, l'origine des im@ges devrait être indiquée.
Pour téléverser et héberger des im@ges, comme celle-ci,  moyen moineault : http://www.flickr.com

É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 : Liens : 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>

<a href="adresse_URL_dela_p@ge" title="bulle d'information">
Texte lien ou Im@ge lien</a>

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

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

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

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

ou, par exemple,

<div align="center">
<a target="_blank" href="http://www.wikipedia.org" title="ouvre dans une nouvelle fenetre">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>


Exemple:

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

est faite de 20 liens internes et d'une cible.


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
Pour choisir un numéro HTML de couleur
Pas d'équivalent en FoXmatageWikiNi FoXmattinG, dans ce Wiki.

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 ;
la balise <table> y a 4 attributs :

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

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

crée :
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

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



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

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

crée :

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

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

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

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

on crée :

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)

1. align="center", or align="right" alignent dans la p@ge le tableau, aligné à gauche, par défaut.
background="@dresseURLdeLim@ge" n'est pas du XHTML valide.
2. bgcolor="#ff00CC" définit la couleur de fond du tableau, transparent par défaut.
3. border="0px" définit en px la bordure du tableau ; par défaut, 1px.
4. cellpadding="0px" définit en px la distance entre le contenu et la cellule ; par défaut, 1px.
5. cellspacing="0px" définit en px la distance entre les cellules ; par défaut, 1px.
cols="3" n'est pas du XHTML valide.
height="222px" n'est pas du XHTML valide.
6. width="699px" définit en px la largeur du tableau : avec un écran de 17", dans une p@ge WiKi pleine largeur, 699 px, c'est serré ; 688 px est plus passe partout, surtout avec Internet Explorer 6 ; 666 px, c'est encore mieux. On peut également définir la largeur en pourcentage : <table width="100%">.

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

En XHTML, les balises <tr> et <td> ont respectivement deux et trois attributs :

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

a. align="center", ou align="right" alignent le contenu de toutes les cellules de la ligne.

background="@dresseURLdeLim@ge" n'est pas du XHTML 1.0 transitionnel valide.

b. bgcolor="#ff00CC" définit la couleur de fond de la ligne.

3. <td> (la cellule)

a. align="center", ou align="right" alignent le contenu de la cellule.

background="@dresseURLdeLim@ge" n'est pas du XHTML 1.0 transitionnel valide.

b. bgcolor="#ff00CC" définit la couleur de fond de la cellule.

w. width="299px" définit la largeur de 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, car les attributs "background", "cols" et "height" ne sont pas du XhtmL.
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

Pour les TITRES, avec WikiNi, entre deux paires de guillemets doubles

<h1>Title #1</h1>

Title #1


<h2>Title #2</h2>

Title #2


<h3>Title #3</h3>

Title #3


Equivalent en FoXmatageWikiNi FoXmattinG :
======Title #1====== (6 "-")
=====Title #2===== (5 "-")
====Title #3==== (4 "-")

Title #1

Title #2

Title #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.

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

bambafox
BambaFox
version03
CC-GNU LGPL
est sous license
CC-GNU LGPL.


-- DjO 11fev2005, 06fev2006, 2007mai31, 2007jun26.


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