HTML Chapter 3 revised 10/3/06

Exercise 1

Understanding HTML Syntax

Codes used in creating HTML documents are called tags. The following is a list of rules you need to remember when creating HTML documents:

· Tags are always enclosed in left (<) and right (>) angle brackets. For example, the <HTML> tag indicates the beginning of an HTML document.

· Tags can be uppercase or lowercase. For instance, <BODY>, <body>, and <Body> are all correct. However, tags are usually uppercase to make identifying them easier.

· Tags that need to be turned on and off are called container tags. For instance <HTML> marks the beginning of an HTML document, and </HTML> marks the end of the document. Tags are closed using the forward slash (/).

· Tags that are used by themselves are called empty tags. For instance, <BR> indicates a line break. Empty tags do no need to turned off, so the forward slash </> is not used.

· No extra spaces can be inserted within a tag. For example, < / BODY >, </BODY >, and </B ody> are all wrong.

· HTML documents basically consist of three sections:

1. Header – includes the title of the document.

2. Body – includes the main text of the document.

3. Footer – includes the author and the date revised.

Using HTML Structural Tags

Certain tags should appear in every HTML document. These tags are called structural tags. Structural tags are listed below:

· <HTML> and </HTML> -- The entire HTML document must be between these tags

· <HEAD> and </HEAD> -- Defines a header for the document. Includes information such as the title of the Web page, comments, and creation date.

· <TITLE> and </TITLE> -- Identifies the HTML document to the reader.

· <BODY> and </BODY> -- Defines the body of an HTML document. All document information must be between these tags.

Below is an example of how these tags are used in an HTML document.

<HTML>

<HEAD>

<TITLE> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </TITLE>

</HEAD>

<BODY> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

</BODY>

</HTML>

Exercise 2

In this exercise you will use your text editor to create and save a basic Web page. You will also view the Web page in your browser.

Creating an HTML Document

To create a Web page, do the following steps:

Open your text editor. (Which is Notepad in this classroom)
If you are using Notepad, turn on Word Wrap by selecting the Format pull-down menu, then choosing Word Wrap.
Pay particular attention to spacing, slashes, and brackets, and key the following exactly as shown. Also, use your own name where indicated.

<HTML>

<HEAD>

<TITLE>Chapter 3 Exercise 2</TITLE>

</HEAD>

<BODY>

My name is __________________. I am the world’s greatest web page designer!

</BODY>

</HTML>

Saving your web page:

To view your Web page in your browser, you need to first save it.

To do this, click on File then Save As. Where it says Save as type: make sure it says ALL Files. Save your document to class folder in the Assignments folder on the network and to your My Documents folder with the name chap 3 exer 2 lastnameinitial.html

It is saved as a web page because it has the html file extension. If the .html extension is missing when saving the document, it will be saved as a text file and will not be seen by the browser.

It is important to remember to save your document each time changes are made. Otherwise, the changes will not appear when you refresh the file in your browser.

Viewing your web page:

Open My Documents. (Double click on the icon on the desktop)
Double click on chap 3 exer 2 lastnameinitial.html (Make sure that it has an Internet Explorer icon beside it. If it has a Notepad icon beside it, you did not save it correctly. You need to go back to the above instructions and save it correctly.)

Your document window should look like this:

If your document does not look like it, go back to your text editor and do the following:

· Check all the HTML tags and make sure they are typed correctly.

· Remember that brackets and slashes need to be used correctly.

· Make sure you resave your document after making any changes.

· To update the file in your browser, choose Reload in Netscape or Refresh in Internet Explorer.

Exercise 3

In this exercise you will edit your Web page and then view the changes in your browser.

Switch to your text editor. chap 3 exer 2 lastnameinitial.html should be on your screen. If it is not, open chap 3 exer 2 lastnameinitial.html in Notepad.
Change the text between the title tags to say Introducing Myself as the title.
In the body of the document, delete the existing sentence. Add a paragraph introducing yourself to the class. This should be a high school quality paragraph!
Save the document as chap 3 exer 3 lastnameinitial.html to the class folder in the Assignments folder on the network and to your My Documents folder.
Open My Documents. Double click on chap 3 exer 3 lastnameinitial.html web page.

Your new Web page should be displayed. If it is not, use the troubleshooting steps you learned in Exercise 2 and correct the problem.

Exercise 4

Create a web page in HTML describing something about yourself. It can be about your interests, hobbies, plans for the future, etc. Save it as: chap 3 exer 4 lastnameinitial.html to the class folder in the Assignments folder on the network and to your My Documents folder. Remember to title this page.