This page: Topic 2.

SURFING IN THE DARK ...A Beginner's Odyssey


(If you're viewing a hard copy, you may find this article on the
internet at URL: )

You're invited to visit the Primeline Website at Come see us!

Getting Started
Word Processor Hints
Other Tags
HTML "Musts":
HTML Structure
Page Opening & Closing
Begin and End Tags
Related Tips:
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.

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.)

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.


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)

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:

<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.

(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.
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."
    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:
    ...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.

    (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.


    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.

    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:
    ...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:

    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:
    ...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:

    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:
    <TD WIDTH=120></TD>
    <TD>(Paragraph text.)</TD>
    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:

    Text, image, blah, blah, blah...

    Text, blah, blah, blah, Image, blah...
    Text, blah, Table, blah...

    Text, blah, blah, blah, Image, blah...

    ....etcetera down the page.

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

    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--------------

    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.)

    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.)


    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.


    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.
    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.