WikiDjeault

FoXspeaqsXhtml

HomE :: PlaN : FormaT : LastChanges : UserLogin :: Vous êtes 10.64.1.203
djo.ca
<< FoXparleXhtml IndexInitial LastChanges >>

@ide-Mémoire: XHTML Formatting Rules in this WiKi


source code of this wiki p@ge opens in new window XHTML in WikiNi Version française : voir FoXparleXhtml
@ide-Memoire of Valid XHTML 1.0 Codes in WikiNi WiKis
and their FoXmatageWikiNi FoXmattinG Equivalents:
Valid XHTML 1.0 Transitional

Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info
01. (top) :: 02. :: 03. :: 04.

With  WikiNi, to turn on the HTML codification,
and off the FoXmatageWikiNi FoXmattinG,
simply write two pairs of quotation marks; this is one quotation mark: "

Everything in between those two pairs
then responds to HTML FoXmattinG,
though no more to FoXmatageWikiNi FoXmattinG.


Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info
01. (top) :: 02. :: 03. :: 04.

2. A WikiNi WiKi is a fine pl@ce to tame and use HTML,
because a change of line, by clicking "Enter", when you're editing in HTML,
doesn't create one in the published WiKi p@ge, as it does
within many phpBB Forums and Blogs and also within FoXmatageWikiNi FoXmattinG:

therefore, each HTML tag may have its own line,
without creating empty lines, in the published p@ge.

The XHTML code <br /> creates a change of line:
so, when editing a WikiNi WiKi p@ge, whether you write
(with pairs of quotation marks, instead of just one ")

"This is the first line<br />this is the second line"
or or else
"
This is the first line<br />
this is the second line
"
"
This is the first line
<br />
this is the second line
"
in the published WiKi p@ge, you'll see:
This is the first line
this is the second line.


Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info
01. (top) :: 02. :: 03. :: 04.

3. So, to change line between two pairs of quotation marks,
you may use the <br /> tag;
<hr />, <div align="x">, <blockquote>, <table>, <h1> to <h7>
tags also create a change of line.

Notice that in HTML 4.0 transitional, except for the three codes
<br>, <hr> and <img src="URL_@ddress of Im@ge">,
all HTML codes must be "closed":

for example, the bold tag <b> is closed by the tag </b>

Also notice that in XHTML 1.0 transitional,

all XHTML Tags must be "closed", including

<br />, <hr />, <img src="URL_@ddress of Im@ge" alt="compulsory" />,

which are closed within their opening tag, with a space and a slash.

Further notice that in XHTML 1.0, within the img code, the "alt" attribute is compulsory.


Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info
01. (top) :: 02. :: 03. :: 04.

4. Also notice that when you use tags within tags,

you should close them in the reverse order;

for example, if you indent text, justify it, and color it blue, you write,
in WikiNi, between two pairs of quotation marks,

<blockquote>
<div align="justify">
<font color="#3333ff">
before you text; then, in their reverse order of entrance, you close the tags:
</font>
</div>
</blockquote>

Another example:
<b><i><u>bold, italic, underlined text</u></i></b> = bold, italic, underlined text

Finally, attributes are always defined between two quotation marks,
for ex : <div align="center"> </div>, or <font color="#0000ff" size="2"> </font>


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

a. To make text Bold

In WikiNi, between two pairs of quotation marks,

write <b>before your text and</b> after it.

FoXmatageWikiNi FoXmattinG Equivalent: **Bold** = Bold


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

b. To make text italic

In WikiNi, between two pairs of quotation marks,

write <i>before your text and</i> after it.

FoXmatageWikiNi FoXmattinG Equivalent: //Italic// = Italic


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

c. To make text underlined

In WikiNi, between two pairs of quotation marks,

write <u>before your text and</u> after it.

FoXmatageWikiNi FoXmattinG Equivalent: __Underlined__ = Underlined


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

d. To "scratch-erase" text

In WikiNi, between two pairs of quotation marks,

write <s>before your text and</s> after it.

FoXmatageWikiNi FoXmattinG Equivalent: @@strike@@ = strike


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

e. Font Colors :: Faces :: Sizes :: HighLight
No FoXmatageWikiNi FoXmattinG Equivalent, in this Wiki.

To color short text, writing
(in WikiNi, with pairs of quotation marks, instead of just one ")

"<font color="#009900">to your choice, before you green text and after it</font>"

gives: to your choice, before you green text and after it

For longer text, give a line to each tag and write, either or

"
<font color="#009900">
before you text,
which will respond to HTML,
and after it:
</font>
"
"<font color="#009900">"
before the text,
which here responds to
FoXmatageWikiNi FoXmattinG
,
and after:
"</font>"

To choose a color's number


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Font Colors :: Faces :: Sizes :: HighLight

In WikiNi, between two pairs of quotation marks,

these <font face> attributes create this:

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

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

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

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

Here's an example of a <font> tag with three different attributes:

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


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Font Colors :: Faces :: Sizes :: HighLight

In WikiNi, between two pairs of quotation marks,

<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


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Font Colors :: Faces :: Sizes :: HighLight

Here's a chromatic Rainbow of HTML codes
to Highlight (color) text: from A to O.
In WikiNi, between two pairs of quotation marks,

Highlight _A B C_ :: _D E F G_ :: _H I J K_ :: _L M N O_
A
<font style="background-color: #000000" color="#ffffff">
~White Text with Black Back</font> =
~White Text with Black Back

B
<font style="background-color: #cc99ff" color="#660099">
~Purple Text with Mauve Back</font> =
~Purple Text with Mauve Back

C
<font style="background-color: #660099" color="#ccccff">
~Mauve Text with Purple Back</font> =
~Mauve Text with Purple Back

Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Highlight _A B C_ :: _D E F G_ :: _H I J K_ :: _L M N O_
D
<font style="background-color: #99ffff" color="#0000ff">
~Blue Text with Sky Blue Back</font> =
~Blue Text with Sky Blue Back

E
<font style="background-color: #0000ff" color="#99ffff">
~Sky Blue Text with Blue Back</font> =
~Sky Blue Text with Blue Back

F
<font style="background-color: #33cc33" color="#003300">
~Green with Light Green Back</font> =
~Green with Light Green Back

G
<font style="background-color: #003300" color="#33cc33">
~Light Green with Green Back</font> =
~Light Green with Green Back

Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Highlight _A B C_ :: _D E F G_ :: _H I J K_ :: _L M N O_
H
<font style="background-color: #cccc33" color="#333300">
~Dark Text with Yellow Back</font> =
~Dark Text with Yellow Back

I
<font style="background-color: #333300" color="#cccc33">
~Yellow Text with Dark Back</font> =
~Yellow Text with Dark Back

J
<font style="background-color: #FF9900" color="#663300">
~Burnt Text and Orange Back</font> =
~Burnt Text and Orange Back

K
<font style="background-color: #663300" color="#ff9900">
~Orange Text and Burnt Back</font> =
~Orange Text and Burnt Back

Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Highlight _A B C_ :: _D E F G_ :: _H I J K_ :: _L M N O_
L
<font style="background-color: #ff99cc" color="#990000">
~Red Text with Pink Back</font> =
~Red Text with Pink Back

M
<font style="background-color: #990000" color="#ff99cc">
~Pink Text with Red Back</font> =
~Pink Text with Red Back

N
<font style="background-color: #c0c0c0" color="#000000">
~Black Text with Grey Back</font> =
~Black Text with Grey Back

O
<font style="background-color: #ffffff" color="#000000">
~Black Text with White Back</font> =
~Black Text with White Back


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

f. To justify usually long text
No FoXmatageWikiNi FoXmattinG Equivalent!

Write (in WikiNi, with pairs of quotation marks, instead of just one ")

"
<div align="justify">
before your text, which here will respond to HTML codes, and after it:
</div>
"

or else

"<div align="justify">"
before your text, which here will continue responding to FoXmatageWikiNi FoXmattinG, and after it:
"</div>"

Justified text typically refers to text that that is aligned to both the left and right margins.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

g. To center textual or graphic content
No FoXmatageWikiNi FoXmattinG Equivalent!

For short text, write (in WikiNi, with pairs of quotation marks, instead of just one ")

"<div align="center">before your text and after it:</div>"

for longer text,

"<div align="center">
before your text, which here will respond to HTML codes, and after it:
</div>"

or

"<div align="center">"
before your text, which here will continue responding
to FoXmatageWikiNi FoXmattinG, and after it:
"</div>"


Centered text


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Sign :: Title :: Info

h. To align on the right textual or graphic content
No FoXmatageWikiNi FoXmattinG Equivalent!

For likely short text, like the date, write
(in WikiNi, with pairs of quotation marks, instead of just one ")

"<div align="right">before your text and after it:</div>"

or, for unlikely long text, write

"
<div align="right">
before your text, which here will respond to HTML codes, and after it:
</div>
"

or else

"<div align="right">"
before your text, which here will continue responding
to FoXmatageWikiNi FoXmattinG, and after it:
"</div>"
Signatures may be aligned on the right.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

i. To indent usually long text

Write (in WikiNi, with pairs of quotation marks, instead of just one ")

"
<blockquote>
before your text; then after it, write
</blockquote>
"

or else, to also justify and color the textual content,

"
<blockquote><div align="justify"><font color="#0000ff">
before your text; then after it, in their reverse order of entrance, write the closing tags
</font></div></blockquote>
"

This paragraph is indented:
FoXmatageWikiNi FoXmattinG Equivalent is attained by simply inserting one, two, three, or even four empty spaces, at the beginning of a line or paragraph.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

j. To change line

The XHTML-proof self-closed code <br /> creates a change of line, whereas a simple change of line, by clicking "Enter", when you're editing, doesn't create one in the published Wiki p@ge, where the WikiNi FoXmattinG is off. Consequentely, in WikiNi, for a better visualisation of (long) p@ges, when you're modifying them, the <br /> tag doesn't have to touch the last word of line a and the first word of line b:
(in WikiNi, with pairs of quotation marks, instead of just one ")

"a) this is the first line<br />b) this is the second line"

could thus be replaced by or else, by
"
a) this is the first line<br />
b) this is the second line.
"
"
a) this is the first line
<br />
b) this is the second line.
"
for the same result in the published p@ge:
a) This is the first line
b) this is the second line.

FoXmatageWikiNi FoXmattinG Equivalents:
a) if you write ---, what follows will be in the next line. =
if you write
, what follows will be in the next line.
b)Just click "Enter" and change line.



Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

k. To create a line, or Horizontal Separator,
as inside and below this paragraph "k"

In WikiNi, between two pairs of quotation marks,

if you write up to<hr />then continue writing right after it.

you get:

if you write up to
then continue writing right after it.

For the same result, in WikiNi,

you may end your paragraph, change line, ... write
<hr />
change line again, then continue writing...

That helps to the visualisation of (long) p@ges when you're modifying them.

FoXmatageWikiNi FoXmattinG Equivalent:
if you write 4 dashes, "-", it creates a line.



Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

l. To insert an im@ge
1/3 :: 2/3 :: 3/3.
Explanations on URL @ddresses and Im@ges.


In WikiNi, between two pairs of quotation marks, write

<img src="the_URL_@ddress_of_im@ge" alt="compulsory" title="optional" />

In this self-closed "code tag", the alt attribute is compulsory.

To create a centered im@ge that is a link, writing

<div align="center">
<a href="http://www.wikini.net/" title="WikiNi">
<img src="URLaddressofImage" alt="compulsory" />
</a>
</div>
creates

WikiNi

Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Im@ge 1/3 :: 2/3 :: 3/3.

To impede the 2 px border

that appears by default around linked im@ges,

add border="0px" in the img tag:

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

creates

WikiNi

Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Im@ge 1/3 :: 2/3 :: 3/3.

If the im@ge isn't a link, but
you want to add an information bubble that appears when the im@ge is pointed,
add title="the title of the image in lower case" in the img tag:

<img src="URLaddressofImage" alt="bubble in lower case" border="0px" title="bubble in lower case" />

creates

bubble in lower case
Indeed, those XHTML recipes to create linked im@ges imply that the im@ge already is @vailable on the Web. Remember that hooking to a Web Sp@ce's im@ge(s) means using that Sp@ce's bandwidth: it thus appears ethical to request permission to the Sp@ce's owner(s), before hooking onto the im@ge, unleast it is for a short time. In any case, the origins of the hooked im@ge, should be indicated, just as with any other quote.
To upload and host im@ges, as this one,  moyen moineault: http://www.flickr.com

FoXmatageWikiNi FoXmattinG Equivalent:
write the @ddress between two pairs of parenthesis [ et ]



Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

m. To make a direct link

to another Web or WiKi p@ge,
in WikiNi, between two pairs of quotation marks, write

<a href="the_URL_@ddress_of_the_p@ge">Linked TEXT or Im@ge</a>

<a href="the_URL_@ddress_of_the_p@ge" title="infomative bubble">
Linked TEXT or Im@ge</a>

<a href="http://www.wikipedia.org" title="World's Biggest WiKi!">
Wikipedia</a> = Wikipedia

to an em@il @ddress, in WikiNi, between two pairs of quotation marks, write

<a href="mailto:fictive.address@sympatico.ca">Linked TEXT or Im@ge</a>

<a href="mailto:fictive.address@sympatico.ca?subject=FoXspeaqsXhtml" title="Send us an em@il">
Em@il Link</a>
=
Em@il Link

FoXmatageWikiNi FoXmattinG Equivalent:
a) NomWiKi or MotWiki
b)Automatic External Link: http://www.wikipedia.org
c) Forced External Link: [[http://www.wikipedia.org]] = http://www.wikipedia.org
[[http://www.wikipedia.org Wikipedia's WiKi]] = Wikipedia's WiKi
d) Forced Em@il Link: [[toto@example.org]] = toto@example.org
[[toto@example.org Toto's Em@il @ddress]] = Toto's Em@il @ddress



Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

n. To make a target="_blank" link to another WiKi or Web p@ge
No FoXmatageWikiNi FoXmattinG Equivalent!

A target="_blank" link opens up into a new window or tab.

In WikiNi, between two pairs of quotation marks, write

<a href="the_URL_@ddress_of_the_p@ge" target="_blank">Linked TEXT or Im@ge</a>

For example, if you write:

<div align="center">
<a target="_blank" href="http://www.wikipedia.org" title="opens in a new window">Wikipedia</a>
</div>

you get:

Wikipedia

It is user friendly to indicate when a link is a target="_blank" link.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

o. To make an internal link within the p@ge itself
No FoXmatageWikiNi FoXmattinG Equivalent!

In WikiNi, between two pairs of quotation marks,

a) create a target:

<a name="name_of_target">Nothing, Text, or Im@ge</a>


b) create a link to that target:

<a href="#name_of_target">The LINK may be a text or an Im@ge</a>


Example:

Each Link Bar on top of each XHTML code in this p@ge

is made of 20 Internal Links and one target.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

p. To create a bullet list

In WikiNi, between two pairs of quotation marks, if you write

<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
</ul>

you get:


FoXmatageWikiNi FoXmattinG Equivalent: see FoXmatageWikiNi FoXmattinG #Lists-Indent.
As for bullet lists, FoXmatageWikiNi FoXmattinG is simpler than HTML.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

q. To create a numbered list
In WikiNi, between two pairs of quotation marks, writing
<ol>
<li>Item # 1</li>
<li>Item # 2</li>
<li>Item # 3</li>
</ol>
creates
  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>
creates
  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>
creates
  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>
creates
  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>
creates
  1. Item # I
  2. Item # II
  3. Item # III
FoXmatageWikiNi FoXmattinG Equivalent: see FoXmatageWikiNi FoXmattinG #Lists-Indent


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

r. Table r1 :: r2 :: r3 :: r4 :: r5 :: r6 :: r7
To choose a color's xHTML code
No FoXmatageWikiNi FoXmattinG equivalent, in this Wiki.

Tables are the most complex XHTML FoXmattinG in BambaFox.

There are three main tags:
<table>, <tr> for the lines, and <td> for each cell.

Here's an XHTML code, in which to insert contents, here within a pale blue table;
its <table> tag has four attributes:

in WikiNi, between two pairs of quotation marks, writing

<table align="center" bgcolor="#99ffff" border="1px" width="555px">
<tr><td>
your contents, which here will answer to HTML.
</td></tr></table>

creates:
your contents, which here will answer to HTML.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

r. Table r1 :: r2 :: r3 :: r4 :: r5 :: r6 :: r7

Here's an even simpler and graphically safer code, by which the table, by default,



In WikiNi, between two pairs of quotation marks, writing

<table bgcolor="#99ffff" width="555px">
<tr><td>
your contents, which here will answer to HTML.
</td></tr></table>

creates:

your contents, which here will answer to HTML.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index Info

r. Table r1 :: r2 :: r3 :: r4 :: r5 :: r6 :: r7

The background color and the width of each cell may be defined in the <td> tag;

the contents of all cells in the row may be aligned, here to the right, through the <tr> tag.

in WikiNi, between two pairs of quotation marks, if you write

<table align="center" border="0px" bgcolor="#000000" width="540px">
<tr align="right">
<td bgcolor="#cccc33" width="190px">First Column /yellow background</td>
<td bgcolor="#ff9900" width="160px">Second Column /orange background</td>
<td bgcolor="#ff9999" width="190px">Third Column /pink background</td>
</tr>
</table>

you get:

First Column /yellow background Second Column /orange background Third Column /pink background


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

r. Table r1 :: r2 :: r3 :: r4 :: r5 :: r6 :: r7

The <TABLE> tag of the code may also include the two C attributes:
cellpadding="#px" cellspacing="#px" EXAMPLES.

With HTML 4, the <table> tag has ± nine basic attributes, whereas with XHTML, six are sufficient:

the "background", "cols" and "height" attributes aren't XHTML 1, but rather HTML 4.

1. TABLE ~ Aide Mémoire for the <table> tag: (a, bb, cc, w)

1. align="center", or align="right" align the table in the p@ge; by default, is aligned left.
background="the_URL_@ddress_of an_im@ge" is neat, but not Valid XHTML.
2. bgcolor="#ff00CC" defines the color of table's background; transparent by default.
3. border="2px" defines in px table's border; by default, in WikiNi, 0px.
4. cellpadding="0px" defines in px the distance between content and cell; by default, 1px.
5. cellspacing="0px" defines in px the distance between cells; by default, 1px.
cols="3" isn't a Valid XTHML modifier, though it is used in HTML 4.
height="222px" isn't a Valid XTHML modifier, though it may be used within HTML 4.
6. width="699px" defines in px table's width: with a 17" screen, in a full width WiKi p@ge, 699 px may be quite tight; 688 px is safer, especially for IE6, and 666 px is the safest.
Table width may also be defined in percentage: <table width="100%">, or <table width="88%">.

Suggestion: systematically write <table> attributes in alphabetical order.

Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

r. Table r1 :: r2 :: r3 :: r4 :: r5 :: r6 :: r7

In XHTML, the <tr> and <td> tags respectively have 2 and 3 modifiers:

2. <tr> (the row)

a. align="center", or align="right" align the content of all cells in the row.

background="the_URL_@ddress_of an_im@ge" isn't valid XHTML 1.0 transitional.

b. bgcolor="#ff00CC" defines the color of table's background.

3. <td> (the cell)

a. align="center", or align="right" align the content of that cell.

background="the_URL_@ddress_of an_im@ge" isn't valid XHTML 1.0 transitional.

b. bgcolor="#ff00CC" defines the color of table's background.

w. width="299px" defines the cell's width.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

r. Table r1 :: r2 :: r3 :: r4 :: r5 :: r6 :: r7
DjO created this gr@ph for HTML 4.0 transitional, with MOT 2.3 and Paint.
 HTML tables


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

r. Table r1 :: r2 :: r3 :: r4 :: r5 :: r6 :: r7
With MOT 2.3 and Paint, DjO created this other gr@ph, specifically for XHTML 1.0,
since the "background", "cols" and "height" attributes aren't valid XHTML transitional 1.0.
xhtml tables in wikini
Overall, the result is simpler and thus clearer than with the previous gr@ph.

-- DjO 04fev2006.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title Sign :: Index :: Info

s. To create TITLES + WELCOME SIGN

For TITLES, in WikiNi, between two pairs of quotation marks,

<h1>Title #1</h1>

Title #1


<h2>Title #2</h2>

Title #2


<h3>Title #3</h3>

Title #3


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

Title #1

Title #2

Title #3



Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title Sign :: Index :: Info

WELCOME SIGN
in a table, with 3 px wide border, purplish background, and mauve fonts.

In WikiNi, between two pairs of quotation marks, if you write:

<table align="center" border="3px" bgcolor="#993399" width="199px">
<tr>
<td>
<div align="center">
<h1><font color="#ffccff" face="comic sans ms">WELCOME!</font></h1>
</div>
</td>
</tr>
</table>
you get:

WELCOME!



Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

Above Contents in Alphabetical Order

  1. Align Center, Justify, Right.
  2. Bold.
  3. Erase.
  4. Font Colors, Faces, Sizes, Highlight.
  5. Im@ges.
  6. Indent.
  7. Italic.
  8. Lines.
  9. Line change.
  10. Links Direct.
  11. Links Internal.
  12. Links Target.
  13. Lists /Bullets.
  14. Lists /Numbers.
  15. Tables.
  16. Titles.
  17. Underline.
  18. Welcome Sign.


Top :: Bold-Italic :: UnderL-Erase :: Font :: Justify :: Center :: Right :: Indent :: LineCh
Line :: Image :: Link :: Target :: InLink :: List :: #List :: Table :: Title :: Index :: Info

bambafox
BambaFox
version03
CC-GNU LGPL
is licensed under
the CC-GNU LGPL.


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


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