User:Tiptoety/Adoption/Wikimarkup

From Wikipedia, the free encyclopedia

Contents

[edit] Wikimarkup 101

So by now you know how to edit pages, one of the most important features of Wikipedia. The interesting bit, however, is getting things to look, well, interesting. There are a number of different bits of code that you can use in your editing to create different effects when the page is saved - they can be as simple as bold text or italics, but different bits of code can be combined to make a very appealing layout.

I should warn you that in most cases, special formatting is frowned upon in articles. It should only be used in certain situations, and when it is necessary to illustrate a particular point. Aside from those cases, text in articles should be just as you see it in this sentence - plain black, with only the occasional wikilink to spice things up.

The editing toolbar, minus a few buttons
The editing toolbar, minus a few buttons

Here, I'm going to show you what each of the buttons on your editing toolbar does and how to use the particular bit of code it produces. There are rather a lot of them, so what I'm going to do first is show you where you can go to test all this out while you're reading. There are two places: you can go to the main sandbox that everyone uses at Wikipedia:Sandbox. This is a special page that is cleaned out every hour automatically, that gives editors a place to play with new code and vandals a place to vandalize other than our articles. The only problem with the sandbox is this: Whatever you save there isn't likely to stay for long, and there is a high chance of you getting hit with a few edit conflicts. So, to avoid that, you can create your own sandbox! On Wikipedia, you are able to tack "subpages" onto your main user page to use for testing things out, writing new articles, or other projects like what we're doing here. This page (User:Tiptoety/Adoption) is a subpage of User:Tiptoety, and the source of this lesson (User:Tiptoety/Adoption/Wikimarkup) is a subpage of that subpage. You can create user subpages by searching for the page you want to create in the search box. It won't find it, of course, however a red link will appear at the top of the page. Click on that, and edit away! For example, try searching for User:Tiptoety/Example and creating it.

To make your sandboxes, we're going to skip a few steps. This is a handy little box that we can use to start making a new page. Replace the word "YOURUSERNAME" below with your user name ("Tiptoety", for example) and click the button. It will bring you to your own personal sandbox, which you can start using right away.

Now that you have somewhere to test all this code out in, let's start showing you what all it does. Here we go!

Toolbar
Button		 What it does The code it makes Short description What it looks like Notes
Image:Bold icon.png Bold text '''Bold text''' Three apostrophes (') on either side of the bold text Bold text The title of an article is always in bold the first time you see it.
Image:Italic icon.png Italic text ''Italic text'' Two apostrophes (') on either side of the italic text Italic text
Image:Button_link.png Internal, or "Wiki" link [[Link Title]] Two square brackets on either side of the link Link Title OR Wikipedia OR User:Tiptoety/Adopt Pages that do not exist appear in red (Hence the name "red link"), blue if they do exist, and in bold if they link to the page they are on.
Internal link, but this time with a twist [[Link Title|displayed text]] An internal link, with a pipe (usually found under the backspace) separating the title and the text to be displayed The free encyclopedia By inserting a pipe, you can make different text appear. Clicking on the link to the left will bring you to Wikipedia.
Image:External link icon.png External link [http://www.example.org link title] A single square bracket on either side of the URL and title. The URL and link title are separated by a space. link title The arrow you see indicates an external link. Other symbols represent other types of pages: A lock for an https:// or "secure" site, an Adobe PDF logo for .pdf extensions, a smiley-face speech bubble for irc:// channels, among others.
Image:Headline icon.png Level 2 section heading == Headline text == Two equals signs on either side of the headline. To avoid breaking the Table of Contents, I will not demonstrate this here. The heading with your username is a level 2 header, and the heading above this table (Wikimarkup 101) is a level 3 (=== level 3 ===) Lower-level headers can be created with more equals signs. Only one equals sign on either side makes a level 1, usually only found in the title of the page. Level 2 headers are most common, and levels 3 and lower allow more specific divisions.
Image:Image icon.png Insert image [[Image:Example.png]] Exactly the same as an internal link, however the pipe works differently. The Image: prefix and .jpg (or whatever) extension MUST be present. The image size, framing, location, and captioning can all be controlled using the pipe character mentioned before. The most common application is [[Image:Example.png|thumb|caption here]], which produces a captioned thumbnail as you see in the picture of the toolbar above. Further settings are described in Wikipedia:Extended image syntax.
Image:Media icon.png Insert media [[Media:Example.ogg]] OR [[Image:Example.ogg]] Exactly the same as an internal link, however pipes should not be used. The "Media:" OR "Image:" prefix and ".ogg" extension MUST be present. Media:Example.ogg OR
Image:Example.ogg
 Sound files are always in .ogg format, for reasons we'll get to later on. Don't worry if you've never heard of it before, the MediaWiki software features a built-in player, which you can get to appear by using the "Image:" prefix instead of "Media:". It doesn't make any sense to me, but that's how it works.
Image:Math icon.png Mathematical formula <math>Insert formula here</math> Two math "tags", a technical term (not really) for two angle brackets surrounding the word "math". A closing tag is indicated with a slash. Insertformulahere
a2 + b2 = c2		 This gets super-complicated and math formulas are only used on a limited number of articles anyway, so I won't go into too much detail. If you really want to play with it, there's an index of character codes at Help:Math.
If these formulas do not display properly, please let me know.
Image:Nowiki icon.png Ignore wiki formatting <nowiki>[[Insert]] '''non-formatted''' ''text'' here</nowiki> Two "nowiki" tags. [[Insert]] '''non-formatted''' ''text'' here This code I've been using throughout the table to show you the code. Any wikimarkup inside a nowiki tag is ignored and displayed as written.
Image:Signature icon.png Signature with time stamp --~~~~ The operative bit of the code is four tildes (that squiggly bit next to the 1 key). The two dashes don't do anything. Tiptoety talk 05:05, 25 February 2008 (UTC) Three tildes (top) only display your signature. Four tildes (middle) show your signature with a timestamp, and are most commonly used. Five tildes (bottom) give only the timestamp.
Image:H-line icon.png Horizontal line ---- Four dashes.
Please use sparingly.
Buttons shown below this line are only used on Wikipedia. While the code will do the same thing on other wikis, you may not see a button for it on your toolbar.
Image:Button redirect.png Create a redirect #REDIRECT [[Insert title]] The phrase "#REDIRECT" followed by a wikilink to the target page. Preview "Acidic", a redirect page Redirects are intended to correct spelling and capitalization mistakes in searches (since the search sucks) and reduce confusion over related terms. Any link to a redirect page will send you instead to the target - for example, click on Acidic and see where it takes you.
WARNINGS: The code must be on the first line of a page to operate. Also, NEVER redirect to a redirect. This creates a "double redirect", which can screw up the server, your browser, and your brain, if you're the one trying to search for something.
Image:Button strike.png Strike-through text <s>Strike-through text</s> This is one of the few active HTML tags. It's two "s" tags around the text. Strike-through text This is usually used when someone is retracting a comment they made in a discussion or talk page, but wishes to leave the comment visible as a matter of record. Note that even if something is removed on Wikipedia, you can still find it in the history.
Image:Button enter.png Line break Before<br />After Again, an HTML tag. A single tag with two variations: <br> or <br />. I haven't been able to find any difference between the two. Before
After		 Useful on Wikipedia because simply hitting "Enter" doesn't work. You have to hit enter twice to make a new paragraph, or use this to knock it down a line.
Image:Button sup letter.png Superscript x<sup>3</sup> HTML "sup" tags x3 Not much to say here. This is NOT what you use to make footnotes, though. That button comes later. This also doesn't work in math formulas, so don't try it.
Image:Button sub letter.png Subscript H<sub>2</sub>O HTML "sub" tags H2O See above.
Image:Button small text.png Smaller text <small>Small Text</small> Big text HTML "small" tags Small Text Big text Nothing to say here either.
Image:Button hide comment.png Comment <!-- Comment --> Same as the HTML code for comments. Angle bracket, exclamation point, two dashes, your comment, two dashes, closing angle bracket. Note how nothing appeared in that box. There is something there, it just didn't print. These are usually used to leave unobtrusive messages to editors about articles. For a funny example of a comment in action, go to Madness and click the edit button.
Image:Button gallery.png Picture gallery <gallery>

Image:Example.png|Caption1
Image:Example.png|Caption2
</gallery>

 Two "gallery" tags, which enclose a list of images to be included in the gallery. Captions can be added by inserting a pipe after the image name, followed by the caption. Demonstration not possible here. Click the link to the left to see an example. Galleries are a way to show several pictures in an article without cluttering them up, but they have been criticized for being "tacky," and really should be used sparingly.
Image:Button blockquote.png Quoted text (appears indented) other text<blockquote>

abc
</blockquote>other text

 Two "blockquote" tags around the quote other text

abc

other text		 Should be used for extended quotes. If you use this, make sure to provide a source for the quote, and to use direct quotes as little as possible to avoid copyright infringement.
Image:Button array.png Insert table {| class="wikitable"

|-
abc
|}

 Table syntax is complicated, and we'll cover that later on. This is a table. Like I said, we can cover this in a separate lesson if you want. It's not something I'm going to require.
Image:Button reflink.png Add a reference (footnote) blah blah<ref>Reference</ref> Two "ref" tags around the reference text. blah blah[1] References are displayed using the code <references />. There's a fancy bit of coding you can do to make the same reference appear multiple times, demonstrated in the second line. By adding a name="blah" parameter to the first instance of a reference, you can make the same reference appear more than once. I have these footnotes displayed below the table so you can see how they appear.
Add a duplicate reference blah blah<ref name="copy">Duplicate</ref> blah blah<ref name="copy"/> The duplicate reference has a slash at the end of the tag. blah blah[2] blah blah[2]

[edit] The references

(That was a level 4 header, with four equals signs)

  1. ^ Reference
  2. ^ a b Duplicate

[edit] Other stuff

You can make lists and indents by adding characters to the beginning of a paragraph, like so:

A space before your paragraph will make the paragraph display in a box with machine font, and will cause it to run off the page if it is long enough.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A colon (:) will cause a block indent, with all lines starting away from the edge of the page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

An asterisk (*) will make a bullet.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A pound or number sign (#) makes a numbered list.

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can mix and match the last three characters to get several different effects. The only caveat, though, is that you must have a continual line of #'s in order to maintain the numbering. This does not mean, however, that the numbered list has to be displayed at all times. See below for an example:

This code Produces this
:Lorem
:*Ipsum
:*#Dolor
:*#Sit
:*#*Amet
:*#Consectetur
Adipisicing
:::Edit
Lorem
  • Ipsum
    1. Dolor
    2. Sit
      • Amet
    3. Consectetur

Adipisicing

Edit

Note that you don't have to hit enter twice when starting a new line from one of these types of paragraphs. However, when you don't use them, you do. Those last two sentences are on a different line from this one in the editing box, but there is no line break when they are displayed.

That's all I have for now. Please let me know what questions you have, although try playing with the code in your sandbox first.

[edit] The assignment

Create a subpage and just play around. Show me that you know all the stuff that I taught in the lesson above. Just have fun with it. :p