Help:Editing

From TSGARC

Changing the 'Programmes' Page

Date	Event	Contact
13th / 14th May	Mills on the Air	Stan Goodwin
31st Dec	Johns Birthday

The table above is created using the wiki markup below;

{|{{table_type1}} width=95%
|style="background:#efefef;" width = 20% |'''Date'''
|style="background:#efefef;" width = 60% |'''Event'''
|style="background:#efefef;" width = 20% |'''Contact'''
|-
|13th / 14th May
|Mills on the Air
|Stan Goodwin
|-
|31st Dec
|Johns Birthday
| 
|}

The first four lines can be ignored when editing the table as they line by line

1 Start the table and set the style and width of the table.

2 - 4 set the widths and titles for each column.

{|{{table_type1}} width=95%
|style="background:#efefef;" width = 20% |'''Date'''
|style="background:#efefef;" width = 60% |'''Event'''
|style="background:#efefef;" width = 20% |'''Contact'''

Each row of the table is made up of four lines

|-
|31st Dec
|Johns Birthday
| 

The first row with "|-" in it tell the system to start a new row.

Each column then follows as a seperate line started with a "|" and then the contents of the column on that row.

If you have an empty cell in the table you will need to put   in it otherwise the borders may not show around the cell.

The whole table is finished with the following line.

|}

Wiki Editing

Wiki's are an online web developemnt environment specifically designed for knowlege based webs.

Creating & Linking

Creating a Page

Creating an new page in a Wiki is done in the reverese way to which pages are normally created for the web, the normal process would be to create the new page as a document and then add links to if from other pages. With a Wiki you first create the link and then when you click on the link rather than getting an error you will be taken to the editor in which you can enter the text etc for the page.

An internal link is a Wiki is created by putting [[ and ]] round the text you want to become a link e.g.

[[Digital Modes]]

The title for the new page is taken from the text you have sourounded with [[ and ]] so it is important that you think carefully about this. However it is possible to text on the source page linking to a page with a differnt title. If I wanted a link for 'PSK31' to take me to a page on 'Digital Modes' then I would create a link like this.

[[Digital Modes|PSK31]]

The first part of the link before the | is the name of page linked to, the text after the | will be the text displayed on the page.

Steps

1. Create a link on the previos page by putting [[ and ]] round the link for the text eg. [[This is my new link]]
2. Save this page, you should see your link is now visible as red text on the page.
3. Click on this red link
4. The new page will open editor mode and you will be able to add the text etc for this page.

Wikilinks (internal)

Wikilinks (internal links) allow pages within a project to be linked together. These links are in the form [[article name|link name]], where the link name is optional. For example, [[Main Page]] becomes Main Page, and [[Main Page|index]] becomes index. Links with parameters (the link name) are said to be "piped" because of the pipe symbol used ('|').

MediaWiki automatically checks if the target of a wikilink exists. If the page doesn't exist, the link is assigned the class "new". Such wikilinks are nicknamed "red links" because they are coloured red in the default stylesheet on a default installation of MediaWiki. Red links are useful in determining the current status of the page (created or not created), create incoming links to a future page, facilitates and incites page creation.

Note that the image, category, and interlanguage syntax are the same as the wikilink syntax. Counterintuitively, attempting to link normally to an image will place that image on the page. This can be prevented by prefixing a colon, which escapes the specific syntax. For example, [[:Category:Help]], [[:fr:Help:Link]], and [[:Image:Mediawiki.png]].

External links

External links use absolute URLs to link directly to any page on the Internet. These links have the associated CSS class "external". External links are in the form [http://www.example.org link name] (resulting in link name), with the link name separated from the URL by a space. Links without link names will be numbered: [http://www.example.org] becomes [1]. Links with no square brackets will be displayed in their entirety: http://www.example.org .

Section linking

Links in the form [[#anchor_name]] will link to any anchor named "anchor_name" on the page. This may be either a heading named "anchor_name", or an arbitrary position. [[#top]] is a reserved name that links to the top of a page. It is possible to create an arbitrary anchor name using the HTML code <span id="anchor_name"></span>.

Anchor links can also be appended to any type of link; for more information, see Help:Contents#Section_linking.

Linking from an Image to a page

It is not normal practice within a wiki to link to another page by clicking on an image in a wiki as normally clicking on the image would take you to the image page.

Sections in a Page

Creation of sections

Sections are created by creating their headers

==Section==

===Subsection===

====Sub-subsection====

Linking to a section

In the HTML code for each section there is an anchor element with both "name" and "id" attributes holding the section title. This enables linking directly to sections. These section anchors are automatically used by MediaWiki when it generates a Table of Contents for the page, but you can also use them to manually link directly to one section within a page.

A link to this section (Section Linking) looks like this:

[[Help:Section#Section_linking|Section Linking]]

From within the same page you can use [[#id|link_label]], and from another page [[page_name#id|link_label]].

An underscore and number are appended to duplicate section names. E.g. for three sections named "Example", the names (for section linking) will be "Example", "Example_2" and "Example_3".

Lists

List Basics

* Lists are easy to do:
** start every line with a star
*** more stars means deeper levels

*A newline
*in a list  
marks the end of the list.
Of course
*you can
*start again.

# Numbered lists are also good
## very organized
## easy to follow

* You can also
**break lines<br>inside lists<br>like this

; Definition list : list of definitions
; item : the item's definition

* You can even create mixed lists
*# and nest them
*#* like this
*#*; can I mix definition list as well?
*#*: yes
*#*; how?
*#*: it's easy as
*#*:* a 
*#*:* b
*#*:* c

Multi-column numbered lists

Specifying a starting value is useful for a numbered list with multiple columns, to avoid restarting from one in each column. This is only possible with HTML-syntax (for the first column either wiki-syntax or HTML-syntax can be used).

In combination with the extra indentation explained in the previous section:

{| valign="top"
|-
|<ul><ol start="125"><li>a<li>bb<li>ccc</ol></ul>
|<ul><ol start="128"><li>ddd<li>ee<li>f</ol></ul>
|}

gives

Tables

Simple example

{| 
| Cell 1, row 1 
| Cell 2, row 1 
|- 
| Cell 1, row 2 
| Cell 2, row 2 
|}


{| Starts the table

| starts a cell

|- starts a new row

|} end the table

generates

Adding Colour to tables

Two ways of specifying color of text and background for a single cell are as follows:

{| 
| bgcolor=red | <font color=white> abc
| def
| style="background:red; color:white" | ghi
| jkl
|}

gives

As shown "font" works for one cell only, even without end tag: the end tag is produced by the system.

Like other parameters, colors can also be specified for a whole row or the whole table; parameters for a row override the value for the table, and those for a cell override those for a row:

{| style="background:yellow; color:green"
|- 
| abc
| def
| ghi
|- style="background:red; color:white"
| jkl
| mno
| pqr
|-
| stu
| style="background:silver" | vwx
| yz
|}

gives

The HTML 4.01 specification defines sixteen named colors, here shown with hexadecimal values:

Table Width, Row height

The width and height of the whole table can be specified, as well as the height of a row. To specify the width of a column one can specify the width of an arbitrary cell in it. If the width is not specified for all columns, and/or the height is not specified for all rows, then there is some ambiguity, and the result depends on the browser.

{| style="width:75%; height:200px" border="1"
|- 
| abc
| def
| ghi
|- style="height:100px" 
| jkl
| style="width:200px" |mno
| pqr
|-
| stu
| vwx
| yz
|}

gives

Setting your column widths

If you wish to force column widths to your own requirements, rather than accepting the width of the widest text element in a column's cells, then follow this example. Note that wrap-around of text is forced.

{| border="1" cellpadding="2"
!width="50"|Name
!width="225"|Effect
!width="225"|Games Found In
|-
|Pokeball
|Regular Pokeball
|All Versions
|-
|Great Ball
|Better than a Pokeball
|All Versions
|}

Name	Effect	Games Found In
Pokeball	Regular Pokeball	All Versions
Great Ball	Better than a Pokeball	All Versions

Table Borders

The table border can be defined with the 'border=..' in the first line examples are below

{|border="1"
|border="1"
|-
| 
|}

Thin Border

A thin border cab be produces with

{|style="border:1px solid orange" 

Border Style classes

Some users have created CSS classes to make table styles easier. Instead of remembering table parameters, you just include an appropriate style class after the {|. This helps keep table formatting consistent, and can allow a single change to the class to fix a problem or enhance the look of all tables that use it. For instance, this:

becomes this:

Using Tables to create Text panels

With Border:

Without Border:

Is created using this.

{|style="border:1px solid orange;background-color:#FFFACD;padding:7px;" width = 100%
|A table can be used to create a text panel
|}

Or

{|style="background-color:#FFFACD;padding:7px;" width = 100%
|A table can be used to create a text panel
|}

Other colours that could be used include

Images

No website would be complete without images, an image is added to any page by using a link to the image file.

If I want to upload an image into a page the following sets are necessary.

1. In the page where I want the image to appear create an inimage link by adding the file name into the test, ensure that you specify the file type eg.

   Picture_of_a_cat.jpg

2. Now wrap the files name with the image tag

   [[image:Picture_of_a_cat.jpg]]

3. When the page is saved you will now have a red link that when you click on it you will be taken to the upload page and you can then upload the file to the website

Image Control

It is posible to control how an image appears on a page

• Size
• Caption
• Position
• Border

This is done by adding further piped settings to the image link.

[[image:Picture_of_a_cat.jpg]]

might become

[[image:Picture_of_a_cat.jpg|thumb|right|This is a picture of a cat]]

The parameters that can used include