View source for User:Roux/AdoptionProgram/Lesson4

{| align="left" width=100% style="background: none;text-align: left;margin:auto;-moz-border-radius-topright:20px;-moz-border-radius-bottomleft:20px; padding: 6px; border:2px solid #{{User:Roux/Colours}};color:#{{User:Roux/Colours}};font-family=Calibri, Myriad, Trebuchet MS, sans serif;"
!'''editing 101'''
|-
|{{divhide|lesson|95%}}
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.

[[Image:Editing-toolbar-example1.png|The editing toolbar, minus a few buttons|thumb]] 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 so often 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 [[Help:Edit conflict|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:Roux/AdoptionProgram]]) is a subpage of [[User:Roux]]. 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:Roux/Example''' and creating it (don't save it, though).

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 ("Roux", for example) and click the button. It will bring you to your own personal sandbox, which you can start using right away.

<inputbox>
type=create
editintro=
preload=
default=User:YOURUSERNAME/sandbox
buttonlabel=Create this page!
width=50
</inputbox>

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

{| class="wikitable" style="text-align:center;"
|- 
! Toolbar<br>Button !! What it does !! The code it makes !! Short description !! What it looks like !! Notes
|-
|[[Image:Bold icon.png]]
|Bold text
|<nowiki>'''Bold text'''</nowiki>
|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
|<nowiki>''Italic text''</nowiki>
|Two apostrophes (') on either side of the italic text
|''Italic text''
|
|-
|rowspan="2"|[[Image:Button_link.png]]
|Internal, or "Wiki" link
|<nowiki>[[Link Title]]</nowiki>
|Two square brackets on either side of the link
|[[Link Title]] OR [[Wikipedia]] OR [[User:Roux/AdoptionProgram]]
|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
|<nowiki>[[Link Title|displayed text]]</nowiki>
|An internal link, with a pipe (usually found under the backspace) separating the title and the text to be displayed
|[[Wikipedia|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
|<nowiki>[http://www.example.org link title]</nowiki>
|A single square bracket on either side of the URL and title. The URL and link title are separated by a space.
|[http://www.example.org 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
|<nowiki>== Headline text ==</nowiki>
|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 (<nowiki>=== level 3 ===</nowiki>)
|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
|<nowiki>[[File:Bad Title Example.png]]</nowiki>
|Exactly the same as an internal link, however the pipe works differently. The Image: prefix and .jpg (or whatever) extension MUST be present.
|[[File:Bad Title Example.png|50px]]
|The image size, framing, location, and captioning can all be controlled using the pipe character mentioned before. The most common application is <nowiki>[[File:Bad Title Example.png|thumb|caption here]]</nowiki>, 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
|<nowiki>[[Media:Example.ogg]] OR [[Image:Example.ogg]]</nowiki> <!-- Please leave as .ogg! This is used for demonstrative purposes! -->
|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]] <!-- Please leave as .ogg! This is used for demonstrative purposes! -->
|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
|<nowiki><math>Insert formula here</math></nowiki>
|Two math "tags", a technical term (not really) for two angle brackets surrounding the word "math". A closing tag is indicated with a slash.
|<math>Insert formula here</math><br><math>a^2 + b^2 = c^2</math>
|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]].<br>If these formulas do not display properly, please let me know.
|-
|[[Image:Nowiki icon.png]]
|Ignore wiki formatting
|<nowiki><nowiki>[[Insert]] '''non-formatted''' ''text'' here</nowiki></nowiki>
|Two "nowiki" tags.
|<nowiki>[[Insert]] '''non-formatted''' ''text'' here</nowiki>
|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
|<nowiki>~~~~</nowiki>
|The operative bit of the code is four tildes (that squiggly bit next to the 1 key). The two dashes don't do anything.
|<span style="font-family:Trebuchet MS; color:navy;">'''[&nbsp;[[User:Roux|<span style="color:olive">roux</span>]]&nbsp;]&nbsp;['''[[User talk:Roux|<span style="color:olive;">x</span>]]''']'''</span><br><span style="font-family:Trebuchet MS; color:navy;">'''[&nbsp;[[User:Roux|<span style="color:olive">roux</span>]]&nbsp;]&nbsp;['''[[User talk:Roux|<span style="color:olive;">x</span>]]''']'''</span> 23:09, 20 October 2008 (UTC)<br>23:09, 20 October 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
|<nowiki>----</nowiki>
|Four dashes.
|
----
|Please use sparingly.
|-
!colspan=6|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 [[WP:RDR|redirect]]
| <nowiki>#REDIRECT [[Insert title]]</nowiki>
| The phrase "<nowiki>#REDIRECT</nowiki>" followed by a wikilink to the target page.
| [{{fullurl:Acidic|redirect=no}} 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.<br>'''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
| <nowiki><s>Strike-through text</s></nowiki>
| This is one of the few active HTML tags. It's two "s" tags around the text.
| <s>Strike-through text</s>
| 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 [[Help:Page history|history]].
|-
| [[Image:Button enter.png]]
| Line break
| <nowiki>Before<br />After</nowiki>
| Again, an HTML tag. A single tag with two variations: <nowiki><br> or <br /></nowiki>. I haven't been able to find any difference between the two.
| Before<br />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
| <nowiki>x<sup>3</sup></nowiki>
| HTML "sup" tags
| x<sup>3</sup>
| 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
| <nowiki>H<sub>2</sub>O</nowiki>
| HTML "sub" tags
| H<sub>2</sub>O
| See above.
|-
| [[Image:Button small text.png]]
| Smaller text
| <nowiki><small>Small Text</small> Big text</nowiki>
| HTML "small" tags
| <small>Small Text</small> Big text
| Nothing to say here either.
|-
| [[Image:Button hide comment.png]]
| Comment
| <nowiki><!-- Comment --></nowiki>
| Same as the HTML code for comments. Angle bracket, exclamation point, two dashes, your comment, two dashes, closing angle bracket.
| <!-- Comment -->
| 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]]
| [[Help:Images_and_other_uploaded_files#Gallery_tag.2C_category.2C_table_of_images|Picture gallery]]
| <nowiki><gallery></nowiki><br>
Image:Example.png|Caption1<br>
Image:Example.png|Caption2<br>
<nowiki></gallery></nowiki><br>
| 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)
| <nowiki>other text<blockquote></nowiki><br />
<nowiki>abc</nowiki><br />
<nowiki></blockquote>other text</nowiki>
| Two "blockquote" tags around the quote
| other text<blockquote>
abc
</blockquote>other text
| Should be used for extended quotes. If you use this, make sure to provide a [[WP:RS|source]] for the quote, and to use direct quotes as little as possible to avoid copyright infringement.
|-
| [[Image:Button array.png]]
| Insert table
| <nowiki>{| class="wikitable"</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>abc</nowiki><br />
<nowiki>|}</nowiki>
| 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.
|-
|rowspan=2| [[Image:Button reflink.png]]
| Add a reference (footnote)
| <nowiki>blah blah<ref>Reference</ref></nowiki>
| Two "ref" tags around the reference text.
| blah blah<ref>Reference</ref>
|rowspan=2| References are displayed using the code <nowiki><references /></nowiki>. 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 <code>name="blah"</code> 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
| <nowiki>blah blah<ref name="copy">Duplicate</ref> blah blah<ref name="copy"/></nowiki>
| The duplicate reference has a slash at the end of the tag.
| blah blah<ref name="copy">Duplicate</ref> blah blah<ref name="copy"/>
|-
|}

==== The references ====

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

{{reflist}}

==== 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 <code>machine font</code>, and will cause it to run off the page if it is long enough.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
A colon (:) will cause a block indent, with all lines starting away from the edge of the page.
:<small>{{lorem ipsum span}}</small>
An asterisk (*) will make a bullet.
*<small>{{lorem ipsum span}}</small>
A pound or number sign (#) makes a numbered list.
#First item
#Second item
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:
{|class="wikitable" style="width:30%; margin:0px auto 0px auto;"
|-
!This code
!Produces this
|-
|<code><nowiki>
:Lorem</nowiki><br><nowiki>
:*Ipsum</nowiki><br><nowiki>
:*#Dolor</nowiki><br><nowiki>
:*#Sit</nowiki><br><nowiki>
:*#*Amet</nowiki><br><nowiki>
:*#Consectetur</nowiki><br><nowiki>
Adipisicing</nowiki><br><nowiki>
:::Edit</nowiki></code>
|
:Lorem
:*Ipsum
:*#Dolor
:*#Sit
:*#*Amet
:*#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.
{{divhide|end}}
|-
|{{divhide|assignment|95%}}
Create a sandbox or subpage and just play around. Show at least one example of each code type (except redirects) listed above.
{{divhide|end}}
|}