Difference between revisions of "Help:MediaWiki basics/Intermediate training"

From LIMSWiki
Jump to navigationJump to search
m (Cat.)
(Added content.)
Line 62: Line 62:
This may seem a bit confusing at first, but don't worry. You'll get the hang of this type of formatting.
This may seem a bit confusing at first, but don't worry. You'll get the hang of this type of formatting.


===Images===
====Additional tags====


[[File:Wiki puzzle.svg|Wiki puzzle]]This is me playing with linking to images on Wikimedia Commons. We'll get into image uploading and linking a little later.
Other HTML-based tags can be inserted into your wiki edits, though they should be used sparingly. Try to focus on using wiki-based formatting when possible.
 
* <tt>Typewriter font</tt>: <code><nowiki><tt>Typewriter font</tt></nowiki></code>
 
* <strike>Strike out</strike> or <u>underline</u>: <code><nowiki><strike>Strike out</strike> or <u>underline</u></nowiki></code>
 
* X<sup>3</sup>, H<sub>2</sub>O: <code><nowiki>X<sup>3</sup>, H<sub>2</sub>O</nowiki></code>
 
* <blockquote>The '''blockquote''' command will indent both margins when needed.</blockquote><code><nowiki><blockquote>The '''blockquote''' command will indent both margins when needed.</blockquote></nowiki></code>
 
===Including media===
 
====Images====
 
There are a couple of ways to place images into wiki content: link to images from Wikimedia Commons or like to images uploaded to the wiki.
 
'''Wikimedia Commons'''
 
[[commons:Main Page|Wikimedia Commons]] (WC) is a "media file repository making available public domain and freely-licensed educational media content (images, sound and video clips) to everyone." LIMSwiki utilizes an extension which allows users to directly link to WC content using only the file name. Below is an example of such a link as well as the code to display it:
 
[[File:Sm-Wikipuzzlepiece.png]] ...and the code: <code><nowiki>[[File:Sm-Wikipuzzlepiece.png]]</nowiki></code>
 
Essentially you find an image you want to use on WC and place the name (File:Filename.format) between two opening and closing brackets (as you would an internal link). Of course, there are many additional parameters you can add to the image.
 
[[File:Sm-Wikipuzzlepiece.png|right]]For example, you can float the image to the right:
 
The code: <code><nowiki>[[File:Sm-Wikipuzzlepiece.png|right]]</nowiki></code> and the image --->
 
<br />
 
You can also add a thumbnail border, specify the size, and add description text:
 
[[File:Sm-Wikipuzzlepiece.png|thumb|left|80px|Description here]]
 
<br />&nbsp;<br />
 
...and the code: <code><nowiki>[[File:Sm-Wikipuzzlepiece.png|thumb|80px|Description here]]</nowiki></code>
 
<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />
 
As seen in the code above, each parameter is separated by a pipe (|).
 
The most common parameters:
 
; ''Type'' : "<code>thumb</code>" (or "<code>thumbnail</code>"; either can be followed by "<code>=<var>filename</var></code>"), "<code>frame</code>" (or "<code>framed</code>"), or "<code>frameless</code>". Display the image with specific formatting.
; ''Location'' : "<code>right</code>", "<code>left</code>", "<code>center</code>" or "<code>none</code>". Determine the horizontal placement of the image on the page. This defaults to "<code>right</code>" for thumbnails.
; ''Alignment'' : "<code>baseline</code>", "<code>middle</code>", "<code>sub</code>", "<code>super</code>", "<code>text-top</code>", "<code>text-bottom</code>", "<code>top</code>", or "<code>bottom</code>". Vertically align the image with respect to adjacent text. This defaults to "<code>middle</code>".
; ''Size'' : "'''Width'''<code>px</code>" or "<code>x</code>'''Height'''<code>px</code>" or "'''Width'''<code>x</code>'''Height'''<code>px</code>". Scale the image to be no greater than the given width and/or height, keeping its aspect ratio.
; ''Alt'' : Specify the alternate text for the image. This is intended to describe the image for visually impaired readers.
 
Covering all the parameters of image placement is beyond the scope of this training session. However, here are a couple of great sources for learning more about the parameters you can use with image files:
 
* MediaWiki Handbook: [https://meta.wikimedia.org/wiki/Help:Images_and_other_uploaded_files Help:Images and other uploaded files]
* Wikipedia: [https://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax Wikipedia:Extended image syntax]


<!---Place all category tags here-->
<!---Place all category tags here-->
[[Category:LIMSwiki training]]
[[Category:LIMSwiki training]]

Revision as of 18:30, 21 October 2013

Intermediate formatting in MediaWiki

Note: When opening links from wiki pages, right-click a link and choose to open it in a new tab. This should make navigating your way through the wiki less complex.

Text formatting revisited

In the beginner training guide we talked about simple text formatting methods like bolding and italicizing. Now let's cover a few more advanced ways to format your text.

Preformatted text

If you viewed the beginner training guide, you likely noticed several instances of gray boxes with wiki code and other text in them. How do you display that content like that without the system running any associated code? You do it by using the preformatted text tag <pre> to display the code without rendering it. For example, here is the code used to create that box at the top of this page, displayed (but not run) using the <pre> tag, the content, and then the closing </pre>:

{{ombox
| type      = notice
| style     = width: 960px;
| text      = This is intermediate training material for MediaWiki. If you still have problems after reviewing and practicing the material found here and in the [[Help:MediaWiki basics/Beginner training|beginner]] and [[Help:MediaWiki basics/Advanced training|advanced]] guides, you can request help on [[User_talk:Shawndouglas|this discussion page]].
}}

The code and nowiki tags

If you wish to show some sort of code inline, without the big block of gray, you can combine two HTML-style tags to create that effect: <code> and <nowiki>. For example, here's the same code from above but inline:

{{ombox | type = notice | style = width: 960px; | text = This is intermediate training material for MediaWiki. If you still have problems after reviewing and practicing the material found here and in the [[Help:MediaWiki basics/Beginner training|beginner]] and [[Help:MediaWiki basics/Advanced training|advanced]] guides, you can request help on [[User_talk:Shawndouglas|this discussion page]]. }}

We achieve that by doing the following:

<code><nowiki>
{{ombox
| type      = notice
| style     = width: 960px;
| text      = This is intermediate training material for MediaWiki. If you still have problems after reviewing and practicing the material found here and in the [[Help:MediaWiki basics/Beginner training|beginner]] and [[Help:MediaWiki basics/Advanced training|advanced]] guides, you can request help on [[User_talk:Shawndouglas|this discussion page]].
}}
</nowiki></code>

Essentially the <code> tag tells the system to show the text inline instead of in block format (like preformatted text), and the <nowiki> tag tells the system to not run that text as code but treat it as plain text.

Note: Leave <pre> for larger blocks. Using the described combination of <code> and <nowiki> tags is much better suited for small bits of code.

For example:

<code><nowiki>[[Help:MediaWiki basics/Beginner training|beginner training guide]]</nowiki></code>

...yields: [[Help:MediaWiki basics/Beginner training|beginner training guide]]

This may seem a bit confusing at first, but don't worry. You'll get the hang of this type of formatting.

Additional tags

Other HTML-based tags can be inserted into your wiki edits, though they should be used sparingly. Try to focus on using wiki-based formatting when possible.

  • Typewriter font: <tt>Typewriter font</tt>
  • Strike out or underline: <strike>Strike out</strike> or <u>underline</u>
  • X3, H2O: X<sup>3</sup>, H<sub>2</sub>O
  • The blockquote command will indent both margins when needed.

    <blockquote>The '''blockquote''' command will indent both margins when needed.</blockquote>

Including media

Images

There are a couple of ways to place images into wiki content: link to images from Wikimedia Commons or like to images uploaded to the wiki.

Wikimedia Commons

Wikimedia Commons (WC) is a "media file repository making available public domain and freely-licensed educational media content (images, sound and video clips) to everyone." LIMSwiki utilizes an extension which allows users to directly link to WC content using only the file name. Below is an example of such a link as well as the code to display it:

Sm-Wikipuzzlepiece.png ...and the code: [[File:Sm-Wikipuzzlepiece.png]]

Essentially you find an image you want to use on WC and place the name (File:Filename.format) between two opening and closing brackets (as you would an internal link). Of course, there are many additional parameters you can add to the image.

Sm-Wikipuzzlepiece.png

For example, you can float the image to the right:

The code: [[File:Sm-Wikipuzzlepiece.png|right]] and the image --->


You can also add a thumbnail border, specify the size, and add description text:

Description here


 

...and the code: [[File:Sm-Wikipuzzlepiece.png|thumb|80px|Description here]]


 
 
 

As seen in the code above, each parameter is separated by a pipe (|).

The most common parameters:

Type
"thumb" (or "thumbnail"; either can be followed by "=filename"), "frame" (or "framed"), or "frameless". Display the image with specific formatting.
Location
"right", "left", "center" or "none". Determine the horizontal placement of the image on the page. This defaults to "right" for thumbnails.
Alignment
"baseline", "middle", "sub", "super", "text-top", "text-bottom", "top", or "bottom". Vertically align the image with respect to adjacent text. This defaults to "middle".
Size
"Widthpx" or "xHeightpx" or "WidthxHeightpx". Scale the image to be no greater than the given width and/or height, keeping its aspect ratio.
Alt
Specify the alternate text for the image. This is intended to describe the image for visually impaired readers.

Covering all the parameters of image placement is beyond the scope of this training session. However, here are a couple of great sources for learning more about the parameters you can use with image files: