Embedded HTML

Introduction

I spent some time playing with embedded style sheets and images in HTML. Below is a capture of my experience.

Background

The questions that I was trying to address were:

1. How does one embed graphics or even style sheets within an HTML file without linking to external sources? Basically, I just want to create an HTML file that has everything in it.
2. How is it that applications like Lotus Notes can send an e-mail messages to my Google e-mail account or elsewhere retaining the original document layout remembering styles, hyperlinks, embedded images, etc? How hard would it be to replicate this behavior using Java, ANT, and XLST?

Research & Analysis

Let’s start with style sheets. This is fairly straight forward as the easiest way to do this is using the <style/> element as follows:

From this point, it is fairly easy to programmatically include the contents of a style sheet into an auto-generated HTML file.

So what about embedding images? Turns out that there is a couple of different methods. One is to use the <object/> element. You can learn more about this by reading the W3C HTML 4.0.1 Specification. Pay special attention to the data attribute of the <object/> element. The data attribute allows you to define the MIME type of your image, type of encryption used, and the encrypted data of your image. For example, a GIF image would have a MIME type of “image/gif”. The encryption used is generally Base64 encryption. In my case, I wrote a some Java code that uses Base64 encryption to encode my original image file as a stream of encrypted data. However, for those looking for a quicker solution, check out the DataURLMaker site. Which brings me to the second method where you can simply use the src attribute of the <img/> element. If you use the DataURLMaker, you’ll see the <img/> element being used instead of the <object/> element. Both are acceptable methods.

To learn more about Base64 encryption for web pages, e-mail messaging, etc, take a look at the Internet Engineering Task Force (IETF) web site which is responsible for the maintenance of Request for Comments (RFC). The use of Base64 encoding is defined in RFC 1341.

Conclusion

The use of the <object/> and <img/> elements in HTML is rather powerful but should be used with caution. As you embed more content within your HTML code, you can end up creating a huge file with large amounts of data for transmission. Additionally, as far as I know, there is no way to reference the same embedded object multiple times in the same HTML file so you have to duplicate the embedded data each time.

1 Comment to Embedded HTML

1. 

   Updated the original post to include the mention of DataURLMaker which is a quick and dirty solution for turning images into embedded HTML code.
Brooke Kuhlmann on December 20th, 2006

Leave a comment

You must be logged in to post a comment.