Help:Editing

From TC Open Forum

Jump to: navigation, search

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

Contents

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

wikitextrendering
* Lists are easy to do:
** start every line with a star
*** more stars means deeper levels
  • 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.
  • 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
  1. Numbered lists are also good
    1. very organized
    2. easy to follow
* You can also
**break lines<br>inside lists<br>like this
  • You can also
    • break lines
      inside lists
      like this
; Definition list : list of definitions
; item : the item's definition
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
  • You can even create mixed lists
    1. 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

    1. a
    2. bb
    3. ccc
    1. ddd
    2. ee
    3. f


This is a test

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

Cell 1, row 1 Cell 2, row 1
Cell 1, row 2 Cell 2, row 2

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

abc def ghi jkl

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

abc def ghi
jkl mno pqr
stu vwx yz

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

black #000000 silver #c0c0c0 maroon #800000 red #ff0000
navy #000080 blue #0000ff purple #800080 fuchsia #ff00ff
green #008000 lime #00ff00 olive #808000 yellow #ffff00
teal #008080 aqua #00ffff gray #808080 white #ffffff

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

abc def ghi
jkl mno pqr
stu vwx yz

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="2"
 
border="3"
 
border="4"
 
border="5"
 
border="6"
 
border="7"
 
{|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:

Multiplication table
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

becomes this:

Multiplication table
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

Using Tables to create Text panels

With Border:

A table can be used to create a text panel

Without Border:

A table can be used to create a text panel


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

With Borders
border: solid black background-color:#EFEFEF


border: solid blue background-color:#EFEFEF


border: solid blue background-color:#DBDDFF


border: solid Orange background-color:#FFFACD


border: solid green background-color:#E3FFEA
Without Borders
background-color:#EFEFEF


background-color:#F7D7FF


background-color:#DBDDFF


background-color:#FFFACD


background-color:#E3FFEA

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

Position

  • right
  • left
  • centre
  • none
Size
  • sizepx - size in pixels
  • thumb - creates a thumbnail, and frames the picture
Framing
  • frame - creates a frame round the image
  • thumb - creates a thumbnail, and frames the picture
Caption
  • Add a free text caption which is displayed within the frame is frame ot thumb used, also appears as alt text
Personal tools
radioTC international
what else is here?