#1 2006
 htmlapps

contents

by nickeax

htmlapps

PART I - Introduction to html

WHAT: In this series of articles, we’ll look at how to turn html documents into Windows ® applications. Yes, that’s right, actual executable applications! There are limitations on the performance of these applications, but if you‘re after a unique tool or a bit of fun, an html Application may be what you‘re looking for.

WHO: I’ve aimed this squarely at absolute beginners, but web developers of differing levels may find something of interest here. You will just need a basic working knowledge of the Windows ® operating system, and as long as you can create and save documents within a text editor, you’ll have no problems at all. No knowledge of programming, html or JavaScript is assumed. You’ll learn all those things in this series.

WHY: Why would you want to learn this stuff? Learning to program with a modern, highly powerful programming language is a daunting task. And it’s complete overkill if you are just trying to create a simple tool to aid you in some other task. For instance, you might create a measurement converter that accepts a measurement and gives you the converted measurement. You’re probably thinking that a spreadsheet is good for doing this, but for something this trivial, it seems like a bit of a waste to fire up a big application. And an html Application can easily be sent to friends and family. Simply by double clicking it, they too can perform their calculations.

HOW: In this series of articles, we’ll be using the mark-up language, html and the scripting language, JavaScript. Please note that you can use Visual Basic Script (VBS) in place of JavaScript, but I won’t be teaching VBS, only JavaScript.

html is an acronym for HyperText Mark-up Language. It’s not a programming language, it’s a formatting language. In other words, you use html to describe how you’d like a document to appear, usually in a web browser. We won’t be using a web browser to view our handy work here though, as we’ll be creating stand alone applications. The html language consists of ‘tags’ that mark sections that require a particular type of formatting. For example, you may want to highlight an important word in a document by making it bold. You would surround this word with html ‘bold’ tags.

<b> important </b>

The above example shows the html bold tag in action. And here is what it actually does to the word 'important', below:

important

An html tag like bold needs two parts for it to work correctly. An opening part and a closing part. The closing part from a tag is identical to the opening part except there’s a forward slash in the closing part. Together, the two parts of a tag define an area that will be affected by what the particular tag does. And that’s not all! Some tags only contain one part. For instance, to denote a new line in your html file, you use the break tag that looks like this:

<br />

Because this is the opening and closing part, the forward slash is placed in here, too. In an html document, there is no word wrap. You need to explicitly show where new lines appear.

Have a gander at the html code below:

<html>
<head >
<title> </title>
</head>
<body> </body>
</html>

Those html tags are the basic requirements for an html document. Instead of providing formatting, these tags describe the main sections of the html document. The first tag, ‘html’ and it’s opening part is always the first part of an html file. Have a look where it’s closing part is. It’s right down the bottom. You would say that all the other html tags are ‘enclosed’ by the html tag. Also, if you look closely, you’ll notice that the ‘title’ tag is contained within the ‘head’ tag.

What do these sections mean? In a nutshell, they’re there so a browser knows how to display this page properly. Think of html tags as instructions to the browser. Whilst we are creating html Applications that don’t need a browser, they will still run in a browser, so the same rules apply.

OUR FIRST html APPLICATION:
For this first html Application, we’ll just make something extremely simple, that doesn’t really do anything useful. The point is, to learn how to use your computer to create and run an html Application. Once you can do that, we can learn how to make useful html Applications.

Open a new text document in Notepad or whichever text editor you’re comfortable with, and cut an paste or type the following code into it:

<html>
<head> <title>My First WSA</title>
</head>
<body>
<h1> Wow, this is exciting!</h1>
</body>
</html>
Save this document as “first.html”, but be careful! You’ll need to select ‘Save as type’ from the ‘All files (*.*)’ selector. Check to make sure your file is named ’first.html’ and NOT ’first.html.txt’. Now open the file in a browser to check the results. It should look identical to this:

firstHTA.html

If that worked, we can attempt to create the first html Application. This is simply a matter of saving the same document, but using a file extension of ‘.hta’.

Remember to select ‘Save as type’ from the ‘All files (*.*)’ selector. You should end up with an executable file wherever you saved to. Double click on it to check that it executes and you should see the exact same thing that appeared in your browser before.

Thus concludes our first look at html and creating html Applications for Windows ®. I have only briefly touched on html because there are millions of html references already online for you to check out and it’d be a waste to recreate that information here.

In order to help you get used to what we’ve been dealing with here, I’ve made some exercises for you to practice with:

EXERCISES:

ONLINE RESOURCES:
www.w3schools.com - Great html reference and tutorial.
www.davesite.com/webstation/html/ - Interactive html tutorial.

In the next installment, we’ll tackle JavaScript, and start to make html Applications that do something!