SCOUG OS/2 For You - April 1997

Programming for the Net
Part II - Traditional Interface I (Static HTML)

by Dave Watson

This continues a series of articles begun in Feb. that overviews Internet programming methodologies.

You have probably seen a lot of the world wide web by now. Many people are providing information on this "web" for the whole world to see. Much of it is personal, like my family photo albums which I post for friends and relatives around the world, but which you might not have time for. Increasingly, a lot of this information is presented to generate income. The web is becoming a hotbed of commercialism, and with this financing comes sophisticated tools and creative people who are making startlingly attractive and useful presentations. How do they do this? Like many artistic endeavors, some of these products use very tricky techniques inspired by unusual expertise and creativity. Most of it, however, is the result of fairly straightforward applications of the language of the web - Hypertext Markup Language, or HTML.

Hypertext involves a change from the traditional linear approach to presenting information. Books and movies are typical of the old method, where the information begins at the front and concludes at the back. People tend to be more flexible than this, and the earliest concepts of hypertext were conceived back in the 1940s in early artificial intelligence research. An early implementation of this concept was Hypercard, a Macintosh product which permitted the reader to hop between sections of a "stack" of information.

Hypertext actually provided the inspiration for the world wide web. As the Internet was being constructed in the '80s from its military underpinnings, a group of scientists in Switzerland were experimenting with hypertext document publication over networks. They began developing software that handled the special features needed to communicate this way. This was popularized in the graphical Mosaic product at the University of Illinois, and an industry was born.

So what is HTML?

HTML is a simple computer programming language interpreted by specialized software known as "browsers" such as IBM Web Explorer and Netscape Navigator. It uses a structured set of commands known as "tags" to instruct the browser to display features needed to create a unified "page" of information from a sequence of downloaded information. This information is accessed by the reader entering an address known as a Uniform Resource Locator, or URL, which points the browser to a server on the network which sends back the information packaged at this location. It includes plain text, fancy graphics, animations, sounds, videos, and links to other sites, all knitted together with this language called HTML.

So, is it hard? No way! You can do it, too. You might even become one of the great web artists to find fame and riches on the Internet. Let's take a look.

You have all the tools you need to create full-featured web pages already in your Warp machine. You need a text editor, and whatever you like will do fine, from the simplicity of the system editor, to the most sophisticated word processor or document publisher, to the emerging web authoring tools that make web site construction and maintenance effective and easy. You need a browser to view your work. Web Explorer will work for most of the basic tags, though many more advanced tags need a modern browser such as Navigator in order to view them properly.

Let's begin

Start with a simple web page. Open your editor, and enter the following code.

Now, save the document as first.htm, or whatever title you like. It is conventional to use the extension .html for HTML documents, but since the FAT format of floppy disks and DOS machines is limited to 3-character extensions, .htm is commonly used as well, and both extensions are recognized by most browsers. Actually, you can open an HTML file with no extension in most browsers and it will format properly. Next, launch your browser and use the Open File menu item to read this file. You will see "My first web page" up in the title bar and "This is my first web page!" in the viewer window.

There! You've done it -- you're a web author! Okay, it's not a very useful page, yet. But, you can go back and change the text between the title tags to "The True Meaning of Life" and edit the second line to describe what you believe to actually be the true meaning of life, and now you have something really important. Feel better now? Motivated, at least? Great - let's continue.

Browsers are so flexible and so forgiving, that you can actually open most files with them. You could download this article in text format from the SCOUG web site or BBS and open it right up with your browser. For those diminishing numbers of formats not yet recognized by modern browsers, a large variety of plug-in and helper tools are available to present most any media format ever conceived. So why use HTML? Browse the web and see which pages ring your chimes. The effective ones use HTML. You can use this simple language to construct a presentation that will provide an effective outlet for your creativity and impress your readers, perhaps to the extent that they will send you large sums of money.

But it's a little more complicated than the simple example we just created. There are about a hundred tags and modifiers available to help you assemble the components of your web creations. You can get a comprehensive description of all these tags and additional advice on effective use of them at the SCOUG Internet SIG web page, or by attending their ongoing tutorial series on the fourth Monday evening each month. We can't do them all justice in the tiny little space the stingy editor of this fine new letter gives me, so you'll need to do a little more work after reading this article. But we will demonstrate a few more of the basic tags to give you a better feel for what you're getting into.

Organization helps

The first consideration is the organization of your HTML document. These can become several pages long, and keeping them organized is easier if you use spaces, indentation, and other clues to help you keep it all straight. The title line is part of a set of HTML constructs called the "head," which is properly identified by enclosing it with the tags <head> and </head>. Note the slash (/) in the second tag. Tags are enclosed in angle brackets (< and >) and can be "empty" or "container" tags. Containers, like <title> and <head>, require a opening and closing tag. The slash precedes the closing tag.

The text we entered ("This is my first..." or your rendition of the True Meaning of Life) is an element of the body, traditionally enclosed with <body> and </body> tags. The entire document can be enclosed in <html> </html> tags to identify it to the browser as an HTML document. These are all optional tags, but are recommended to make sure your code will be recognized by those few browsers that might need the hints, and to help the author or subsequent maintainer keep things straight.

Okay, let's try improving our page a little. In addition to head and body elements, there are a set of tags which affect the text. First, let's try one of the primary elements of hypertext, a link to another site. Add a line that sends your browser to the Internet SIG HTML tutorial page this way:

This uses the "anchor" tag, indicated by the <a> and </a> container. The opening tag includes a reference (href) which sends the browser to another file, indicated here by a complete URL to the Internet SIG site. It could also have been a relative link to a local document, such as "/config.sys" which would have displayed your config.sys file, or any other file to which you have access, anywhere in the world which is connected to your network.

Now, save your HTML file and open it again with your browser (use the reload button if Navigator is still open). Now you will see colored text, probably underlined (depending on your browser preferences) that says "Learn HTML!" If you move your mouse pointer over it, it will show the address down in the hint line of your browser. If you click it, Netscape will go to that page if you are connected to the Internet, or dial and connect if you are not. You can also use this method to read other documents locally or on the server you are working from.

Let's try an inline image

They are called "inline" since most browsers will open them right in the browser window as part of the document. They are actually called from another file, usually on the same server the page is hosted on. Try adding this tag to your document:

Save and reload the document, and it will connect and display a photo of my new grandson. Or, if you choose not to connect for this fine photo, it will display a standard image (a red "X" in Web Explorer, or a "broken" square in Navigator).

The image tag, <img> is an empty tag which does not require a closing </img> tag. It permits a number of modifiers, called attributes, such as the image's location (src="url") and description (alt="text"). Alt is necessary for text-only browsers and speech-based systems, so make them descriptive. (Honestly, most web graphics are not worth a thousand words!)

As a final exercise, let's manipulate some of these elements. First, try making a heading. Put the tags <h1> and </h1> around the first word of your text. In the original document, that would read like this:

Save and reload this document and it will display with the word This on its own line, in large type, with the rest following below it in the standard font in your browser preferences. Try adding <div align=center> and </div> around the header tags, like this:

Putting it all Together

Let's take all of the pieces and put them together into a single document. A <!DOCTYPE ...> tag is required to be fully compliant with the semiofficial HTML language specification for the current version, 3.2. Compliance will become more important as versions become more complicated and vendors such as Netscape and Microsoft attempt to improve their market positions by including extended structures such as Netscape's frames.

Our HTML document looks like the following:

Note several things about the document. First, the word "This" appears on its own line after the image with "is my first..." following on another line. When you resize your web browser window, the text in the paragraph is automatically reflowed. These are all features of HTML.

If you loaded the document into WebExplorer, you may have also noticed the text "This" was not centered. This is because the WebExplorer does not recognize the HTML 3.2 version of the tag <DIV>. Rather, it follows an older style that uses the <CENTER> tag. So, as you learn HTML you will notice that different browsers support different tags. It's something to keep in mind, especially if you are designing your HTML pages to be viewed by a variety of users or for profit.

More to come

There are many other features available to the web author, including manipulations of font, color, and background; graphical techniques like image mapping, to permit using areas of a picture as links to other locations; and advanced programming features like forms and Java scripts and applets.

You are invited to join the Internet SIG tutorials in this rich new programming language or to study it on your own from the resources shown in the Internet SIG HTML class page or the many books on this subject. When you see a page you like, use the View, Source feature of your browser to see how they did it. You can learn to be very competent in almost no time at all, and then embark on the long, difficult task of being a true web artist. I hope to see you along the way!

Next month this series will continue with more on what you can easily do with HTML. After that, it's on to other traditional interfaces such as Forms and CGI.

Copyright 1997 the Southern California OS/2 User Group. ALL RIGHTS RESERVED.

SCOUG is a trademark of the Southern California OS/2 User Group.
OS/2, Workplace Shell, and IBM are registered trademarks of International Business Machines Corporation.
All other trademarks remain the property of their respective owners.