Some Simple but Useful HTML Tags
Copyright © 1999, Richard Lee

Preface

This is not a complete guide to HTML--nowhere near. It is attempt to teach some tags that are useful for getting a page up on the web in a quick and dirty fashion.

I put it up primarily for the use of some faculty who are working with me in a faculty mentor group on putting course materials on the web.

A Minimal HTML File

<HTML>
<HEAD>
<TITLE> title goes here </TITLE>
</HEAD>
<BODY>
The stuff you want to appear on the page goes here and can go on for several lines.
</BODY>
</HTML>

And that's the file. Type it in, save it, set the permissions, and you're in business.

But to make it pretty (and legible) you'll want some control over how you display your information.

Breaking Lines

<BR>
Break. Starts a new line (= CR, LF). Without explicit breaks browsers treat blank lines and tabs as though they are single spaces.
<P>
Paragraph. Starts a new line and leaves a blank line (= CR, LF, LF).
<HR>
Horizontal Rule. Puts a line right across the screen as a break between sections. Example: right above the "breaking lines" heading.
<PRE> </PRE>
Preformatted. If you have line breaks and spacing in a document just the way you want it and don't want to take the time to try to get HTML to do it with <BR> and <P> and "tables" and such, you can simply put a "<PRE>" command on a line above your formatted material and a "</PRE>" on the line after it. 
     This doesn't take advantage of what HTML formatting has to offer 
(and doesn't fit lines to the user's screen), but if you have that
syllabus all ready to go and don't want the browser joining lines
together, this is quick and dirty and gets the job done.
     These two brief paragrahs are formatted with the <PRE> tag.
Notice the monospaced font so that typing can line up as you expect.

Some Simple Formatting

<CENTER> </CENTER>
Center On/Off. Centers the lines that follow (until it is turned off again). Much like centering lines using a word processor.
<BLOCKQUOTE> </BLOCKQUOTE>
Blockquote On/Off. This indents the text that appears between these tags, setting it off as one might set off an extended quotation within a book.

Font Style

<I> </I>
Italic. Starts/Ends italics
<B> </B>
Bold. Starts/Ends boldface
<FONT ...> </FONT>
Font. Here the "..." needs to be replaced with something. Examples:
COLOR="#RRGGBB"
Prints the enclosed text in the specified color, where "RRGGBB" is replaced by hex numbers. "FF0000" would give bright red, "500050" would be a purple (equal measures of red light and blue light with no green, in case you are wondering).
COLOR=colorname
Prints the text between the tags in the specified color. I don't know what color names work and what don't; experiment, but be aware that how things look under one browser may differ from how they look under another. But for something quick and dirty it beats learning hex codes.
SIZE=+1
Print the text between the <FONT SIZE=+1> and </FONT> tags one point larger than the rest. You and replace the "1" with a higher number and watch that text grow.
SIZE=-1
Print the text between the <FONT SIZE=+1> and </FONT> tags one point smaller than the rest. You and replace the "1" with a higher number and watch that text shrink.

Including a Link

<A HREF="url">text</A>
Anchor. Open/Close an "anchor." This sets aside the text (or whatever--it could be an image) between the open and close anchor tags. In this case it sets it aside as a link or a "hypertext reference" which is indicated by the "HREF=". What follows (in optional quotation marks) is a file name in the same directory (e.g. "page2.html"), a path on the current machine (e.g. "/images/family/bobby.gif"), or a complete url (e.g. "http://www.uark.edu/misc/tfsc/TFSC.html"). The "text" will be displayed on the screen, but when it is clicked, the user will go to the "url."

So, for example, you type:

<A HREF=edit.html>Learn How to Edit</A>

and it shows up as: Learn How to Edit

Displaying an Image

<IMG SRC="url">
Lee Image. This puts an image on the page. The image may a "gif" or jpg" file. Once again, what follows (in optional quotation marks) is a file name in the same directory (e.g. "myface.gif"), a path on the current machine (e.g. "/images/family/bobby.gif"), or a complete url (e.g. "http://www.uark.edu/misc/tfscinfo/tfsc.gif").
There are several bits of information (parameters) one can put in the tag (before the closing > symbol.
  • HEIGHT=nn [where "nn" is a number of pixels or dots]
  • WIDTH=nn [where "nn" is a number of pixels or dots]
  • ALIGN= (LEFT, RIGHT, CENTER) [choose one; the example is with ALIGN=RIGHT.]
  • ALT="text" [text which would be included if the browser does not have images turned on or which may appear when the cursor passes over the image.]
By the way, images can be large or small. Some things that may look like special characters or bullets may simply be small images. Here's one I use in some of my formalized arguments: :.

Headings

<H1> </H1>
Heading level one On/Off. Displays the intervening text as the highest level heading. Use "2" instead of "1" and you get a slightly smaller heading (or however the browser chooses to display such headings). And so on down to "6". The heading above that says "Headings" was done with <h3>.

Warning

Unfortunately some of these useful tags are officially "depreciated," which means the controllers of standards found more complicated ways to get this done. (Am I too cynical?) I still think they are easier than learning the more complicated tags that are now becoming official. And they'll probably still work on browsers for years to come.

Checking Your Page

Want to know whether you made any mistakes? You can, of course, look at your page using your broswer of choice (Netscape, Internet Explorer, etc.) and see if it looks right. Actually browsers are fairly forgiving of errors. If you're used to programing, you know that many compilers and other programs simply spit out "error" or "syntax error" (an old BASIC favorite) when you type something wrong. But browsers try to do the best they can.

But as a result, there may be errors in your code that you don't realize are there. But you can get a computer to check your pages for you for various errors. Go to NetMechanic to find out how.

Topics for Later

"These materials are not endorsed, approved, sponsored, or provided by or on behalf of the University of Arkansas, Fayetteville."
Richard Lee, rlee@comp.uark.edu, last modified: 10 February 1999