- HTML Code Declaration Segment
-
<HTML></HTML>
This segment lets Internet browsers know how the document is formatted.
HTML documents must begin with the <HTML>
command and end with the </HTML> command.
Example:
<HTML>
- first line of the file.
(The codes that describe and define the HTML document
go here)
</HTML>
- last line of the file.
Many WWW authors also include, directly above the HTML Code Declaration at the
very top of the HTML Document the
following additional
Document Type Definition Statement:
HTML documents should contain a document type definition statement like the one shown
below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
Note that
it contains an exclamation point - ! - directly after the command opening - <!.
This indicates to the browser that this is a comment and should not be displayed.
But in this case the browser also
recognizes that this opening comment declares that this HTML Document is; (1) publically
accessible on the WWW; (2) uses HTML version
4.01 transitional conventions; and, (3) that it is in English. The document type definition
statement also references a loose (transitional) DTD document at the World Wide Web Consortium
(www.w3.org)
which the browser can access for HTML environmental parameters.
While this opening language declaratory comment is not strictly necessary it does
help to set up an appropriate browser environment and validation for the HTML Document. Note
that in some browsers it will cause a transitory "Transfer Interrupted!"
to be displayed while the browser resets environmental parameters and begins to
interpret the HTML code.
- HEAD Segment
-
<HEAD></HEAD>
This segment defines the WWW and browser environment for the HTML document and contains
descriptive information about the document for WWW users and WWW search engines.
All HTML documents must contain a HEAD Segment. This segment must come first in
the HTML document, directly after the
<HTML>
command and before the BODY Segment.
At a minimum, the HEAD Segment should contain a Title for the HTML
document which matches the First Heading (below).
Example:
<HEAD>
- second line of the file.
<TITLE>
(HTML Document Title goes here)
</TITLE>
</HEAD>
- ends the HEAD segment.
Defining the WWW and Browser Environment:
In the <HEAD></HEAD> Document Segment, in
addition to the <TITLE></TITLE> definition, there are several arguments
which should be used to further define the WWW and browser environments for the
HTML Document:
- META Tags -
The so-called META tags are used to make declarations about the
HTML Document to the Internet browser and the Internet search engines.
They are used by many of the major WWW search engines to help indentify the
HTML Document, register it and add value to the index terms applied to it for
searchability. Proper use of the META tags can greatly enhance
the "findability" of an HTML document in the WWW search engines.
The general form of the descriptive META tag is shown in the example below:
Example:
<meta name=" . . . " content=" . . . ">
Some of the more commonly used descriptive META tags are presented in the table
below:
|
Name
|
Content
|
|
author
|
The name of the author of the HTML Document.
|
Example:
<meta name="author" content="John Q. Doe">
|
|
copyright
|
The name of the copyright holder.
|
Example:
<meta name="copyright" content="Copyright (c) 1996-1998 John Q. Doe.">
|
|
description
|
A brief description of the document content.
|
Example:
<meta name="description" content="football team logos and images">
|
|
distribution
|
The intended audience or distribution.
|
Example:
<meta name="distribution" content="global">
|
|
keywords
|
A list of informative keywords or index terms which clearly define or indicate the the document content.
|
Example:
<meta name="keywords" content="AFL; AMERICAN FOOTBAL LEAGUE; AFL LOGOS; NFL; NATIONAL FOOTBALL LEAGUE; NFL LOGOS; FOOTBALL TEAM LOGOS; FOOTBALL LOGOS; IMAGES; GIF; JPG">
|
|
owner
|
The owner of the HTML Document.
|
Example:
<meta name="owner" content="John Q. Doe">
|
See also the suggested Language Declaration
Statement document opening comment line above.
In addition to the descriptive META tag statements outlined above HTML also
allows the use of the http-equiv attribute argument which can be used
to further define HTML Document content and conventions or load other HTML Documents.
File Format and Character Set Declaration:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
This META command indicates to the browser that the HTML Document is plain ASCII
text and that it uses the standard international character set.
Client Pull Request:
<meta http-equiv="Refresh" content="n; URL=url">
This form of the META command causes a so-called "client pull" to be performed after
n seconds have elapsed. The browser will automatically load the code at the
location specified by the URL url argument. The Refresh argument
indicates to the browser that the content found at the client pull URL should replace
the currently displayed HTML Document.
Example:
<meta http-equiv="Refresh" content="30; URL=http://www.ibm.com">
This would cause the browser to load the code available at URL
http://www.ibm.com
after 30 seconds had elapsed. This is a good mechanism to automatically
refer clients to an alternate location if the content of the WWW page has been relocated
to a new URL.
Independent Rating Service Declaration:
<meta http-equiv="PICS-Label" content="label list">
This form of the META command can announce to the browser and to
any auxiliary parental control screening software such as
NetNanny or
CyperPatrol what rating has been
applied to this WWW site by one or more of the current independent Internet Rating
Services such as RSAC (Recreational Software Advisory Council)
or SurfWatch. The
label list argument would contain the indepent rating service's list of rating
labels for the registered site. For a
comprehensive list of parental control programs see the IDS World Network
discussion.
Example:
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment
"RSACi North America Server" by "webmaster@iconbazaar.com"
for "http://www.iconbazaar.com/" on "1997.10.20T10:36-0800"
r (n 0 s 0 v 0 l 0))'>
This would inform parental control filtering software that the WWW site available at URL
http://www.iconbazaar.com/
was rated 0 ("G") on October 20, 1997 by RSAC for nudity, sex,
violence and language. Note
that the email address of the contact for the rated WWW site is also included.
At present, only the Internet Explorer browser from Microsoft supports the independent rating
service content advisory META tag.
- BASE Tags -
The so-called BASE Tags define global level
display and location attributes for the HTML Document. The browser may or
may not act on these settings depending on whether or not it is capable of
recognizing them and the user has not disabled or overridden them in the browser
software preference settings at the local level.
The general form of the descriptive META tag is shown in the example below:
Example:
<base[...] attribute1 attribute2 . . .">
The currently defined BASE Tags are presented in the table
below:
|
Base Tag
|
Usage/Arguments
|
|
base href
See Anchors & Links
|
The root URL to apply to relative hypertext links in the HTML Document.
The argument is the provided URL.
|
Example:
<base href="../">
The base href URL provided would become the prefix added automatically to any relative
URLs defined as links within the HTML Document.
|
|
base target
See Anchors & Links
|
The target to apply to all hypertext links in the HTML Document.
The argument is the target name. The target can be a named frame in the current
HTML Document or in another HTML Document. There are currently several
reserved target names. These are:
_blank Always loads the link into a new,
unnamed window.
_parent Always loads the link over the parent
HTML Document, if any.
_self Always loads the link over itself into
the current window.
_top Always loads the link at the top level
of the window.
|
Example:
<base target="_top">
This statement would force all hypertext links contained within the HTML
Document to load at the "top" of the browser, that is, to replace the content
of the current page entirely.
|
|
basefont
Note that basefont is a single command term.
See Text & Fonts
|
Sets the global font attributes for the HTML Document.
Attributes are:
color - the hexadecimal value for the desired font
color in the format #RRGGBB (red/green/blue).
(Only Internet Explorer)
face - defines a list of font faces for the browser
to attempt to find in the order provided and
use as the default for display.
size - from 1 (smallest) to 7 (largest) where 3
is the default font size.
|
Example:
<basefont="arial,geneva,helv" size="2" color="#0000FF">
This statement would instruct the browser: • To attempt to load the locally installed fonts named
arial, geneva and helv in the order provided. If none of the
fonts were found on the local microcomputer then the default
font, as defined in the browser settings, would be loaded.
• To set the default font size from the default of 3 to 2.
• To attempt to set the default font color from black
(#000000) to bright blue (#0000FF).
|
- BODY Segment
-
<BODY></BODY>
This segment contains the actual content of the HTML document that is displayed
by the Internet browser. All HTML documents must have a BODY Segment.
The <BODY> command can contain codes
that define text colors, screen colors and background images for the WWW page.
At a minimum, it should contain a First Heading -
<H1></H1> - which matches the
HTML Document Title (above).
Example:
<BODY> -
begins the BODY segment of the HTML Document.
<H1>
(HTML Document First Heading goes here)
</H1>
. . . HTML Document Contents go here. . .
</BODY>
- ends the BODY segment.
Setting BODY Segment Defaults:
Contained with the BODY statement are five basic attributes which define
the display characteristics of the HTML Document. These are:
|
Attribute
|
Usage/Parameters
|
|
background
|
This defines the URL to an image to be loaded and displayed behind the
document as a background. The URL can be relative, if a base href
attribute is set, or a completely formed URL to the target image.
The background and bgcolor attributes are mutually exclusive
since a background image will always overlay any background color provided.
|
Example:
background="http://www.iconbazaar.com/sky.jpg"
This would load the image sky.jpg found at the URL provided as the
background for the HTML Document.
|
Tip:
Using a background color and a background image together on
the same webpage can produce interesting color and shading effects.
By default, any visible borders or horizontal rules on the page take
their shading values from the page background color. So if you specify
a background color significantly lighter or darker than the predominant
shade of the background image, or if you chose a background color in
a contrasting hue, then the shading on borders and horizontal rules can
become very dramatic.
|
|
bgcolor
For this and other color attribute settings,
see the discussion of font RGB color settings in the
Fonts tutorial.
|
This sets the background color which will be used for the HTML Document.
The background color is set using the hexadecimal code for the red/green/blue
components of the displayed color (#RRGGBB).
The default background color is white (#FFFFFF).
The background and bgcolor attributes are mutually exclusive
since a background image will always overlay any background color provided.
|
Example:
bgcolor="#EEFFFF"
This would set the RGB color settings for the background to a light
sky blue.
|
|
text
|
This sets the color of the base font for the HTML Document.
|
Example:
text="#000066"
This would set the base font color to dark blue.
The default is generally black (#000000).
|
|
link
|
This sets the RGB color attribute used to display unfollowed links.
|
Example:
link="#CCCCFF"
This would set the color of unvisited links to light blue.
The default is generally bright blue (#0000FF).
|
|
vlink
|
This sets the RGB color attribute used to display visited links.
|
Example:
vlink="#FFCC00"
This would set the RGB color for all visited links to orange.
The default is generally bright red (#FF0000).
|
|
alink
|
This sets the RGB color which is displayed momentarily when a link is
clicked on or followed.
|
Example:
alink="#FFFFFF"
Following a displayed link would cause it to flash white momentarily.
The default is generally bright red (#FF0000).
|
An Example Body Statement:
Below is reproduced the actual BODY attribute statement used for this
HTML Document:
<body
bgcolor = "#FFFFEE"
text = "#660000"
link = "#993300"
vlink = "#993300"
alink = "#FF0000">
Note that the statement has been couched over several lines to make the attributes more
readable. This does not affect code performance.
A Minimal HTML Document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My First HTML Document</TITLE>
</HEAD>
<BODY>
<H1>My First HTML Document</H1>
</BODY>
</HTML>
Website Structure
