In my last article I explained the basics of preparing an HTML script for your email. This time I want to introduce two new concepts - IMAGES and TABLES.
If you have forgotten, or don't know, the basics of HTML then you should read the original article on HTML basics here! Once you have done so, you are ready to carry on and add an Image to your email.
This is where we left it in the last article:
Example (xiii)
<B><U><FONT COLOR="red" SIZE="+1">This is the headline of my ad.</FONT></U></B>
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
<I>that goes onto a second line.</I>
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
Which looks like this:
----------------------------------------------------------------
Example (xiv)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: Just click here!
----------------------------------------------------------------
To add an image to this - first find your image! In order to include an image in an HTML email, it is simplest if that image is already available on the Internet. If it isn't then you need to upload it to your server or webspace - and how to do that goes beyond the scope of this article.
If you do know how to upload your chosen image, then great - if not, or if you do not have direct access to your website or server (you may be renting a site or page from someone, or maybe had someone prepare your page for you) don't give up - you can still use the images on your site and include them in your email (but make sure you are not breaching someone else's copyright).
The key thing to including an image in an HTML email is to get it's address right. The address of the image will look very similar to a website address but will end with .jpg or .gif. So here is how to find the address of your chosen image:
- Call up the page where the image is to be found in your browser - let's say it is this page - and you like the HTMail logo in the top right corner of the page.
- Right click the image (I am assuming you are using Windows here) and select 'Properties' from the menu that comes up.
- Click and drag to highlight the Address: (URL) line. In this case you are highlighting http://www.htmail.com/images/htmail_corner.jpg
- Copy this by pressing the CTRL key and V at the same time.
- Paste this into your HTML email as shown below:
Example (xv)
<B><U><FONT COLOR="red" SIZE="+1">This is the headline of my ad.</FONT></U></B>
<P>
<IMG SRC="http://www.htmail.com/images/htmail_corner.jpg">
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
<I>that goes onto a second line.</I>
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
Which looks like this!
----------------------------------------------------------------
Example (xvi)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: Just click here!
----------------------------------------------------------------
That, in a nutshell, is how to include an image. The next option, Table, is the single most important way of controlling the postioning of images and text on a web page.
The table is structured as follows - The <Table> tag and </Table> tag locate the start and end of a table. The <TR> and </TR> tags delimits each line in the table, and the <TD> and </TD> tags delimit each column.
So, lets use a table to position the text alongside the image in our ad.
Example (xvii)
<B><U><FONT COLOR="red" SIZE="+1">This is the headline of my ad.</FONT></U></B>
<P>
<Table><TR><TD>
<IMG SRC="http://www.htmail.com/images/htmail_corner.jpg">
</TD>
<TD>
This is the first paragraph of my ad.
</TD></TR></Table>
<P>
This is the second paragraph of my ad<BR>
<I>that goes onto a second line.</I>
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
Which looks like this!
----------------------------------------------------------------
Example (xviii)
This is the headline of my ad.
|
|
This is the first paragraph of my ad.
|
This is the second paragraph of my ad
that goes onto a second line.
This is my link: Just click here!
----------------------------------------------------------------
Only the image, and the first paragraph are included within the table. It is possible to include tables within tables - so quite complex layouts can be created. It is also possible to use commands within the table to change the look and feel. So, for example, a common use is to change the backgroung colour of one part of the table as shown below:
Example (xix)
<B><U><FONT COLOR="red" SIZE="+1">This is the headline of my ad.</FONT></U></B>
<P>
<Table><TR><TD>
<IMG SRC="http://www.htmail.com/images/htmail_corner.jpg">
</TD>
<TD BGCOLOR="SILVER">
This is the first paragraph of my ad.
</TD></TR></Table>
<P>
This is the second paragraph of my ad<BR>
<I>that goes onto a second line.</I>
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
Which looks like this!
----------------------------------------------------------------
Example (xx)
This is the headline of my ad.
|
|
This is the first paragraph of my ad.
|
This is the second paragraph of my ad
that goes onto a second line.
This is my link: Just click here!
----------------------------------------------------------------
As you can see, even from these simple examples, Tables and Images offer a huge range of options in designing your HTML email or page.
Hopefully we can follow up this article with further HTML commands and options in the future!
Thanks for reading.
Dave Broadway
April 2005
Copyright (c) HTMail Ltd 2005 http://www.htmail.com all rights reserved.
You may freely distribute or publish this article provided you publish
the whole article and include this copyright notice and links in full.
