This page serves as a comprehensive guide for wiki editors to understand and effectively use various editing syntax and CSS styling within the Starship Simulator wiki. This knowledge is crucial for creating well-formatted, visually appealing, and dynamic pages.
Introduction
This wiki uses MediaWiki's own simplified markup, but also incorporates standard HTML tags and inline CSS for more advanced formatting and layout control. Additionally, MediaWiki provides its own unique tags and parser functions that are essential for template creation and specialized content display.
Understanding these tools will allow you to:
- Format text and elements precisely.
- Create custom layouts and boxes.
- Develop robust and flexible templates.
- Display code examples without unintended rendering.
This guide is divided into the following sections:
- Basic Wiki Markup: Essential, simple formatting using MediaWiki's native syntax.
- Editing Syntax: Covers both standard HTML elements and MediaWiki-specific tags/functions for content structure and processing.
- Styling with CSS: Explains how to apply visual properties to elements using CSS.
- Basic Wiki Tables A quick guide to the basics of ctreating a wiki table
Basic Wiki Markup
This section covers the most common and fundamental formatting options available directly through MediaWiki's native syntax, without needing HTML tags or complex functions.
This wiki uses MediaWiki's own simplified markup, but also incorporates standard HTML tags and inline CSS for more advanced formatting and layout control. Additionally, MediaWiki provides its own unique tags and parser functions that are essential for template creation and specialized content display.
Understanding these tools will allow you to:
- Format text and elements precisely.
- Create custom layouts and boxes.
- Develop robust and flexible templates.
- Display code examples without unintended rendering.
Purpose: To create hierarchical headings on a page, automatically generating a Table of Contents (TOC) for easier navigation.
Syntax: = signs on each side of the heading text. The number of = signs determines the heading level.
|
| Header Type |
Syntax |
Usage |
HTML Tag Alt
|
| Title |
=TEXT= |
To add text as a main title (rarely used, as the page name is usually the title). |
<h1>
|
| Main Header |
==TEXT== |
To add a main header section. |
<h2>
|
| Sub Header |
===TEXT=== |
To add a sub-header to the section above. |
<h3>
|
| Sub Header 2 |
====TEXT==== |
To add a further sub-header to the section above. |
<h4>
|
| Sub Header 3 |
=====TEXT===== |
To add a deeper sub-header to the section above. |
<h5>
|
Bold and Italic Text
Purpose: To emphasize text by making it bold, italic, or both. This is the most common way to format text on a wiki.
Syntax: ' sign on each side of the text. The number of ' signs determines the text style.
|
| Code |
Result |
HTML Tag Alt
|
This is '''bold'''.
|
This is bold. |
<b>
|
This is ''italic''.
|
This is italic. |
<i>
|
This is '''''bold and italic'''''.
|
This is bold and italic. |
<b><i>
|
Lists
Purpose: To organize information into readable lists. MediaWiki provides simple syntax for bulleted and numbered lists.
Syntax: * & # signs on each side of the text. The number of * & # signs determines the list level.
|
| Code |
Result |
HTML Tag Alt
|
* First point
** Sub-point
* Second point
|
|
See Section #Common Text & Formatting Tags
|
# First step
## Sub-step
# Second step
|
- First step
- Sub-step
- Second step
|
| These can be combined but be careful with the formating. for example. (some data made up)
|
'''List of Ship'''
* Megelan CLass
**# UNSF Megelan
**# UNSF Megelan (refit)
** UNSF Seeker (''Megelan Sister Ship'')
# Pathfinder Class
|
List of Ship
- Megelan CLass
- UNSF Megelan
- UNSF Megelan (refit)
- UNSF Seeker (Megelan Sister Ship)
- Pathfinder Class
|
Horizontal Rule
Purpose: To create a horizontal line that visually separates sections of content.
Syntax: Four hyphens on a line by themselves (----).
|
| Code |
Result |
HTML Tag Alt
|
Content Above
----
Content Below
|
Content Above
Content Below
|
<hr>
|
Editing Syntax
This section covers the core syntax used for structuring content on this wiki, including common HTML tags and MediaWiki's specialized tags and parser functions.
<code> - Code Snippet
Purpose: Used to display short fragments of computer code or literal input/output, typically rendered in a monospaced font. It helps to differentiate code from regular text.
Syntax: <code>Value</code>
Examples:
| Code |
Result
|
| Press <code>F</code> to interact!
|
Press F to interact!
|
| To teleport ship type <code>/shiptp</code> into the chat box in game
|
To teleport ship type /shiptp into the chat box in game
|
<div> - Division
Purpose: A generic container tag used to group block-level content. It does not have any inherent visual formatting beyond creating a new line, but it is extremely useful for applying CSS styles to a block of content or for creating complex layouts).
Syntax: <div>Content</div>
Example:
Code
<div style=" padding: 10px; border-radius: 5px;">This content is within a custom div box.</div>
Result
This content is within a custom div box.
<span> - Span
Purpose: A generic inline container tag used to group small fragments of text or other inline elements. Like `<div>`, it has no inherent visual formatting but is useful for applying CSS styles to a specific piece of text *without* starting a new line.
Syntax: <span>Text</span>
Example:
| Code |
Result
|
| This is <span style="color: red; font-weight: bold;">urgent</span>!
|
This is urgent!
|
| When the valve is open you will see a <span style="color: green; font-style: italic;">Green</span> light on the display.
|
When the valve is open you will see a Green light on the display.
|
<nowiki> - No Wiki Markup
Purpose: Prevents MediaWiki from parsing any wiki markup (like `links`, `Template:Templates`, `bold`) within its tags. The content is displayed exactly as typed. Essential for showing code examples of wiki markup.
Syntax: <nowiki>Content with {{markup}}</nowiki>
Example:
| Code |
Result
|
| Use <nowiki>[[Magellan Class]] to link to the ship.</nowiki>
|
Use [[Magellan Class]] to link to the ship.
|
| <nowiki>This is a <span style="color: red; font-weight: bold;">example</span>of a '''tag'' being ''ignored!''</nowiki>
|
This is a <span style="color: red; font-weight: bold;">example</span>of a '''tag'' being ''ignored!''
|
<includeonly> & <noinclude> - Transclusion
Purpose: Sets the condition on a template page that will either be displayed or not when viewing the template when transclusion to a page itself directly using the {{{template:page}}} function.
<includeonly> Only Include
Purpose:
Content wrapped in <includeonly> tags on a template page will only be processed and displayed when that template is transcluded (used) on another page. It will not be visible when viewing the template page itself directly.
Syntax: <includeonly>Content for transclusion only</includeonly>
<noinclude> No Include
Purpose:
Content wrapped in <noinclude> tags on a template page will only be processed and displayed when viewing the template page itself directly. It will not be included or displayed when the template is transcluded onto another page.
Syntax: <noinclude>Documentation and categories for the template.</noinclude>
Common Text & Formatting Tags
These HTML tags are used for basic text formatting and structural elements. While MediaWiki has its own simplified markup for bold, italic, and horizontal rules, these HTML tags offer alternatives and are useful when you need to embed styling directly within more complex HTML structures.
| Tag |
Purpose |
Syntax |
Example Code |
Result
|
| <b> / <strong>
|
Bolds text, or indicates strong importance.
|
<b>Bold Text</b> or <strong>Strong Text</strong>
|
The reactor is <b>ONLINE</b>.
|
The reactor is ONLINE.
|
| <i> / <em>
|
Italicizes text, or indicates emphasis.
|
<i>Text</i> or <em>Emphasized Text</em>
|
This is an <i>important</i> detail.
|
This is an important detail.
|
| <u>
|
Underlines text. (Note: Underlining is often discouraged for web text as it can be confused with hyperlinks).
|
<u>Text</u>
|
<u>Warning: Unstable Plasma!</u>
|
Warning: Unstable Plasma!
|
| <br>
|
Creates a single line break.
|
<br> or <br />
|
Section One<br />Section Two
|
Section One
Section Two
|
| <hr>
|
Creates a thematic break or horizontal line.
|
<hr> or <hr />
|
Section One<hr />Section Two
|
Section One
Section Two
|
| <sup>
|
Displays text slightly above the normal line (superscript).
|
Text<sup>Superscript</sup>
|
Mass: 1.04 x Sol<sup>2</sup>
|
Mass: 1.04 x Sol2
|
| <sub>
|
Displays text slightly below the normal line (subscript).
|
Text<sub>Subscript</sub>
|
Coolant: H<sub>2</sub>O
|
Coolant: H2O
|
| <ul>
|
Defines an unordered (bulleted) list.
|
Used for grouping related items where order doesn't matter.
|
<ul><li>Item 1</li><li>Item 2</li></ul>
|
|
| <ol>
|
Defines an ordered (numbered) list.
|
Used for grouping related items where the order or sequence is important.
|
<ol><li>Step 1</li><li>Step 2</li></ol>
|
- Step 1
- Step 2
|
| <<li>
|
Defines an item within a list.
|
Must be used inside an <ul> or <ol> tag.
|
<li>List item content</li>
|
|
Styling with CSS
CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements, such as colors, fonts, spacing, and layout. In MediaWiki, CSS is most commonly applied using the `style` attribute directly within an HTML tag (inline styles).
General Syntax
Inline Style Attribute: The `style` attribute is placed inside the opening tag of an HTML element (e.g., <div style="color: blue;">Content</div>).
Properties and values are separated by a colon (`:`), and multiple property-value pairs are separated by a semi-colon (`;`).
This is a box with multiple styles applied.
<div style="background-color: #ABCDEF; border: 2px solid black; padding: 10px; width: 50%; border-radius: 15px; margin: 0 auto; text-align: center;">This is a box with multiple styles applied.</div>
px (pixels): An absolute unit, good for fixed sizes (e.g., `100px`).% (percentage): Relative to the parent element's size (e.g., `50%` of parent's width).em: Relative to the font size of the element (e.g., `1em` is current font size; `2em` is twice). This is good for scaling.rem: Relative to the font size of the root HTML element.auto: Browser automatically calculates values (e.g., used for `margin` to center block elements).
Common Text Styles
These properties control the appearance of text within an element.
| Property |
Purpose |
Example Code |
Result
|
| `color`
|
Sets the text color.
|
style="color: red;"
|
Red Text
|
| `font-size`
|
Sets the size of the text.
|
style="font-size: 1.2em;"
|
Larger Text
|
| `text-align`
|
Aligns inline content (text, images) horizontally within an element.
|
style="text-align: center;"
|
Centered Text
|
| `font-weight`
|
Sets the boldness of the text. Common values are `bold` or numerical values like `700`.
|
style="font-weight: bold;"
|
Bold Text
|
Common Box/Layout Styles
These properties control the appearance and positioning of block-level elements like `div`s.
| Property |
Purpose |
Example Code |
Result
|
| `background-color`
|
Sets the background color of the element. Can use color names (`blue`), hex codes (`#ABCDEF`), or RGB (`rgb(255,0,0)`).
|
style="background-color: #ABCDEF;"
|
Colored Background
|
| `border`
|
Sets all properties of an element's border (width, style, color) in one go.
|
style="border: 2px solid black;"
|
Bordered Box
|
| `border-radius`
|
Rounds the corners of an element's border.
|
style="border-radius: 15px;"
|
Rounded Corners
|
| `padding`
|
Creates space *inside* an element, between its content and its border.
|
style="padding: 10px;"
|
Padded Content
|
| `width`
|
Sets the width of an element.
|
style="width: 50%;"
|
Half-width Box
|
| `margin`
|
Creates space *outside* an element, between its border and other elements. Used with `auto` to center a block element with a defined width.
|
style="margin: 0 auto;"
|
Centered Box
|
| `float`
|
Positions an element to the left or right, allowing other content to wrap around it.
|
style="float: left;"
|
Floated Left This text wraps.
|
| `clear`
|
Forces an element to move below (clear) any preceding floated elements.
|
style="clear: both;"
|
Floated Left Cleared Below
|
| `display`
|
Specifies how an element is displayed (e.g., `block`, `inline`, `flex`). `flex` is powerful for complex layouts.
|
style="display: flex;"
|
Item 1Item 2
|
| `box-sizing`
|
Defines how an element's total width and height are calculated (whether padding and border are included in the specified `width`/`height`). `border-box` is often preferred for layout.
|
style="box-sizing: border-box;"
|
Box content. (This box is 100px wide, including padding border)
|
Basic Wiki Tables
Understanding these tools will allow you to:
- Create and formate Wiki Tables on a Page
- Create custom table layouts
Adding Wiki Tables
Purpose: To display a database or sheet that is more suited to display Data that simple text and list would be combasome to read.
createing a table
To create a table use the line {| class="wikitable" To mark the end of the table use the line |}
Structure the table
Now we have the table created we can add in collunms and rows.
To start the next row use the line |-
To start adding the collums add the line | at the start and then add in the nex collum with ||
The content can then be added between the |&|| lines.
Below is a Example of a simple table using:
Code Example:
{| class="wikitable"
|-
| A1 || B1 || C1 || D1 || E1
|-
| A2 || B2 || C2 || D2 || E2
|-
| A3 || B3 || C3 || D3 || E3
|}
Rendered Example:
| A1 |
B1 |
C1 |
D1 |
E1
|
| A2 |
B2 |
C2 |
D2 |
E2
|
| A3 |
B3 |
C3 |
D3 |
E3
|
To add a header to a table you need replace the first | with a !
To add other headers the add !! between the context of each header.
For example:
Code Example:
{| class="wikitable"
|-
! 1st !! 2nd !! 3rd !! 4th !! 5th
|-
| A1 || B1 || C1 || D1 || E1
|-
| A2 || B2 || C2 || D2 || E2
|-
| A3 || B3 || C3 || D3 || E3
|}
Rendered Example:
| 1st |
2nd |
3rd |
4th |
5th
|
| A1 |
B1 |
C1 |
D1 |
E1
|
| A2 |
B2 |
C2 |
D2 |
E2
|
| A3 |
B3 |
C3 |
D3 |
E3
|
Colspan and Rowspan
Adding Column Spans and Row Spans will allow you to merge cells in the table together.
colspan will merge cells to the right, and rowspan will merge cells downwards.
You can set the number of cells to merge with by adding ="number of cells" to the col/rowspan line followed with an | then the content of the cell.
For example:
Code Example:
{| class="wikitable"
|-
! colspan="5" | 1st
|-
| A1 || B1 || C1 || D1 || E1
|-
| A2 || B2 || C2 || D2 || E2
|-
| A3 || B3 || C3 || D3 || E3
|}
Rendered Example:
| 1st
|
| A1 |
B1 |
C1 |
D1 |
E1
|
| A2 |
B2 |
C2 |
D2 |
E2
|
| A3 |
B3 |
C3 |
D3 |
E3
|
Code Example:
{| class="wikitable"
|-
| rowspan="3"| A || B1 || C1 || D1 || E1
|-
| B2 || C2 || D2 || E2
|-
| B3 || C3 || D3 || E3
|}
Rendered Example:
| A |
B1 |
C1 |
D1 |
E1
|
| B2 |
C2 |
D2 |
E2
|
| B3 |
C3 |
D3 |
E3
|
