HTML for WordPress Users

This article is for WordPress users who want to go beyond the basics and start using a bit of HTML to spice up their web pages, blog posts.

And increasingly it is also useful for Campaign Monitor and Aweber users who want to do more with their newsletters.

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. But at the top right of the editor field, you can switch to the HTML view and use standard HTML commands instead.

Understanding how to use the HTML Editor and a few basic HTML commands will open up a lot more options for you. This article presents the basic HTML commands of most use to bloggers.

With WordPress (and Campaign Monitor newsletters) a little bit of HTML knowledge goes a long way …

Getting to the HTML view

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 WordPress Visual Editor to edit a page or post, just click on the HTML tab (next to Visual) and you will see the HTML view of the page.

For Campaign Monitor email newsletters, open the campaign (newsletter) newsletter for editing, click the Pencil icon to edit a part of your newsletter and then click the <>Source link at the top right of the editor. For Aweber newsletters, open your Broadcast or Follow Up message for editing, and in the HTML Message editor click the Source button at the bottom of the editor.

Introduction to HTML

Here is a more detailed article covering HTML Basic Tags

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:

First item
Second item

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

Links

A link has two parts – the address being linked to and the anchor text that is shown on the page. So to write an HTML link, you need to put those to bits of information into an HTML tag.

Here is an HTML link to the ABC website: <a href=”http://abc.net.au”>ABC Website</a>

And this is how the link looks on the page: ABC Website

Change the href=”http://abc.net.au” to whatever web address (URL) you want to link to.

Change the anchor (everything that appears between the > and </a>) to display whatever you want.

The anchor can be text or an image. This article shows an example of how to create a clickable image (which is just a link with an image as the anchor).

Images

Images are another kind of HTML tag that place an image within your post or page.

The WordPress image uploader does two things:

copies an image file from your computer to the web server where your site is hosted
automates the creation of 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. Use WordPress to load the image your site in one of two ways:

Dashboard, Media, Add New (this loads it to your site without linking it to any page or post)
Dashboard, Pages, Edit Page, Add Image (this loads it to your site and links to the current page)
Dashboard, Pages, Edit Post, Add Image (this loads it to your site and links to the current post)

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).

If you want to float your image to the left or right of the content that follows, you can add a class to the image. We have styling classes for alignright and alignleft, so to add a right aligned image use this tag:
<img src="/files/fireworks.jpg" alt="Fireworks" class="alignright" />

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.

Note your image files 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.

Special characters

When you use HTML, there are some things you need to know about special characters.

The copyright symbol © can be included in a web page using a special code: ©

Here are some special characters that are often needed in web pages and how you get them to display:

copyright symbol © – ©
registered trademark symbol ® – ®
less than < and greater than > – < >
the ampersand & – &
the quote " – "
the m dash — – —

Tables

Tables are handy for laying out text or images in columns.

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>

Day	Mission
Saturday	Walk Dog
Sunday	Walk Cat

Setting column widths
The very first data cell in a column sets the width for the whole column. The width of each columne will be calculated automatically based on what is in the first data cell, unless you manually set with width. To manually set the width, use this command on the first td for the column:
<td width=290>
Notice there are no units on the width setting, but the setting will apply in pixels – most content areas will usually be from 400px to 600px wide, so set your column widths according to the space available on your website.

Building Tables Using Excel or Numbers

If you are handy with a spreadsheet such as Numbers or Excel, you can build a table quickly by placing the HTML markup around your data and using copy/paste or autofill.

Sample HTML Table Builder

Here is a sample Excel spreadsheet. You can leave off the table and /table at the beginning and end if you want, it may make it easier to copy/paste your data: Sample HTML Table Builder

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. When you want to create a table with no borders, create a table and add class=”noborder” to the table tag.

<table class="noborder">

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

Col 1

Col 2

*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;}

Divs

Sometimes it is useful to create a section or division (div) within your web page so you can apply special formatting just to that section. For example, you might want to have a breakout paragraph with a special coloured background to stand out from the rest of the page.

To use divs you create div tags in your page to define the areas, and use a class tag to define the styling rules. Then make sure you create the CSS rules for that style.

<div class="breakout" > Breakout content goes here </div>

In your CSS rules for your site you would then have formatting rules for the breakout style:
.breakout {background-color: #CCCCCC; border: solid 1px #000000}

Shortcodes – including a Contact Form

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

Note this is not HTML, but a shortcode that is implemented by a WordPress plugin. When this tag is found, a Contact Form will be displayed to your visitor.

There are a variety of other shortcodes supported on OM4 websites: OM4 Shortcodes