Step 1 Create	Step 2 Edit	Step 3 Beautify	Step 4 Network	Step 5 Final Tips

---

 

This step is for those of you who want to go beyond the basics and are interested in being more creative with the editing of your wikipage. Here are some examples of pages you can create after practicing the tips described here:

• About WiserEarth
• WiserEarth Supporters
• Permaculture
• Climate Change
• Issue Areas (mockup)

 

1. Fundamentals

---

What you need are aesthetics, design and time.

Image credit: splorp

Aesthetics are a matter of taste but most people can differentiate between a wikipage that looks good and is engaging from one that is dull. Design refers to the layout, the font, the text size, colors, images and white space that meet the purpose you have for the page. Time is simply required to create more complex effects. It can also mean re-editing your wikipage several times as needed.

 

2. Readability and Visual Appeal

---

Let's start with these fundamental objectives.

Readability

No matter how good your content is, if it's difficult to read, then people simply won't.
Of the two below, which one is easier on the eyes?
Which one is more pleasing to read?
Which one would you use to present your thoughts, your meeting minutes, or your project report?

 

Some tips on increasing the readability of your page:

• Use shorter paragraphs.
• Don't write long sentences.
• Use bold text or headings to format the title of a document's sections.
• Use bullet points or numbers to list things instead of writing them as a paragraph.
• Put emphasis on important parts of the text using bold or italics.
• Indent and italicized quoted text like the example above. 

Visual Appeal

Once your wikipage is readable, you'll want to increase the likelihood that people will notice it and read through. That's where you need to be more creative with the visuals. Here's how adding one image and several horizontal rulers can change the looks of your wikipage:

 

 

3. Design Elements

---

To reach a sufficient level of readability and visual appeal you need to understand several key design elements.

Layout

This is how you divide your content. Do you want it to be single column? Two or three columns? Or more complex ones? Which should be prominent and thus bigger in size? Which should be less prominent?

Image credit: flickr / Stewfs

 

Typography

This is about your text. What font to use? Which size where and when? Bold, italic, heading? Colors?

There are whole websites that uses only text but manages to look good regardless.

 

Image credit: flickr / darkmatter & Stewfs

 

Images

 

Truer than ever: one picture says a thousand words. Selecting the right picture for your wikipage can make all the difference. Here are some places you can hunt for free images with a Creative Commons license. This is a license that enables reuse, modify and remix images, free of charge. Remember to put a "Image by: imagecreator" somewhere in the wikipage to acknowledge the image creator's work.

Compfight

FlickrStorm

 

Colors

If black over white is no longer sufficient. You can get creative with colors. Change the background of your wikipage, change the text color, change hyperlink colors. If you're not careful though, using colors may end up creating a wikipage with low readability and less visual appeal.

 

Image credit: flickr / net_efekt & miskan

 

White space

These are spaces where you don't put any content at all, those spaces between content segments. All text and image with no white space makes your wikipage difficult to read. Here are some examples of good white space usage on two websites. You can replicate these in wikipages.

 

You can apply some of these design elements in your wikipage using the standard editing toolbar explained in Step 2 of this tutorial. But to implement all of them fluently in your wikipage, you'll need to understand HTML coding.

 

4. Getting to Know HTML

---

Almost all the buttons we've learned in Step 2 are to automate HTML usage to format text, create tables, insert images, etc. For example the  button is used to represent an HTML code that makes selected text looks bold. You can edit your wikipage at the HTML source level by using the  button.

Here's how a simple paragraph with bold text looks like in normal view and in HTML view:

This is an example paragraph. Some text are bold, while others are normal. By the end of this sentence, I pressed 'Enter' key twice on my keyboard.   Here's the beginning of the second paragraph. This paragraph is aligned to the right.

<p>This is an example paragraph. <strong>Some text are bold</strong>, while others are normal. By the end of this sentence, I pressed 'Enter' key twice on my keyboard.</p> <p>&nbsp;</p> <p style="text-align: right;">Here's the beginning of the second paragraph. This paragraph is aligned to the right.</p>

A paragraph uses the <p> </p> HTML code produced by pressing 'Enter' key. A bold phrase use the <strong> </strong> code produced by pressing the button. Aligning the second paragraph to the right with the  button, produces the <p style="text-align: right;"> </p> code.

So, this is pretty much what HTML code is about:

• Elements with pairs of tags. For paragraph, the element is 'p' and used with one opening tag <p> and one closing tag </p>.
• Attributes inside the opening tag. In the above example, it's style="text-align: right;". There are many kinds of attributes too. 

A fact: entire pages on the internet were once built just using HTML. That's how powerful it was and still is. However, as is the case with any tool, mastering HTML takes some effort and time.

 

5. Teach Yourself HTML

---

You don't need to learn every HTML code for creating the pages mentioned at the beginning of this page. But it might be good to get an overview of what's available:

• Read the HTML article on wikipedia, which includes the history of HTML
• For a comprehensive and well-structured HTML tutorial, go here.
• For a list and how-to of HTML elements, go here.
• For a list and how-to of HTML attributes, go here.
• To see the HTML elements and attributes commonly used in WiserEarth, go to our HTML Help page.

Or, you can start practicing right away with the following codes in our practice wiki!

 

6. Let's Practice!

---

To start editing a wikipage using HTML code, you need to click the  button in editing mode. The HTML code will open in a new window.

Tips: When you're editing a lengthy wikipage, you can search for the part of the code you want to edit by using the browser's 'Find' feature (usually under the 'Edit' option or by pressing Ctrl+F). For example, below is a screenshot on the HTML code section that corresponds to this part. The search term is "let's practice".

 

 

6.1. Insert horizontal line to divide content

---

You will need to add <hr /> for each line you want to add to a wikipage. WiserEarth employs a one pixel grey colored line as seen above. You can create thicker lines like the one shown below, with other colors using the <div> tag.

Here's the code for it:

<div style="border:2px solid #D39E73; margin: 0 0 10px 0;">
</div>

...which specify that the line be two pixel thick, brown, with a bottom margin of 10px (this is the distance between the line and the paragraph below it (more on margin later). Try it out in the practice wiki.

 

6.2. Change colors

---

When the built-in toolbar can not solve your need to change colors of a page's element, you need to find the HEX code of your desired color. In the example above with the horizontal line, brown's HEX code is #D39E73. Go to this wikipedia article for more explanation and examples. Many desktop image editors have a color palette that will show you the HEX code for each color.

 

6.3. Modify hyperlinks text color and formatting

---

The standard color for hyperlinked text is blue. You can change it to other colors and stye.For example:

Human Population Growth and Impacts (red, normal)

Human Population Growth and Impacts (green, bold)

Here's the HTML code for it:

<p><a href="http://www.wiserearth.org/article/a64b8397f89acb0c57d9da3a65ad591b"><font style="color: red;">Human Population Growth and Impacts</font></a> (red, normal)</p>
<p><font><a href="http://www.wiserearth.org/article/a64b8397f89acb0c57d9da3a65ad591b"><font style="color: green;"><strong>Human Population Growth and Impacts</strong></font></a></font> (green, bold)</p>

The element is 'font' and the attribute is 'color'.

 

6.4. Margin and padding

---

In the horizontal line example above, there's a style called 'margin' with 0 0 10px 0 attributes. This means that the line has 0px top margin, 0px right margin, 10px bottom margin, and 0px left margin (going clockwise). The 10px bottom margin serve to separate the line with the subsequent content (can be text, image or video).

Padding on the other hand is often used in tables. It defines the spacing between a table cell's border with the content in it. It can be set using the built in table editor described in Step 2 of this tutorial, or in the same way as 'margin' style described above, which allows for finer tuning (top, right, bottom, left).

Go here for a visual illustration and further explanation >>

 

6.5. Single-cell table with borders to frame your content

---

Here's an example:

Content: Integer turpis, tortor consequat condimentum dapibus sapien, sed vel aliquet nulla taciti sollicitudina. Dapibus sapien, sed vel aliquet nulla taciti sollicitudin, etiam nulla sapien quam sed wis. Tortor consequat condimentum dapibus sapien, sed vel aliquet nulla taciti sollicitudin. Dapibus sapien, sed vel aliquet nulla taciti sollicitudin, etiam nulla sapien quam sed wis. Tortor consequat condimentum dapibus sapien, sed vel aliquet nulla taciti sollicitudin.

And here's the code:

<table style="border: 1px solid #cccccc; background-color: #f8f8f8; padding: 20px;" border="0" width="100%">
<tbody>
<tr>
<td>

<p>Content: Integer......</p>

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

Observe how setting padding to 20px create a space between the table's border and the content. We also added another attribute called 'background-color' there.

 

6.6. Use a 'div' tag to frame content

---

Similar to using tables, you can also use the 'div' tag to frame content.

 

Here's the much leaner code!

<div style="border: 1px solid #cccccc; background-color: #f8f8f8; padding: 20px;" border="0" width="100%"><p>Content: Integer......</p>

</div>

 

6.7. Scrollable list box

---

Have you seen one of these around?

This box shows the example of a scrollable box that can be filled with bulleted items: Point 1 Point 2 Point 3 Point 4 Point 5 Point 6 Point 7 Point 8 Point 9 Point 10 Point 11 Point 12

 

This is particularly useful to save vertical space. Each item in the list above can be text, image or video. Width is adjustable by dragging the table borders in editing mode. Here's the code:

<table style="border: 1px solid #c9dbbc; width: 350px;" border="0">
<tbody>
<tr>
<td>
This box shows the example of a scrollable box that can be filled with bulleted items:<br />
<ul style="overflow: auto; height: 100px;">
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
<li>Point 5</li>
<li>Point 6</li>
<li>Point 7</li>
<li>Point 8</li>
<li>Point 9</li>
<li>Point 10</li>
<li>Point 11</li>
<li>Point 12</li>
</ul>
</td>
</tr>
</tbody>
</table>

Applied to the 'ul' (unordered list) element is the style="overflow: auto; height: 100px;" attribute.

 

6.8. Selectively set the borders of a table or cell

---

Use the "border-left", "border-right", "border-top" and "border-bottom" attributes.

content

content

content

This will be useful to create horizontal and vertical lines to divide your content. Here's the code for the third table with thick top and bottom borders, grey right border, and no left border:

<table style="border-top: 3px solid #000000; border-right: 1px solid #cccccc; border-bottom: 3px solid #000000; background-color: #f8f8f8" border="0" width="40%">
<tbody>
<tr>
<td>
<p>content</p>
</td>
</tr>
</tbody>
</table>

 

6.9. Rounded corners with table

---

Content: Integer turpis, tortor consequat condimentum dapibus sapien, sed vel aliquet nulla taciti llicitudina. Dapibus sapien, sed vel aliquet nulla taciti sollicitudin, etiam nulla sapien quam sed wis.Tortor consequat condimentum dapibus sapien, sed vel aliquet nulla taciti sollicitudin. Dapibus sapien, sed vel aliquet nulla taciti sollicitudin, etiam nulla sapien quam sed wis. Tortor consequat condimentum dapibus sapien, sed vel aliquet nulla taciti sollicitudin.

 

 

6.10. Create navigation linking several pages

---

Using single cell tables and font size/style a bit creatively can result in the following navigation pane for linking your wikipages:

Link 1 | Link 2  | Page in View  |  Link 4

If this is useful, you can just copy paste the above navigation to your wikipage, and then modify the links.

 

6.11. Use tables to set the layout of your wikipage

---

Back in the old days, tables were used to structure a web page. You basically create tables with certain number of columns, rows, have some of them merged, use some of them for spacing content, etc.

Here's an example of using a table with two columns, one row, 5px padding and 100% width to structure bulleted items. You can use the built in table editor for this.

These are items on the left column: Unordered item C Unordered item B Unordered item Z

These are items on the right column: Ordered item Ordered item Ordered item Ordered item Ordered item Ordered item

And here's the code:

<table border="0" cellpadding="5" width="100%">
<tbody>
<tr>
<td>These are items on the left column:
<ul>
<li>Unordered item C</li>
<li>Unordered item B</li>
<li>Unordered item Z</li>
</ul>
</td>
<td>These are items on the right column:

<ol>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
</ol>

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

To put the content on the left column aligned on top, you need to click the button on that cell of the table, and choose 'top' as vertical alignment. Here's what you'll get:

These are items on the left column: Unordered item C Unordered item B Unordered item Z

These are items on the right column: Ordered item Ordered item Ordered item Ordered item Ordered item Ordered item

With this, a 'valign' attribute is applied to the 'td' element for the left column (in bold green)

<table border="0" cellpadding="5" width="100%">
<tbody>
<tr>
<td valign="top">These are items on the left column:<br />
<ul>
<li>Unordered item C</li>
<li>Unordered item B</li>
<li>Unordered item Z</li>
</ul>
</td>
<td>These are items on the right column:<br />
<ol>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
<li>Ordered item</li>
</ol>
</td>
</tr>
</tbody>
</table>

 

6.12. Use nested tables for even more flexible layout for your wikipages

---

Here's an example of nested tables. The title and content section expands downward independently of title and content in the right section. This is quite unlike a single table where the left column and the right column is interlocked by the same row.

Section 1 Title contents contents contents contents contents contents contents Section 2 Title contents contents contents contents contents contents contents

Section Title 3 contents contents contents Section Title 4 contents contents contents Section Title 5 contents contents contents Section Title 6 contents contents contents

The code is rather long, so it's posted in the appendix at the bottom of this page. You might want to just copy paste it and customize the color, width, padding, margin, etc. Or, figure out how to make one yourself! If you can do this, you're quite done with HTML coding.

The trick is to start with the outermost table, divide into columns, and copy paste the code of each table in appropriate column. The one above use two columns outermost table where each column's with is 50%. Then code for individual tables is inserted into each row on each column of this outermost table. To compare the real thing with the code, you might want to open two browser tabs for this Step 3 tutorial. The first one to view the table above, and the second one to view the code at the bottom appendix section.

Here's an example of a page making good use of nested tables and a wikipage set to 'wide' via the 'Edit title' link: Issue Areas (mockup - landing page)

 

6.13. Make formatting a table easier with a desktop spreadsheet editor

---

You can optionally use your favorite spreadsheet editor like Microsoft Excel or OpenOffice Calc to create tables, merge cells, change colors, change borders, insert content, etc. Once it's finished you can just copy paste to a wikipage. Manual coding is still more powerful for formatting your wikipage.

Here's an example of a wikipage created with this technique: Group Administrator Survey Results

 

APPENDIX

---

Code for nested tables in section 6.12.:

<table border="0" width="100%" bgcolor="green">
<tbody>
<tr>
<td width="50%" valign="top">
<table border="0" width="100%">
<tbody>
<!-- BEGIN SECTION 1 -->
<tr>
<td bgcolor="#a9a238"><strong style="font-size: 14px">Section 1 Title</strong><br /></td>
</tr>
<tr>
<td bgcolor="#fffabf">contents<br />contents<br />contents<br />contents<br />contents<br />contents<br />contents<br /></td>
</tr>
<!-- END SECTION 1 -->
<!-- BEGIN SECTION 2 -->
<tr>
<td bgcolor="#a9a238"><strong style="font-size: 14px">Section 2 Title</strong><br /></td>
</tr>
<tr>
<td bgcolor="#fffabf">contents<br />contents<br />contents<br />contents<br />contents<br />contents<br />contents<br /></td>
</tr>
<!-- END SECTION 2 -->

</tbody>
</table>
</td>
<td width="50%" valign="top">
<table border="0" width="100%">
<tbody>
<!-- BEGIN SECTION 3 -->
<tr>
<td bgcolor="#a9a238">
<strong style="font-size: 14px">Section Title 3</strong></td>
</tr>
<tr>
<td bgcolor="#fffabf">contents<br />contents<br />contents<br /></td>
</tr>
<!-- END SECTION 3 -->
<!-- BEGIN SECTION 4 -->
<tr>
<td bgcolor="#a9a238">
<strong style="font-size: 14px">Section Title 4</strong></td>
</tr>
<tr>
<td bgcolor="#fffabf">contents<br />contents<br />contents<br /></td>
</tr>
<!-- END SECTION 4 -->
<!-- BEGIN SECTION 5 -->
<tr>
<td bgcolor="#a9a238">
<strong style="font-size: 14px">Section Title 5</strong></td>
</tr>
<tr>
<td bgcolor="#fffabf">contents<br />contents<br />contents<br /></td>
</tr>
<!-- END SECTION 5 -->
<!-- BEGIN SECTION 6 -->
<tr>
<td bgcolor="#a9a238">
<strong style="font-size: 14px">Section Title 6</strong></td>
</tr>
<tr>
<td bgcolor="#fffabf">contents<br />contents<br />contents<br /></td>
</tr>
<!-- END SECTION 6 -->

---

< Return to Step 2

Go to Step 4 >