BOOT CAMP ARCHIVE 2005

  

 

BOOT CAMP 373 (17/04/05)

Creating a signature in Outlook Express, part 2

 

In the concluding part of this short series on creating a unique and eye-catching email signature we turn our attention to HTML coding, which are the hidden instructions used to compose web pages, based on simple sequences of text commands or ‘tags’.

 

In our example signature we’ll be using just a few basic tags to include the image or graphic we prepared last week and once you’ve mastered that you can add a line or two of text to accompany your image.

 

HTML code is written in plain text using basic rules of logic and the key to success is to keep it simple. For that reason we’ll be using Windows Notepad rather than your word processor. You can write HTML in Word, for example, but it will add extra commands that can cause problems, so begin by opening Notepad (Start > Programs > Accessories > Notepad and enter the following four lines of text exactly as they appear below:  

 

<html>

<p align=”left”>

<img src="C:/sigfiles/sigpic.jpg" width="100" height="75">

</html>

 

Note that tags are enclosed by the ‘less than’ (<) and ‘more than’ (>) bracket symbols and other data and instructions are inside double quotes. The first and last tags, i.e.  <html> and </html> denote the beginning and the end of the sequence of commands. The second line <p align=”left”> aligns the graphic on the left side of the page. The next tag contains three commands; ‘img src=’ shows the name of the image file and where it is stored on your PC, so if you are not using the same folder and file name as our example change as appropriate. That’s followed by two commands, ‘width=’ and ‘height=’, which determine the image’s size and shape.

 

So far so good? Now all you have to do is give the HTML file you have created a name and save it on your hard drive. I suggest keeping it in your sigfiles folder, so go to Save As on the File menu, in the Save In box browse to your sigfiles folder and in the File Name box call it something like ‘sigtest.html’ (without the quotes). The .html extension is very important as this designates it as a HTML file.

 

Now you are ready to set up the signature on Outlook Express, so go to Options on the Tools menu and select the Signatures tab. Click the New button then under Edit Signature select File, click the Browse button, navigate to your sigfiles folder, in the Files of Type drop-down menu select HTML Files and your sigtest.html file should appear in the window above, select it and click the Open button and it will appear in the File box.  At the top, under Signature Settings check the box ‘Add signatures to all outgoing messages’ click Apply then OK and you are ready to test your newly created signature.

 

Click the Create Mail button and a new blank message window will open, hopefully displaying your signature graphic. Don’t worry if it doesn’t appear, go to the Format menu and select ‘Rich Text (HTML)’, close the window and click the Create Mail button again. It’s quite possible the image will be misshapen, too large or too small, in which case you need to open your sigtest file in Notepad again and alter the ‘width=’ and ‘height=’ values and Save it again. For more troubleshooting advice see Tip of the Week.

 

Once it is working to your satisfaction you can add embellishments with some extra tags.  Try this, after the third line insert the following line:

 

<br><b> My first HTML Signature </b>

 

This sequence of tags inserts a carriage return or line break (<br>), followed by an instruction to make text bold (<b>) then the text that you want to appear, i.e. ‘My first HTML signature’, then the end bold text tag (</b>). Save the modified sigtest.html file and see what happens when you click the Create Mail button. Hopefully your image will now have your line of text appearing beneath it. Of course you can write anything you like, so try adding your email address and telephone number, for example, in place of our sample text.  For a final flourish we’ll add a simple underline, so under your text line add this:

 

<b><hr></b>

 

In this example we have the bold (<b>) and end bold (</b>) tags with the horizontal reference (<hr>) tag in between, which should insert a bold horizontal line below the line of text.   

 

That’s really all there is to it but to finish off here’s a few more tags that might prove useful for composing text. You can substitute italics for bold by using <i> tag instead of <b>. To change the size of your text insert the tag <h1> before it (for the largest size) to <h6> for the smallest size, and don’t forget to insert an end tag afterwards (i.e. </h1) otherwise any following text will also be affected. For more precise control over text size you can use the Font Size command which gives you 12 increments, the tag is: <font size=”+6”> and the values can be between +6 to -6). To centre your text on the page place it between <centre> and </centre> tags and if you want it to appear on the right side of the box instead of the left modify the align tag, we’ve already used, to: <p align=right”>.

 

That should be enough to get you started but as you can see HTML is incredibly flexible so try a few experiments and if you want to learn more there are plenty of HTML tutorials on the web, including: www.mcli.dist.maricopa.edu/tut/ and www.davesite.com/webstation/html/.

 

Next Week -- Top ten scams

 

JARGON FILTER

 

EXTENSION

The last three or four letters in a file name, i.e. Word documents have the extension ‘.doc’

 

HTML TAG

Hypertext Mark-up Language command; instructions for placing text and graphics on a web page, written in plain text

 

NOTEPAD

Simple text editing program included with all versions of Windows

 

 

TIP OF THE WEEK

Very little can go wrong if you have followed all of the steps but it’s easy to miss a bracket, forward slash or quotation mark in the HTML code so if it doesn’t work that’s the place to start. If an empty box appears in the email message window instead of your image then check that the location of your image file (i.e. C:/sigfiles), and the name of your image (sigpic.jpg) match precisely the path statement in the third line of the example HTML code.

 

Part 1

Search PCTopTips 


Web

PCTopTips

Boot Camp Index

2010

2009

2008

2007

2006

2005

2004

2003

2002

2001

2000

1999

1998

 

Top Tips Index

Windows XP

Windows Vista

Internet & Email

Microsoft Word

Folders & Files

Desktop Mouse & Keyboard

Crash Bang Wallop!

Privacy & Security

Imaging Scanning & Printing

Power, Safety & Comfort

Tools & Utilities

Sound Advice

Display & screen

Fun & Games

Windows 95/98/SE/ME

 

 

 

 

 

 Copyright 2006-2009 PCTOPTIPS UK.

All information on this web site is provided as-is without warranty of any kind. Neither PCTOPTIPS nor its employees nor contributors are responsible for any loss, injury, or damage, direct or consequential, resulting from your choosing to use any of the information contained herein.