HTML Programming
Hypertext Markup Language (HTML) is the foundation upon which
all Web pages are built. Web sites and Web pages are written
in HTML. With HTML and the World Wide Web, you have the ability
to bring together text, pictures, sounds and links... all in
one place!
HTML files are nothing more than simple, structured
text. Therefore, HTML can be read by any number of operating
systems such as Windows, UNIX and Mac to name a few. However,
plain HTML pages are often static and need the use of other
Web programming languages to make them dynamic.
Interest in and use of the World Wide Web has been expanding at a phenomenal rate. As the Web grows, so must its vehicle of communication, HTML. The HTML 2.0 specification is dated November,1995. Since then, the HTML 3.0 draft specification expired on September 28, 1995, without becoming recommended, and HTML 3.2 became a W3C (World Wide Web Consortium) Recommendation on January 14, 1997. Now we have the public draft for HTML 4.0, announced on July 8, 1997. This draft is almost certain to undergo changes before being accepted by the W3C as a Proposed Recommendation--if it does, indeed, ever become a recommendation.
In addition to this official work on HTML, the browsers have been making their own additions to HTML. Some changes were eventually adopted into W3C HTML Recommendations; others remain proprietary coding aspects that only the individual browsers recognize. The browsers' versions of HTML changed, too, in a game of marketing and programming one-upmanship, hoping to lock Web developers into using one browser or the other exclusively.
HTML 4.0
In order to keep up with (or try to) the rapidly changing world of HTML, we present here the changes between HTML 3.2 and HTML 4.0. HTML 4.0 introduces eight new elements, deprecates ten (more about deprecation in a bit), and makes obsolete three more. Frames, formerly only found in the browser versions of HTML, join the official fold. Tables provide better tabular presentation; forms more readily respond to the needs of the disabled; style sheets provide for better formatting and presentation; and multimedia, scripting, and printing are improved. And, as if that weren't enough, HTML 4.0 uses a different character-encoding format that expands the number of alphabets and languages able to implement Web documents.
New Tags in HTML 4.0: The W3C document "Changes between HTML 3.2 and HTML 4.0" lists eight new tags in HTML 4.0.
A brief description of these tags follows:
<Q>...</Q>
The <Q>...</Q> tag acts much the same as the <BLOCKQUOTE> tag, but applies to shorter quoted sections, ones that don't need paragraph breaks.
Example:
Deprecated Tags in HTML 4.0, Deprecated tags and attributes are those that have been replaced by other, newer, HTML constructs. Deprecated tags are still included in the HTML draft or recommendation but are clearly marked as deprecated. Once deprecated, tags may well become obsolete. The draft "strongly urges" the nonuse of deprecated tags.
Obsolete Tags in HTML 4.0
Obsolete tags have been removed from the HTML specification. While browsers may still support obsolete tags, there is no guarantee that this support will continue.
The three tags that become obsolete in HTML 4.0 are <XMP>, <PLAINTEXT>, and <LISTING>. In all cases, replace these tags with <PRE>.
Apparently the HTML 4.0 buzzwords are starting to make the mainstream. The email letters asking questions about what is to come are beginning to pile up. So I looked into it.
Questions Regarding HTML 4.0
I use Netscape 4 (or Explorer 4). Does that mean I should be writing in HTML 4.0?
Ah, logic! Man, that sounds like it should be correct I know, but it isn't. Version numbers of the two main browsers have nothing to do with what version of HTML they use. Now, someone is going to go bonkers at this point and tell me that some elements of HTML 4.0 are available for use in browsers version 4. True -- but the manufacturers of the browsers did not wait for their version 4 number to incorporate HTML 4.0. This is one of those strange scientific synchronicities called a coincidence.
BUT! With that said, some of these commands can be run using the 4.0 (and some earlier) browsers. When we actually get to the commands, I'll offer some additional pages of examples of the commands. Then you can see if they actually work for your browser or not.
Now might be a good time to discuss what all these version numbers mean. There are no hard or fast rules to this, but here's the generally accepted method for giving version numbers to software:
- If there is a major change to the product, step up the number by one.
- If there are tweaks to the product, add a point "something" number.
What version of HTML are we currently using?
The last accepted version is HTML 3.2. So, from the discussion above, you can see that HTML has gone through three major overhauls and then a couple of tweaks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> That's a Declaration Statement. It sits at the very top of the page and proclaims to the browser that displays the page that the following page is using HTML 3.2. See above? The Document Type Declaration (DTD) is HTML 3.2. When you start to run 4.0, you'll change out the 3.2 with the number 4.0. The "EN" means English.
Who decided we should all go to HTML 4.0?
The World Wide Web Consortium. And actually, they don't decide at all. They are the governing body of HTML, among other things. They make suggestions and hopefully the browser-makers follow, but not always. Case in point -- the <BLINK> command works in Netscape, but not in Explorer. Go figure.
Every time I hear about HTML 4.0, I also hear about SGML and XML. What are they?
SGML stands for Standard Generalized MarkUp Language.
And you already use it. SGML is the mother of HTML. Think of it this way: By using SGML, you have the ability to create your own tags. I want the tag <ZORK> to represent text that is bold, italic, and Arial font. By using SGML code, I can set it up. HTML is simply a set standard of tags under the huge SGML umbrella.
XML stands for eXtensible MarkUp Language. XML is a sub-set of SGML, as is HTML. The best description of the language comes denotes XML as a very simplified version of SGML. It is a version of the language that people can understand. If SGML is a bear, XML is a kitten. It will allow you to set up your own tags and mathematical equations using commands that you can probably understand.
Now, the concern I see coming out of all of this fancy new stuff is that it might do damage to the Web.
You see, HTML was a stunningly easy language that took computer programming out of the hands of folks with slide rules and gave it to you and me -- the weekend silicon warriors. We understood it. It made some sense.
Introducing SGML and XML, in my mind, is the first real shot the higher-ups have of driving people away. It's something new and most people are comfortable now. Introducing it might stratify the audience or make people drop out all together.
But not to worry. The full incorporation of these languages is years away. By then, there will probably be good, solid, programming software that will do most of the XML work for you.
There are four sections below: New Commands, New Sub-Commands, Deprecated Commands, and Dead Commands. After the first two sections, there will be a link to a page containing the commands. Some are actually available today for use. You'll be able to see if your setup does the trick or not with these HTML 4.0 commands.
New Commands
The following 22 commands are "new" and will be incorporated into HTML 4.0:
<ABBR> This indicates an abbreviated form of a word. Example:
<ABBR TITLE="National Football League">NFL</ABBR>
The TITLE command produces a rollover title like the ALT command does on pictures.
<ACRONYM> This works the same way as above except it denotes an acronym. Example:
<ACRONYM TITLE="Self-Contained Underwater Breathing Apparatus>SCUBA</ACRONYM>
<BDO> This is difficult to explain. Text goes left to right and sometimes right to left. The BDO command denotes to the computer to leave the text in the direction it is currently in. If you write in Hebrew, a language written right to left, using the BDO will ensure that other elements such as spell checkers and such won't be incorporated that will flip text around. It is most often used in the PRE tags. Example:
<PRE>
<BDO DIR="LTR">hello</BDO>
</PRE>
LTR means "left to right". Guess what "right to left" is represented by. Yup, RTL.
<BUTTON> This will become standard code for creating link buttons, like in a guest book form. Example:
<BUTTON name="submit" value="submit" type="submit"></BUTTON>
What's more, this format will easily allow for an image to be placed on the button.
<COLGROUP> This command allows for an entire column of data in a table to be affected by one command rather than using a separate command for each cell. Example:
<COLGROUP WIDTH="30%"></COLGROUP>
<DEL> Surrounding something with this command will provide a strikethrough over what it deleted. Example:
Version <DEL>3</DEL><INS>4</INS>
Now you have a jump on what the new command INS does. You'll get to it in a couple.
<FIELDSET> This allows people to group controls on a page together, like grouping buttons that affect a certain JavaScript so there won't be any interaction between other scripts on the same page or sections of a guest book. It works in tandem with the LEGEND command below. An example will be waiting there.
<FRAME> This works the same way as the FRAME command we have today except it has been delegated new powers to denote specific traits to each frame cell. It allows for many more abilities with Style Sheets. The reason this is listed is that it will be a specific subset of commands for use with SGML format styles.
<FRAMESET> Ditto this one, except this deals with larger sections of frame pages. For instance, you have a page with four frame cells. You want only the ones on the left to have green borders. You use this command to set aside those two vertical frames and assign traits to just that section. The reason this is listed is that it will be a specific subset of commands for use with SGML format styles.
<IFRAME> This again works much the same way as the In-Line frames we currently use. Again, the reason this is listed is that it will be a specific subset of commands for use with SGML format styles.
<INS> You saw how this works above. It sets something aside as having been added or "inserted" at a later time. It is denoted by an underline.
<LABEL> This command attaches a label to form commands. Example:
<FORM ACTION="--">
<LABEL for="email">Email Address</LABEL>
<INPUT type="text" name="email_address" id="email">
<LEGEND> Now, we get to the example denoted above from the command FIELDSET.
FIELDSET groups form items together. LEGEND denotes those sections. Example:
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Name: [Input Text Box]
EMAIL: [Input Text Box]
AGE: [Input Text Box]
</FIELDSET>
It keeps it all straight for the computer.
<NOFRAMES> This denotes text content that displays if the user does not have frame capabilities. It's been around for a while, but now is officially being brought into the fold.
<NOSCRIPT> Ditto above.
<OBJECT> This command will become a replacement command for IMG, ISMAP, APPLET, SCRIPT, and myriad other "objects" that appear on the page. This one command will represent that something is going to be placed on the page. The computer then decides what kind of object it is due to its extension. Example:
<OBJECT data="image.gif" type="image/gif"></OBJECT>
~or~
<OBJECT classid="applet.class"></OBJECT>
~or~
<OBJECT data="movie.avi" type="application/avi"></OBJECT>
<OPTGROUP> How this will be handled is still a little fuzzy, but it appears that this will allow for multiple groups of information inside Pull-Down menus -- much like the menus produced by the W95 "Start" button.
<PARAM> This command will be used with applets to set parameters. It's already in use, but is now being brought into the fold.
<SPAN> Think of the SPAN element in terms of it's being an equal to the <DIV> command. It denotes a certain division of the page or span of text that can then be altered to your heart's content. Example:
<SPAN CLASS="green">This would be green text</SPAN>
<TBODY> This command will surround a block of table cells so that you can affect just that section. Keep reading...
<TFOOT> This will allow you to place a footer below each TBODY section of a table. Notice all the commands are TR rather than TD. Here's an example for both TBODY and TFOOT:
<TABLE>
<TBODY bgcolor="--">
<TR> text
<TR> text
</TBODY>
<TFOOT><TR>The above cells...</TFOOT>
</TABLE>
<THREAD> This is header information for a group of cells -- used exactly the same way as the TFOOT above -- except above the group of cells are set apart by the TBODY command. Like so:
<TABLE>
<THREAD><TR> The following cells...</THREAD>
<TBODY bgcolor="--">
<TR> text
<TR> text
</TBODY>
<TFOOT><TR>The above cells...</TFOOT>
</TABLE>
<Q> The difference between the Q command and the BLOCKQUOTE command is that the Q command is much easier to write. Use them exactly the same way.
Some New Sub-Commands
This is where HTML shines: The sub-commands. The sub-commands allow a simple table cell to have color and size. They allow an image to have text and set sizes. The sub-commands are where true HTML usage shines. And there are a few new ones to be concerned with in HTML 4.0. Here you go....
<CLASS> This is already in use in Explorer versions 3 and 4. First you set up a class with Style Sheet commands. (See my tutorial on Classes and IDs for how to do it). Then you call for the style sheet using the class command. Example:
<SPAN CLASS="purple">Affected text</SPAN>
<DIR> This was touched on above in the BDO command. The DIR sub-command denotes whether the text is to be read LTR (Left to Right) or RTL (Right to Left).
<ID> The ID can be used in the same manner as the CLASS sub-command above; however, in HTML 4.0 it is also being used to denote sections of the page. In short, it acts like a Page Jump. Example:
<A HREF="#sectionone-id">Jump to Section One</A>
The command above will jump to this:
<SPAN ID="sectionone">section One</SPAN>
This method is a little better than the page jump because it jumps to a section of text rather than just to a point on the page.
<LANG> This is clever, because it helps the search engines understand different languages as being different languages rather than just misspelled English. First, an Example:
<SPAN LANG="es">Hola! Como esta?</SPAN>
Those of you who remember your high school Spanish know that phrase above loosely translates to "Hi, how ya doin'?"
Now, contrary to what you might be thinking, the LANG sub-command does not translate. You must still write the text in the native tongue. The LANG command just allows the search engines to recognize that section as Spanish text.
In case you're wondering, here are some other codes: ar (Arabic), de (German), el (Greek), fr (French), he (Hebrew), hi (Hindi), ja (Japanese), it (Italian), nl (Dutch), pt (Portuguese), ur (Urdu), ru (Russian), sa (Sanskrit), zh (Chinese).
Yes, there is also a code set aside if you wish to denote a language that doesn't really exist, like Pig-Latin or Klingon. Follow the same format as above except add x- before the name, like so: LANG="x-ubbee dubbie". The "x" means it's an experimental language.
<TITLE> This title command works the same way as the ALT command in an IMG command. It allows you to place a title onto just about anything so that when the mouse remains stationary for a second, a text box pops up. Example:
<SPAN TITLE="National Football League">NFL</SPAN>
Now, every time someone places their mouse on that set of initials, the box will pop up saying "National Football League." It can be very helpful.
^ Back to Top ^
|