Help:Editing

From intermedia@uiowa.edu

Jump to: navigation, search

Contents

Under the hood

Please note that this page is open for editing. If you figure out something about editing wiki pages that you want the other users of this wiki to know, please edit this page to include this. This page describes the specific editing schema adopted by the Intermedia Wiki and covers a small subset of the formatting possibilities. Wikis, in addition to recognizing the HTML codes described here, have their own extensive formatting language. You can get more general information on wiki formatting here: http://meta.wikimedia.org/wiki/Wiki_text_formatting_help and more help for wiki in general here: http://meta.wikimedia.org/wiki/Help:Contents. If you are interested in learning more about HTML coding, a good site for this is: http://www.w3schools.com/

HTML tags: the basic idea

The layout of these intermedia pages utilizes HTML tables and paragraphs. This allows for a very flexible layout while requiring only a minimal knowledge of basic HTML, the language used to define web pages. When you open up a page for editing, you will see a lot of things enclosed in angle brackets (<>). These are HTML "tags." Tags have two parts: an opening tag, and a closing tag. Each of these are enclosed in the angle brackets <>. Think of these tags like a light switch. The open tag turns the light switch on, and the close tag turns the light switch off. The simple example below shows how the "b" tag that makes text bold would be used.

<b>this text inside the tags will be bold</b> and this text outside of the tags is not bold
.

And the result of applying these tags is:
this text inside the tags will be bold and this text outside of the tags is not bold

Paragraph Tags (and paragraph "classes")

Paragraphs utilize the "p" tag. Similarly to the "b" tag shown above, the open paragraph tag is "<p>" and the close paragraph tag is "</p>". All text between these two tags is considered a paragraph, and each paragraph should include its own open and close tags. In addition to the open and close tags, paragraphs are typically assigned a "class." Think of the class as the type of paragraph, e.g. an indented paragraph or a flush left paragraph. In this intermedia wiki, we have defined a couple of classes of paragraphs that you might use "im" and "im-l-pad-30". The "im" (or intermedia) class is a standard paragraph that you should use for your text, and the "im-l-pad-30" class should be used for images because it has an extra margin. You assign the class to the paragraph in the opening tag as shown below

<p class="im">
The paragraph is assigned the class named "im" with the class="im" part of the opening tag. 
This class designation must be within the openingtag brackets. 
The close tag of the paragraph remains unchanged.
</p>

Paragraph alignment

Paragraphs are left aligned by default, but you can override this in the paragraph tag by including align="right" or align="center". You may want to do this for pictures or picture captions. Here is an example of how you would do this:

<p class="im" align="center">
This paragraph is aligned to the center
</p>
<p class="im" align="right">
This paragraph is aligned right
</p>

Notice in particular that the 'align=' instruction occurs in the opening paragraph tag before closing bracket'>'. Here is the result:

This paragraph is aligned to the center

This paragraph is aligned right

Another paragraph class used frequently on this wiki is "im-l-pad-30". This class has some space (padding) around it, and is used for pictures.

http://research-intermedia.art.uiowa.edu/wiki/skins/common/images/button_nowiki.png

HTML tables: the basic idea

Most pages on this wiki are formatted as HTML tables. This allows a great deal of flexibility in layout for the end-user (that's you) with just a little HTML knowledge. The Wiki language has its own codes for creating tables. However, these do not seem to be significantly easier to use than HTML tables, and HTML tables, while a little more verbose, are more customizable. HTML tables consist of three sets of nesting tags: the "table" tag, the "tr" or table row tag, and the "td" or table data tag. Nested tags are kind of like concentric circles whose lines cannot cross: "td" tags must be within opening and closing "tr" tags, which themselves must be within opening and closing "table" tags. To illustrate this, here is an example of the code to make an HTML table.

<table border="1" align="center">
<tr>
<td>This is some table data</td>
<td> This is some more table data in the first row</td>
</tr>
<tr>
<td>This is some table data in a second row</td>
<td> Table data, by the way, is not limited to text. <br />It can also be, for example, an image.</td>
</tr>
</table>

In this example, the <table>...</table> tags are the outermost concentric circle. Inside this are one or more sets of row tags <tr>...</tr>. And finally inside each of these row tags are one or more sets of data tags <td>...</td>. Here is the table that this code produces:

This is some table data This is some more table data in the first row
This is some table data in a second row Table data, by the way, is not limited to text.
It can also be, for example, an image.

If you are interested in learning a bit more about tables, here is a link to the tables section of w3schools.com www.w3schools.com/html/html_tables.asp


IntermediaWiki Default Layout using an HTML table

The default page layout for the Intermedia wiki (listed below) makes use of a simple table structure to establish a 2-column layout. Pages you create are certainly not limited to this layout, however, you may want to use this as a starting point. You can copy and paste the following code into your page as a template. The width of the columns can be adjusted using the width= attribute in the opening td tag. Currently it is set to width="67%" in the left column and width="33%" in the right column. If, for example, you wanted equally balanced columns, you would change these both to width="50%"

== Heading == 
<table border="0">
<tr><td valign="top" width="67%">
<!------------left column ------------->
<p class="im">
Text goes between the opening and closing paragraph tags. 
</p>

<p class="im">
</p>

</td> 

<td valign = "top" width="33%">
<!------------right column ------------->
<p align="right" class="im-l-pad-30">
Pictures here between the opening and closing paragraph tags
</p>

<p align="right" class="im-l-pad-30">
</p>

</td></tr></table>

Links

There are two broad classes of links, internal and external. Internal links point to pages on this intermedia wiki and external links point to pages elsewhere on the web. By convention, this wiki is set to open internal links in the same window and external links in a new window (or new tab). Internal and external links have a slightly different format.

Internal Links

There is a button at the top of the editing window for inserting internal links (the button with blue underlined "Ab"), or you can merely type them in. When you click on the button, it inserts the following at the point of your cursor
[[Link title]]
Replace the words "Link Title" with the name of your page, and you have created the link. When you save the page, the link will be red if the page does not exist, and blue if the page does exist. To create a wiki page, you simply click on the red link and begin editing the new page.

You may want the link to say something other than the name of the page. To accomplish this you use a pipe symbol "|" after the name of the page followed by the text for the link. For example, if you wanted a link to a page titled "Radical Art" but you wanted your reader to get to it by clicking on the word "POW!" you would do this as follows:
[[Radical Art|POW!]] which produces the link POW! that takes you to a page named "Radical Art".

External Links

The button with the globe and a page on it at the top of the editing screen inserts a blank external link. Clicking on the button adds:
[http://www.example.com link title]

To use this, you replace the "http://www.example.com" with a valid web page address (including the "http://" part--you can copy this from your browser's address bar) and you replace "link title" with the text you would like displayed for this link. The "link title" is optional. Without it, Wiki will assign the link a sequential number. For example:
[http://www.example.com] produces this numbered link [1]

A common practice is to copy the url without the http://as the link text. For example
[http://www.example.com www.example.com] which would produce the following link www.example.com

This is a not required, however. The link title can be any text you want.

Adding Images to your page

Uploading Images

To include an image in your page, you first need to upload it. In the footer menu of the page there is a link "Upload File" that will allow you to do this. Your file must be of a standard internet image format, usually JPEG, PNG, or GIF. And standard images should be sized to about 800 x 600 pixels. You only need to include one size of your image, as the wiki software will take care of resizing it to the size needed for your page. A good way to create images that are well suited for web display is to use Adobe Photoshop's "Save for Web and Devices" menu option. With this you can preview the result of saving the image in the various file types. The end goal is that you want the smallest file size possible that does not adversely impact the quality of your image. Once you have prepared your file, click on the upload file link, browse to find the file, give it a name, and upload. Once you have uploaded your file, you can include it on your page

Displaying Images

To place an image in your page, you add an image tag something like the one below:
[[Image:Example.jpg|200px|link=]]

Replace "Example.jpg" with the name of your image (the name you gave it when you uploaded it). If you have forgotten what this name is, there is a "special pages" link in the footer menu that will take you links that allow you to get all sorts of information, including a link Special:ListFiles that will list and allow you to view files that have been uploaded.

After the name of your image file, include a pipe character "|", and then the width in pixels (px) that you would like your image displayed. The example above displays the image with a width of 200 pixels. If you do not include a width, your image will be displayed at its full uploaded scale.

By default, wiki images are clickable links back to the uploaded file. In most instances, you will want to change this default. If you change it to "link=" as shown in the example above, the image will just be an image, and clicking on it produces no result. Another option is to have the image link to another page. This technique has been used in the people pages by including the page name to link to after the "link=". For example the following tag:
[[image:Coconut.jpg|100px|link=Mark NeuCollins]]
Displays an image "Coconut.jpg" at a width of 100px that serves as a link to a page named "Mark NeuCollins". Voila!

And In Conclusion

This is your wiki,..be bold, dive in, edit away. But most of all, have fun.