Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Embed HTML Page in Email 1

Status
Not open for further replies.

tlmm

Programmer
Mar 25, 2004
45
0
0
CA
I have an HTML page which is a newsletter. I want to be able to add it to an email message so I can email it to people. I want it to be in the body of the email, not sent as an attachment.

There is a .htm page, several images, and a .css page. I need all of these to be embedded for the page to work correctly. I can put the styles from the .css file into the html page, but I still need to know how to embed the images.

I tried creating stationary, but it didn't put the images in the email.

I know it is possible to do this. Can someone give me some pointers as to how to get an HTML page along with several images into an email message.

I am currently using Outlook 2003.

Thanks!
 
I also use HTML for email newsletters. Once I have written the HTML I place the .htm file and all the images in the Outlook stationary folder. I also placed all styles within <STYLE></STYLE> tags.

Outlook Stationary Folder on my machine (Windows 2000 Pro)
C:\Documents and Settings\<Username>\Application Data\Microsoft\Stationery

I then go into Outlook (2000 SR1) and select Actions >> New Mail Message Using... >> More Stationary, and then select the HTM file from the list of stationary.

Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Do you have any trouble with the formatting of your newsletter?

I tried what you suggested. I encountered 2 problems.

1. I have links so that the user can click and it brings them further down the page. There are also links that should bring the user back to the top of the page. Neither of these work. Any ideas? Do you have this kind of functionality on your newsletter?

2. The hover functinality I have set in style tags at the top of my html page does not work. Other things set in the <style> tags are working though. The font type and size, for example, look fine. Also the link color is not correct. It is defaulting back to the default blue link color and purple for visited links even though I have these colors set in the style tags.

Another thing I tried was opening my file in Word and sending to mail recipient. I receive the same problems that I mentioned above when I tried what you suggested.

Thanks.
 
<b>This is the code I am using for the styles:</b>

<style>

a.headerswitch:link { color: #5B5853; text-decoration: none }
a.headerswitch:active { color: #5B5853; text-decoration: none }
a.headerswitch:visited { color: #5B5853; text-decoration: none }
a.headerswitch:hover { color: #000066; text-decoration: none }

A.blackspacedtext
{
TEXT-DECORATION: none;
FONT-FAMILY: tahoma;
FONT-SIZE: 11px;
color : #000000;
font-weight : lighter;

}

A.blackspacedtext:hover { color: #000066; text-decoration: none }

</style>

<b>One place where the style is set:</b>
<a href="mailto:test@test.com" class=headerswitch Target="_blank" onmouseover="this.style.cursor='hand'"
STYLE="text-decoration: none;">
Contact Us
</a>

<b>This is a sample of the code I am using for my internal links (linking up and down on the same page):</b>

<b>This is where the link is set:</b>
<A href="#welcome" class=blackspacedtext onmouseover="this.style.cursor='hand'"
STYLE="text-decoration: none;">
Welcome</A>

MORE CODE.......

<b>This is where the link is supposed to go to:</b>
<!--Welcome-->
<A name="#welcome"></A>
<FONT face="Verdana, Arial, Helvetica, sans-serif" color=#333333 size=2>
<H1>Welcome</H1>
<P><STRONG>Hello Members and Clients,</STRONG></P>
<P>Welcome to our first email newsletter.</P>
<P>This new version of our newsletter will be emailed to you periodically. It will contain
all the news and links that we think may be of interest to you.</P>
<P><B>Enjoy!</B></P>

This is just a sample of the code that is causing problems. If more is needed, please let me know.

If I run the page, it works perfectly, but encounters problems when trying to send through email. The hover functionality set in the style tags does not work and the internal links on the page will not work.

Thanks for your help.

 
I have found that you cannot use any javascript in these HTML emails. AT least I havent been able to do this. A pain I know but I havent found it a problem.

In order for your anchor tags to work, change them to look like this...
Code:
<A name="welcome"></A>
basically just remove the # from the anchor tag. You will still need it in the link though.

Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Thanks again! I really appreciate your help.

I tried what you suggested in the anchor tags and it works. Excellent!!!

My only problem now is the hover functionality. Any idea why that may not be working?
 
In one of the other threads (not sure which one), someone said that you need to have the link styles in the correct order for it all to work right.
The correct order that was given is:
:link
:visited
:hover
:active

I would suggest you try switching those around to see if that makes any difference.

Jenny May
 
You can have fun with sounds by using the <bgsound> tag in the body of an html message.
 
take the onMouseOver event code out of your links. This uses javascript which wont work (i dont think). From the looks of things your rae only using this to change the cursor to a hand when it is over the link. Surely it will do this automatically? Although the hand wont appear when you are editing the page in Outlook, only when you are reading the email having sent it. Send it to yourself and see if it works.


Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Thanks!

Tried all you guys suggested, but still the hover won't work. It's weird. The other things set in the style tags work, but not the hover.

Any other ideas?

This is a sample of the style:
a.headerswitch:link { color: #5B5853; text-decoration: none }
a.headerswitch:visited { color: #5B5853; text-decoration: none }
a.headerswitch:hover { color: #000066; text-decoration: none }
a.headerswitch:active { color: #5B5853; text-decoration: none }

Example of where it is used:
<a href="mailto:test@test.com" class=headerswitch Target="_blank" STYLE="text-decoration: none;">
Contact Us
</a>
 
After all that, I have decided to not send the newsletter out in the body of an email. I've had several people tell me that it probably would be best not to do this because a lot of people don't accept HTML mail and sometimes it can't get through a server. So I am going to post it on our web site and send everyone a link to it.

Thanks for your help.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top