This page: Topic 2.

SURFING IN THE DARK ...A Beginner's Odyssey
	1. INTRO, RESOURCES, TOOLS	2. HTML BASICS	5. TABLES	8. JAVA SCRIPT
		3. APPLYING HYPERTEXT	6. GRAPHICS	9. MIDI MUSIC
		4. COLOR	7.COUNTERS	.

HTML BASICS

(If you're viewing a hard copy, you may find this article on the
internet at URL: http://www.primeshop.com/html/jumpidx.htm )

You're invited to visit the Primeline Website at http://www.primeshop.com/ Come see us!

ON THIS PAGE:
General: Getting Started Word Processor Hints Other Tags	HTML "Musts": HTML Structure Page Opening & Closing Begin and End Tags	Related Tips: SpacesLists HTML Style Page Appearance Symbol Charts

TIP: Separating the Contents from the Container Though "hidden" at the end of the Tables Introduction, this tip regarding viewpoint is an important concept regarding successful, easy creation of web pages.

~ GETTING STARTED ~
The best bet is to get an idea of what you want to create, then go get just enough info to take you a few steps down the path. Go back and get more as questions arise. We strongly encourage you to have a real product in mind, rather than just dink around with learning. As you try to make this new creation actually do what you want it to, the lessons learned will stick around for a while! You can even type the whole thing without html, if you wish, then go back and add the html markups.

(You can copy parts of other documents in, too, then add html tags. There is some danger in this approach, because any "natural" formatting ...i.e., bold, italic, tables, centering, etc...added in the "old" document being edited are meaningless to a browser and may even cause unwanted effects: they must be found, eliminated, and repaced with html instructions. Automatic styling formats may be invisible and extremely difficult to track down. For that reason, we always write directly with html from the outset, starting with the word processor's "plain vanilla" default style on a blank page.)

Would you like for your browser to find the top of your page? Would you like for it always to do what you expect? Then ya gotta follow the rules...

Your computer may be Magic in a Box, but smart it's not. You always have to tell it exactly what you want, and you must use its limited vocabulary to do so. Exactly. Or it won't work. Html is a set of text markups (tags) that all browsers will recognize. It's not programming in the traditional sense. Think of it more as signalling or gatekeeping. The html language is constantly being updated and improved. The best browsers recognize the newest and most progressive tags, and will perhaps be more forgiving of a few of a beginner's errors.

The computer expects to be told where the document begins and ends, where the html tags do and don't have meaning, and where certain elements in the document exist. It's not because the machine is smart. Html developers get headaches reviewing what might and might not happen, and have evolved a specific set of requirements for successful html application. You may even get away with "breaking the rules"...for now. If you do have an error which works, it may fail with the next edition of the browser. Point: follow the rules religiously.

Please note that a html "page" is a document, no matter how long, that will be loaded in one operation. In a browser, you load it and scroll down to its end. In your word processor, that one html document may be many processor pages in length. (Note: an HTML Editor will save a document of any length as a single page - a distinct advantage.)

WORD PROCESSOR HINTS
You'll type your entire document and all the html tags in your word processor, save it in ASCII format, then view it in your browser.

• Omit bold, italics, indentation, and any other similar, "normal" word processor formatting functions. Use only html tags to cause these styling and placement elements to occur on the browser page.
• Use either ".htm" or ".html" as the filename extension, or no browser will recognize it.
• Most servers look for keywords such as "home" to open your first page. It's good practice to use either "index.htm" or "home.htm" as the name of your home page ASCII document (but never both!) Ask your ISP or Service Provider which name is automatically recognized as the "home" page. All of the rest of your pages will be hyperlinked from the home page, so there's no restriction on filenames for them (but they must feature the ".htm" or ".html" filename extension.)
• Some very long line entries, such as a hyperlinked URL, may actually consume more than one line in your word processor. Since it's one huge inline group of characters, your word processor may force an unwanted break. If the line happens to break in the middle of the URL because of an automatically inserted Carriage Return or Line Feed, the link won't work. Avoid this problem by setting your word processor's ASCII "save" option to "CR/LF at paragraph ends" to keep forced internal word separations connected. In this way, the one "extra long word" will appear to break in the middle on your processor screen but not be separated into two electronically distinct parts when saved. (Not a problem with HTML Editors.)

  If your word processor is set to insert a Carriage Return (CR) or Line Feed (LF) at the end of a line, it will insert an invisible "break" command in the document. Since browsers automatically wrap text to suit window width, these invisible formatting commands can wreak havoc with your presentation by causing breaks where they're not really wanted. If you instead choose breaks at paragraph end, any invisible, word-processor-induced breaks will not affect appearance in the browser.

  Get the picture? Your processor will wrap your text to suit the width of the screen, just like your browser will. Since the browser screen may be much wider (or narrower) than your processor screen, you don't want invisible breaks at the end of a processor line. If the processor induces a break at paragraph end, you don't care because there's a break in your html there anyway. If it induces a break at the end of a line however, that break may fall in the middle of an extremely long word and yield unwanted results. The <CR> option, at either paragraph end or line end, will control the placement of these automatically saved break points.

~ HTML "MUSTS" ~

HTML Structure
To be recognized by the browser, every instuction must be enclosed between the less-than (<) and greater-than (>) symbols (left & right angle brackets.) The combination of a valid instruction plus brackets, e.g., <P>, is a tag. There are the general instruction tags, plus conditioning attributes which may be added within tags. Attributes take the form "NAME=x", where "x" may be a number or group of characters. Every attribute, possibly several, contained within the < > bracket pair is combined with the major instruction and interpreted as a single tag.

For example, the tag to begin a new paragraph is <P>. To center the paragraph, you may add the attribute ALIGN=CENTER to the tag, in this form: <P ALIGN=CENTER>. This combination is interpreted by the browser as a single tag meaning: "begin a new paragraph here, and center its entire contents in the page width." (More detail later.)

Nearly all tags are opened and then closed, as will be illustrated...sort of like telling the browser to "do this" and then "stop doing this."

There is a strict hierarchy of tags which must be used to open and close a html page so the browser "knows" when it's reading html and when it's done. Everything between is up to you, so long as you enter recognizable and executable html instructions.

There are additional opening instructions which may be entered to help all browsers interpret the level of html included, the language used, etc. Most U.S. pages will work OK without them, but it's eventually a good idea for you to go back and learn the correct way to enter this information and upgrade your pages. They are ignored in this article (but see the DOC TYPE at the beginning of our page html!)

Opening and Closing the Page
(Required - not optional)

• <HTML> = html begins here. The first statement in your document.
• <HEAD> =the second statement in your document.
• <TITLE> =the 3rd statement. Your document title, i.e., "Our Home Page." Appears in the header bar across the top of the screen.
• <BODY> =the 4th statement. Tells the browser that "the display starts here."

Since your computer's not too smart, you also have to tell it when these operations end, by using the convention of placing a forward slash ( / ) in front of the same tag that started it: for instance, </HTML> at the end of the document says that html is ended. Your page must always have the structure:

1. <HTML> = "open html"
2. <HEAD> = "page heading begins here"
3. <TITLE> = "this is the page title" (Shows up in the browser top border.)
4. </TITLE> = "title is ended"
5. </HEAD> = "the page heading is complete"
6. <BODY> = "the actual display (body) begins here"
7. [ Here you insert all of the tags, words, and graphics that comprise your page. ]
8. </BODY> = "the display is finished (page end)"
9. </HTML> = "html is complete. Go back to sleep."

The TITLE is always contained within the HEAD tagset. Your top-of-page content would follow the structure:

<HTML>
<HEAD><TITLE>(Your Page Title)</TITLE></HEAD>

Everything appearing in your ASCII document between the <BODY> and </BODY> tags will appear as one web page. If you want another page, create a new ASCII document with a different file name, and refer or link to it in the first page.

"Begin" and "End" Tags
A series of html tags must be ended in reverse order. Whatever you "tell" the browser to do, you must tell it when to stop, and in reverse order.

In this article, we call an open/close pair, i.e., <HTML></HTML>, a "tagset."

Let's say you wanted both bold and italics for the word "like" in the sentence; "We like people." The tag for bold is <B>, and for italics is <I>. The sentence would be marked up :
We <B><I>like</I></B> people.

...and would look like this:
We like people.

The markup tags for "like" say this:

"begin bold"-"begin italic"-" display word: like"-"end italic"-"end bold"

Note that the order of appearance for the bold and italic tags is reversed on the way out. If you fail to close the tags, or fail to close them in exact reverse order, you will get some truly bizarre results, either at that point or later in the page.

~ OTHER TAGS ~
(12/31/97) Before we introduce the various formatting tags, there's an important element of browser behavior to discuss. A browser will always download and interpret the total of material enclosed within an open/close tagset before displaying the material they surround; e.g., if you use the <CENTER></CENTER> tagset, everything between the two will download before anything between them is displayed. If your page is very long, then you should close and re-open those tags to ensure that text and other contents at the top of the page become visible quickly. It can become confusing, as any open/close tagset will cause the effect - therefore, you must be constantly thinking about their effects on page loading as as you devise your HTML!

A basic few will allow you to do some great stuff:

The various browsers tend to develop exclusive tagsets, such as Netscape's <MULTICOL> tagset to create multiple columns (not supported by MSIE.) Although many are pretty slick, we avoid description of exclusive tagsets and have attempted to offer only tags which will work in all of the major browsers.

• <I></I> = open italics, close
• <EM></EM> = open emphasis, close (same as italics, newer html version)
• <B></B> = open bold, close
• <STRONG></STRONG> = open strong, close (same as bold, newer html version)
• <CENTER></CENTER> = center what follows. You may combine as an attribute for the paragraph form, such as <P ALIGN=CENTER>, and all following, including images, will be moved down one line and centered on the web page.
• <SUP>..</SUP> = Superscript the enclosed text. Degrees Farenheit with the degree symbol superscripted. e.g., ⁰F, would be written <SUP>0</SUP>F
• <SUB>..</SUB> = Subscript the enclosed text. Water (H2O) with the "2" subscripted. e.g., H₂O, would be written H<SUB>2</SUB>O
• <PRE></PRE> = reproduce the following text exactly as formatted in the html. This option is weak, because you forfeit control of relative font size and long lines will not wordwrap in the user's browser.
• <FONT SIZE="x"></FONT> = change font size, revert to default. Don't miss the quotation marks around the value. Fonts are recognized from values 1-7, with 3 being default browser font (needs no control entry.) You may go up or down by entering a "+" or "-" sign and a value ranging from "-2" to "+4". For instance, a one-step increase in relative font size can be tagged by: <FONT SIZE="+1"> and then ended by </FONT>, to yield an actual size of 4 (default plus 1.) Alternatively, you may specify actual font size, as in the tag <FONT SIZE="2">. There's a strong argument against specifying actual font size, since screens, resolutions, and users' browser settings all vary...much safer to specify relative size, so the effect occurs in proper proportion no matter how the user's browser is set up. Be sure to open and close every time font size is changed. Note the inclusion of quotation marks around the size change value and sign.
  
  Here's an example with a different value for each character (see Document_Source for code):
  NETSCAPE - E NHANCE D
• <FONT FACE="x"> = control actual font displayed, regardless of the user's settings for browser preferences. For instance, <FONT FACE="ARIAL"> would cause the text to appear in arial.
• Combine related attributes within a single tag. For instance, if you're specifying a font, the tag
  <FONT SIZE="+2" FACE=ARIAL COLOR="#0000CC"> would yield text 2 sizes above normal, in arial font, and blue color,
  Like This.

Put a space between attributes inside a combined tag. A single tag combining one instruction plus a number of attributes is closed with a single tag, i.e., the string
<FONT SIZE="+2" COLOR="#123456" FACE=ARIAL> would be closed with the single </FONT> tag.

<Hx></Hx>, where x= value 1 to 6, will result in a header of relative font size 1(largest) to 6(smallest), and generate appropriate white (blank) space above and below the header text.

The ampersand (&) sign is special, and its inclusion in html signals the browser to reproduce a character from a special list of ASCII characters (see list from our Symbols Reference Tables) without performing the html tag instruction normally associated with that character. All non-text keyboard characters, plus many more, such as ® or ©, are represented and may be reproduced in your page presentation only with the use of the ampersand and its following character designation. For example, if you want to add the ® sign to a line in your text, your html would read: &reg; ...and the browser would show: ®. Be aware that the semicolon following each symbol's code is a part of the code.

Quotation marks ("), angle brackets (<, >), the ampersand (&), and mathematical symbols, among others, have special meaning (to the browser) in html. If you wish to include them as readable parts of your presentation, they must be specified with the ampersand convention...if not, the browser will read them as instructions and may cause crazy things to happen in your page!

<!-- (your html text) --> will cause the browser to ignore anything on the word processor page which is enclosed between the two signs <!--(ignore) and -->(stop ignoring.) Don't miss the exclamation point in the opening tag. This very useful tagset is a great help in troubleshooting your html. Simply use them to isolate or temporarily "remove" portions of your html text to "zero in on" whichever part is causing browser page difficulty.

<BLOCKQUOTE></BLOCKQUOTE> Will result in the creation of an indented content block (using about 95% of the available page width), with wider margins both left and right. The <P> and <BR> tags may be used within the blockquote. BLOCKQUOTE tagsets may be nested - just be sure to close tags in reverse order!

These tags do NOT need to be closed:

• <P> = Insert a blank line, i.e., "start a new paragraph." (*see exception)
• <BR> = "break", i.e., "end here and start a new line directly below this one."

*EXCEPTION: The paragraph tag (<P>) will always work with no end tag as long as you're working with text...the browser assumes the end tag as soon as it sees a new paragraph or break symbol. However, if you begin a long string of graphics, for instance a group of choice buttons, with a <P> separator and without table construction, then you must close that paragraph with the </P> tag. There's an example in the graphics section.

The series:
<P>
<BR>
<BR>
...for example, will skip a line to start a new paragraph, and insert two more blank lines. An even better method for creating blank spaces is to use the blank .gif image, discussed later.

Blank lines and carriage returns in your word processor mean nothing to the browser. If you want a blank line, or want to control the length of a sentence, then you must use the <P> or <BR> symbols or a blank .gif image! Never insert word-processor formatting as you type, such as centering, bold, italic, etc. - they will affect your browser strangely! Do use the html tag notations above to achieve formatting effects.

Attributes
(Used as modifiers within tags.)

• SIZE=n ...will control the size of the affected element. The use of "+n", "-n", or "n%" will result in relative adjustment, while the use of a valid numeric value for n will result in absolute size. Fonts are explained above. For images, n is resolved in pixels of width or height, e.g., "WIDTH=4".
• ALIGN= (TOP, BOTTOM, LEFT, RIGHT, CENTER) will affect placement of the target element with regard to the page, table cell, or accompanying object.
• CLEAR= (LEFT, RIGHT, ALL) controls flow of content flowing around images, and is an instruction to space down the page as far as necessary before placing the affected element.
• NOWRAP prevents normal text wrapping to fit window size.

The order of appearance of Attribute modifiers within a single tag - whether to control spacing, table arrangement, size, color, etc. - is of no importance. The browser will read all of the information within a single tag before executing the tag command.

~ RELATED TIPS ~

Spaces
Browsers only recognize one space separating words or images. The traditional two spaces (actually unnecessary in your pages) after a period will show up as only one space.

Lists
The LIST convention always places a bullet in front of each item...and tons of bullets can look kinda geeky (see ours, above!.)

To get around this, create a blank .gif image in LView or Paint Shop Pro in version 89a. (You'll have to study the graphics packages a little to understand.) You may then insert this invisible image as a spacer at any height and width you specify. Ours is named "blank.gif", 1 pixel x 1 pixel (change width and height as needed for each application), and transparent (89a format.) You may witness its use at this point by looking at the Document Source. See also our short tutorial, with a blank .gif image you may download if you don't care to make one yourself.

Unnumbered Lists
Lists are automatically bullet-delimited and inset by the list tag <UL> (Unnumbered List.) Each list item is identifed as beginning with the code <LI>. The <LI> tag need not be "undone", but <UL> tag must, with </UL>.

With the UL (Unnumbered List) convention, the markup:
<UL>
<LI>Item1
<LI>Item2
<LI>Item3
</UL>
...will yield the indented bullet format one blank space down (List and Table tags always automatically insert a space above and below their presentation) like this:

• Item 1
• Item 2
• Item 3 (This is an intentionally long sentence to demonstrate that all lines of a paragraph included in a list tag will also retain the indention).

With the spacer .gif, the code looks like:
<P> (to insert a blank line)
<IMG SRC="blank.gif" HEIGHT=0 WIDTH=30>Item 1
<IMG SRC="blank.gif" HEIGHT=0 WIDTH=30>Item 2
<IMG SRC="blank.gif" HEIGHT=0 WIDTH=30>Item 3

And yields:
Item 1
Item 2
Item 3 (This is an intentionally long sentence to demonstrate that all lines of a paragraph offset with a blank image will not retain the indention. The effect may be overcome by use of table construction.)

The blank spacer can be useful elsewhere in your html to control vertical and horizontal spacings, rather than simply relying on browser defaults for blank line height, indentations, etc.

There are conventions for unnumbered lists (above), ordered lists, and lists within lists (nested lists.) Try the above examples, and you'll be able to interpret the instructions for all types from The Web Designer.

Ordered Lists
With the OL (Ordered List) convention, the markup:
<OL>
<LI>Item1
<LI>Item2
<LI>Item3
</OL>
...will yield the indented numbered format one blank space down (List and Table tags always automatically insert a space above and below their presentation) like this:

1. Item 1
2. Item 2
3. Item 3 (This is an intentionally long sentence to demonstrate that all lines of a paragraph included in a list tag will also retain the indention).

Nested Lists
Here is an example of an unnumbered list nested within an ordered list. Note that the solid "bullet" delimiters become open circles within the nested portion:
<OL>
<LI>Item1
<LI>Item2
<UL>
<LI>Item1
<LI>Item2
<LI>Item3
</UL>
<LI>Item3
</OL>

1. Item 1
2. Item 2
   • Item 2a.
   • Item 2b.
   • Item 2c.
3. Item 3 (This is an intentionally long sentence to demonstrate that all lines of a paragraph included in a list tag will also retain the indention).

Using an Empty Table Cell for Margin Spacing

	This entire paragraph is set 120 pixels from the left margin. It's actually in a one-row table with two data cells. The first cell is an empty datacell with a width specification, and the text is in the second! (See tables page for explanation of table function and construction.)
	Here's what the html looks like: <TABLE> <TR> <TD WIDTH=120></TD> <TD>(Paragraph text.)</TD> </TR> </TABLE>
	Note the 120 pixel width spec in the first (empty) table cell. The blank cell may also (or alternatively) be given a HEIGHT value.

CAUTION: The empty cell convention may yield poor results when used in complex tables. We prefer to use the blank image in all cases to ensure against unwanted spacing results.

The browser considers all entries as objects when it lays out and displays the html page. Even long lines of text are word-wrapped and managed by the browser as objects. Images are treated as objects. Let's get a little slangy and call objects "things." The browser easily recognizes and controls the placement of things. The contents of table cells are manipulated by the browser as things. However, when you introduce an empty table cell, you have really introduced a "no-thing" - that is, there is nothing there for the browser to manipulate.

For very simple construction, the browser will manipulate a "no-thing" well. However "no-things" in complex html may induce unpredictable browser default behavior - not disastrous, but probably not quite what you had in mind, either. Therefore, we encourage use of the blank image (blank.gif) as a matter of course. (The blank image, although only 1x1 pixel and transparent, is nonetheless a "thing" to the browser, and will always be managed predictably.) Just add a blank.gif inside the table cell, and give it appropriate HSPACE and VSPACE attributes.

If you jumped here from the tables "Neat Trick" discussion, return here.

Other Margin Management
In the course of reviewing this tutorial, you have seen the blank gif, the blank table cell, and the BLOCKQUOTE tagset used to create margins. In fact, margins for all pages but one in this tutorial are created by the simple expedient of applying BLOCKQUOTE.

All of these methods may be used to create margins or offsets for an entire page. However, some caution must be exercised. The browser will load everything within a blockquote tagset or within a table before displaying anything at all. If your page is long, or you have large graphics, then the viewer will see nothing until the entire download has taken place. For that reason, we have broken every page into several blockquote or table sections, so that there's something to see early on in the download. Just end the table or blockquote section and start another one. A practical rule of thumb is to install such a break for every 3-4 scrolldowns in the html text, or once for every image in excess of 10kb.

The page html would look something like this:

<BLOCKQUOTE>
Text, image, blah, blah, blah...
</BLOCKQUOTE>

<BLOCKQUOTE>
Text, blah, blah, blah, Image, blah...
Text, blah, Table, blah...
</BLOCKQUOTE>

<BLOCKQUOTE>
Text, blah, blah, blah, Image, blah...
</BLOCKQUOTE>

....etcetera down the page.

Remember that BLOCKQUOTE tagsets may be nested to create "indentations within indentations:"

HTML STYLE IN YOUR WORD PROCESSOR
For all of your html, adopt a disciplined style with easily recognized breaks and format changes. Without such discipline, your markup will be unnecessarily difficult to debug. For instance, we always capitalize all of our html tags; usually put a blank line (not reproduced by the browser) before each subject change, break, or new paragraph; and place new tags on the next line. It's easy to see where you are, and the many pages consumed in the ASCII document will have no effect on the size of the html file seen by the browser, nor will blank lines in the document show up on your web page.

You may review our styling preferences with the View_Document _Source option, and in the many examples of table html in this article,

Here's a sample illustration taken from the list example above, first just typed end-to-end, and second with style discipline:

-------------BEGIN STYLE EXAMPLE--------------

FIRST
This markup works, but all the html is run together:

<P> (to insert a blank line)<IMG SRC="blank.gif" HEIGHT=1 WIDTH=30>Item 1<BR><IMG SRC="blank.gif" HEIGHT=1 WIDTH=30>Item 2<BR><IMG SRC="blank.gif" HEIGHT=1 WIDTH=30>Item 3 (This is an intentionally long sentence to demonstrate that all lines of a paragraph offset with a blank image will not retain the indention. The effect may be overcome by use of table construction.)

SECOND
Here's how we'd prefer to type exactly the same thing:

<P> (to insert a blank line)
<IMG SRC="blank.gif" HEIGHT=1 WIDTH=30>Item 1
<BR><IMG SRC="blank.gif" HEIGHT=1 WIDTH=30>Item 2
<BR><IMG SRC="blank.gif" HEIGHT=1 WIDTH=30>Item 3 (This is an intentionally long sentence to demonstrate that all lines of a paragraph offset with a blank image will not retain the indention. The effect may be overcome by use of table construction.)

BOTH YIELD THE SAME RESULT:

Item 1
Item 2
Item 3 (This is an intentionally long sentence to demonstrate that all lines of a paragraph offset with a blank image will not retain the indention. The effect may be overcome by use of table construction.)

Which would you rather read and debug?

-----------------END STYLE EXAMPLE-----------------

Why Capitalize HTML Tags?
Our purpose is to make it easy to read and debug our HTML. The browser can read tags in either upper or lower case (except for a very few of the ASCII characters.) Since most of our text is in lower case, the use of all caps for the tags makes them relatively easy to find. If they were all lower case, they'd just blend in with everything else.

PAGE APPEARANCE

NO-NOs (maybe... :-)

• Blinking text (tag <BLINK>...text...</BLINK>) is widely overused and may be a nuisance to the reader.
• "Click here" is unnecessary and unnatural. Everyone knows that hypertext is an invitation to click in its own right. Keep sentences natural and just let the browser's innate emphasis of hypertext (e.g., underlining and alternate color) provide its own lead.

ARRANGEMENT
Controlling the overall appearance of your page is the most important aspect of html presentation. You can type all of the words and insert all of the graphics, but if it isn't interesting-looking, then your visitors are likely to ignore your work.

The size and resolution of the visitor's monitor are of crucial importance. A presentation custom-made to fit a 17-inch monitor at 1024x768 resolution is going to be several scroll-widths too wide for a 14-inch at 800x600. (Yes, there are a few antiquated 600x480 monitors out there, but they are so few that we ignore their specific needs.)

Fortunately, all browsers will automatically adjust the presentation to fit the screen width available unless you have created a table or preformatted section that is too wide. Since you'd like for the entire width of your presentation to be visible without left-right scrolling, no image or table should be over a max of about 550 pixels in width. Bordered backgrounds may reduce available space by their width. The additive width of all cells across any table must be considered.

Now - let's say you've written entertaining text and chosen great graphics for your page. It often happens that new-to-html writers show the "vertical alignment syndrome,"" which means that everything in the page falls from top to bottom. In contrast, consider a magazine or newspaper article, which in most cases will have images and text intermixed in some interesting layout.

Well, the reason that many pages are strictly vertical is that their writers failed to utilize table construction in their html. Since browser interpretation is vertical by default, that is, "whatever is typed next shows up next," we must utilize other tools to cause text and graphics to commingle in the exact arrangement desired. The single tool which will allow you this degree of control is Table Construction. Tables are the single most powerful and important tool for laying out effective presentations. Our Table Construction tutorial is extensive, and will help you to create terrific-looking pages!

As an example, look at the very simple table at the top of this page, with the "Jump Start" logo image, colored background, and linked topics. There is simply no way to achieve this kind of spatial relationship on the page in the absence of a table. The remainder of the page(s) is very definitely vertically-oriented, which is an acceptable format for textbooks and tutorials - but can hardly be claimed to be deserving of attention because of its innovative appearance!

[ home ]

Please proceed to the "Applying Hypertext" page.