Creating HTML Documents

You have started on a journey that will transform you from an Internet Surfer to an Internet Author!. This lesson is a general review of the material covered up to this point. There is not an assignment to turn in with this lesson. Just practice and review.

Objectives

After this lesson you will be able to:

Identify the meaning and purpose of HTML tags.
Open up a workspace for creating new HTML documents.
Use a text editor to create the basic HTML structure for any web page.
Insert non-displayed comments into your HTML files.
Open your document within your web browser to see how it is displayed.

As you go through this material, you will find that much of it is a review of previous material. However, there will also be some new information.

What are HTML tags?

When a web browser displays a page such as the one you are reading now, it reads from a plain text file, and looks for special codes or "tags" that are marked by the < and > signs. The general format for a HTML tag is:

     <tag_name>string of text</tag_name>

As an example, the title for this section uses a header tag:

     <h3>What are HTML tags?</h3>

This tag tells a web browser to display the text What are HTML tags? in the style of header level 3. HTML tags may tell a web browser to bold the text, italicize it, make it into a header, or make it be a hypertext link to another web page. It is important to note that the ending tag,

    </tag_name>

contains the "/" slash character. This "/" slash tells a web browser to stop tagging the text. Many HTML tags are paired this way. If you forget the slash, a web browser will continue the tag for the rest of the text in your document, producing undesirable results. For example, if the tags are not 'matched-up' then the page may appear to be blank when it is not.

NOTE: A web browser does not care if you use upper or lower case. For example, <h3>...</h3> is no different from <H3>...</H3>

Unlike computer programming, if you make a typographical error in HTML you will not get a "bomb" or "crash" the system; your web page will simply look, well... wrong. It is quick and easy to go inside the HTML and make the changes.

Your browser has a small but open vocabulary! An interesting aspect of HTML is that if the browser does not know what to do with a given tag, it will ignore it! For example, consider this heading:

This text uses a 'wiggle' tag

the header tag for this section really looks like this:

    <wiggle><h3>This text uses a 'wiggle' tag</h3></wiggle>

but since your browser probably does not support a <wiggle> tag (I made it up, perhaps in the future it could cause the text to wave across the screen - but for right now, it is meaningless to the browser.), it proceeds with what it knows how to do. In the future, web browsers (such as Netscape or Explorer) may add this <wiggle> functionality.

Opening Up Your Workspace

To complete the lessons, you should have discovered the need to create a second web window (it allows you to keep a window with the lesson instructions and another window as your "workspace"), plus open your text editor application in a third window. Today's operating systems allow users to have multiple windows open.

NOTE: This is a good place to remind you that we have provided directions that are somewhat general as the menu names and file names can differ depending on which web browser (and which version) you are using. When our instructions say, "Select Open Location... from the File Menu" and your web browser does not have that exact choice, try to find the closest equivalent option in your own web browser.

So you need to feel comfortable jumping between different applications and windows on your computer. Another option is to print out the lesson instructions (while this may be necessary in the early lessons, eventually you will want to develop the ability to manage multiple windows).

Here are the steps for setting up your "workspace":

From the File menu of your web browser, select New Window or New Web Browser (The exact name of the menu command can be different depending on what browser you are using). A second web window should appear. Think of the first window as your "textbook" and the second clone window as your "workspace" for completing the HTML lessons.
NOTE: The only reason to have two windows here is so that you can read the instructions for the lessons and also view your working document. It is not mandatory to have two windows open; it just makes your work easier. You could also bookmark this web page or jump back here via your Go or History menu option.
Next, you need to jump out of the web browser and open your text editor program.
NOTE: You will need to move back and forth between the different windows to complete these lessons. This can be a challenge depending on the size of your monitor. You may choose to resize the three windows so that they all fit on your screen or layer your windows so you can click on any of them to bring it to the front.

If you are using a word processor program to create your HTML code, be sure to save it in plain text (or ASCII) format.

If you are just starting out, we most STRONGLY recommend that you use the simplest text editor available -- SimpleText for the Macintosh or the Windows NotePad.

Why not use those nifty HTML editors? It is sound instructional design that you first learn the concepts and THEN look for shortcuts or helpers that make the work less tedious. Also, the purpose of this course is to learn a programming language and the language that we are learning is HTML - not a HTML editor.

Also, it will help you if you first create a new directory/folder on your computer that will be your work area. You can call it workarea or myspace or whatever you like; just make sure that you keep all of the files you create in this one area. It will make your life simpler... well, at least while working on this course.

Creating Your HTML Document

An HTML document contains two distinct parts, the head and the body. The head contains information about the document that is not displayed on the screen. The body contains everything else that is displayed as part of the web page.

The basic structure then of any HTML page is:

  <html>
  <head>
  <!-- header info used to contain extra information about
       this document, not displayed on the page -->
  </head>

  <body>
  
  <!-- HTML code for your web page -->
          :      :
          :      :
          :      :
  </body>
  </html>

Enclose all HTML content within <html>...</html> tags. Inside is first your <head>...</head> and then the <body>...</body> sections.

Also note the comment tags enclosed by . The text between the tags is NOT displayed in the web page but is for information that might be of use to you or anyone else who might look at the HTML code behind the web page. When your web pages get complicated (like you will see when we get into tables, frames, and other fun stuff), the comments will be very helpful when you need to update a page that may have created long ago.

In review, here are the steps for creating a HTML file:

If it is not open already, launch your text editor program.
Go to the text editor window.
Enter the following text (you do not have to press RETURN at the end of each line; the web browser will word wrap all text):
```
     
     <html>
     <head>
     <title>My Web</title>
     </head>
     
     <body>
     In this page you will see information about web pages
     </body>
     </html>
```
NOTE: Look where the <title>...</title> tag is located. It is in the <head>...</head> portion and thus will not be visible on the screen. What does it do? The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window. Since the title is used as the BOOKMARK name, it is important descriptive titles be used on the web pages.

Also note that we have inserted a comment tag that lists the name of the author and the date the document was created. You could write anything in between the comment tags but it is only visible when you look at the source HTML for a web page.
Save the document as a file called "web.html" and keep it in the "work area" folder/directory you set up for this tutorial. Also, if you are using a word processor program to create your HTML, be sure to save in plain text (or ASCII) format.
By using this file name extension, a web browser will know to read these text files as HTML and properly display the web page.

Displaying Your Document in a Web Browser

Return to the web browser window you are using for your "work space. (If you do not have a second browser window open yet, select New Window or New Browser from the File window.)

Select Open File... from the File menu.

Use the dialog box to find and open the file you created, "web.html"

You should now see in the title bar of the workspace window the text "My Web" and in the web page below, the one sentence of <body> text you wrote, "In this page..."

Basically, this is how the author will check the web page. First, the code is written, then the code is viewed with a browser. Back in the old days of computing, the code was 'compiled' or 'executed'. So, when writing HTML code, it is useful to have the text editor open as well as the browser. After a change is made in the code, then the document must be saved. To see the effects of the change, the author would go to the browser and view the file. It is important to realize that the code must be REFRESHed or RELOADed before the effects of the recently modified and saved file will be seen.

Comments

A common comment is, "I cannot see the title!" You shouldn't! The text within the <title>...</title> tag is NOT displayed on the web page; you should see it in the title bar of the web browser window.

One of the most common mistakes that beginners make is that they try using a word processing program to type HTML and then are unable to open it in their browser, or if it does, the page is full of odd garbage characters. When you are starting out, we urge you to use the most basic text editor such as the Windows NotePad or Simpletext for Macintosh. More advanced word processors put hidden codes in the text and these hidden codes will often cause problems if left in HTML documents.

Review Topics

What are HTML tags?

Where is the text of the title tag displayed?

What steps are involved in creating a simple HTML document?

How do you create a comment tag?

How can you display your HTML document in a web browser?

What procedure would an author use to 'test' the HTML code?

Conclusion
Hopefully, this lesson has been helpful in reinforcing some of the 'big picture' concepts of writing web pages.
You may have figured it out by now, but you can actually view the source code (the HTML code) on a web page. Use the mouse to point to some place on this page and RIGHT CLICK on the mouse. A 'pop-up' dialog box will appear and one of the options will be VIEW SOURCE (or something similar). LEFT CLICK on this option. You should see the source code for this page. You will have to scroll down - almost to the end of the page. I put a comment in the code following this line.
I encourage you to look at the comment that is in the HTML code between the last sentence and this sentence. It has some useful hints in it, but you will only see them if you view the source code.