The Intelligent Person's
QuickStart Guide to Basic HTML
the HyperText Mark-Up Language

Last Edit August 1999
Looks Best in Netscape!

THIS IS NOT AN ALL-INCLUSIVE GUIDE! -- IT'S TO START YOU ON YOUR WAY.

Click on an underlined topic:

Rules and regulations

HTML (for hyper text markup language) is a markup language that is continually evolving. It uses Tags to indicate how text is to be treated by a browser. A browser (such as Netscape, Mosaic, Internet Explorer, Lynx, etc.) is an application program that reads HTML files and certain other file formats depending on the browser and whatever add-ons or plug-ins you have added to it. Browsers exist for a wide variety of hardware/software platforms which is why HTML is so very popular as a means of exchanging information between different computers running different operating systems. Anyone who has tried other means of formatted file exchange between a MAC and a PC running Windows understands this.

Everything must be indicated to the browser. It will assume nothing.

Browsers are different for each hardware platform (Mac, Windows, UNIX system, etc.) and the same browser will look different on each platform. Netscape on a PC running Windows will not be identical to Netscape on a Mac. Mosaic does not look like Netscape. Neither does the Internet Explorer. There are dozens of browsers and more than three hardware-operating system platforms.

If you have ever used the very old first word-processing programs, they used tags to talk to the printer. <B> any text <B> would cause overstriking for bold and <I> any text <I> would cause an italic or alternate font, on systems that (gasp!) actually offered two fonts. {In those early days - that was unusual!} HTML's method of markup stems from these early attempts to define format to a piece of hardware.

Before you start...

Above the opening HTML tag, you may put something like:

<!DOCTYPE HTML PUBLIC "-//W30//DTD W3 HTML 4.0//EN">

This will tell search engines what the file is. It tells you what you did it in.

Starting and Ending the File

HTML files must start with <HTML>; and end with </HTML>. These are tags and they are paired - that is, they always occur in pairs. Use this rule for all tags.

Within the HTML file, there are two parts:

the HEAD and
the BODY

HEAD ELEMENTS

The HEAD is the header for the file and contains identifying items such as a TITLE.

A TITLE is a text string - no formatting - that appears at the top of the browser screen. It is also searched by the web crawlers. Web crawlers (search engines) are getting more and more sophisticated but even the simple ones check the TITLE. Put key words up there but keep it meaningful to the page. Put a different title on each file please.

HEAD mark up codes include

<HEAD> </HEAD> start and end tags. No paragraphs, spaces or blank lines please.
<TITLE> </TITLE> text line (80 char limit - don't put a paragraph in here)

For Example:

<!DOCTYPE HTML PUBLIC "-//W30//DTD W3 HTML 3.0//EN" >


<HTML>
<HEAD>
<TITLE> D. E. White - Intelligent person's rapid guide to HTML </TITLE>
</HEAD>
<BODY=white>

Any text, tables, lists, etc.

</BODY> </HTML>

BODY Elements

The BODY is where the page is defined. This is where you put paragraphs, lines, tables, art, frames, lists, ordered and non-ordered, definitions and all the rest. Try not to build pages that takes days to download over a 14.4 modem. Watch the size of the text and the graphics on a page and jump off to a new page to continue. A BODY also contains links and anchors which are treated as "GOTO" and "GOSUB" calls.

Paragraphs are the basic unit within an HTML file body. <P> and </P> are the paired tags for a paragraph. There is a line or space between paragraphs. A line can be broken without inserting space between the lines by using the <BR> tag. Some HTML support programs insist that this is a paired tag and needs its counterpart, but I disagree and so does my HTML source reference. So there!

Netscape understands <BR CLEAR ALL> and some variations (CLEAR RIGHT, CLEAR LEFT) and a few other browsers do too. Just not all of them. Rule: If they all don't support it, don't use it.

As a rule, spaces mean nothing to a browser. You could type word wordand the screen would show "word word" Everything must be indicated to the browser. It will assume nothing. And it will ignore multiple spaces unless specifically told not to do so.

You may force added spaces between things by typing   <-- this is code to make the browser leave a space.

Logical Vs. Physical

There are two types of markup codes for text. LOGICAL and PHYSICAL.

LOGICAL mark up codes include

<STRONG> should be treated as BOLD
<EM> should be treated as italics
<CODE> computer code
<KBD> keyboard input
<VAR> variable
<DFN> defining instance of a term
<CITE> short citation

RULE: Physical markup is usually used where converting from one format into HTML. Use logical markup on new documents.

PHYSICAL mark up paired codes include

<B> boldface where possible
<I> italics
<TT> fixed-width typewriter format
<U> proposed underline (not yet universal)
<PRE> and </PRE> for pre-formatted

How did you DO that?

How did I color some of the background? I put the text inside of a table and colored the background of a table cell. See later on when we talk about tables.

How did I color the text>? I used the <font> command pair ( close with</font>) and used a color specification:

color="#800080"

And I added a font type:

face="Arial, Helvetica, sans-serif"

Headers

You also have the ability to have HEADERS. A header markup is <Hn>, where n is a number from 1 to 6. Pretend it is a number from 1 to 4. The sizes of 5 and 6 are very small and hard to read even with a 24-bit color 20 inch high-resolution monitor! Headers are paired tags.

You can create entire web pages with headers and marked-up text. It would be boring, however. Headers may have font definitions and color as well.

<H1> Header Level 1<H1>

<H2> Header Level 2<H2>

<H3> Header Level 3<H3>

<H4> Header Level 4<H4>

<H5> Header Level 5<H5>

<H6> Header Level 6<H6>

Lists

Breaking up paragraphs with bullets or numeric lists (I like bullets) helps make a page pleasing and the added white space makes it appear easier to read. Lists are of three basic types:

Ordered (number 1, 2, 3...)
unordered with bullets and
definition list, where a term or phrase is defined.

unordered list

This lists uses bullets (a circle by default)
Netscape lets you change the bullet to a circle or square
You can put lists inside of other lists
- Like this item is under the one above it
Don't get too deep!
Lists can help make a page read and look better. But it will look different on different browsers or even on different hardware with the same browser.
Long entries will wraparound just like you would expect them to so that they look like a related line of text. Long entries don't have as much white space but it is a neat way to block text.

Use <UL> and it's pair </UL> to start and end the list. Within the list use <LI> and </LI>.

ordered list

This lists uses numbers (1, 2, 3 by default)
Netscape lets you change the bullet to a circle or square
You can put lists inside of other lists
1. Like this item is under the one above it
Don't get too deep!
Lists can help make a page read and look better. But it will look different on different browsers or even on different hardware with the same browser.
Long entries will wraparound just like you would expect them to so that they look like a related line of text. Long entries don't have as much white space but it is a neat way to block text.

Use <OL> and it's pair </OL> to start and end the list. Within the list use <LI> and </LI>. You can specify a type=a inside: <OL type=a> which gives us an alpha list. Default is numeric.

Lists: can help make a page read and look better. But it will look different on different browsers or even on different hardware with the same browser. Long entries will wraparound just like you would expect them to so that they look like a related line of text.
Feature: This kind of list doesn't have as much white space but it is a neat way to block text.

Use <DL> and it's pair </DL> to start and end the list. Within the list use <DT> to start the term and </DT> to end the term, use <DD> and </DD> to close the definition. This allows a glossary or other structured text presentation to be made on the page.

Lines

Netscape allows you to play with lines and if you are reading this with Netscape you have seen partial bars, wide bars and NOSHADE bars. These are nonstandard but if you know your audience will be using Netscape, go for it! However, it is always nice to say something like "Looks better with Netscape." on the page with a link to Netscape so someone could try it out.

Wide Line

Partial Line

NOSHADE Line

Lines can break up text flow and are used to separate page elements.

Inserting an Image

If you have Photoshop or some other means of generating a GIF89 image file (generic image format) or a JPEG formatted file (please, for photos only!), you will want to insert graphics on the page. Small graphics are best. Transparent are better. Interlaced (where it loads in a ripple) are fine. Keep the bit density low by using indexed color set to 3, 4 or 5 bits unless the drawing is in black and white where you will use greyscale. There are tons of GIFs running around on free pages and sample CDs.

RULE: Do Not Steal Images From Other Pages Unless The Page Says You May ! Sometimes you can download a button from a software site only if you register that you are doing so and use it according to the owner's rules. Netscape does this. So does Submit-It. So does Microsoft. So does Apple. So does anyone who wants you to promote this site. I do this for software I like.

You will need to tell the browser where the "source" file for the image is. (When uploading to a server, the image is usually in the same directory as the referring file. But not always!) The following assumes that the sourcefile is "local" to the calling program (the calling program is the one asking for the image).

The following assumes that the sourcefile is "remote" to the calling program (the calling program is the one asking for the image), in this case on a website called www.somewhere.com in a directory called DIRONE.

The image will be displayed on the calling page.

You can put borders around it, embed it in a link, put it in a table, etc. Play.

Images may be aligned (ALIGN="RIGHT", ALIGN="BOTTOM", ALIGN="TOP", ALIGN="CENTER", ALIGN="LEFT"). Left and Right are HTML 3.0 additions. We are at HTML 4.0 now.

When specifying an image source file, it is a good idea to supply an ALT for alternate display (usually text) that will be shown when the image is missing or if the viewer has graphics turned off. ALT="any text" appears within the brackets. You can also specify WIDTH="nnn" and HEIGHT="nnn" in pixels to limit the picture display size. Not all browsers see these commands.

Netscape allows VSPACE and HSPACE commands and a LOWSRC low-res source file for fast load (the detail fills in afterward). Netscape also allows a BORDER="nnn" command to put a border around the image. IF you use these things, tell people at the start that your page looks better in Netscape. Follow the same rules if you use codes that are specific to the Internet Explorer, or whatever it is called after the lawsuit is settled. [Use Netscape - everybody does!]

Anchors and Links

An anchor causes you to jump in a GOTO. An Image insert acts more like a subroutine call in that you stay on the same page. These inserts and anchors are called links.

These are what the excitement is all about. Anywhere, at anytime (well, . . . almost) you can put in a link to another HTML file. So you can be writing a piece and decide a sidebar is required. You put the sidebar in its own file and place a link to it from as many places in the original file as seem logical without being ridiculous. Where ever you jump into the page FROM, the called page should have a means of returning to the calling page. Somehow. How the links work with each other should be planned, diagrammed and discussed before you do it. This linking feature is what builds the "WEB" structure.

<A HREF="filename.html">some text to be underlined, etc.</A>

<A HREF="http://www.website.com/DIRONE/filename.html">some text to be underlined, etc.</A>

Both of the above are commands to "GOTO" filename.html and filename.html would be opened. You can always return to the calling program using the BACK command in the toolbar of the browser. Or this file might link to other files.

A page is interesting if it leads you to other data that is related and that contributes to the top level idea. Often, a new page is justified because several pages need to refer to it. This multiple linking contributes to the richness of the resulting web structure. It also allows thought processes to be reflected in the way the data can be followed. Each viewer of the site will control what they want or need and take only that from the site.

Rule: Always let people find important stuff on your website in two links maximum if it is at all possible to structure your site to do so. Dreamweaver all allow you to "manage" a site and allow back-editing of file locations. I recommend this if you have a large site to manage.

Tables

Tables are a neat way to control text layout, properly align image and text, fake multiple columns or present tabled data. There are a lot of options.

TABLE is a paired tag: <TABLE> and </TABLE> bracket a table. If you leave the ending </TABLE> out of your file - NOTHING WILL BE DISPLAYED. The browser will get lost.

A header line can be added with a header above each column, <TR><THE colspan=3> ...</TH></TR>

Tables with a border look like tables. Tables without a border can help format pages. Adding commands like CELLPADDING="n" and CELLSPACING="n" can put whitespace around the text and images you put in the table. Headers and data items can span more than one column Add COLSPAN="n" to the TD or TH tag. The table header tags will bold the labels you put in them. Other items can be bolded by using bold tags within the data item Setting bold will only work for the one item however.

Tables
You can add color to the table items. Use BGCOLOR="#nnnnnn" in the TD or TH tags.	Basically, play. Then check it out with some browsers. Use more than one - Remember - different browsers treat commands differently. Especially embedded commands.	Ready? Display this file as source (VIEW<SOURCE) and print it out. Then print out the browser version of the file. Compare them.
Now start your own web page.

The web has lots of sites with more detailed instructions and details of the formal specification. Master this page by viewing the source file, saving it to your disk and playing with it. You can do some pretty sophisticated pages with just this much information. Then you will be ready for the more complex directions.

My External Home Page My Synopsys Home Page

For information about this file or to report problems in its use email dewhite@best.com

The Intelligent Person's QuickStart Guide to Basic HTML the HyperText Mark-Up Language