Tangled Web -> Intro to HTML

A Very Brief Introduction to HTML

An HTML document consists of a HEAD and a BODY. They are delimited by "tags", as shown here. 

<HTML>
  <HEAD>
    <TITLE>Intro to HTML</TITLE>
  </HEAD>

  <BODY>

    (the body of the document goes here)
      
  </BODY>
</HTML>

Common Tags

The BODY contains the text seen by the user, plus more tags. Tags are not displayed, but are used to mark up the text. Some common tags are

<P> Starts a new paragraph. Normally, text flows to fill the available space, but a new paragraph starts on a new line (generally with some vertical spacing between them).

Here is a new paragraph.
<A> Anchor. Can be either a link to another document/location, or a name to be linked to. i.e. can be either end of a link (or both!)
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>

This is heading 2.

This is heading 3.

This is heading 4.

Heading level. Use these to break your page into sections. I have used style sheets to "outdent" Heading 2 and 3, relative to the body text, which is indented.

<IMG> Image. Inserts an image like The NASA meatball logo in line with the text.

Lists

Also quite useful are lists, of which there are three types:

<UL> and <LI> Unordered list, as in:
  • Spam
  • Eggs
  • Sausage
  • Spam
<OL> and <LI> Ordered list, as in:
  1. This is Spinal Tap
  2. The Sure Thing
  3. Stand By Me
  4. The Princess Bride
  5. When Harry Met Sally
<DL>,
<DT> and <DD> 		Definition list, as in:
Planet Ten
Home planet of the red and black Lectroids
Oscillation Overthruster
A key component of the Lectroids' spaceships.
New Jersey
The breakthrough role for Jeff Goldblum.

Attributes

Tags have various attributes they can take. Some examples follow.

ALIGN

Sets alignment for blocks of text. This paragraph is tagged with <P ALIGN=RIGHT>, so it is formatted against the right edge.
HREF

In the <A> tag, indicates the other end of a hyperlink:

<A HREF="foo.html">, which does this
HEIGHT
WIDTH		 For images, it allows the browser to format the page before it has the image.

<IMG HREF="foo.gif" ALT=""> yields this:

<IMG HREF="foo.gif" HEIGHT=40 WIDTH=200 ALT="">
yields this:

ALT For images, it provides text to be displayed if the images are not.

<IMG HREF="foo.gif" HEIGHT=40 WIDTH=200 ALT="Flight model Foobar">
yields this: Flight model Foobar

Document author: Kevin R. Boyce (email: Kevin.R.Boyce@gsfc.nasa.gov)
This page was last modified on 14-Dec-97 at 6:36 PM