Basic Tag Examples:

- Headlines

Example H6

Example H5

Example H4

Example H3

Example H2

Example H1

- Paragraphs
this tag will end the line and put in an empty line {comment: end tag is optional; do not use consecutive tags to gain vertical space, instead use a series of line breaks}

- Unordered Lists

• item 1
• item 2

- Ordered Lists

1. item 1
2. item 2

- Definition List

item

it's definition is indented

-Blockquote

indents the text, used for quotations in a block of text,

but also to force indentations

- Hard Rule
line used to divide parts of page {attributes WIDTH; SIZE and NO SHADE}
The following is an example of a normal HR

The following is an example of a 200 pixel noshade HR with a size of 4

-Fonts
You can change the appearance of your text with the font tag {attributes SIZE COLOR FACE}. Be careful, however, because not all browsers have sophisticated capabilities to interpret face. I suggest normally using standard face, varying only color (w i t h b a s i c 1 6 c o l o r s) and size. Size can be absolute (from 1 to 7) or relative to the original font (+1, -2, etc..) Headings should be indicated by the heading tag not with larger font because mapping can be done with headers.

Examples of Basic Logical Highlighting

• CODE - This is typed computer code text
• EM - This is emphasized text
• KBD - This is keyboard input text
• STRIKE - This is a strike-out text
• STRONG - This is a strongly emphasized text

Examples of Basic Character Highlighting

• B - This is boldfaced text
• BIG - This is bigger text
• I - This is italicized text
• S - This is strike-through text
• SMALL - This is smaller text
• SUB - This is sub _script text
• SUP - This is super ^script text
• TT - This is fixed-width typewriter font text
• U - This is underlined text

Basic Tag HTML

Container tags (need a beginning and ending tag)

• <H1></H1>Headlines numbers go from 1-6, largest to smallest.
• <P>&LT/P>Paragraphs
• <UL> Begin Unordered list (bulleted){possible attributes: TYPE=DISC/CIRCLE/SQUARE&GT}
  <LI> {item to be listed}
  </UL> End Unordered list
• <OL> Begin Ordered list
  <LI>< {item to be listed}
  </OL> End Ordered list
  
• <DL> Begin Definition list
  <DT> {item to be listed; definition term}
  <DD> {definition of item, indented}
  </DT> End Definition list
  
• <BLOCKQUOTE></BLOCKQUOTE>Block quotes

Examples of Basic Logical Highlighting HTML:

• CODE - This is <CODE> typed computer code</CODE> text
• EM - This is &ltEM> emphasized </EM> text
• KBD - This is <KBD> keyboard input </KBD> text
• STRIKE - This is a <STRIKE> strike-out</STRIKE> text
• STRONG - This is a <STRONG> strongly emphasized</STRONG> text

Examples of Basic Character Highlighting:

• B - This is <B> boldfaced </B>text
• BIG - This is <BIG>bigger </BIG>text
• I - This is <I> italicized </I> text
• S - This is <S> strike-through</S> text
• SMALL - This is <SMALL> smaller </SMALL>text
• SUB - This is sub <SUB>script </SUB>text
• SUP - This is super <SUP>script </SUP>text
• TT - This is <TT>fixed-width typewriter font</TT> text
• U - This is <U>underlined</U> text

Non-container tags {no end tag needed}

• &LT;HR&GT;Hard rule
• &LT;BR&GT;Line break

Basic Graphics

To insert an image in your HTML document you will have to use an image tag. An image tag consists of the tag IMG SRC followed by the name of the image file in quotations. The following is the HTML for the accompanying gif image.
<IMG SRC="globe1.gif"> Any text that comes after will be placed at the bottom left unless you use align attributes or breaks.

<IMG SRC="earth2.gif" align=top>
Starts the text at the top and the overflow goes to the end of the image. This often looks rather bad, leading to chunky design.

To avoid this use a break clear all (<br clear=all>) so that the text will all be placed to the left of the image.

<IMG SRC="earth2.gif" align=left>text block <br clear=all>
<Br clear=all> clears both margins. You can also use a <BR clear=right> or <BR clear=left> to clear either margin.

Image labels, using alternative tags

It is best to label your graphic images so that those who do not have graphic capability will know what the image is and what size. Some users will turn graphic loading off and only load images that they really want to see.

<IMG SRC="file.gif" ALT="This is gif image of the earth 22 x 40">

Images as Links

Images can also be used as links, so that if a person clicks on a linked image they are moved to either an internal or external link.

<A HREF="bigleo.jpg">
<IMG SRC="smleo.gif" ALIGN=LEFT ALT="This is a thumbnail of a leopard frog, 16KB."></A>



The bigger jpeg image is 53K and takes about 30 seconds to load over a 14.4 modem. The small image is only 15K and takes only about 3 seconds to load.
Please remember to use graphics only when they add content to your website. You have to balance the time it takes to load an image with any advantage the image lends to the site.

Basic Forms

Here is an example of a simple form. Go ahead and try it out and send me your comments.

This is the code for the above example:

Name: &ltINPUT TYPE="text" NAME="name" VALUE="" SIZE=30>

Email address:&ltINPUT TYPE="text" NAME="name" SIZE=30>

Question: Please send me comments about this HTML primer&ltTEXTAREA NAME="name" ROWS=10 COLS=40> </TEXTAREA>

&ltINPUT TYPE="submit" Value="Push to test"> &ltINPUT TYPE="reset" Value="Clear form">

You can use text boxes in forms, as above, you can use radio buttons (which only allow one response), check boxes (that allow a user to check all that apply) and you can supply lists of options for the user to select one. All of these form attributes are shown in this example. You can do a view source at this page to see the code. This form requires a cgi script on your host server. I am using a umass server now, but willing be updating this form cgi soon.

Basic Frames I don't have much to say about frames. Personally, I don't like them. If you want to see how frames work go to this style sheet and this example site and view the codes. Basically, you have one html document that tells the segment (frames) documents where to go into the master site.