HTML Coding help

You may need to use HTML tags to make your blog posts look really nice. To start using a tag you use HTML tags. These go inside angle brackets <and>. This would start doing the function you want, when you want the function to stop you just put / at the start of the function.

In wordpress you need to switch from the Visual editor to the text editor.

For example

I want to write bold in bold and everything after this in italics until this point.

would appear in HTML as:

I want to write bold in <b>bold</b> and everything after this <i>in italics until this</i> point.

You could try the following…

Formatting

  • Bold <b>
  • Italics <i>
  • Underline <u>
  • Lists <ul> then each new line starts <li> and ends </li>
  • Numbered lists <ol> then each new line starts <li> and of course each line ends </li>

Tables

Are really useful, but can be quite tricky, although once you have got your head around things they are fantastically easy! To start a table you need to define it’s properties, then tag that you will write a table , then start a row

I usually use this:
<table border=”0″ width=”100%” cellspacing=”5″ cellpadding=”5″><caption>Write the title of the table here!</caption>
<tbody>
<tr>

Then you can follow it with your table content.

Your first row sets out the number of columns and their width (do this in % to make sure that it appears properly on all devices). You do this by simply detailing the first row of cells one cell at a time. using the following tags:

  • <tr> starts and ends each row
  • <th> starts and ends a cell on a header row
  • <td> starts a normal cell

For example

<table border=”0″ width=”100%” cellspacing=”5″ cellpadding=”5″><caption><b>Caption of table here<b></b></b></caption>
<tbody>
<tr>
<th width=”5%”>Column 1</th>
<th width=”10%”>Column 2</th>
<th width=”10%”>Column 3</th>
<th width=”20%”>Column 4</th>
<th width=”40%”>Column 5</th>
<th width=”10%”>Column 6</th>
<th width=”5%”>Column 7</th>
</tr>
</tbody>
</table>

Would appear like this…

Caption of table here
Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7

If you want to put images in cells you can, but it’s often worth waiting until you’ve built your table and using the visual editor. But remember to leave cells with images empty (but not forgetting to build them i.e. using <td></td> so that an empty cell is left)

Hints

In wordpress it is always worth copying your work to a word document so that you have a saved copy before you leave the text editor as faulty HTML is removed automatically