Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

15. "Standard" and "Enhanced" HTML

Enter into the next realm of HTML
      -- where you shall find more things you can do but more considerations as HTML becomes less "standard" (and less simple).

Objectives

Since you have worked so hard up to this point, here is short lesson without any work to do! After this lesson you will be able to:

Lesson

In lesson 0, we introduced you to the concept of "standard" HTML. The subsequent lessons in this tutorial will show you how to use some other HTML tags that may not be viewable on all web browsers. Here, we will just review some of the related issues before you venture ahead into the "danger zone."

How about a little history?

Long, long, ago ("in a galaxy far away?")... well around 1990, the World Wide Web was a text-based system based upon the HyperText MarkUp Language. The tags and interpretation were all built upon standards (HTML 1.0) set by an international committee. This was the key to the "web" becoming "world wide" because, by following the standards, the information was completely independent of the computer from which it was viewed.

Even when NCSA Mosaic burst upon the scene in 1993 as the first graphical web browser (created by whiz kid Marc Andreessen and others), the standards were followed to the letter, which at that time were updated to HTML 2.0.

The web started to get popular.

Extremely popular.

Insanely popular.

Other programmers began to build web browsers that offered the same functionality as Mosaic (because they supported all of the HTML features contained within the international standards). A group that included the original developer of Mosaic formed a new company -- its mascot was "Mozilla", ("Mosaic" + "Godzilla") with a brand new web browser known as Netscape Navigator.

Netscape was faster and more reliable than the NCSA Mosaic. It had a cool mascot! NetScape grew popular quickly perhaps because it contained functionalities that included all of HTML 2.0 PLUS more tags for things that you could not do in HTML 2.0. These "extensions" or "enhancements" have caused (and still cause) a great deal of arguments between HTML purists and those that like the "less than standard" features that Netscape added.

The Mozilla Netscape was immensely popular and quickly grabbed 3/4 of the web-browser pie. Now, in HTML, you could include colored backgrounds to your pages, formatted tables of text, text that wrapped around the side of images, and more. You began to see web pages that said, "This page optimized for Netscape". Other browsers began to include support for the Netscape "HTML 2.0+" features. As the major online services opened up to the web, the browser market got even more crowded (and noisy).

The international commision was faced with a dilemma, as the market was largely demanding these "non-standard" tags to become part of HTML. As the rules for HTML 3.0 were being developed, they began to include most (but not all) of the tags Netscape had introduced. The standards process seemed to move to slowly for many people.

And the battle grew bigger into 1996 when Microsoft introduced their own special HTML tags. Would HTML become more Babel-like? For more information about the HTML battle, we refer you to Andy King's HTML 3.0 and Netscape. The most recent action has been the proposal of HTML 3.2, which encompasses most of the features supported by the big players in the browser arena now, Netscape and Microsoft.

The most recent position statement reflecting HTML 4.0 is the suggested standard that should be adopted by all web browsers. This latest evolution is meant to be a step that will provide a great deal of flexibility for future changes without them being mere "bolt-on" tags that have occurred to date. As we will see in later sections, Style Sheets provide a very efficient means for updating an entire web site with more consistent appearences, plus new features for easily internationalizing content and providing more accessibility features for the visually impaired.

So what does this mean for you? As you develop web pages, you should consider what your readers will be using to access your pages. Perhaps you are a teacher in one school or an information department in a company that is sure all of their users will be using a particular browser. Then you can be comfortable desigining and testing on only one browser. However, we consider this a short sighted approach that may down the road force you to do massive, tedious updates to your HTML coded pages.

More commonly, you will be "publishing" web pages from an Internet server and have no idea what browser is being used or even what kind of computer it is used on. You can add special warnings to your page. You can stick closer to the standards that are most widely supported on all web browsers. Even if you do use special tags, there are usually ways to have an alternative that will not cause havoc for users of other browsers.

Most importantly... do not become fixated on how the page looks on just your own computer! Your readers may have different browsers, different fonts, different text color preferences, different monitor sizes -- all of which may cause the display to vary in size, layout or appearance from how it looks on your computer. If you can try out your web pages on different computers, stretch and shrink the browser window, switch the standard fonts.

Fortunately, the original design for HTML has a very open and forgiving set of rules -- if a browser encounters a tag it does not know how to deal with or display, it simply ignores these tags.

For example, let's say my browser supports the <drip>...</drip> tag. This tag makes all text inside appears normal and then slowly "drip" toward the bottom of the page (editorial note -- I MADE THIS UP!), a fancy effect for my home page:

  <drip><H2 align=center>Welcome</H2></drip>
  to my sloppy home page!. Look out
  for the puddles!

which works like a charm on my home made browser because is has been programmed to understand how to display the <drip>...</drip> tags. On your browser that does not support this feature, you will see:

sample web page

Welcome

 to my sloppy home page!. Look out for the puddles!

If your browser doesn't support this tag it just skips over it completely, rather than bombing or presenting an error message.

It's a brilliant concept, isn't it?

Peeking at the Source

If you have not learned this already, the best secret for learning how to design web pages is to ... "creatively borrow". We are not advocating stealing HTML! But, if you find a web page design that you like, or find yourself asking, "How did they do that?" the easy thing to do is to look at their HTML code! It is sitting there waiting for you.

This is one of the best responses to the question, "Why should I learn all of this darn HTML gunk when I can just use a visual editor such as ________________"? You cannot learn much from other websites if you depend upon a helper application to make your web pages. But... if you can "peek under the hood" of a web page and examine its HTML, you can understand and perhaps repurpose interesting design techniques.

The exact menu names for doing this are different depending on which web browser and version you are using. Typically, your web browser menu will have an item called View frow which you can select Source or Page Source. When you select this, it will download the HTML source code corresponding to the URL of the current page in view, and display this HTML code for you to see.

Another way to grab the HTML source of a page in view is to select Save as... from the File menu of your browser. This will bring up your familiar Save dialog box where you can select a location on your computer's drive and a file name. You should also see in the dialog box a pop-up menu labeled Format -- be sure to select the option labeled Source.

NOTE: This will save for you the HTML file for the page in view... but not any of the images used in the page. Some newer web browsers as well as third party tools provide the functionality to download everything in that web page as a single package.

And a third way to get to the HTML source is to access the hidden menu-- right mouse click for Windows and Unix users, control-click for Macintosh users-- on any blank area of a web page.

As practice, see how quickly you can see and save the HTML source code for this lesson page.

As we go on into these more advanced lessons, the instructions will get a bit longer and more complicated. But you've gotten this far ok!

Review

  1. Why should you care about the standards of HTML?
  2. In what settings can you be most comfortable using non-standard HTML?
  3. What happens when a browser encounters an HTML tag it does not understand?
  4. If you see an interesting design of someone's web page, how can you learn how it was constructed?

More Information