|
! Table of Contents: #[top] # [#Paragraphs "More Text Stuff"] ## [#Paragraphs "Paragraphs"] ## [#Indent "Indenting"] ## [#Pre "Preformatted"] ## [#style "Style"] # [#Images "Images"] # [#Tables "Tables"] # [#links "More Hyperlinks"] ## [#Anchor "Anchors"] ## [#Interwiki "InterWiki Links"] # [#Lists "Lists"] # [#Comments "Comments"] # [#refs "Additional References"] ---- !! Paragraphs #[Paragraphs] * Lists automatically make up a new paragraph. * Every block of text (without empty lines) will form a paragraph. * Right align text by preceding the line with two greater-than signs (>>). * Center text by preceding the line with two back-wacks (\\). >>This is right aligned text.%%% Another right line. \\ Centered text.%%%Another, just for good measure. !! Indenting Text #[Indent] Use spaces or tabs at the beginning of a line: Three or more spaces at the beginning of a line will indent it. One tab has the width of eight spaces, but it is difficult to enter a tab %%% using most browsers (µµOption-Tab works on my Mac & Safariµµ) Change indentation level by using more or less spaces at the line beginning, this is hopefully an intuitive method of indentation. Some older browsers may not support the style sheets used by this indentation scheme. !! %%% Pre-Formatted Text #[Pre] <pre> _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ / \ / If you wish text to appear in a mono-spaced font with \ \ no browser formatting, then start that paragraph using / \ the starting code "<pre>" at the line start. End that / \ paragraph using the ending code "</pre>" at the front / \ of the following line. This is similar to the HTML / \ tag of the same name. Please note that "<pre>" / \ and "</pre>" must be written in all lowercase. / \ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _/ </pre> !! Text Style #[style] * Super^^script^^ text by surrounding it with double carrets (^^) * The text styles can be combined. For example: %%% ''__Bold and Italic__'', ##__==Big,Bold,Monospaced==__##, ^^µµ''Small, superscript, italics''µµ^^ %%%%%% ---- !! Images #[Images] Images can be inlined [http://www.kitzkikz.com/images/kicker_cc99ff.png?x=40&y=30] into a page using square brackets around the absolute web address of the image file, like ![http://www/image.png]. To have text flow around %%% [http://www.kitzkikz.com/images/kicker_cc99ff.png?x=40&y=30 ] to the right of an image, %%% put a space between the image %%% url and the closing bracket: %%% ![http://example.com/image.png ] >>To have text flow around %%% [ http://www.kitzkikz.com/images/kicker_cc99ff.png?x=40&y=30] to the left of an image, %%% put a space between the image %%% url and the opening bracket: %%% ![ http://example.com/image.png] To center an image put a space both before and after the image url: ![ http://example.com/image.png ]. [ http://www.kitzkikz.com/images/kicker_cc99ff.png?x=40&y=30 ] This may not work in some browsers. Specify an image's size by appending it to the url: ![http://www.example.com/image.png?x=200&y=100] %%% ![http://www.example.com/image.png?width=200&height=100] |{align=center border=0 } [http://www.kitzkikz.com/images/kicker_cc99ff.png?x=40&y=30] | [http://www.kitzkikz.com/images/kicker_cc99ff.png?x=80&y=60] | [http://www.kitzkikz.com/images/kicker_cc99ff.png?x=120&y=90] | |{align=center}40x30 | 80x60 | 120x90 | Over the years, browsers have gotten better at placing images within and around text. However, the best solutions still use tables (see below). ---- !! Tables #[Tables] ! Simple Tables Tables are created using the vertical bar or pipe character ( | ). Start a table by enclosing the cells with the pipe character. The pipe should be the first and last characters on a line. Additional rows are added as additional lines, each starting and ending with a pipe. Example - ;:==| A single line | table with | three cells |== Result - | A single line | table with | three cells | Example - ;:==| A table | with three | columns | %%% | and three | rows, but| missing | %%% |one |cell |== Result - | A table | with three | columns | | and three | rows, but| missing | |one |cell | ! Hyperlinks and Images in Tables You can include hyperlinks and images in tables using the normal WikiMarkup rules. However, using the square bracket notation (i.e. ==![Title | http://example.com]==) can cause problems since the pipe character is also used as the table delimiter. Instead, use the alternate quoted form of hyperlink (==!["Title" http://example.com]==). !Complex Tables People usually want more robust tables than are described above. The following scheme allows almost any kind of table possible with HTML, but it is more difficult to use. The addition of curly braces { } just inside the pipe characters allows for attributes to be given to the various parts of the table: ;:==|{table attr}{row 1 attr}{cell 1 attr} Cell 1 Data |{cell 2 attr} Cell 2 Data | %%%|{row 2 attr}{cell 3 attr} Cell 3 Data |{cell 4 attr} Cell 4 Data |==%%%etc. The curly braces have to appear immediately after the pipe character. They may contain any attribute-value pairs valid for HTML tables. Familiarity with HTML, CSS, etc. is recommended before using this scheme. Example - ;:==|{border=0 }{bgcolor=gray style=color:white} _µµµµ_One Mississippi_µµµµ_ | #µµµµ#Two Mississippi#µµµµ# |%%%|{align=right }{bgcolor=blue} Three |{align=center } 'µµµµ'Four'µµµµ' |== Result - |{border=0 }{bgcolor=gray style=color:white} __One Mississippi__ | ##Two Mississippi## | |{align=right }{bgcolor=blue} Three |{align=center } ''Four'' | Example - ;:==|{border=1 cellspacing=0 cellpadding=4 align=center style=border-color:orange }{bgcolor=black style=color:white align=center} _µµµµ_Name_µµµµ_ | _µµµµ_Score_µµµµ_ |%%%| Big Bird |{align=right} 35 |%%%| Burt |{align=right} 17 |%%%| Rubber Ducky |{align=right} 73 |== Result - |{border=1 cellspacing=0 cellpadding=4 align=center style=border-color:orange }{bgcolor=black style=color:white align=center} __Name__ | __Score__ | | Big Bird |{align=right} 325 | | Burt |{align=right} 17 | | Rubber Ducky |{align=right} 7043 | ---- !! More Hyperlinks #[links] ! Anchors #[Anchor] Instead of loading a different page, Anchors are hyperlinks that reference places on the same page. Clicking an Anchor-Link will scroll the page to the matching Anchor-Point. Anchors are useful on large pages to move quickly around the page. They are commonly seen in a table of contents. The contents table at the [#top "top"] of this page uses anchor-links and every heading on this page has an anchor-point. To create an Anchor-Link (the visible link that is clicked on): ![#AnchorName "Optional Title"] To create an Anchor-Point (the invisible mark where the above link will scroll to): #![AnchorName] To send the user to an Anchor-Point on a different page: ![OtherPage#AnchorName "Optional Title"] ! !InterWiki:Links #[Interwiki] There are many other [WikiWikiWeb]s out there and a standard has been developed to create hyperlinks between them. See WikiWikiWeb for a list of supported external wiki names. ;:![ExternalWikiName:PageName] Some examples: * ErfurtWiki:ErfurtWiki * Wiki:WikiClones * Wiki:InterWiki ---- !! Lists #[Lists] * An asterisk (*) at the beginning of a line creates a circle bullet. # A hash mark (#) creates a numbered line. - A dash or minus character (-) creates a square bullet. Definition lists can be created using :: (colon-colon) or ;: (semicolon-colon) at the line start or in a sublist: <pre>;definition: explanation :anotherdef: another description **;Indented Def: Indented Description </pre> :definition: explanation :anotherdef: another description **;Indented Def: Indented Description ---- !! Comments #[Comments] Comments can be inserted using a <!-- at a line start, but __don't__ add the --> as you would in HTML. Comments can be used to hide information inside a page without it being shown when anyone views it. However, if someone edits the page or views the HTML source, the comment can be seen. <!-- This is a comment to prove that it works. ---- ! See also: #[refs] -WikiMarkup - More basic rules. -GoodStyle - Guidelines for writing Wiki pages. -SandBox - A place to practice using these markups. -Source of Any Page - Click the ''!EditThisPage'' link near the bottom of any page. |
|