HTML for Bloggers

If you are going to blog using Wordpress, you can use the Visual Editor for basic posts, no problem at all. You can use the toolbar to format text, add links and images … lots of things.

When you want to start pushing the envelope to make your OM4 website look just the way you want? Well, a little bit of HTML knowledge goes a long way.

Using some basic HTML commands, you can achieve more advanced results with Wordpress and your OM4 website.

The Code Editor and HTML

Most web pages are written using HTML. The heading above this line is created using an HTML command. Bolding certain words means using HTML.

The Wordpress Visual Editor hides the HTML commands from you. If you select some text and press the B button (to bold the text), you see the text in bold.

But in the background, Wordpress has put some HTML tags around the words you asked to bold.

To use HTML while using the Visual Editor to edit a page or post, just click on the Code tab (next to Visual) and you will see the HTML view of the page.

If you are going to use HTML for anything more than the basics, you will find it easier to turn off the visual editor. Just go to Dashboard, Users, find your user profile and untick the Use Visual Editor check box. [Note: in April 2008 Wordpress upgraded the Visual Editor - using the newer version, it is best to leave the Visual Editor on and use the HTML tab when you want to edit the HTML]

Introduction to HTML

Let’s start with an example. You need to format a few words in your web page so they are displayed in bold type.

To display words in bold type, you need to use HTML, specifically the strong tag. Here is what you type:

A web site is a <strong>great</strong> way to communicate!

and here is how it appears in your web page:

A web site is a great way to communicate!

HTML uses tags, surrounded by the angle brackets <strong>. First you open the tag - in the example above that is <strong>. And then you close the tag, by repeating the same tag but with a / in front - from the same example that is </strong>.

You can have any number of characters between the opening and closing tags.

Where you can use HTML

Would you like complete control over your menus? Be able to use images as buttons to link to other pages? Include tables in your website? HTML lets you do these things.

You can use HTML tags:

• In posts and pages
• In sidebar text widgets
• In OM4 Options for the menubar and footer

Ok, so now you know about HTML tags, lets look at a few useful examples.

Simple HTML Formatting tags

These tags have formatting rules in the site stylesheet that determine how the tags look for your site. In some cases you can configure Site Design settings that control the look.

Headings. Use the h2, h3 and h4 tag to include headings, and format the way they appear in Site Design. The heading above is a Level 3 Heading:
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>

Blockquote. Use the blockquote tag to format quotations, and format the way they appear in Site Design.

<blockquote>It was a fantastic book!</blockquote>

And here is how it looks:

It was a fantastic book!

Note in the Visual Editor, the indent button applies this tag.

Bold. Use the strong tag to bold text

<strong>Bolded text</strong>

Italics. Use the em tag to italicise (emphasise) text:
<em>Italicised (emphasised) text</em>

Underline. Use the underline tag to - you guessed it - underline text:
<u>Underlined text</u>

Bullets and Numbered Lists

Bulleted = unordered list
Numbered = ordered list

To format a list directly using HTML, you need to know that each type of list uses either the ul or ol tag (unordered list or ordered list)

Then, each line item in the list uses the li tag.

Here is a list with two bulleted items:

• First item
• Second item

Here is the HTML to create this bulleted list.

<ul>
<li>First item</li>
<li>Second item</li>
</ul>

To change the bullets to numbers, just use the ol tag instead of the ul tag:

1. First item
2. Second item

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Tables

Tables are handy for laying out text.

The extended toolbar for the visual editor has table buttons that help create the layout for a table. But for anything more than simple tables, you will find it easier to format them by hand.

Here are the basics:

• Each table opens and closes with the table tag <table> </table>
• Each row opens and closes with a tr tag <tr> </tr>
• Each data cell opens and closes with a td tag <td> </td>

That is it. You can put as much text in each cell as you like. And images.

Here is a basic two column table (indenting isn’t required, its just to illustrate structure). First of all you can see the HTML used for the table, and after that the table as shown by the browser.


<table>
<tr>
<td>Day</td>
<td>Mission</td>
</tr>
<tr>
<td>Saturday</td>
<td>Walk Dog</td>
</tr>
<tr>
<td>Sunday</td>
<td>Walk Cat</td>
</tr>
</table>


Table Borders

Modern table borders use CSS, and can get quite complicated. Here is a simple way to use them however.

By default, we use simple row borders (that is, lines only between rows), as that minimises visual clutter and lets your reader focus on what is in the table (not the borders). If you have read Edward Tufte, you may recognise that this approach gives a better data-to-ink ratio than using box style borders for tables. The styling for row based borders is already in the default style sheet*.

In some situations you may want to turn off table borders altogether. There are two steps involved in doing this. Firstly, add two new rules to your Custom CSS field in Dashboard, Presentation, Site Design:

div.bordernone td {border-bottom: none !important;}
div.bordernone table {border-top: none !important;}


Secondly, when you want to create a table with no borders, create a div with class=”noborder” and put your table within that.


<div class="bordernone">
[your table goes here]
</div>


This is an example of table with two columns and no border.

*If you aren’t using an OM4 site, here are the default CSS rules we use to get simple row borders:

#content td {border-bottom: 1px solid #aaa; vertical-align: top; padding: 10px 5px;}
#content table {border-top: 1px solid #aaa;}


Including a Contact Form

To include a Contact Form in a web page or post, use this Wordpress specific tag:
[CONTACT-FORM]

Note this is not HTML, but a special tag recognised by a Wordpress plugin. When this tag is found, a Contact Form will be displayed to your visitor.

Using Images

Images are another kind of HTML tag.

The Wordpress image uploader does two things:

• copies an image file from your computer to the web server where your site is hosted
• creates the HTML tag that links to the image file (which is what happens when you use ‘Send to Page’)

Once a file is uploaded, rather than use ‘Send to Page’ you can type an HTML image tag to reference that image. So it is easy to have the same image appearing in several places.

Say you have an image called fireworks.jpg. You use the Wordpress image uploader to copy it to your site. The image file can be referred to in two ways, using an absolute address or a relative address:

http://mysite.com/files/fireworks.jpg
/files/fireworks.jpg


Both of these references work the same, the /files reference just means ‘relative to the root’ of your website.

This is how to insert an image into one of your pages or posts:

<img src="/files/fireworks.jpg" alt="Fireworks" />


The alt tag is used for alternative browser readers such as Jaws (for the visually impaired) and is also used by search engines (so use relevant keywords if you want to).

The / at the end of the tag is a definite requirement - an img tag is said to be self-closing, and this is the self-closing signal.

Here are some more articles on using images with a bit of HTML:

• detailed instructions for aligning (floating) an image to the right or left of text
• how to caption an image
• how to create a clickable image