http:images/logomed.png

StikiWeb Wiki - Samples

Welcome: Visitor (Login)      Page History: Samples


Main



 

Samples Page

The following table shows markup language in the left column and the resulting display in the right column. It is presented as an aid for people (such as myself) who learn more easily from examples than from explanation.

It also represents a determined effort to change the tool's odd, idiosynchratic, and occasionally buggy behavior to official 'features' through exhaustive documentation.

Text Formatting

Wiki pages are produced on the fly from a simple markup language that is stored on the web server. Visitors to the Wiki can edit the markup language for the pages and, thus,change the contents of the page. The markup language is mostly just simple text with a few special sequences embedded in it to tell the Wiki translator how to display the test. These special sequences, which we will be calling markup tags, are chosen to be odd enough that users will not usually type them by accident, hopefully without being so weird that no user can remember them.

Our first few examples have to do with entering text and setting simple attributes like boldface or italics.

Paragraphs

To enter text into a Wiki you just type
what you want to say.  
You can make your lines as long or as
short
as you want.  The Wiki translator will
re-wrap the lines for you.

Just leave a blank line between your
paragraphs and be sure not to indent
the first line.  We'll see why 
later, but for now just remember that
indenting the first line of your 
paragraph will mess up the formatting.

To enter text into a Wiki you just type what you want to say. You can make your lines as long or as short as you want. The Wiki translator will re-wrap the lines for you.

Just leave a blank line between your paragraphs and be sure not to indent the first line. We'll see why later, but for now just remember that indenting the first line of your paragraph will mess up the formatting.

Headings

!!!Really Big Headings
are created by putting three exclamation
marks ("!!!") at the beginning of a line.
!!Big Headings
have two exclamation marks.
!Ordinary Headings
have only one.

__Bold Face__

makes a nice heading, too.

Notice that headings get their own paragraph and don't need a blank line before or after. (But bold face, used as a header, does need the blank lines.)

Really Big Headings

are created by putting three exclamation marks ("!!!") at the beginning of a line.

Big Headings

have two exclamation marks.

Ordinary Headings

have only one.

Bold Face

makes a nice heading, too.

Boldface

Double understrikes toggles __bold__ text

Double understrikes toggles bold text

Italics

Double tics toggles ''italic'' text

Double tics toggles italic text

Combined Bold and Italics

__Bold ''Bold-Italic __ Italic ''Normal

Bold Bold-Italic Italic Normal

Bold and Italic Toggles are Per Line

This paragraph has sections
__that are bold
and other sections
''that are italicized.
Please ''notice'' that 
__bold__ and ''italics
toggles start over for 
''each'' line of the 
markup text.

This paragraph has sections that are bold and other sections that are italicized. Please notice that bold and italics toggles start over for each line of the markup text.

Sometimes you don't want the wiki tranlator to rewrap, reformat, and generally monkey with your text. (Such as when you are entering code examples.) Any line in the markup source that starts with a blank is treated as "preformatted" text. The Wiki translator throws away that first blank but doesn't do any other formatting to the line.

This is the reason that you don't indent the first line of your paragraphs. If you do the wiki will treat the first line as preformatted text (set in a monospace font and not formatted) and will treat the rest of the lines as a separate paragraph.

Much of the example text in the left-side boxes of this page is lines that start with blanks.

Preformatted Text

 Lines that start with a __blank__ ''are not'' 
 formatted.
Lines starting in __column 1__ ''are'' 
formatted.
Lines that start with a __blank__ ''are not'' 
formatted.

Lines starting in column 1 are formatted.

Spacing

These parens contain...

a single non-breaking space (\b)
ten non-breaking spaces (\s10)
two non-breaking spaces and a zero (\s1\b0)

These parens contain...

a single non-breaking space ( ) ten non-breaking spaces (          ) two non-breaking spaces and a zero (  0)

Markup Comments

Any line that starts with ~~> is a comment 
and is ignored.
~~>I AM A COMMENT
They don't even break paragraphs.

Any line that starts with ~~> is a comment and is ignored. They don't even break paragraphs.

Tables

The markup for putting tables into StikiWeb Wiki pages is a fairly thin gloss over the HTML markup for tables. There are markup elements that corespond to each of the HTML tags for tables. [Closing tags such as </td> of </tr> are provided automatically and no markup is needed or available for them.] The markup elements have locations where you can put attributes for the table tags -- things such as background color or cell padding -- which are passed through to the generated HTML with essentially no changes. [They are filtered to remove 'dangerous' characters such as "<" or ">".]

The following examples should give you a feeling for how they work and *****more*********

Autotables

|!|Foo|!|Bar|!|Moo
|||one|||two|||three

Foo

Bar

Moo

one

two

three

Note: an autotable cannot be nested inside another table. I had to cheat for this example. The example above shows the effect of the markup to the left but was generated using the markup for an ordinary table.

Line Break

Force a \n line break

force a
line break

Table

{| width='100%' border='1'
|-
|!| Heading
|!| 
Row
|-
||| Data 
||| 
Row
|}

Heading

Row

Data

Row

Table with Background Colors

{| width='100%'
|- bgcolor='lightgreen'
green
|- bgcolor='white'
white
|- bgcolor='lightgray'
gray
|}

green

white

gray

Another Table w/ Colors

{| align="center" bgcolor='gray'
|-- bgcolor='lightblue'
||colspan='3' |''tic tac toe''
|----------------- 
|! bgcolor="red"|X
||bgcolor='white' align=center |O
||bgcolor='white' align=center|\b
|-----------------
||bgcolor='white' align=center|\b
|! bgcolor="red"|X
||bgcolor='white' align=center|O
|-----------------
||bgcolor='white' align=center|O
||bgcolor='white' align=center|X
|! bgcolor="red"| X
|}

tic tac toe

X

O

 

 

X

O

O

X

X

Links to other Pages

The simplest links are page names in brackets: 
[Main] 

Multi-word page names will be concatinated with 
initial letters capitalized.  Thus [user profiles] 
is a link to the page UserProfiles and [main] is 
the same as [Main].

The name of a child page is separated from its 
parent by a dot:  [user profiles . guest] is a 
link to UserProfiles.Guest.

The name of a page attachment is separated from 
the page to which it is attached by a slash (/):
[Main/logo1.png] is a link to the image
logo1.png that is attached to the Main page.

The simplest links are page names in brackets: Main

Multi-word page names will be concatinated with initial letters capitalized. Thus user profiles is a link to the page UserProfiles and main is the same as Main.

The name of a child page is separated from its parent by a dot: user profiles . guest is a link to UserProfiles.Guest.

The name of a page attachment is separated from the page to which it is attached by a slash (/): Main/logo1.png is a link to the image logo1.png that is attached to the Main page.

Links with Alternate Text

Alternate text for a link can preceeds the link
target, separated with a vertical bar character
(|).  Examples: [User Profile Home| user profiles]
and [Goto Main now | Main]

Alternate text for a link can preceeds the link target, separated with a vertical bar character (|). Examples: User Profile Home and Goto Main now

External Links

Links to items outside the StikiWeb Wiki will 
be decorated with a trailing image that indicates
an external link. For instance, a google link is
[http://www:google.com] or 
[Websearch| http://www.google.com] and a mailto
link appears as [mailto:me@mydomain.com] or
[email me | mailto:me@mydomain.com ]

Links to items outside the StikiWeb Wiki will be decorated with a trailing image that indicates an external link. For instance, a google link is http://www:google.com  or Websearch  and a mailto link appears as mailto:me@mydomain.com  or email me 

Links to missing pages

Links to pages that do not exist but can be created
(the user has sufficient permission) are decorated
with a trailing image.  [NullPageOne]

Links to pages that do not exist but can be created (the user has sufficient permission) are decorated with a trailing image. NullPageOne 

(Note: Pages with names starting with "NullPage" are special cases used for link examples. They cannot be created or viewed.)

Links to inaccessible pages

Links to page that do not exist and cannot be
created (the user has insufficient permission) are
decorated with a trailing image. [NullPageTwo]

The same image is used to indicate a page that 
does exist but the user has insufficient permission
to view.  Unless you are logged in as an 
administrator you should be unable to read the
Admin.Users page: [Admin.Users]

Links to page that do not exist and cannot be created (the user has insufficient permission) are decorated with a trailing image. NullPageTwo

The same image is used to indicate a page that does exist but the user has insufficient permission to view. Unless you are logged in as an administrator you should be unable to read the Admin.Users page: Admin.Users

Tentative Links

If the page or attachment name in a link is 
preceeded by a question mark the link will be
''tentative''.  Tentative links dissappear if
the user cannot accecss the page or the 
attachment (no permission, etc.)\n
Main = [?Main]\n
NullPageTwo = [?NullPageTwo]\n
AdminUsers = [?Admin.Users ]

If the page or attachment name in a link is preceeded by a question mark the link will be tentative. Tentative links dissappear if the user cannot accecss the page or the attachment (no permission, etc.)
Main = Main
NullPageTwo =
AdminUsers =

Links that force line breaks

If the page or attachment name is followed
by backslash-n "\\n" then the link will be
followed by a forced line break.  This is
used to list links in a column down the 
page (without leaving empty lines for 
suppressed tentative links).  If alternate
text is present the \\n should follow the
alternate text, not the link target name.
{| border='1'
|!|Link to|!|w/o \\n |!|w/ \\n
|--
||valign='top'|
Main \n NullPageTwo \n AdminUsers \n Sandbox
||valign='top'|
[?Main] \n
[?NullPageTwo] \n
[?Admin.Users] \n
[The Sandbox | ?Sandbox] \n
||valign='top'|
[?Main\n]
[?NullPageTwo\n]
[?Admin.Users\n]
[The Sandbox\n | ?Sandbox]
|}

If the page or attachment name is followed by backslash-n "\n" then the link will be followed by a forced line break. This is used to list links in a column down the page (without leaving empty lines for suppressed tentative links). If alternate text is present the \n should follow the alternate text, not the link target name.

Link to

w/o \n

w/ \n

Main
NullPageTwo
AdminUsers
Sandbox

Main


The Sandbox

Main
The Sandbox

Inline Links

If the link name is preceeded by an at sign
("@") then the StikiWeb Wiki processor will 
try to display the target ''inline'' in the
page.  Other pages in the Wiki, page
attachments in some formats, and external
pages recognized as images can be inlined.

Examples:

A StikiWeb Wiki Page (UserProfiles.Guest)\n
{| bgcolor='lightgray'
[@UserProfiles.Guest]
|}

An Attachment (Main/logo1.png)\n
[@Main/logo1.png]\n

An image on this server (images/logomed.png)\n
[@http:images/logomed.png]\n

A remote image 
(http://www.google.com/images/logo.gif)\n
[@http://www.google.com/images/logo.gif]

A page you don't have permission to view...
(NullPageTwo)\n
''Note that inlining is ignored for pages 
''that are not accessible

[@NullPageTwo]

Same link only tenative --> ([?@NullPageTwo])

Note: If you are using an image that you got from another site it is usually better to attach a copy of the image to your page and reference that copy rather than inlining the URL of the original image. When you inline an image from another site the browser will go to that site for the image every time your page is displayed. This uses up the other site's bandwidth and is rather like stealing server capacity.

Putting links to someone else's image in your page is called hot-linking. The "Google" image in my example is a hot link. (Which I hope they will forgive because of the free advertizing it represents.)

If the link name is preceeded by an at sign ("@") then the StikiWeb Wiki processor will try to display the target inline in the page. Other pages in the Wiki, page attachments in some formats, and external pages recognized as images can be inlined.

Examples:

A StikiWeb Wiki Page (UserProfiles.Guest)

A "Guest" is a user who had logged in and, hopefully, provided a name -- but has not logged in as a registered user.

This is different than a "Visitor" who has not logged in at all.

In many cases (depending on how the site is set up) Guests are allowed to contribute to the pages, as opposed to visitors who frequently are not allowed to contribute.

You are currently logged in as Visitor.

An Attachment (Main/logo1.png)
Main/logo1.png

An image on this server (images/logomed.png)
http:images/logomed.png

A remote image (http://www.google.com/images/logo.gif)
http://www.google.com/images/logo.gif

A page you don't have permission to view... (NullPageTwo)
Note that inlining is ignored for pages that are not accessible.

NullPageTwo

Same link only tenative --> ()

Wrapping text around images

[@<_/illuminated-s.png]ometimes you want to wrap 
text around an image to the left or right side of
the layout area.  This is done by putting a less-
than sign (<) before a link to an inline image 
to place the image to the left of the text, 
[*http:images/logomed.png|>Help] or by
putting a greater-than sign (>) to place the image
on the right.  This also works with Links with 
Clickable Images (see below) but you should note
that the "<" or ">" goes in front of the link
destination and not in front of the image source.

/illuminated-s.pngometimes you want to wrap text around an image to the left or right side of the layout area. This is done by putting a less- than sign (<) before a link to an inline image to place the image to the left of the text, or by putting a greater-than sign (>) to place the image on the right. This also works with Links with Clickable Images (see below) but you should note that the "<" or ">" goes in front of the link destination and not in front of the image source.

Relative Links

Links that are preceeded by an underbar character 
("_") are ''relative'' to the current page.  Thus,
because the current page is now "Samples" the link
[_Traffic Light] refers to the page named 
Samples.TrafficLight.

Links that are preceeded by an underbar character ("_") are relative to the current page. Thus, because the current page is now "Samples" the link Traffic Light refers to the page named Samples.TrafficLight.

Note that the phrase "current page" in the preceeding paragraph refers to the page containing the link. If an inlined page (one included in another page through an inline link) contains relative links they will be relative to that page and not to the top-level page.

Link that opens in a new Window

A link that is preceeded by a caret ("^")
will open in a new window: 
[^http://www.google.com] or 
[ "/." | ^http://www.slashdot.com]

A link that is preceeded by a caret ("^") will open in a new window: http://www.google.com  or "/." 

Links with clickable images

When a link's alternate text is preceeded by an asterisk ("*") the link's alternate text is used as an image location -- either external image, an image on the same server or an image attached to a Wiki page.

Clicking either of these images returns to 
the main page:

[*http:images/logomed.png | Main]

[*Main/logo1.png | Main]

Clicking either of these images returns to the main page:

External image as a button

This link to a fashionable (if rather odd) online retailer

[*http://www.thinkgeek.com/images/logos/w00t.gif | ^http://www.thinkgeek.com]

is rendered as  

Have I mentioned that you can't break lines inside the brackets that surround a link? Well you can't. Not even if it makes your markup example too big to fit in a single column.

Return to Main page.

[ Guest (Siamak) ]

test


Attachments:
   illuminateds.png (29709 bytes)