HTML Applications

By Joe Burns

Use these to jump around or read it all...

[The Basic Concept]
[The HTA File]
[The Tag and Properties]

I get letters all the time asking if I would offer the tutorials found on the HTML Goodies site as downloads. That way the tutorials could be viewed without being logged on. My answer is usually "no" simply because of copyright concerns.

Well, one day I get a letter from a reader who suggested that if I ever did offer my tutorials for downloading, HTA format might be the way to do it. I didn't know what HTA format was, so I checked into it.


The Basic Concept

HTA stands for "HTML Application". It's a concept from the research kitchens of Microsoft and works with all computer running Explorer browsers 5.0 and above. Notice I said "running" MSIE 5.0. This HTA does not work within the browser, rather, HTA allows you to create a downloadable file that takes with it all the information regarding how it will display and be rendered.

HTA understands everything the browser understands including HTML and CSS code. Microsoft described an HTA as running much like an .exe file. The browser will ask you if you'd like to download an HTA just any other .exe file. HTAs will run from your system so they are not bound by security or privacy concerns that are found on the Internet. Of course one can see multiple benefits and concerns in such a file since once the file is downloaded and run, it is seen as a trusted program and has access to the system it is sitting on.

That said; let's look into an HTA.


The HTA File

When I first began reading about HTAs, I kept getting that is was easy to create them. All you need to do is to take any HTML (or text) file and give it the .hta extension. This is true but it's not really doing the format justice. As I said before, where the real fire comes in is being able to be able to configure the display of the file.

The link below is this tutorial is HTA format. I created the file by simply resaving the page you're reading right now as "example.hta".

In addition, I added this text in the HEAD section of the document:

<HTA:APPLICATION
border="thin"
borderStyle="normal"
caption="yes"
icon="http://www.htmlgoodies.com/favicon.ico"
maximizeButton="yes"
minimizeButton="yes"
showInTaskbar="no"
windowState="maximize"
innerBorder="yes"
navigable="yes"
scroll="auto"
scrollFlat="yes" />

That's the tag/attribute code that I've set up to alter the window that will contain the display of the HTA.

Now, go ahead and download the HTA file by clicking on the link below. You'll get the familiar box asking if you'd like to download the file. Say "yes" and download it where you can quickly find it.

Once you've got it, go the file on your hard drive. The icon will be the little flying window logo. Click on it and up will come the viewer with this tutorial displayed just as I suggested in the code up above. Once you've looked, come back and we'll look into what each of the elements does.

Click to download "example.hta"


The Tag and Properties

Well, how did it look? My guess is that it looked just like this without all the orange swoosh and image stuff. That was on purpose. I didn't see a need to add it all into the code. My guess is that all you really wanted was the text so that's all I gave. Did you also get the little HG icon in the upper left-hand corner? If not, you must not have been attached to the Web when you viewed the HTA file. I set the file so that it would go out on the Web and grab that icon when displayed.

OK, let's tear it apart.

Again, the HTA:APPLICATION tag goes in between the HEAD tags. Although it may not look like it up above, the tag does require a close tag. That means you can use </HTA:APPLICATION> to close up the tag if you'd like. I used a bit of shorthand suggested by the Microsoft pages.

Notice that I have a space and then a slash just before the >. That's an easy way to say, "end". You'll see that format being used a great deal in XML if you start getting into the language.

Where the tag really comes alive are all the properties (properties of the attribute "application") you can play with. I've used just about every one up above that will alter the look of the display. Notice how I have them listed, one after another and at least one space between each. I have a line break. It's the same thing. No commas. Put your tag together just the same way you see mine up above.

Here are the properties and what they do The default, what you'll get if you don't use the property, for each in green

border sets the border format.
     Options: thin, dialog, none, thick

borderStyle further defines the border
     Options: complex, normal, raised, static, sunken

caption denotes a title bar or not
     Options: yes, no

icon is the path to an icon that will display in the title bar, not on the hard drive.
     Options The icon must be 32X32 "ico" format. I found it works pretty well if you have a favicon.ico on your system to attach to that. That what I did above.

maximizeButton is the max button in the title bar
     Options: yes, no

minimizeButton is the min button in the title bar
     Options: yes, no

showInTaskbar tells if the application will display in the taskbar
     Options: yes, no

windowState is how the window will display
     Options: normal, minimize, maximize

innerBorder denotes if you'll have one or not
     Options: yes, no

navigable suggests if linked pages will display in the HTA window or not
     Options: yes, no

scroll denotes a scroll bar
     Options: yes, no, auto

scrollFlat will the scrollbar be 3D or not
     Options: yes, no


That's That

There are a few other properties and if you'd like to get into them, feel free. The only properties I covered here are those that deal with the display, the design, of the HTA.

For some further reading, try the MSIE Web Workshop page.

I think it's good thing to use if you're going to offer downloads and want those pages to work the same way as the online Web site.

  Enjoy!

[The Basic Concept]
[The HTA File]
[The Tag and Properties]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •