You can use any text editor to compose and modify HTML text. Examples of text editors include MS-DOS's EDIT, PC-DOS's E, MS-Windows Notepad, the VMS EVE editor, the Unix vi, emacs, pico, or jove editors. Any of these will suffice. You can even use a word processor and then save your work as a text file.
There are programs available that will take a data file you create with a word processor or desktop publishing program and convert it to HTML information. There are also HTML-specific editors available.
But it is possible, even easy, to create HTML documents with a common text editor. In fact, you'll probably develop a better understanding of how HTML works. First, let's examine a sample HTML document:
<html> <head> <title>A Sample Document<title> <head> <body> <h1>This is a Sample Document<h1> <!-- This is a comment--> <hr> <p>Over <a href="other.html">here<a> <a href="http://hoohoo.ncsa.uiuc.edu/">NCSA<a><p> <body> <html>
This is how this document would look if displayed:
This is a Sample DocumentOver here you will find more sample information. Some of the best information is at NCSA. |
There are many Internet users that candidly use HTML or pseudo-HTML in their normal electronic mail messages and other online conversations to convey text formatting that would normally be unavailable to them in a strictly text environment.
The majority of services on the Internet are Unix based. Therefore, it makes sense for us to explain how to set up a Web page on a Unix system. If you're not using a Unix system to publish electronically on the Internet, don't worry- most HTTP servers for other operating systems try to duplicate the behavior of the Unix-based servers.
For most Unix systems, you can create a directory called public_html right off from your login directory. You need to assign this directory permissions so that other users (including the WWW server program) can read the information in that directory:
mkdir public_html chmod 755 public_html
This creates the directory and assigns the newly created directory permissions so that you, the owner, can read, write, and execute files, while everyone else can read and execute, but not write.
In the above example, you will notice the use of tags to denote special conditions within the HTML code, to format the text a certain way, or to indicate where hypertext links occur.
HTML tags are simply words, or commands, inside of greater-than and less-than symbols (< and >) In most cases a tag turns a command or attribute on while a similar tag where the enclosed command is preceded by a slash (/) will turn the command or attribute off. For example:
The <H1> tag tells the browser that the text between the tags is to be formatted as a header. Netscape does this by centering the text and uses a larger font to distinquish it from other text. Most tags are case insensitive, meaning that <H1> means the same thing as <h1>.<h1>This is a Sample Document<h1>
HTML comment tags are different than most HTML tags. To include a comment in your source code, begin it with <!-- and end it with -->. For example:
<!-- File created: 05 Nov 1995 -->
The first tag that should appear in an HTML document is the <HTML> tag. This tag is used to indicate the text which follows is hypertext. Incidentally, the last tag in the file should be the </html>, to indicate there is no more HTML information following that tag.
The HTML header is most often used just for the document title. It is a good idea to put comments in the header including your name, the name of the file, and the date it was last revised.
The HTML header begins with the <head> tag and ends with the </head> tag.
The document title goes between the <title> and </title> tags and appears in the HTML document header. This text you place between these tags is used by the browser in some way to title what is being shown on the screen. Netscape places the title text at the top of its window.
The HTML data that results in the information you interact with when using a browser falls between the <body> and </body> tags. The HTML document body should come after the </head> tag.
Standard HTML lets you mark six different levels of headings. Because of the nature of HTML, you really have no control over how a browser may display those headings. However, they are typically shown as larger, boldface type.
To mark a section of text as a heading use the <Hx> and </Hx> tags, where x is a number between 1 and 6 representing the heading level (1 is generally the highest level).
Here is an example:
<H1>The Alpine Project</h1> <p>This report is on the Alpine project.</p> <h2>People Involved</h2>
Web browsers handle normal text within HTML code in an interesting manner. For example, consider you have text in your code that looks like this:
It's True. You can lose all the weight you've dreamed of! Call today.
A browser will display this text like this:
It's True. You can lose all the weight you've dreamed of! Call today.
This is because HTML is designed to use tags to format the way text is displayed with a browser, including carriage returns and paragraphs.
So, with this in mind, we use the
tag to group text together in paragraphs within a web page. The code to produce what we wanted to see would look like this:
<p>It's True.</p> <p>You can lose all the weight you've dreamed of!<p> <p>Call today.<p>
Newer versions of HTML accept the following usage of the <P> tag:
The little girl held her doll closely.<p> The dog wagged its tail furiously.<p> The little girl ran away.<p>
This is acceptable, but it may be easier for you to learn HTML if you include opening and closing tags for all commands.
Consider the following HTML excerpt:
<head> Hello. <p>How are you doing? <p>This is a web page I created</p> </head> </body> <title>WOW!</title>
As you probably can see, this is poorly constructed HTML code. What is amazing, however, is that when you feed this type of data to the Netscape Navigator, it displays the information as if it looked like this:
<html> <head> <title>WOW!<title> <head> <body> <p>Hello</p> <p>How are you doing?</p> <p>This is a web page I created</p> </body> </html>
This is because the Netscape Navigator processes even very faulty HTML code as best as it can. However, this can not be said for all browsers. Therefore, it is highly recommended that you follow HTML standards when composing your Web pages.
To put a link in your web page that other's can select to display other web pages, you would use the anchor tag: <A>. This tag uses an argument, which is the URL of the document you want displayed when this link is selected. Here is an example:
Click <a href="http://www.hypnosis.com/info/index.html">here</a> for more information!
A browser displaying this would highlight the word here as a link to another documents.
The above URL, http://www.hypnosis.com/info/index.html, is an example of an explicit URL. It contains the host name, directory, and the filename representing the new document to load. There is nothing wrong with using explicit host names. However, if your referring to a document which resides on the same host, you can drop the host name and only specify the directory and the filename. And if the document is in the same directory as the current document, you can leave off the directory portion as well:
Click
To use one of these tags, simply put an opening tag (<tag>) before the text you want to format and a closing tag (</tag>) after the text. For example:
The dog was <strong>so</strong> big, I shook violently.
Many of these tags, the monospace tags in particular, are best used for very short passages of text.
<EM> is a logical tag used to specify generic emphasis on text.
Output:He wasn't that big, but he was so <em>hairy</em>!
<STRONG> is intended to provide a more extreme emphasis than <EM>.
Output:And more than hairy, he was <strong>smelly</strong>!
<B> is a physical tag used to force the browser to print the text in boldface type.
Output:I saw him in the movie,<b>Return of the Eggheads</b>.
<I> is a physical tag used to force the browser to print the text in italicized type.
Output:Chad says he eats pizza only <i>occasionally</i>.
<KBD> is intended for use depicting computer keyboard entry and is usually shown with a monospace font.
Output:Type in <kbd>mail</kbd> and press the ENTER key.
<SAMP> is for displaying computer status text and, like <KBD>, is usually displayed with a fixed-width font.
Output:<samp>You have new mail!</samp>
<TT> is a generic tag for a fixed-width, typewriter font.
Output:I finally started typing: <tt>I don't know what to type</tt>.
<CODE> is used for displaying computer program code.
Output:Perhaps instead of using <code>gets()</code>, you should use <code>fgets()</code>.
gets(),
you should use fgets().
<CITE> is used for citing titles, bibliography entries, etc.
Output:Joe said, "I hate eggs!" (<cite>Things Joe Said, 1943</cite>)
<VAR> is for quoting variables or pseudonyms text.
Output:To delete a file in DOS, type DEL <var>filename</var>.
<DFN> is for text being defined.
Output:TCP stands for <dfn>transport control protocol</dfn>.
<PRE> is for preformatted text. It is useful when you have text columns or tables you want to display. This tag is the best tag to use when you need a monospace font over several lines and you want to preserve the carriage-returns in the text being represented.
Output:<pre> # ITEM COST == =========== =========== 1 2376HH 12.95 2 12GH2 10.99</pre>
# ITEM COST == =========== =========== 1 2376HH 12.95 2 12GH2 10.99
<ADDRESS> is conventionally used at the bottom of an HTML document to specify the document's author.
Output:<address>Doran L. Barton / fozz@xmission.com</address>
<BLOCKQUOTE> is used for quotations from different sources (i.e. quoting a paragraph from a book). Most browsers will indent this text to separate it from normal text.
Output:In his last book Joe writes: <blockquote> <p>This shall be my last book.</p> </blockquote>
This shall be my last book.
The Netscape Navigator supports one more set of tags, which gives the Web author the very powerful ability of changing the size of fonts in their document. This can be a very effective tool, but bear in mind that only people using the Netscape browser can view its effects.
You can use the <FONT SIZE=n> to specify the size of text to be displayed. The value of n can be a value between 1 and 7 (where 3 is the default value), or can be a logical value where the font size is expressed as an offset of the default value:
<font size=+2>Wow!</font>
This would make the text Wow! appear in a type size 2 values higher than the default font size.
You can specify the default font size with the <BASEFONT SIZE=n> tag. The value of n, again can be between 1 and 7. Once this is set all the logical font size adjustments in the document will be made relative to this value.
Netscape's support of the <CENTER> tag brought on a cheer of praise from WWW authors when the Netscape Navigator was released.
To center text, images, or any other objects, horizontally, within a document, place it between the <CENTER> and </CENTER> tags.
<center>Welcome to my home page!</center>
Because there are some characters which have special meaning to HTML (i.e. < and >) and for the purpose of displaying accented characters and international characters, a collection of special characters are available to the HTML author.
To specify a special character in your HTML code, you enter a & followed by the character name and then a semicolon (;).
For example, the character name for a greater-than symbol (>) is gt. To include this in HTML: >
These characters are one of the few items in HTML that are case sensitive. It is important that they are used exactly as specified.
The following list shows all special characters available to the HTML author. Portions of this list were taken from the list at URL http://www.sandia.gov/sci_compute/symbols.html.
| Chatacter | HTML Code | Description |
|---|---|---|
| < | < | less than |
| > | > | greater than |
| & | & | ampersand |
| " | " | double quote |
| Æ | Æ | capital AE diphthong (ligature) |
| Á | Á | capital A, acute accent |
| Â | Â | capital A, circumflex accent |
| À | À | capital A, grave accent |
| Å | Å | capital A, ring |
| Ã | Ã | capital A, tilde |
| Ä | Ä | capital A, dieresis or umlaut mark |
| Ç | Ç | capital C, cedilla |
| Ð | Ð | capital Eth, Icelandic |
| É | É | capital E, acute accent |
| Ê | Ê | capital E, circumflex accent |
| È | È | capital E, grave accent |
| Ë | Ë | capital E, dieresis or umlaut mark |
| Í | Í | capital I, acute accent |
| Î | Î | capital I, circumflex accent |
| Ì | Ì | capital I, grave accent |
| Ï | Ï | capital I, dieresis or umlaut mark |
| Ñ | Ñ | capital N, tilde |
| Ó | Ó | capital O, acute accent |
| Ô | Ô | capital O, circumflex accent |
| Ò | Ò | capital O, grave accent |
| Ø | Ø | capital O, slash |
| Õ | Õ | capital O, tilde |
| Ö | Ö | capital O, dieresis or umlaut mark |
| Þ | Þ | capital THORN, Icelandic |
| Ú | Ú | capital U, acute accent |
| Û | Û | capital U, circumflex accent |
| Ù | Ù | capital U, grave accent |
| Ü | Ü | capital U, dieresis or umlaut mark |
| Ý | Ý | capital Y, acute accent |
| á | á | small a, acute accent |
| â | â | small a, circumflex accent |
| æ | æ | small ae diphthong (ligature) |
| à | à | small a, grave accent |
| å | å | small a, ring |
| ã | ã | small a, tilde |
| ä | ä | small a, dieresis or umlaut mark |
| ç | ç | small c, cedilla |
| é | é | small e, acute accent |
| ê | ê | small e, circumflex accent |
| è | è | small e, grave accent |
| ð | ð | small eth, Icelandic |
| ë | ë | small e, dieresis or umlaut mark |
| í | í | small i, acute accent |
| î | î | small i, circumflex accent |
| ì | ì | small i, grave accent |
| ï | ï | small i, dieresis or umlaut mark |
| ñ | ñ | small n, tilde |
| ó | ó | small o, acute accent |
| ô | ô | small o, circumflex accent |
| ò | ò | small o, grave accent |
| ø | ø | small o, slash |
| õ | õ | small o, tilde |
| ö | ö | small o, dieresis or umlaut mark |
| ß | ß | small sharp s, German (sz ligature) |
| þ | þ | small thorn, Icelandic |
| ú | ú | small u, acute accent |
| û | û | small u, circumflex accent |
| ù | ù | small u, grave accent |
| ü | ü | small u, dieresis or umlaut mark |
| ý | ý | small y, acute accent |
| ÿ | ÿ | small y, dieresis or umlaut mark |
Netscape has added support for the following characters:
| Chatacter | HTML Code | Description |
|---|---|---|
| ® | ® | Registered Trademark (R) |
| © | © | Copyright Symbol c |
HTML uses a horizontal rule, or a horizontal line for dividing areas of a document. The tag for this is <HR>. Here is an example of its use in HTML code:
<p>Welcome to my home page!</p> <hr> Click <a href="work.html">here</a> for information about my work.
Netscape has added some options to the <HR> tag to improve its functionality. Those are explained below:
You can use the SIZE argument to control how thick the rule is. The default width is 1.
<hr size=10>
You can use the WIDTH argument to control the width of the rule. The default behavior is for the rule to span the entire document space available. The syntax of the WIDTH value is <HR WIDTH=n> where n is either a number in pixels or a percentage of the full width available. Example:
<hr width="50%">
There is also an ALIGN argument which can be used to position rules on the page. This is only useful if you are also using the WIDTH argument to set the width of the rule to something smaller than the total width available. The valid values for this argument are LEFT, RIGHT, or CENTER.
<hr width="50%" align="center">
There is also a NOSHADE argument to disable the default shading of the rule.
HTML is designed to ignore the carriage returns you put in the HTML code and let the browser do the job of deciding where to wrap sentences and begin new lines.
Because of this, the <BR> tag is available to force a break in the line and start a new line below it. It allows you to, in a sense, override the browser's automatic line wrapping.
This is especially useful when displaying postal addresses:
Blind Pig Productions<br> 123 Anywhere Street<br> Somewhere, Someplace 54321
HTML supports formatting for three different kinds of lists. They are: Ordered Lists, Unordered Lists, and Definition Lists.
Ordered Lists
Here is an example of an Ordered List:
Here is how we would implement this in HTML:
My favorite foods: <ol> <li>Pizza</li> <li>Spaghetti</li> <li>Tacos</li> </ol>
As you can see in the above example, the <OL> and the </OL> tags encompass the list itself and the <LI> and the </LI> tags encompass each individual list item. Because this is an ordered list, the browser knows to number each item sequentially.
There is some Netscape extensions to the <OL> tag which allow you to have more than just numbers as your list sequence. You can use the TYPE argument to indicate other types of list sequences. Combining different types of sequence types is useful in representing nested lists like outlines.
TYPE=A will give you an alphabetical sequence composed of upper-case letters (A,B,C...).
TYPE=a will give you an alphabetical sequence composed of lower-case letters (a,b,c...).
TYPE=I will give you an incremental number sequence composed of upper-case roman numerals (I,II,III...).
TYPE=i will give you an incremental number sequence composed of lower-case roman numerals (i,ii,iii...).
TYPE=1 is the default numbering system used (1,2,3...).
Here is an example of representing an outline in HTML:
<ol type=I> <li>Printers</li> <ol type=A> <li>Laser Printers</li> <li>Inkjets</li> </ol> <li>Scanners</li> <ol type=A> <li>Color Scanners</li> <li>Greyscale Scanners</li> </ol> </ol>
And here is how it looks when viewed with the Netscape Navigator:
In addition to the TYPE argument, Netscape also supports use of the START argument to indicate starting points for your ordered lists. The valid value is the number you wish to start your list sequence at (or its numerical equivalent. i.e. XIV=14). For example:
<ol type=V start=14>
You can override the sequence number assigned to a list item with Netscape's support of a VALUE argument to the <LI> tag:
<li value=2>This is really the second list item.</li>
Unordered Lists
An unordered list is sometimes known as a bulleted list because, instead of numbers or letters as with ordered lists, the items in an unordered list are preceded by bullets. Here is an example of an unordered list:
This could be represented by the following HTML code:
Ice cream flavors available: <ul> <li>Chocolate</li> <li>Vanilla</li> <li>Strawberry</li> <li>Bubble Gum</li> </ul>
This list type is coded in a manner very similar to that of an ordered list. The <UL> and </UL> tags are used to encompass all of the list items while the <LI> and </LI> tag surround each individual list item.
You can nest unordered lists (and mix them with ordered lists) as well. The bullet changes as you move a new list indentation.
Ice cream flavors available: <ul> <li>Chocolates</li> <ul> <li>Chocolate Chip</li> <ul> <li>Milk Chocolate Chips</li> <li>Dark Chocolate Chips</li> </ul> <li>Plain Chocolate</li> <li>Rocky Road</li> </ul> <li>Vanilla</li> <li>Strawberry</li> <li>Bubble Gum</li> </ul>
Next is how it would look with a browser.
Ice cream flavors available:
There is a default progression of how the bullet shape changes as you create new level lists, but Netscape will allow you to use the TYPE argument to the <UL> tag to specify what kind of bullet you want for a list. The valid values for this argument are CIRCLE, DISC, and SQUARE. For example:
<ol type=circle>
Definition Lists
Definition lists are different from ordered and unordered lists. As their name implies, they are intended to be used for lists of definitions. The list items are composed of two parts: the description title and the actual description. For example:
The corresponding HTML used to generate this list is shown below:
<dl> <dt>HTTP</dt> <dd>HyperText Transport Protocol. The transport medium for WWW information.</dd> <dt>TCP/IP</dt> <dd>Transport Control Protocol/Internet Protocol. The suite of communications protocols underlying most all Internet communications. </dl>
Most graphical Web browsers available support inline images. This is done by using Compuserve GIF graphic files. An inline image means the browser displays the image along with the text in the same document.
The Netscape Navigator supports both GIF and JPEG (Joint Photographic Experts Group) file formats.
<IMG>
To include an image in your HTML document, use the <img> tag. The syntax is: <img src="URL">.
For example:
<img src="smiley.gif">
This tells the browser to read the file smiley.gif (a relative URL, in this case) from the same directory as the HTML file where this line appears and display its image contents. For organizational benefit, you can put all your image files in a separate directory and then reference them there: <img src="images/smiley.gif">
You can also use explicit URLs to specify the SRC= argument. This is useful because you can use image files that do not even reside on your computer.
<img src="http://home.netscape.com/images/wavey.gif">
Making Images "Clickable"
It is often very effective to make your inline images act as links to other documents. To do this, simply put the <IMG> tag inside of the <a> and </a> tags:
<a href="smiles.html"><img src="smiley.gif"></a>
Using ALT for Alternate Text
Because many Net users are using text-only browsers or have image loading disabled because they are on slow links, it is a good idea to include a text description of your images, which will appear in place of images when a browser can not display them. To do this, use the ALT= argument to the <IMG> tag:
<img src="smiley.gif" alt="SMILEY FACE">
The ALIGN Argument
<img src="smiley.gif" align="middle">
ALIGN="TOP" means the text next to the image (appearing after the <IMG> tag in the HTML code) will be displayed beginning at the top of the image.
ALIGN="BOTTOM" is the default behavior without any ALIGN settings. This means the text will be displayed lined up with the baseline of the image.
ALIGN="MIDDLE" means the text will be centered vertically between the top and the bottom of the image.
The figure below shows how each of these values affects the placement of text with images.
The Netscape Navigator supports some enhancements to the ALIGN argument which allow for more flexibility in layout. They have added LEFT, RIGHT, and CENTER to the list of valid arguments to ALIGN.
ALIGN="LEFT" is the default behavior and means the text coded after the <IMG> tag will be displayed with the image to the left of it.
ALIGN="RIGHT" specifies the text should be placed with the image to the right.
ALIGN="CENTER" behaves the same way ALIGN="MIDDLE" does.
The figure below illustrates the behavior of the Netscape ALIGN values.
Other Netscape extensions to the <IMG> tag's ALIGN argument include TEXTTOP, ABSMIDDLE, BASELINE, and ABSBOTTOM. The resultant behavior of each of these is explained below:
ALIGN="TEXTTOP" is very similar to ALIGN="TOP", except that now the image is aligned with the top of the tallest text it is next to, meaning that the alignment can be relative to dynamic font sizes. The TOP setting assumes a fixed type size and does not adjust for taller text.
The ALIGN="ABSMIDDLE" setting will go one step further than ALIGN="MIDDLE". Instead of aligning the baseline of the text to the middle of the image, the middle of the text is aligned to the middle of the image and thus, more accurately vertically centering the text. This value was added for the same reason as TEXTTOP: to support alignment relative to larger text sizes.
The ALIGN="ABSBOTTOM" setting aligns the bottom of the text with the bottom of the image. The behavior of this value shouldn't be that much different than ALIGN="BOTTOM".
Cancelling ALIGN Settings
When you use the ALIGN argument to position text relative to images, all text will remain aligned to the image as specified to the image until it has filled all space next to the image, then it will return to filling up the entire width of the document. One way to interrupt this behavior and shift text immediately underneath the image is with the CLEAR argument of the <BR> (line break) tag. For example:
<img src="smiley.gif" align="left"> Smile or die!<br> Speaking of smiling, you should see the dentist regularly.
Smile or die!The figure above shows two lines of text which are next to an image which has been placed with ALIGN="LEFT". The only tag between the two lines of text in this example is <BR>.
In the next example, we use <BR CLEAR="ALL"> between the same two lines of text:
Speaking of smiling, you should see the dentist regularly.
The CLEAR argument to the <BR> tag is a Netscape extension.
In addition to CLEAR="ALL", there's also CLEAR="LEFT" and CLEAR="RIGHT" which will move your text down past the bottom of an image which aligned left or right, respectively. The ALL setting will move past any images on either side.
HEIGHT and WIDTH
You can explicitly specify the dimensions of your image with the Netscape added HEIGHT and WIDTH arguments to the <IMG> tag.
The values are numbers of pixels. For example:
<img src="smiley.gif" height=300 width=120>
This can be a useful tool, but, if used improperly can result in inefficiently loading documents. Even though Netscape can scale your images to the size you specify, it still has to download the entire graphic file from the Web server. It is not a good idea to scale an image which is normally 300 pixels wide by 250 pixels tall to be 30 pixels wide and 25 pixels tall.
In the cases where you want a file which represents a smaller version of a graphic, create a new file which contains a smaller graphic.
HSPACE and VSPACE
Normally, the text above, below, and next to an inline image will appear immediately next to the image. It may provide for better readability to put space between your text and your graphic. Netscape has added the HSPACE and VSPACE arguments to the <IMG> tag to allow you to specify a buffer between your image and your text.
The value you assign to each of these arguments is the number of pixels you want between the graphic and its surrounding text. The HSPACE value represents the space between the graphic and the text to the left or right of the graphic. The VSPACE value represents the space between the graphic and the text above and below the image.
Example:
<img src="trees.jpg" vspace=10 hspace=25>
Controlling an Image's Border
The BORDER argument to the <IMG> tag is a Netscape extension which allows you to define the thickness of the border line which will appear around your images.
The value you assign to the BORDER argument is how wide, in pixels, you want the border to be. A width of 0 would represent no border, while a value of 10 would represent a very thick border:
<img src="smiley.gif" border=10>
GIF vs. JPEG
Since Netscape's first introduction to the Internet, it's support of inline JPEG images has spurred a controversy among WWW critics because no other browser supported inline JPEG images at the time. For this reason, when you put an inline JPEG image in your document, only people using the Netscape Navigator will be able to view your image.
This may not be a very substantial disadvantage considering that a large majority of people browsing Web pages are using the Netscape browser, but it is a consideration you should probably take when designing your pages.
One advantage JPEG images have over GIF files is its compression scheme. JPEG images, particularly larger ones, tend to be able to pack more information into a smaller file. So, it is better to use JPEG files for large pictures.
Our advice is to use GIF files for all your inline images and use JPEG images for larger image documents where the superior file compression will benefit the loading time. For example, use a GIF as an icon which you can select as a link which will display a larger (JPEG) image:
<a href="bob_big.jpg"><img src="bob_small.gif"></a> Click on Bob's picture to see a bigger picture of him.
Color Control
The Netscape Navigator supports a few other elements, which we will cover in the remainder of this chapter. The first of those is color control.
You can explicitly specify the color of text and text backgrounds for viewing with the Netscape Navigator. The colors are specified as values assigned to arguments to the <BODY> tag. Incidentally, any settings you specify affect the entire document. For example, you can't have half of the document laid out in one color scheme and the rest in another.
Here is an example of a Netscape color specification:
<body bgcolor="#000000" text="#FFFFFF" link="#FF0000" alink="#00FF00" vlink="#0000FF">
As seen above, there are several arguments you can set. The values (i.e. #FF0000) are colors (see below). The table shown below explains what each argument represents:
BGCOLOR The color of the document background.
TEXT The color of normal text.
LINK The color of unvisited hypertext links
ALINK The color of a currently selected link
VLINK The color of a previously visited link
The color specification allows you to specify any 24-bit color for your colors. This gives you over 16 million colors to choose from. This is how the colors are specified:
The color specification always begins with the pound character (#). After this is six digit places. This is composed of three two digit hexadecimal (Base 16) numbers- each representing the red, green, and blue components, respectively, of the resultant color.
This is, indeed, complicated. When choosing what colors you want to use, it helps to have a calculator nearby which will convert from decimal to hexadecimal. The value range, 00-FF, is equivalent to the decimal range of 0-255.
So, if you have a color which contains a red value of 44 and a green value of 187 and a blue value of 200, you could convert that to hexadecimal to find out the red value in hex is 2C, the green value in hex is BB, and the blue value in hex is C8. This would form a color specification for Netscape which would be #2CBBC8.
So, now we can figure out what the colors are in the above example. The background color is black. The normal text color is white (all color components at FF). The color of unvisited links is red (red is FF, everything else is 00). The color of actively selected links is green (green=FF). And, the color of previously visited links would be shown in blue(blue=FF).
Background Graphics
Netscape also lets you tile an image behind your document with the BACKGROUND argument to the <BODY> tag:
<body background="marble.gif">
This line would take the image stored in the file marble.gif and will tile it behind all the text in the current document.
Background images are very popular on the Web and can make a relatively normal-looking page look very interesting, but when not used intelligently can only make pages hard to read.
Try to use a combination of background images and text color arguments to create good pages with high contrast between the background and foreground text.
The Netscape Navigator also supports the proposed HTML version 3.0 specification of tables. Considering the following table of information:
Name Score Grade Doran Barton 95 A Chadd VanZanten 95 A John Doe 45 F Mary Smith 72 C
This can be represented by the following HTML code:
<table border=1> <tr><th>Name</th><th>Score</th><th>Grade</th></tr> <tr><td>Doran Barton</td><td>95</td><td>A</td></tr> <tr><td>Chadd VanZanten</td><td>95</td><td>A</td></tr> <tr><td>John Doe</td><td>45</td><td>F</td></tr> <tr><td>Mary Smith</td><td>72</td><td>C</td></tr> </table>
This introduces us to several new tags and arguments we can use to generate tables.
<TABLE>
The <TABLE> and </TABLE> tags should encompass all table information. If you attempt to use any table-related tags (i.e. <TD>, <TR>, etc.) outside of the <TABLE> tags, they will not work.
There are four arguments available for the <TABLE> tag. They are BORDER, WIDTH, CELLSPACING, and CELLPADDING.
The BORDER argument allows you to specify the width of the lines, if there are any, around the table and around the lines between cells. If you do not include the BORDER argument, the default width of zero (no lines) will be used.
<table border=3>
The WIDTH argument specifies how wide the overall table is to be. The syntax is <TABLE WIDTH=n> where n is either a number of pixels or a percentage of available horizontal spanning space.
<table border=1 width=80%>
CELLSPACING, as its name implies, affects the spacing between the cells. The value assigned to this argument is a number of pixels. If this argument is not used, the default of 2 pixels is used.
Do not confuse borders with cell spacing. The cell spacing value, when used with a border width greater than zero, will affect the lines throughout the entire table. The border width value affects the edge of the outside table border lines. But, without a border width greater than 0, the cell spacing will only be visible as space between the table data and not a graphical line.
For example, here is the table above with the following line:
<table border=1 cellspacing=10>
| Name | Score | Grade |
|---|---|---|
| Doran Barton | 95 | A |
| Chadd VanZanten | 95 | A |
| John Doe | 45 | F |
| Mary Smith | 72 | C |
And now we tweak the values a little and show the difference:
<table border=10 cellspacing=4>
| Name | Score | Grade |
|---|---|---|
| Doran Barton | 95 | A |
| Chadd VanZanten | 95 | A |
| John Doe | 45 | F |
| Mary Smith | 72 | C |
<TR>
This tag is to specify the contents of a single row of a table. The <TR> and </TR> tags should encompass all the <TD> and <TH> tags.
There are two arguments for use with the <TR> tag. They are ALIGN and VALIGN.
The ALIGN argument is for specifying the alignment of data in all cells in the row. The valid values for this argument are LEFT, CENTER, and RIGHT. <tr align="center"><td><img src="bob.gif"></td><td>Bob Jones</td></tr>
The VALIGN argument is for specifying vertical alignment. The valid values for this argument are TOP, BOTTOM, CENTER, and BASELINE.
<TD> and <TH>
These two tags are almost identical. One (<TD>) is to specify table data while the other (<TH>) is to specify table headings. Anything you put between the opening and closing tags is going to be treated as information to be placed within a cell. This can be a word, a list, an image, a link, or nothing, if you wish.
The <TH> tag is different because text within these tags appear in boldface type.
The following arguments can be used with the <TD> and <TH> tags: ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, and WIDTH.
The ALIGN argument has the same syntax as it does with the <TR> tag, but now applies to data in a single cell. Valid values are LEFT, CENTER, and RIGHT.
The VALIGN argument is also the same as when used with the <TR> tag. Valid values are TOP, BOTTOM, CENTER, and BASELINE.
The NOWRAP argument overrides the browser's default in wrapping lines of text to fit within a cell. This argument is not very useful since its use most often creates a difficult-to-read table with cells that stretch off the page.
COLSPAN allows you to specify how many predefined column borders you want the current cell to overlap. Here is an example:
<table border=10 cellspacing=4> <tr><th>Name</th><th>Score</th><th>Grade</th></tr> <tr><td>Doran Barton</td><td>95</td><td>A</td></tr> <tr><td>Chadd VanZanten</td><td>95</td><td>A</td></tr> <tr><td>Bob Jones</td><td colspan=2>YOU DON'T WANNA KNOW!</td></tr> </table>
And here is the table this produces:
Name Score Grade Doran Barton 95 A Chadd VanZanten 95 A Bob Jones YOU DON'T WANNA KNOW!
ROWSPAN does the same thing, but in the vertical direction, allowing you to use a specified number of predefined row heigths for the current cell. Here is an example:
<table border=10 cellspacing=4> <tr><th>Name</th><th>Score</th><th>Grade</th></tr> <tr><td>Doran Barton</td><td>95</td><td>A</td></tr> <tr><td>Chadd VanZanten</td><td>95</td><td>A</td></tr> <tr> <td rowspan=2>Bob Jones</td><td>72</td><td>C</td></tr> <tr><td>88</td><td>B</td></tr> </table>
And here is the resultant table:
Name Score Grade Doran Barton 95 A Chadd VanZanten 95 A Bob Jones 72 C 88 B
One important rule to remember when constructing tables is that everything you put within the <TD> and <TH> tags is going to affect what you see in the table. If you put any spaces or carriage returns between the data and the enveloping tags, be prepared to see spaces between the data and the cell walls.
<CAPTION>
The <CAPTION> tag is used to label an entire table. These tags should appear inside of the <TABLE> and </TABLE> tags.
There is an ALIGN argument for this tag which specifies whether the caption should appear above or below the table. Valid values for this argument are TOP and BOTTOM.
Here is an example of a table with a caption:
<table border=10 cellspacing=4> <caption align=top>Our Grades</caption> <tr><th>Name</th><th>Score</th><th>Grade</th></tr> <tr><td>Doran Barton</td><td>95</td><td>A</td></tr> <tr><td>Chadd VanZanten</td><td>95</td><td>A</td></tr> </table>
And here is the resultant table:
Our Grades Name Score Grade Doran Barton 95 A Chadd VanZanten 95 A