User:Ayjayaredii/Wiki Help

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.

Headers Syntax

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	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>	Item 1 Item 2
<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>	List item content

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

Adding Headers to tables

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