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

From LIMSWiki
Jump to navigationJump to search
m (→‎Preformatted text: Fixed overflow.)
m (→‎The code and nowiki tags: Fixed overflow)
Line 39: Line 39:
We achieve that by doing the following:
We achieve that by doing the following:


<pre>
<pre style="overflow: auto">
<code>&lt;nowiki&gt;
<code>&lt;nowiki&gt;
{{ombox
{{ombox

Revision as of 20:09, 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|left|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:

Uploaded image

In some cases an image you need to use isn't available on Wikimedia Commons (WC). In this case you can upload public domain and copyright-free images directly to the wiki. Once the upload is finished, the procedure for placing uploaded images into wiki pages is exactly the same as with WC content. You simply use the file name used for the wiki upload.

Other media

Sound and video files can also be embedded into a page. The formatting is similar to images in that you can simply use [[File:Filename.format]] plus applicable parameters.

Here's an example of a Wikimedia Commons sound file in .ogg format:

...using the code [[File:Accordion chords-01.ogg|noicon]]

And here's an example using a Wikimedia Commons video file in .ogg format:

Open science

...using the code [[File:Open research.ogg|thumb|left|200px|Open science]]

Templating

This wiki also includes Template:Listen for a more modular approach to embedding a sound file. Here's an example using the previously mentioned sound file, with the code to the right:

{{Listen
| filename    = Accordion chords-01.ogg
| title       = Accordion chords
| description = Chords being played on an accordion
| pos         = left
}}

Troubleshooting

Some LIMSwiki articles include sound or video files, playable on almost all digital devices. However, your device must have the right software. If your computer or hand-held device does not automatically play these files when you click on them, downloading and installing applicable free software and codecs from the Internet will likely allow you to do so. VLC Player is highly recommended for its open-source, non-profit status and its ability to handle most any file type. If you're still having difficulties, consulting Wikipedia's media help section may prove useful.