Q. How can I send a web page as an e-mail?
A. First, you'll need to create your page with absolute
links, and then send it as HTML through Outlook Express.
Sending HTML E-mail
Author's Site: Web-Shorts.com
Creating a page to send through e-mail is only slightly different
from creating a standard web page. The only differences are you'll
need to pay more attention to image size and use. You'll also need
to make all your image src links into absolute URL references, e.g.,
Why do we need to watch image size you may ask? HTML e-mails aren't
the same as a website. If I've chosen to view your website, I'm
prepared for a possible wait because I chose to view your site.
If I receive an HTML e-mail, I may or may not have chosen to receive
it. So I'm going to have to use my (oftentimes limited) bandwidth
to view your advertisement or newsletter. The faster your fancy
HTML e-mail opens, the less likely I am dump it into the recycle
Creating your page
First, build your web page as you normally would. I always recommend
to place all the images for your HTML e-mail in the same directory.
This will make it easier when we get to the search and replace.
Make sure you put a DOCTYPE declaration and a META CONTENT-TYPE
declaration in your page. This will ensure that HTML capable newsreaders
know how to display your page. The first few lines of your page
should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Search and replace
Now you'll need to do a search and replace to make all your images
and links absolute. For this example, we're going to assume that
your images are in a directory called /images, and all your links
to pages on your site are in a directory called /links. Right now
your image and page links look like this:
<a href="links/page1.htm">Link 1</a>
<a href="links/page2.htm">Link 2</a>
Choose Edit » Find and Replace
(or Ctrl+H on your PC) to bring up the find and replace box. You
want to choose the following options:
- Find in: Current Document
- Search For: Source Code
Next, type href=" in the Search
For field, and href="http://www.yourdomain.com/
in the Replace With field. This will replace all occurrences of
href="links/ with href="http://www.yourdomain.com/links/.
Next, we'll do the same for your images. Replace src="
Now that our Find and Replace is complete, our page looks a mess,
with broken images everywhere. Here's where you need to preview
your page in a browser, to make sure that all your images and CSS
styles are displaying properly. Once you've double checked your
page it's time to send this baby out.
Sending your e-mail
First, we need to open a new e-mail window in Outlook Express,
choose File » New » Mail Message.
Once your mail window is open, make sure the format is set to Rich
Text (HTML) by choosing Format and making sure there is a highlight
next to the Rich Text (HTML) line.
Once your e-mail is set to Rich Text, choose View > Source Edit
and you should see three tabs at the bottom of your mail message,
Click the Source tab, and you'll see the HTML source for your default
e-mail message. Open your web page in Dreamweaver, and switch to
the HTML code view by pressing F10. Press Ctrl+A to select all your
HTML code, and then copy and paste it into your Outlook Express
After you've pasted your HTML code, you can click the Preview tab
to see how it will look in Outlook Express. Now all you have to
do is type in your recipient's addresses, and click "Send".
::back to top::
Additional Reference and Resources
Web Shorts HTML E-mailer