HTML Primer

HTML Primer

This text is intended to be read in conjunction with its HTML source. Here is how to see HTML source:

If you are running Netscape Navigator, click on

       View->Document Source

If you are running Netscape Communicator, click on

       View->Page Source

If you are running Internet Explorer, click on

       View->Source

There are also other online HTML tutorials, e.g. this one.

Section 1: Basic Features

Background

The background can be set to a color (e.g. this one is set to orange). Also, an image can be used by using BACKGROUND="yourimage.gif" instead of BGCOLOR="#RRGGBB" in the BODY specification. Link colors are also set in the BODY specification via LINK="#RRGGBB" and VLINK="#RRGGBB", where LINK is for unvisited links and VLINK is for visited links. RRGGBB is a 6-digit hexadecimal number denoting color, with 2 characters each for the red, green and blue components, respectively. For example, #ff8000 is orange.

Text styles

Bold: bold
Italics: italicized text
Underlined: underlined text
Typewriter: typewriter text (all characters have same width)
Big: big text
Small: small text
Blink: blinking text
Deleted: ~~deleted text~~

Text colors

Blue: This line is written in blue.
Green: This line is written in green.

Text fonts

You can change text fonts on the fly. If you enter a font name that your browser does not understand or support, your browser will pick some default font.

Font is arial.
Font is courier.
Font is timesnewroman.
Font is comicsans.

Lists

Ordered lists

Here is an ordered list of future tv shows:

Ninetysomething
Oat Bran: The Silent Killer
The Golden Girl

Unordered lists

Here is an unordered list of unpleasant things:

death
taxes
Bill Clinton

Definition lists

Here is a definition list of some words:

Abdicate: to abdicate
Abject: abdicate
Abjure: abject (only three letters' difference and they try to pass it off as a different word! Just goes to show that those mealy-mouthed eggheads in the universities haven't got anything better to do than split hairs over tiny details that don't make a bit of difference in people's lives. Abject/abjure, what's the difference? Who cares anyway?)
Abnegate: to abjure! (It really is! Look it up in the dictionary if you don't believe me!)

Links

Links to files

Links can bring up another HTML file, like this, or an image file, like this. Additionally, a graphics file can be used as a link. Click on the image below.

Note that because the image's width is set to a percentage, it will grow and shrink with the browser window's width. (However, I find that, for me, this only happens with Internet Explorer; the image stays the same size with Netscape Communicator.) Also note that if you change the window's size, you might get a "Can't display image" message instead of the image, in which case you'll have to reload the document in order to see it.

You can make an image change to another image when a user places the cursor over it like this:

Links to specific sections

You can set up tags so that a user can go to a particular place just by clicking on a link. For example, by clicking here, you will go to the section on tables.

You can also have links to specific sections of other documents. In this example, the name of this document is given, so the hyperlink will go to a tag in this document, but the source at least shows you how to set up the link. The document name could also be a full http address, e.g. http://www.abc.com/primer.html

Mouse-sensitive images

You can make different parts of an image do different things when they are clicked (i.e. one image contains more than one link) by use of the 'USEMAP' attribute in the <IMG> tag.

In the following image, click on each of the characters and see what happens.

Note that because its height and width are set statically (i.e. not percentages), the image stays the same regardless of the size of the browser window.

Centering

You can center all output with the <CENTER> command: This line is centered.

Subscript/Superscript

In this sentence, the trailing 1 is subscripted₁.
In this sentence, the trailing 1 is superscripted¹.

Horizontal rules

This text is above the horizontal rule.

This text is below the horizontal rule.

Using escape sequences to represent characters

Since less than, greater than and ampersand have special meanings, special escape sequences are used in order to merely print them.

Less than:    <
Greater than: >
Ampersand:    &

All printable characters can be written with their decimal values inside escape sequences. For example:

Single quote (decimal 39): '
Double quote (decimal 34): "
Less than (decimal 60):    <
Greater than (decimal 62): >
Ampersand (decimal 38):    &

There are many special characters that do not exist on our keyboards but that we can represent via their decimal values inside escape sequences:

161: ¡    171: «    181: µ    191: ¿
162: ¢    172: ¬    182: ¶    192: À
163: £    173:     183: ·    193: Á
164: ¤    174: ®    184: ¸    194: Â
165: ¥    175: ¯    185: ¹    195: Ã
166: ¦    176: °    186: º    196: Ä
167: §    177: ±    187: »    197: Å
168: ¨    178: ²    188: ¼    198: Æ
169: ©    179: ³    189: ½    199: Ç
170: ª    180: ´    190: ¾    200: È

201: É    211: Ó    221: Ý    231: ç
202: Ê    212: Ô    222: Þ    232: è
203: Ë    213: Õ    223: ß    233: é
204: Ì    214: Ö    224: à    234: ê
205: Í    215: ×    225: á    235: ë
206: Î    216: Ø    226: â    236: ì
207: Ï    217: Ù    227: ã    237: í
208: Ð    218: Ú    228: ä    238: î
209: Ñ    219: Û    229: å    239: ï
210: Ò    220: Ü    230: æ    240: ð

241: ñ    251: û
242: ò    252: ü
243: ó    253: ý 
244: ô    254: þ
245: õ    255: ÿ 
246: ö 
247: ÷ 
248: ø 
249: ù 
250: ú

Some special characters have HTML-defined escape sequences that make it unnecessary to remember their decimal values:

Copyright:             ©
Two dots over 'O':     Ö
Two dots over 'o':     ö
Tilde over 'N':        Ñ
Tilde over 'n':        ñ
Grave accent over 'E': È
Grave accent over 'e': è
Grave accent over 'A': À
Grave accent over 'a': à

A comprehensive list of characters and their escape sequence values can be found here.

Formatting and unformatting

Normally text is formatted, meaning that no matter how it is typed, each line will be filled as much as possible with text before starting on the next line. Blank lines will be ignored, and no blank lines will be printed until the next paragraph. (I don't like the fact that only one space is printed after each period, but what are you gonna do?) Additionally, if you widen or narrow your web browser screen, formatting will adjust the text accordingly. Sometimes, however, you want text to appear exactly as you wrote it, and to do this simply turn formatting off:

This text is not formatted.
This is line 2 of the unformatted text.  Now I will skip a line.

Okay, so the 3rd line was blank and this is the 4th and last line.

Aligning text

By default, text is "left-justified", meaning that each line starts at the very left of the window and ends wherever the last word on that line ends. You can make each line of a paragraph (except the last one) end at the very right of the window, so that it all looks nice and symmetrical, by using the align option within the <P> command, as illustrated by this paragraph.

You can also "right-justify" a paragraph like this. I'm not sure why anyone would want to, but it can be done. Take a look at this paragraph. Looks kind of strange, doesn't it? The right side is even, but the left side is crooked. It's disconcerting when you reach the end of a line and you have to look to see where the next line begins.

Preventing line breaks

Sometimes you want two or more words to appear on the same line, even if one word appears at the right margin. You can prevent text formatting from splitting these words up like this:

The words in this sentence appear on one line, not separated, and it runs beyond the viewable screen, so slide the bar over in order to read it all.

If the previous sentence didn't go beyond the viewable screen, narrow your browser window. You'll see that it remains as one line, while the paragraph before it, as well as this paragraph, get reformatted to fit in the narrower window.

Block quotes

HTML indents quotations. It makes reading easier.

The hardest part about making beer is siphoning it into bottles. This is tricky, because what can happen is the phone rings and you get involved in a lengthy conversation during which your 4 year-old son gets hold of the hose and spews premature beer, called "wort", all over the kitchen and himself, and you become the target of an investigation by child welfare authorities because yours is the only child who comes to preschool smelling like a fraternity carpet.
--Dave Barry

Line breaks

You can force a line break like this:
Okay, this is a new line. Starting a new paragraph would cause a line break, but it would also print a blank line, which might not be desired.

Tables

Tables present information in a form that is easy to read. In this table, the "Very large" row is left-justified, the "Large" row is centered, and the "Medium" row is right-justified, just to show you how it's done.

Advantages and Disadvantages of Dog Sizes

Size	Advantages	Disadvantages
Very large	No one will break into your home	Requires extra large pooper scooper; will not fit in your car
Large	Lovable; fun to play with	Thinks it's a lap dog, and injures guests trying to be one
Medium	Great size for kids; lots of energy	Inadequate for home protection
Small	Don't have to walk - just hold out the window and squeeze	Neurotic; bites; develops numerous physical problems

Comments

Comments take the following form: <!Comment text>

Be careful when commenting out lines. For example, if you attempt to comment out the line

<a HREF="http://www.anywhere.org">Click</a>

by enclosing it in <! and >, like this:

<!<a HREF="http://www.anywhere.org">Click</a>>

then the comment will still end at the first ">", which in this case appears just before "Click", so the rest of the line would NOT be considered part of the comment, and the resulting output from the line in this case would be:

Click>

Marquees

Marquees are cool, but not every browser supports them. The following two marquees might work for you, or they might appear only as normal text.

This marquee slides to the left.

This marquee scrolls down.

Server-side includes

Your server might or might not support server-side includes. Click here. If you get a server error or a "page not found" error, your server does not support them.

Frames

Frames allow you to divide the document window into independent window frames, each simultaneously displaying a different document. If one frame contains a hypertext link, you can make it so that if the user clicks it, the contents of that frame, another frame, or the entire browser window is changed. Click here to see an example.

Chapter 10 of "HTML - The Definitive Guide" by Chuck Musciano and Bill Kennedy (O'Reilly & Associates) is a good reference for creating frames.

Section 2: Dynamic Documents

Client-Pull Documents

It is possible to have documents refresh themselves automatically, or to have several cycle among themselves. For some browsers, this takes considerable network resources, as each refresh involves a completely new connection to the server. In order to return from all the refreshes, the "Back" button might have to be clicked once for each refresh.

Click here to see 3 documents cycle. Don't forget that you might have to click "Back" once for each refresh until you get back to this page.

Section 3: JavaScript

JavaScript is actually an extension of HTML, not JAVA. You can do some neat things with it. For example:

In the following image, click on Moe.

Enter your weight in pounds and your height in inches in the form below and press the "Let's see" button.

Section 4: JAVA Applets

In order to write, compile and run JAVA applets, you must first get a JAVA compiler. Obviously you must learn the JAVA language too. Read the JAVA documentation to learn which environment variables need to be set and what commands to run.

Click here to see a JAVA applet run.

Your Weight	Your Height	My Comment