Help:Cheatsheet

From basingstoke.wiki
Jump to navigation Jump to search
This text is in italics at the top of a page. It is usually here to tell you that this page is based on another body of work or to point you to a similar page.


Introduction

This page contains a condensed version of the various formatting needed to create a wiki page. The page also uses some items within itself as examples. The basic descriptions often have a link next to them, that will take you to the far more advanced MediaWiki and Wikipedia help pages.

Note that when creating or editing a page, you must conform to the site standards.

To see how to operate the wiki and create a page, see the using the wiki page.


Italic Text at the Top of the Page

At the very top of this page is some text in italics. Please read its description of itself.


Contents Table

The Contents table of links, at the top of this page, is automatically generated. It will appear if your page has over 3 section headings on the page.

Each item in the table is based on a section heading name. Clicking on an item will take you the relevant section.


Sections

Sections are created to break up the page and act as a hierarchal structure for information.

A section is created by adding a section heading, see the Section Headings section.

When you have finished your section and wish to create your next one, it is best practice to create 2 line breaks between the sections. This will give the layout of the page the most aesthetic look.[note 1]

Please be aware that it may not follow that people read from one section to the next. Try to keep information in each section self-contained, as it is possible to link to a section as well as a page. If you need to refer to another section, then link to it rather than saying "the section above", as the section above may move over time.

For advanced help on sections, see the sections help.


Section Headings

There are various nesting levels of section headings. These range from Level 2 to Level 6 giving 5 levels in total.

Note that there is no Level 1 headings as this is used for the inbuilt page titles.

Do not repeat heading names on the same page! This is so there is no confusion when referencing sections from other pages.

Do not use the & character but use and instead.

The sections, listed below, show what nested section headings look like and what text was entered to generate them:

Note that levels 3, 4, 5 and 6 can look similar, on some browsers, but they are treated as different levels by the contents table. In normal operations, it is very unlikely you will ever need to use levels 5 and 6.

For advanced help on section headings, see the section headings help.


Heading - Level 2

This is the highest or 2nd level heading and was created by adding the text: == Heading - Level 2 ==

You can create the same heading by omitting the space between the equals signs like ==Heading - Level 2== but this is personal preference of the user.

Note that there are 2 equals signs before and after the text. It may seem that, as this is the highest level, that only one equals sign is needed, but this is not the case as Level 1 is reserved for page titles. Also a single = character has no special formatting characteristics allowing you to use the character without fear of impacting a format.


Heading - Level 3

This is the 3rd level heading and was created by adding the text: === Heading - Level 3 ===

You can create the same heading by omitting the space between the equals signs like ===Heading - Level 3=== but this is personal preference of the user.


Heading - Level 4

This is the 4th level heading and was created by adding the text: ==== Heading - Level 4 ====

You can create the same heading by omitting the space between the equals signs like ====Heading - Level 4==== but this is personal preference of the user.


Heading - Level 5

This is the 5th level heading and was created by adding the text: ===== Heading - Level 5 =====

You can create the same heading by omitting the space between the equals signs like =====Heading - Level 5===== but this is personal preference of the user.


Heading - Level 6

This is the 6th and lowest level heading and was created by adding the text: ====== Heading - Level 6 ======

You can create the same heading by omitting the space between the equals signs like ======Heading - Level 6====== but this is personal preference of the user.


Formatting

This section shows some basic methods of formatting text and paragraphs etc.

There are two types of code that can be used for formatting:

Both these types of code appear in each others help pages so can get confused. It does not matter which code type is used as long as you get the desired result.

There are best practices for the use of these, but ultimately no set rules for their usage. For basingstoke.wiki it best to use whatever you are most comfortable with.

The table below shows many examples of formatting, for both types of code. Note that these examples represent the most commonly used formatting options. Many more options are available, see the help page for more details. Note that many advanced options may require additional extensions or templates that may not have been installed on the basingstoke.wiki!

Formatting Table
Formatting
Type
Code Text Added in Editor Result in
the Wiki
Advanced
Help
Notes
Italic Wiki Markup ''Italic Text'' Italic Text Link -
HTML <i>Italic Text</i> Link Recommended to use Wiki Markup for italic
Bold Wiki Markup '''Bold Text''' Bold Text Link -
HTML <b>Bold Text</b> Link Recommended to use Wiki Markup for bold
Italic & Bold Wiki Markup '''''Italic & Bold Text''''' Italic & Bold Text Link Italic & bold is a combination of the italic and bold code
HTML <i><b>Italic & Bold Text</b></i> Link Recommended to use Wiki Markup for italic & bold
Italic & bold is a combination of the italic and bold code
Underline HTML <u>Underlined Text</u> Underlined Text Link Often not recommended as it looks like a hyperlink but it can be very useful. Note that the u actually stands for unarticulated.
Strikethrough HTML <del>Strikethrough Text</del> Strikethrough Text Link -
Code Font HTML <code>Code Font Text</code> Code Font Text Link -
Highlight / Background Wiki Markup {{Font color||yellow|Highlight}} Highlight Link Yellow colour used but it can be various colours
HTML <span style="background:yellow">Highlight</span> Link Yellow colour used but it can be various colours
Text Colour HTML <span style="color:green">Green Text</span> Green Text Link
Link
Green colour used but it can be various colours
Blue text not to be used due to confusion with links
Red text not to be used due to confusion with bad links
Text Colour with Highlight / Background HTML <span style="color:green;background:yellow">Green Text, Yellow Background</span> Green Text, Yellow Background Link
Link
Green text colour used but it can be various colours. Yellow background colour used but it can be various colours. Please be aware that certain colour combinations can be difficult to read and can lead to confusion
Ticks
Crosses
& Boxes
- ✓✔✅
x×X✕☓✖✗✘
☑☒☐
✓✔✅
x×X✕☓✖✗✘
☑☒☐
Ticks
Crosses
Ticks are also called checks
Crosses are also called x marks
Commercial
Symbols
- ™ © ® ™ © ® Link Many other symbols available
Key Press
Template
Wiki Markup {{key press|Ctrl}}+{{key press|F5}} Ctrl+F5 Link -
Line Break HTML First Line<br>Second Line First Line
Second Line
Link Used in tables but not in normal text
Ignore Code Wiki Markup <nowiki>'''Not Bold Text'''</nowiki> '''Not Bold Text''' Link Used to ignore Wiki Markup or HTML code instructions


The following paragraph is written as an example to include much of the formatting examples in the table above:

In the Wiki Markup code there is italic text, bold text and italic & bold text. The HTML code also has italic text, bold text and italic & bold text. Code instructions, in Wiki Markup and HTML, can be ignored so the plain text can be displayed so ''this is not italic'' where this is italic. Additional formatting in HTML can be used for underlining, for strikethrough and for displaying text in a code font. Highlighting in yellow can be done like this, in Wiki Markup, or this in HTML. The text colour can also be changed to a different colour, like fuchsia text, in the HTML code. Other symbols like ticks ✓✔✅, crosses x×X✕☓✖✗✘, boxes ☑☒☐ and commercial symbols ™©® can be entered by using the relevant character.


Lists - Bullet Points and Numbering

The table below shows many examples of bullet points and numbering lists etc.

Bullet Points and Numbering Table
List Type Code Text Added in Editor Result in
the Wiki
Advanced
Help
Notes
Bullet List
(Simple)
Wiki Markup * Point 1
* Point 2
* Point 3
  • Point 1
  • Point 2
  • Point 3
Link
Link
-
Bullet List
(Nested)
Wiki Markup * Point 1
* Point 2
** Point 2a
** Point 2b
* Point 3
  • Point 1
  • Point 2
    • Point 2a
    • Point 2b
  • Point 3
Link
Link
The more stars added, the greater the nesting
Numbered List
(Simple)
Wiki Markup # Point 1
# Point 2
# Point 3
  1. Point 1
  2. Point 2
  3. Point 3
Link
Link
-
Numbered List
(Nested)
Wiki Markup # Point 1
# Point 2
## Point 2a
## Point 2b
# Point 3
  1. Point 1
  2. Point 2
    1. Point 2a
    2. Point 2b
  3. Point 3
Link
Link
The more hashes added, the greater the nesting
Combined List
(Nested)
Wiki Markup # Point 1
# Point 2
#* Point 2a
#* Point 2b
# Point 3
  1. Point 1
  2. Point 2
    • Point 2a
    • Point 2b
  3. Point 3
Link
Link
The more stars and hashes added, the greater the nesting


Links

A benefit of a wiki is being able to quickly link to other pages, sections and external websites. The table below shows how use to links in your page:

Links Table
Link Type Code Text Added in Editor Result in
the Wiki
Advanced
Help
Notes
Another wiki page on basingstoke.wiki Wiki
Markup
[[Benchmarks | Benchmarks Page]] Benchmarks Page Link
Link
Spaces are not needed next to the pipe character, but spaces can make the code easier to read
A section on another wiki page, in basingstoke.wiki Wiki
Markup
[[Benchmarks#Benchmarks on Maps | Benchmarks on Maps]] Benchmarks on Maps Link
Link
Spaces are not needed next to the pipe character, but spaces can make the code easier to read
External website Wiki
Markup
[https://en.wikipedia.org/wiki/Cheese Cheese Page] Cheese Page Link
Link
-
A section in an external website Wiki
Markup
[https://en.wikipedia.org/wiki/Cheese#Types Cheese Types] Cheese Types Link
Link
-


Tables

Tables are an extremely useful thing to have on a wiki page but also one of the most complicated.

There are a great deal of variations and some can be very advanced. If you would like to replicate a specific table setup or style, then it is often best to backwardly engineer a preexisting table. This can be done by editing the wiki page and copying the table code. This can then be altered to include your data. This method can be far quicker than trying to learn all the complicated table features.

There are also many websites that will convert data into a wiki table. These websites are numerous and differ depending on how you put the data in. For this reason, none of these websites are listed here.

For advanced help on tables, see the following links:

The sections below shows some very basic examples of tables. Each section shows the code entered first followed by the table resulting from the code.


Table - Basic

{| class="wikitable"
|+ Basic Table Title
|- style="text-align: center;"
! Fruit !! Colour !! Quantity
|- style="text-align: center;"
| Banana || Yellow || 150
|- style="text-align: center;"
| Apple || Red || 300
|- style="text-align: center;"
| Grape || Green || 25
|}

Basic Table Title
Fruit Colour Quantity
Banana Yellow 150
Apple Red 300
Grape Green 25


Table - Sortable

{| class="wikitable sortable"
|+ Sortable Table Title
|- style="text-align: center;"
! Fruit !! Colour !! Quantity
|- style="text-align: center;"
| Banana || Yellow || 150
|- style="text-align: center;"
| Apple || Red || 300
|- style="text-align: center;"
| Grape || Green || 25
|}

Sortable Table Title
Fruit Colour Quantity
Banana Yellow 150
Apple Red 300
Grape Green 25


Table - List Style

{| class="wikitable"
|+ List Style Table Title
|- style="text-align: center;"
! Building Number
| 123
|- style="text-align: center;"
! Road
| Oxford Street
|- style="text-align: center;"
! City
| London
|}

List Style Table Title
Building Number 123
Road Oxford Street
City London


Pictures

Pictures are a very useful part of a wiki page. They can break up a long page of text and explain things at a glance.

Advanced help can be found for pictures in the links below:

It is recommended to leave 2 line breaks before and after a picture. If a picture is at the end of a section, then it is recommended to leave 3 line breaks after it. This will give the layout of the page the most aesthetic look.[note 1]

Any picture, in a page, can be clicked on to bring up the page for that picture, where you can see details about the picture and see options to view the picture at its full resolution.

The following sections mainly use the example picture Test_Image_001.jpg with a native resolution of 1920x1280.


Picture Extensions

Pictures can be saved in many file formats. The table below shows the best file formats to use:

Picture File Types Table
Picture
Type
Recommended
Extension
Notes
Photograph or picture scan *.jpg A jpg file is the smallest file size for the most detail.
It is not suitable for screenshots as the file will be larger than needed.
These files are suitable for resizing.
Screenshot *.gif A gif file takes up a lot less space than a jpg file.
It is not suitable for photographs as it has limited colours.
These files do not resize well.


Uploading Pictures

Before uploading a picture, please see the standards page to ensure your picture is formatted and named correctly!

Certain file types, like *.jpg, are suitable for resizing and can be uploaded at any size. Other file types, like *.gif, are not suitable for resizing and should be uploaded at the correct size. Note that when a screenshot is taken, it is usually at the perfect size for a wiki page and so does not need resizing.

To upload a picture to the wiki:

  1. Ensure you are logged into the wiki. See the user accounts page
  2. Click on the Upload file link, in the left hand pane, under the Tools heading
  3. Click the Browse... button, select your file and click Open
  4. Click the Upload file button

Your picture should now be uploaded into the wiki. Note the filename it was given by the wiki, as it may not be the same as the one you uploaded. The filename will be at the top of the page after the File: text.


Picture - Full Size

To show your picture in full size, enter the code:

[[File:Test_Image_001.jpg]]

This should display as:


Test Image 001.jpg


Picture - Set Size

To show your picture in a specific size, enter the code:

[[File:Test_Image_001.jpg|640px]]

In this example the width is being set as 640 pixels.

This should display as:


Test Image 001.jpg


Text Surrounding a Picture

A picture can be contained on a frame, that sits to the left, the right or to the left and right of text.

Note that different web browsers and the size of the browser window will determine where the text is rendered. For example, for a picture on the left, the text can either go to the right or under and more text will go under it the narrower the browser window becomes.

For this reason you cannot rely on text being exclusively to the left of right of a picture.

The following table shows the code to use. Any text entered before this will go above the picture and any text entered after this will go to the side or below the picture.

Text Surrounding Picture Table
Type Code Notes
Picture on left, text on right [[File:Test_Image_001.jpg|200px|thumb|left|Test Thumbnail Label]] -
Picture on left, text on right [[File:Test_Image_001.jpg|200px|thumb|right|Test Thumbnail Label]] -
Picture on right, text on left [[File:Test_Image_001.jpg|200px|thumb|left|Test Thumbnail Label]]
[[File:Test_Image_002.jpg|200px|thumb|right|Test Thumbnail Label]]
-

The following paragraphs show examples of the 3 methods in the above table.


Text above picture. Line 1.
Text above picture. Line 2.
Text above picture. Line 3.

Test Thumbnail Label

Text to the right or below picture. Line 4.
Text to the right or below picture. Line 5.
Text to the right or below picture. Line 6.
Text to the right or below picture. Line 7.
Text to the right or below picture. Line 8.
Text to the right or below picture. Line 9.
Text to the right or below picture. Line 10.
Text to the right or below picture. Line 11.
Text to the right or below picture. Line 12.
Text to the right or below picture. Line 13.
Text to the right or below picture. Line 14.
Text to the right or below picture. Line 15.
Text to the right or below picture. Line 16.
Text to the right or below picture. Line 17.


Text above picture. Line 1.
Text above picture. Line 2.
Text above picture. Line 3.

Test Thumbnail Label

Text to the left or below picture. Line 4.
Text to the left or below picture. Line 5.
Text to the left or below picture. Line 6.
Text to the left or below picture. Line 7.
Text to the left or below picture. Line 8.
Text to the left or below picture. Line 9.
Text to the left or below picture. Line 10.
Text to the left or below picture. Line 11.
Text to the left or below picture. Line 12.
Text to the left or below picture. Line 13.
Text to the left or below picture. Line 14.
Text to the left or below picture. Line 15.
Text to the left or below picture. Line 16.
Text to the left or below picture. Line 17.


Text above picture. Line 1.
Text above picture. Line 2.
Text above picture. Line 3.

Test Thumbnail Label
Test Thumbnail Label

Text to the left & right or below picture. Line 4.
Text to the left & right or below picture. Line 5.
Text to the left & right or below picture. Line 6.
Text to the left & right or below picture. Line 7.
Text to the left & right or below picture. Line 8.
Text to the left & right or below picture. Line 9.
Text to the left & right or below picture. Line 10.
Text to the left & right or below picture. Line 11.
Text to the left & right or below picture. Line 12.
Text to the left & right or below picture. Line 13.
Text to the left & right or below picture. Line 14.
Text to the left & right or below picture. Line 15.
Text to the left & right or below picture. Line 16.
Text to the left & right or below picture. Line 17.


Gallery

A gallery of pictures can be used if the pictures themselves are part of the information. For example, there may be many pictures of a site you want to include but not show each of them on the page as a full size picture.

<gallery>
File:Test_Image_001.jpg
File:Test_Image_002.jpg
File:Test_Image_003.jpg
</gallery>

This should display as:



For advanced help on section galleries, see the gallery help.


Notes and References

Notes and references use the same code but describe different things:

  • A note is an addition note to the word, sentence or paragraph that is not suitable to be put within the paragraph. The note may also be used multiple times on the same page so it prevents the same text from being repeated.
  • A reference is a reference to the word, sentence or paragraph that confirms its validity. For example if adding a statistic, the reference can be a book ISBN number or web page where the information was sourced from.

The table below shows how to add notes and references to text:

Adding Notes & References Table
Type Code Text Added in Editor Result in
the Wiki
Advanced
Help
Notes
Notes
(First Use)
HTML Put the cake in the oven<ref name="NOTE-OVEN" group="note">Ensure you use oven gloves!</ref> Put the cake in the oven[note 2] Link The name is unique per note and needed if using the note more than once.
Notes
(Subsequent Use)
HTML Put the cake in the oven<ref name="NOTE-OVEN" group="note" /> Put the cake in the oven[note 2] Link The name is unique per note and needed if using the note more than once.
References
(First Use)
HTML Space is big<ref name="REF-SPACE" group="ref">[https://en.wikiquote.org/wiki/Space#Quotes Space quotes.]</ref> Space is big[ref 1] Link The name is unique per reference and needed if using the note more than once.
References
(Subsequent Use)
HTML Space is big<ref name="NOTE-STATIC" group="note" /> Space is big[ref 1] Link The name is unique per reference and needed if using the note more than once.

Once notes and references have been added to the text, a section with a list collating all these must be produced.

If there are no notes then the notes list and section is not needed. If there are no references then the references list and section is not needed.

See the Notes and References sections at the bottom of the page for how the lists look.

The list will be a numbered starting from 1. To the right of the number will be an up arrow. If the note or reference appears just once then you can click the arrow to go to where it appears in the text. If the note or reference appears more than once then to the right of the arrow there will be several numbers. Each of these will go to where it appears each time in the text, when clicked.

The table below shows how to make a notes and references list:

Notes & References List Table
Type Code Text Added in Editor Result in
the Wiki
Advanced
Help
Notes
Notes
List
HTML <references group="note"/> See the Notes section Link -
References
List
HTML <references group="ref"/> See the References section Link -


See Also

The See Also section is usually the last section on a page unless there are Notes or References sections, which will come below it.

The following links have been put in lists and show some useful links to include:




Notes

The notes section is usually the last section on a page unless there is a References section, which will come below it.

See the Notes and References section for details on how to add notes.


  1. 1.0 1.1 This is recommended standard for basingstoke.wiki.
  2. 2.0 2.1 Ensure you wear oven gloves!


References

The notes section is usually the last section on a page.

See the Notes & References section for details on how to add references.