Shortcut reference to HTML formatting:

Here's a quick "how to" on:
For more detailed guides to HTML formatting, check out these sites:


Basic HTML formatting

<P> This make a paragraph space. Like this:

<BR> This makes a break in text, but with no "white space" (like a paragraph marker) in between. (This line is
separated by
"<BR>'s")

<HR> This makes a "horizontal rule"--a line that will run across the page, no matter how large the user makes their screen:


<H1> and </H1> Put these markers around any text that you want to appear large--like a headline:

Man Bites Dog

Basically, it can make headers and subheaders stand out by making their point size larger. There are several sizes to headers ranging from the largest (H1) to the smallest (H6).

<B> and </B> Put these around text you want to appear in bold.

<i> and </i> Put these around text you want to appear in italics.

<UL> and </UL> This stands for "unnumbered list." It tabs in text so you can make a list set off from the rest. It's usually accompanied by an <LI> in front of each item, which creates a "bullet" for each individual item:

And don't forget your required elements, like:

Making Links

To make links, check out the National Center for Supercomputing Applications guide to making links (from which I pilfered this tidbit):

Here is an sample hypertext reference:

This entry makes the word ``Maine'' the hyperlink to the document MaineStats.html, which is in the same directory as the first document. You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file NJStats.html located in the subdirectory AtlanticStates would be:

These are called relative links. You can also use the absolute pathname of the file if you wish.

Relative Links Versus Absolute Pathnames
In general, you should use relative links, because

However, use absolute pathnames when linking to documents that are not directly related. For example, consider a group of documents that comprise a user manual. Links within this group should be relative links. Links to other documents (perhaps a reference to related software) should use full path names. This way, if you move the user manual to a different directory, none of the links would have to be updated.

Uniform Resource Locator
The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on other servers. A URL includes the type of resource being accessed (e.g., gopher, WAIS), the address of the server, and the location of the file. The syntax is:

scheme://host.domain[:port]/path/filename where scheme is one of

For example, to include a link to this primer in your document, you would use
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>

This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink to this document.

(Take it from me, though. You don't need to know any of this. If you see a spot you like on the web and you want to make a link to it from your own pages, just copy the URL out of the "location" box, and paste it in as a link. It's that simple!)

Internal links

Sometimes, you might want to make a link to another place within the same document. You can do that by making an "internal link." Just go through the regular steps where you want to make a link, but instead of typing in the name of a document, just put a pound sign "#" and some innane description of the link:
<A HREF = "# brilliant dissertation on saline concentrations in my bathtub"> Is it salty in here, or is it me? </a>

Now you're almost done. You may have given the link a name, but it still doesn't know where to go when someone clicks on it. So you need an anchor (you know, that big metal thing shaped like Popeye's tattoo where all the links in a chain lead to). Just stick your cursor in the text where you want your readers to be dropped, and put in your anchor--only this time, leave out the # sign:
<A NAME=" brilliant dissertation on saline concentrations in my bathtub"> You should get dropped here. </A>

Bringing in Pictures, Video and Sound

Check out Getting graphic - Introduction to using images, video, sound for a simple explanation of making your site a truly multimedia one.

Bringing your pages to life--with reader feedback

Want to get feedback on your pages? Be sure to put your e-mail address at the bottom of the pages you create. And a handy feature of Netscape will allow you to make that address a "link" so when you click on it, up comes a box with your address already there, the address of the page they're on, and a place all set for them to tell you how wonderful your web site is:
Tell me I'm great! Send e-mail to KAmaral@UMassD.edu

How can you do that? Make it a link. But instead of typing in the name of a document you want it to jump to, type in these words: mailto:myaddress@umassd.edu. Well, you of course have to type in your real e-mail address, but you get the idea. (Remember, this feature is not supported in all browsers, so be sure to write in your full address so those using older versions of Mosaic and MacWeb can still get in touch with you.)

This ain't magic, folks

Now there are some programs, like BBEdit and HTML 1, that can help you do a lot of these commands automatically. But these are not magical programs. You can do any of this stuff in your own little word processing program set up on your personal little Amiga or MacClassic.

And remember, if you see something cool on the Web, but aren't sure how to do it, choose "View" and then "Source" in Netscape. That will give you a picture of the original document and how it was created. It's a really nifty tool, and one that has gotten me out of a few jams. For instance, I wasn't sure how to incorporate audio into my article about marine mammal acoustics. But I did recall looking at the White House pages and listening to Socks the Cat meow. I simply went there, and selected "view-source" to get a clear picture of how to do it!

Silly reminders to make things actually work

If none of this is working for you, then you might want to make sure that you've done the following:

1) When you're bringing in text to format for the web, make sure it is a "text only" document. You can do that by saving it as "text only" in the application it was created. Or, copy and paste it directly into BBEdit or text programs like Teach Text or Simple Text.

2) Whenever you save a document you've marked up, remember to give it the proper tag: ".html" if it's a text file, ".gif" or ".jpeg" if it's a photograph, ".au" or ".aiff" if it's an audio piece, and ".mpeg" or ".mov" if it's a video. (Note: on a PC, the name of your file is restricted to eight characters, plus the .html extention, which gets shortened to ".htm")

3) Never, never, never put any spaces or funky characters in your folder or file names. The browsers can't read them. The only time it's kosher to use spaces is when you're writing an internal link.

4) If a link's not working, you probably did something really simple (and usually impossible to spot), like put in a space, and extra character or left something out. When in doubt, copy and paste. That way, you'll always get it right.

5) And relax! Have fun! It's super cool once you get the hang of it. And it's the height of instant gratification once your stuff starts popping up on the screen!


  • Go to Publishing on the Web: A "How-To"