Week 3

Today we will learn the basic structure for an HTML document. We will also learn the most basic and important tags used in HTML documents. After today you will be able to write a fully interactive web page.

The basic HTML structure looks like this:

<HTML>
<HEAD>
<TITLE>
Sample Web-page
</TITLE>
</HEAD>
<BODY>
 This is my sample web page. I've been working very hard on it and I hope you like it!
</BODY>
</HTML>

Copy this structure into a blank Word document.

At first glance the structure looks pretty simple, and it is. Once you've copied the structure, you can use it over and over again for almost every HTML document you want to create. For now, the only part of the structure you have to focus on is between the two BODY tags (<BODY> and </BODY>). This is where you will place the all the links, graphics, tables, etc. Now that you've learned about the basic HTML structure, lets look at how to make two separate lines of text.

Line Breaks <BR>

HTML doesn't understand the "enter" or "return" key. You have to tell it that you want to have a line break or else it runs all lines together. The tag for a line break is: <BR>.

Say, for example, you wanted a second line of text underneath:
"This is my sample web page. I've been working very hard on it and I hope you like it!
I'm writing a second line, just to prove a point."
 In HTML the lines look like this:
<I>"This is my sample web page. I've been working very hard on it and I hope you like it!<BR> I'm writing a second line, just to prove a point."<BR></I>
Note: the <I>...</I> is the tag to italicize something. I was planning on covering that next week, along with bold <B>...</B> and underline <U>...</U>, but since it came up, let's just consider it covered.

Not very complicated, huh?

Following the syllabus, the next three sections are Paragraphs, Horizontal Rules, and Creating Links. I have linked these on the syllabus to
A Beginner's Guide to HTML, by NCSA.
The Beginner's Guide is an excellent resource for most of your basic HTML needs.

Anchored Hypertext Links <A HREF>...</A>

"How do I make a link between my page and Jonathan's page?" This commonly asked question has a simple answer.
  1. Copy the following HTML code:
    <A HREF=http://ccwf.cc.utexas.edu/~cooljazz/>Jonathan B. Singer's Home Page</A>
  2. Insert it into the BODY your HTML document
  3. Save the document as a (ASCII) TEXT file
  4. View the document with your web-browser (in this class we're using Netscape).
You can, of course substitute any URL in place of mine. The URL comes after the <A HREF=, has "quotation marks" around it, and has a chevron (>) at the end. What you write after the > and before the </A> is up to you.
Note: It is easy to forget a quotation mark " or a forward slash /. HTML is not very forgiving and if you make a single mistake will not recognize your tag (even if every thing else is perfect). Be sure to check your work for details.

Anchored Named Links <A NAME>...</A>

"How do I link between different sections of my own web-page?" There are two steps in creating internal links. The first is NAMEing the section you want to link.
First, you NAME the section using the following tag: <A NAME="NAME"></A>
You can put any word or alphanumeric series in place of NAME

The second step is to Anchor the HyperlinkREFerence (HREF) somewhere in the document. Linking to a NAME looks very similar to linking another document. Here is an example of the NAME link:
<A HREF="#NAME">NAME</A>
The # sign can be thought of as a bookmark, telling the document that there is an important NAME to be read. (I don't know about you, but the word NAME is starting to look a little strange to me.) Let me give you a real example of what an HTML document looks like with an internal link.

Let's say you wanted to go to the top of this page. If you clicked on the word "top" you would have gone to the top of the page and scrolled back down here.
At the top of the page there is the tag: <A NAME="TOP"></A>.
The link to the top of the page looks like this: <A HREF="#TOP">top</A>.

Internal links can be very useful in creating a table of contents, or an Index. Jason Gram's home page makes good use of internal links in the Index. I use internal links in a table of contents to my Cultural Diversity essay questions.

The last section, E-Mail Links is linked on the syllabus to
A Beginner's Guide to HTML, by NCSA.
More to come...

Back to syllabus