Mandatory Structures | Optional Structures | Comments
Apart from block and inline tags, several other elements are very useful — some are required — that do not categorize well. To escape calling this section "Miscellaneous," I am calling them function tags. Nobody else (to my knowledge) uses this designation; do not mistake it for official terminology. But do pay attention to this section; these tags typically are not handled well by the automated web editing programs, yet mastering these tags will make a huge difference in the quality of your pages.
<HTML> - <HEAD> - <BODY>:
Mandatory
Structures
Back at the beginning of this tutorial, I gave you an example of a complete web document:
<HTML> |
Hello, world! |
Three of the five element you see in that code are
required for a valid HTML document: <HTML>, <HEAD> and <BODY>. They each
must be present, and there must only be one of each.
<HTML>
The <HTML> element is the root element for a web
page. All tags (with one optional exception) must be contained within the HTML
element. That is, there are only two elements that are directly contained
within <HTML> (<HEAD> and <BODY>), and those two contain all other
elements.
The exception — the only text in your webpage
file that may exist outside of <HTML> ... </HTML> — is the document type declaration
(DTD), an element that in effect tells any program attempting to render the
page, "This thing is HTML, and if you don't know how to display the code,
here's where you can read the flippin' manual." For instance, if you were to
view the source for this page, at the top of the file you would see:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN" "hmpro6.dtd"> |
Loosely translated, that means, "This English-language document conforms with HTML version 3.2 as publicly defined by the W3C. Rendering instructions are available in the file, hmpro6.dtd." As it happens, this DTD is automatically generated by my web editing program of choice, HoTMetaL Pro, and it is perhaps the least well-executed feature of the program. While referring to a local file may be useful while one is creating the document, it is frankly useless once the document goes on the Web. However, since web browsers have a built-in tendency to treat documents as HTML unless proven otherwise, the statement does no harm. In point of fact, you may safely ignore placing a DTD in your HTML pages. (Note: XML, when it comes along, will be a different matter altogether. If and when you have the joy of working in XML, the DTD will become crucial.)
Is it physically impossible to put anything besides
the DTD outside the <HTML> element? No. In fact, some server systems ask you
to put text before the HTML coding in certain specific circumstances. However,
anything that is not inside the <HTML> element will not be considered by a web
browser as part of the webpage. There's no telling what may happen to it.
Probably it won't show up. But don't count on it.
As to the <HTML> tag itself, it's simple. No
attributes. It contains one <HEAD> element (which may contain a few elements)
and one <BODY> element (which contains every element that gets rendered in the
browser). Period.
Well, almost period. The rules change if you
are building frames in your document. But in order to understand how <HTML>
behaves, just pretend that you can only have <HEAD> and <BODY>. You'll be
fine. When you're ready for another layer of complexity, go to
Frames.
<HEAD>
The <HEAD> element contains metadata for
your web page. Metadata is information about information; in this case,
information about your webpage. <HEAD> is not rendered by your browser (at
least, not in the browser display window), but it is important to the health
and wellbeing of your page.
<HEAD> must, as a minimum, contain one (and only one)
<TITLE> element, such as the one you would see in this web page:
<HEAD><TITLE="PYM Web Agent Orientation: Instruction - Function Tags"></HEAD> |
The title is not the first headline that is rendered by the browser in the web page (unless you happen to have used the same words in a headline element at the top of the page). The title does get displayed by some browsers in the command bar at the top of the program window (however, you might not see the title of this particular page, because it is displayed in part of a frame set — more on that later, don't worry about it now). The title is also used by web indexing services (such as AltaVista and Northern Light) as a main indicator of the contents of the page. Most web editor programs will insert a blank or dummy title — while your webpage will not look one bit different if you ignore the title, you will be doing your page, yourself, and the Web community a huge disservice if you do not change "Put your title here" to something meaningful. And someday, they'll get you.
In addition to <TITLE>, you can provide other metadata
in the <HEAD> element by means of one or more optional <META> elements, such
as ...
<HEAD> |
As with <TITLE>, the primary audience for <META>
elements is the web indexing services. A <META> element typically has two
attributes: NAME (the type of metadata in this element) and CONTENT (the
actual metadata). Meta-keywords suggests indexing terms for categorizing your
page, and meta-summary suggests text that can be posted in an online directory
to describe your page. Note the word "suggests": less-than-scrupulous web
authors have found all sorts of creative ways to abuse meta tags in order to
gain prominence in search engines (to get listed in the coveted first page of
listings when someone enters a search term) and indexing services have
countered with creative penalties for these abuses.
For instance, web authors have tried repeating one
word dozens of times in the meta-keyword tag in order to make their page seem
to be the authority on that term. Most indexing services now will refuse to
index any page that uses a term more than a few times in a <META> element.
Experienced web authors may have noticed that I did not include commas in the meta keywords tag example. There is a reason. Most people would have coded that tag as ...
<META NAME="keywords" CONTENT="Friends, Quaker,
Quaker committees, committees, religion, structure"> |
... which treats each word or phrase as separate
values of keywords. By not inserting commas, you allow the search
engine to assemble any phrase it wants out of consecutive words, as well as
picking out individual words.
One more type of <META> tag behaves quite differently
from the others:
<META CONTENT="3; URL=default.htm"
HTTP-EQUIV="refresh"> |
Most <META> elements passively provide information.
The "refresh meta" (also known as a redirect) will pause for a specified number
of seconds and then replace the current page with a different one. In this
example, three seconds after the current page is loaded, it will be replaced by
default.htm. The user has no control in this. This tag is best used when you
have changed a page to a different file name. You can put a very simple page at
the former address, redirecting immediately (0 seconds) to the new one.
<HEAD> can also contain one or more <SCRIPT> elements,
which call upon programming, either on the webserver or the visitor's computer,
to perform special functions. For that matter, <SCRIPT> may also be contained in
the <BODY> element, or even free-standing. It provides instructions for
supplemental programming, such as JavaScript or VBScript (Visual Basic,
Scripting Edition), to create user-interaction functions or display effects
that are not part of the standard HTML feature set. Since the grammar of the
programming languages is quite different from HTML, and since this is an
introductory tutorial in HTML, I am going to leave <SCRIPT> shrouded in mystery,
as a topic for advanced study.
Also, <HEAD> may include one or more <LINK>
elements. The purpose of <LINK> is to establish a relationship between the web
page and another document or address. For instance ...
<LINK REL="next" HREF="chapter20.htm"> |
... indicates that the site was designed so that a
person reading this page should next go to chapter20.htm. The fundamental
attributes of <LINK> are HREF (same meaning as in anchor tags) and one of
either REL (forward relationship) or REV (reverse relationship). The
value of REL or REV is one of several terms specified by W3C:
-
alternate(a substitute version), stylesheet(style instructions for rendering the elements of the page),start(the first document in a sequential collection, such as a book with several chapters and an introduction),next(the next document after the current one in a sequence),prev(the previous document),contents(table of contents),index,glossary,copyright,chapter,section,subsection,appendix,help,orbookmark(an alternate entry point within a lengthy document).
<LINK> is a function that seemed like a good idea at
the time that it was designed into HTML but is little used in actual practice.
This may change over time, as cascading style sheets (and the corresponding <LINK REL="stylesheet"
HREF="x"> element) become more widely used and useful.
Finally, <HEAD> may contain one <STYLE> element,
which specifies style attributes for use in the document. This element is
discussed as part of Cascading Style Sheets.
<BODY>
The <BODY> element contains everything that gets
rendered in the browser window: the block elements, the inline elements —
everything that's rendered is contained in something that is contained in
something else that ultimately is contained in <BODY> ... </BODY>.
Several attributes of <BODY> allow you to take
control of default values for the rendering of the page. Because browsers
provide default values for these attributes, they are all considered
optional.
BACKGROUND-
... uses a specified image as a backdrop for the page. The value of
BACKGROUNDis a URL (almost always a relative URL) for the image file. One has to be very careful to use an image that will not make the overlying type hard to read. Also, the image should tile properly; that is, each edge of the image should match up with its opposite edge (top to bottom, left to right) when the image is repeated, so that it forms one smooth surface. BGCOLOR-
... uses a solid color as background. This loads faster in the browser, and arguably makes for an easier-to-read page, than
BACKGROUND. The value ofBGCOLORmay be either one of several specific color words (such aswhite) or a hexidecimal color value (such as#FFFFFF), in the same manner as theCOLORattribute of<FONT>. For more details on specifying color, see the color discussion in <FONT>.If both
BACKGROUNDandBGCOLORare specified, then the browser will attempt to render the page with theBACKGROUNDimage. If the image is not available (or if the browser is not capable of using a background image), then theBGCOLORwill be used. For this reason, it is good practice when usingBACKGROUNDto also specifyBGCOLOR. TEXT-
... sets the color of type, except in anchors (
<A>elements).TEXTaffects all block elements, such as paragraphs, headlines and lists. LikeBGCOLOR, the value ofTEXTcan be either a color term or hexadecimal number. Note that<BODY TEXT="...">only affects the color of the text, not the typeface or any other attribute addressed by<FONT>. LINK, ALINK, VLINK-
... set the color of type in anchors, active anchors, and visited anchors, respectively. An anchor on your page that has not yet been clicked by the user is governed by the
LINKattribute. While she is clicking the link, it is governed byALINK. When she returns to your page, the links she has already clicked are governed byVLINK. Again, the value can be a color term or hexadecimal number.
A body tag with several of these attributes would look like ...
<BODY
BGCOLOR="white" TEXT="#000066" LINK="#0000CC" ALINK="#0000FF" VLINK="#0000FF"> |
|
See Bestiary. |
<DIV> - <SPAN>:
Optional Structures
There are times when — as a page author —
you may want to define a section of your page as part of the process of working
with your web site. It may be a group of elements that you want to handle as a
unit, for example. You have two tags at your command: <DIV> (for grouping one
or more block elements) and <SPAN> (for grouping text and inline elements).
The code would look like ...
<DIV><P>This is a <SPAN>sentence or two</SPAN> in a paragraph.</P> |
|
This is a sentence or two in a paragraph. This is another paragraph. This is a third paragraph. |
In this regard, they are passive and invisible.
However, they can be used to influence the appearance of the page. <DIV> can
take the attribute ALIGN, which can have the value LEFT, CENTER, RIGHT or JUSTIFY, as in
...
<DIV ALIGN="RIGHT"><P>This is a <SPAN>sentence or two</SPAN> in a paragraph.</P> |
|
This is a sentence or two in a paragraph. This is another paragraph. This is a third paragraph. |
Thus, if you wanted to use an <ADDRESS> element (which
does not have an alignment attribute) flush right, you would simply enclose it
in a <DIV ALIGN="RIGHT"> element.
At a more sophisticated level of page coding, you can
apply styles to <DIV> and <SPAN> elements to achieve more precise control
over the rendering than conventional tags and attributes allow. This is a
matter for separate discussion, in Cascading Style
Sheets.
Comments
A practice that is not as common as it should be in programming is commenting; that is, annotating a program with side comments that are not part of a program, but explain what is going on. This helps other people to understand what the original programmer had in mind, as well as reminding the original programmer later on, when she goes back to revise the code.
This can also be helpful in building a website, especially if it is a team effort. The way to insert comments into the code of a web page, without their showing up in the page as rendered in a browser, is the comment element:
<!--This is a comment.--> |
| This isn't. |
Someone who is looking at the page as rendered
by the browser will not see the comment (an empty tag that starts with
<!--and ends with -->). However, this does not mean that the
text is not present. If the user uses his browser to view the source of the
page, he will see the comment, so be careful what you say.
Apart from passing comments to humans looking at the source code, comment elements can also be used to pass instructions to server-side programming. For instance, the PYM webserver parses (interprets) each web page before it serves it. The primary reason for this is to look for comments that insert the PYM standard navigation header and footer. In the example below, the end user would never see the comment, because our webserver parses the page and replaces the comment with the code in PYMheader.htm to create the mapped graphic:
<!--#include virtual="/PYMheader.htm"--> |
|
|
Incidentally, pym.org exploits an effect that
shouldn't work. The code in PYMheader.htm opens a <BODY> tag that sets colors
for page background, text, and anchors. If these attributes have not been set
in the <BODY> tag of the page inserting PYMheader.htm, then the inserted
values take effect. However, if the page picking up the insertion has already
specified these attributes, those specifications hold. Why this works is not
clear; according to W3C specs, it shouldn't. Ideally, unless purposely
specified otherwise (in cases such as PYM News), the <BODY> tag
for all pages in pym.org should read:
<BODY BGCOLOR="#CCCCCC" TEXT="#000066" LINK="#0000CC" VLINK="#000099"
ALINK="#0000FF"> |
When all pages are correctly formatted, then we can remove the questionable code from PYMheader.htm.