Master Login
Username:
Password:
Client Login
Username:
Password:
Basic Updating Tutorials Editing Features Tutorials Advanced Tutorials

How to Use HTML Code in Your Pages

  1. Simply highlight the HTML code that you need and copy it.

  2. Then open the web page that you want to edit and paste the code into the page where you want to use it.

  3. Edit the blue text (add your own text etc) and click the update button.

  4. Visit your website to view the result
Plain Red Text
All text in red should not be altered, as this will cause the code not to work.
You CANNOT alter these details
Underlined Blue Text
Where "display text" is shown you can insert your own text.
You CAN enter your own text/details


Text Styles


Add a Colour

For a list of colours to use see our colour chooser guide.

<span style="color:#FF0000;"> Display Text </span>


Change the Font Size

<span style="font-size: 140%;"> Display Text </span>


Change the Font Style

<span style="font-family:Tahoma,Verdana, Arial;"> Display Text </span>


Combine Styles

<span style="color:#FF0000; font-size: 140%; font-family:Tahoma,Verdana, Arial;"> Display Text </span>

Links

Add a link or an email link to text - See A Guide to Using Links

Add a link to an image - See A Guide to Using Image Links


Go Back to Last Page

<a href="#" onClick="history.go(-1)">Go back to last page</a>



Numbered Lists

<ol>
<li>Insert your display text here</li>
<li>Insert your display text here</li>
<li>Insert your display text here</li>
</ol>

To add additional items to the numbered list add extra <li>Insert your display text here</li> inside the <ol> </ol> tags. Add as many as you need to create your list. The items will be automatically displayed with the next number in order ie: 1, 2, 3.


Add A Table

Sample single row table with three columns

[CODE]
<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr>
<td>Insert your display text here</td>
<td>Insert your display text here</td>
<td>Insert your display text here</td>
</tr>
</table>
[/CODE]


Sample two row table with three columns

[CODE]
<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr>
<td>Insert your display text here</td>
<td>Insert your display text here</td>
<td>Insert your display text here</td>
</tr>
<tr>
<td>Insert your display text here</td>
<td>Insert your display text here</td>
<td>Insert your display text here</td>
</tr>
</table>
[/CODE]


How it works

Table layout

Each <td>Insert your display text here</td>will display a column. So to adjust the number of columns insert or remove one of these - <td>Insert your display text here</td>.

Cellspacing is the distance between each cell in your table (like a margin). Adjust the size by changing this - cellspacing="3". To remove it insert a zero - cellspacing="0".

Cellpadding is the distance between the edge of your cell and the content you place inside it. Adjust the size by changing this - cellpadding="3". To remove it insert a zero - cellspacing="0".

To add a new row insert <tr><td>text here</td></tr> after the end </tr> tag (as shown in the second sample table above).


How to add images to a table

[CODE]
<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr>
<td><img src="http://www.uki.net/php/files/zzzz.uki.net/imagefile.jpg" alt="Description of image"></td>
<td><img src="http://www.uki.net/php/files/zzzz.uki.net/imagefile.jpg" alt="Description of image"></td>
<td><img src="http://www.uki.net/php/files/zzzz.uki.net/imagefile.jpg" alt="Description of image"></td>
</tr>
</table>
[/CODE]

You need to upload your image to the 'Image Manager' and then click on the image whilst still in the Image Manager. The image will open in a new window. Copy (CTRL + C) the address that is shown in the address bar at the top of the browser window.

Go to the page that you have already inserted your table code in to. Paste (CTRL + V) the code you have just saved into the section indicated above in blue. Add an image description in the second blue area.

Save your changes and view your web page.