Simple HTML tags for non-designers

You’re not a designer. You don’t care about code.

But, you need to create or edit some WordPress pages and you need to make some magic happen. Here’s a simple tutorial on basic HTML tags that you can learn and use immediately.

HTML tags always begin and end with an angle bracket. They often work in pairs, but sometimes standalone.

Let’s begin with explaining what HTML tags are. They are meant to make things happen – everything on a website happens because of tags. Images appear because a tag made it happen. A font is changed or made bold because of a pair of tags.

Text

To make a change to text, here are some of the basic pairs of tags you’ll need.

Bold aka Strong. Enclose the text with <strong>The text you want to be bold</strong>

Italics. Enclose the text with <em>The text you want to be in italics</em>
(em stands for emphasis)

Underline. Enclose the text with <u>The text you want to underline</u>

Change font. Enclose the text you wish to change font for with <font face=”verdana”>The text you want to change the font for</font>.

Other font parameters you can use are size=”3″ or color=”blue” or color=”#ccdd00″. This will result in your tag expanded to have <font face=”verdana” size=”3″ color=”#ccdd00″>The text that will be affected</font>.
* Please note that the color #ccdd00 is based on hex codes (an interesting website to help you pick colors is here)

Spacing

To add a line break, use the tag <br />.

If you wish to add paragraphs to text, you can enclose the text with <p>This text is a paragraph</p><p>This is another paragraph!</p>

Images

To insert images into your post, you will need this tag. You can ordinarily use the¬†Add Media¬†button to do it, but there may be times you’d need to type it in manually.

The basic image tag is:
<img src=”IMAGE_FILENAME” />

You can add on parameters to vary the attributes of the image. For instance, adding width=”300″ height=”200″ constrains the image to 300 pixels wide and 200 pixels high.

The result is <img width=”300” height=”200” src=”IMAGE_FILENAME” />

Hyperlinks / Web links

If you’d like to add a link to text or an image, you will need to enclose it with a pair of HTML tags.

The basic hyperlink tags are:
<a href=”WEBSITE_LINK“>Image or Text</a>

Tables

Tables are a much more complex beast. You will firstly need to know how many columns you need before you start.

You define a table by starting with the <table> tag. You can specify the width in percentage or in pixels (eg width=”550″).

Then the <tr> pair of tags defines a row. Finally, the <td> pair of tags dictates a column within that row. Do note that all rows in your table MUST have the same number of columns, or else you will get a weird looking table.

<table width=”100%”>
<tr><td width=”200″>This is Row 1, Col 1</td><td>This is Row 1, Col 2</td></tr>
<tr><td><img src=”http://xyz.com/logo.jpg” /></td><td>This is Row 2, Col 2</td></tr>
</table>

Other parameters for the <td> tag are:

align=”center” (other options are center and right)
Sets the horizontal alignment for the cell.

valign=”top” (other options are middle and bottom)
Sets the vertical alignment for the cell.

 
 
All the best, and I hope you can make some killer web pages with the simple tricks I’ve blogged about.

Do share what you’ve worked on in the comments.

 
 

Leave a reply