HTML (English) 03
Basic HTML
Let’s take a few minutes to minutes to look through the part of the page you just built before you make it fancy. But first, a word of caution. Although HTML is a simple language, its size and complexity is growing rapidly, fortunately, the fastest area of HTML language growth is in browser-specific tags that you’re advised to avoid anyway. Most of these tags merely allow you to do things that could be done more portably using Java. Because many Web designers are not Java programmers, they desperately need these tags. You, however, soon will not.
WHAT IS A TAG?
The Frequent references to HTML tags in the preceding paragraphs have not described precisely what a tag is. A tag is simply a command to the browser. Here’s an example of a tag:
<HTML>
This tag is placed at the beginning of every HTML document and tells the browser “Look out, what’s coming next is an HTML document, so get ready.” In fact, if you’re looking at the contents of a file and notice that this tag appears as the first thing in the file, it’s a safe bet you’re looking at an HTML document.
As you can see, a tag is surrounded by angle brackets (<and>). These separate the tag from nearby text so the browser can easily distinguish text from the tags that specify how the text is to be formatted. The “word” between the angle brackets is the instruction or command. Of course, this word isn’t likely to be found in a dictionary. It’s a keyword that is part of the HTML language, and this particular keyword, HTML, simply tells the browser that any following text is to be considered an HTML document.
Structural Tags
Along with the <HTML> tag, there are several other tags that are found in almost every HTML document. These are sometimes called structural tags, because they identify certain standard items and divide the document into several parts, each with a specific purpose. The HTML program you just typed shows the most basic structural tags.
Notice that in addition to the <HTML> at the beginning, there is an </HTML> tag at the end. These tags define the beginning and end of the HTML document. Most HTML tags occur like this, in pairs. The first tag denotes the beginning of a block of text; the second tag, named like the first but with a leading slash, denotes the end. The pair is used like a set of bookends to enclose the text block.
Following the <HTML> tag is a <HEAD> tag, which identifies the heading portion of the document. HTML files are usually divided into two parts, a heading and a body. A number of items can be placed in the heading block, but the only one that is required is the <TITLE> item. Between the <TITLE> and </TITLE> tags is a block of text that will be used as the title of this HTML document. Most browsers display the title of an HTML document in the title bar of the browser window. Notice how the window’ title bar displays the words you typed between the <TITLE> and </TITLE> tags. The end of the heading portion is denoted, just as you might except, by the <HTML> tag.
After the heading of the HTML document comes the body, surrounded by the <BODY> and <BODY> tags. This is where you put the text and tags that you will see in the browser window. In your example page, the only text is the greeting, “Welcome to Jumbo’s.” And frankly, it looks puny. Jumbo is not going to attract any business this way. Let’s spice it up a little. As we continue to make changes to Jumbo’s page, update your own copy using Notepad, incorporating the changes as they’re introduced. View the result of the changes with your browser.
HEADINGS
Let’s star with some headings, which you can see in listing 1-2.
Listing 1-2 Headngs.html
<HTML> <HEAD> <TITLE>Jumbo’s Jungle Java Joint – Home Page</TITLE>
</HEAD.
<BODY>
<H1>Jumbo’s Jungle Java Joint </H1>
<H2> Welcome to Jumbo’s </H2>
<H3>Our Primo Daily Specials </H3>
<H4>Business Class Specials </H4>
<H5>ALL-You-Can-Drink Specials </H5>
<H6>Jumbo’s Complain Department </H6>
If you wish to complain, go elsewhere!
Jumbo’s is a negative-free zone!
<BODY>
<HTML>
HTML provides six levels of headings, from the largest, <H1>, to the smallest, <H6>. As with the tags you saw previously, the heading tags are paired with their “evil twins,” the ending tags, <H1> through <H6>. Although the example program has lined up the ending tags so that they are easy to see, this formatting has absolutely no effect on the output. What does happen is that all of the text between each of the heading tag pairs is displayed in a slightly different size and/or style of text. On most systems, the quite small level -6 heading is truly difficult to read.
