Computer Programming 10 – HTML Programming Introduction

Ross Sheppard High School
Computer Programming 10
Student Learning Guide
Introduction to HTML Programming

	When you have finished this project, you will be able to:
	use Notepad to open, save, and edit text files
	describe the syntax of HTML scripting
	describe proper programming conventions for HTML
	view an HTML text file using a browser
	describe the following terms: HTML tag text file text editor htm extension

In the previous Information Processing module, you learned how to use the Internet, and you visited a number of web sites and web pages. In this module, you will learn how to create your own web pages.
Use Windows Explorer to create a New folder called Home Page 1.
There are many different methods of programming web pages, but the theory behind all methods is the same. The language used for programming web pages is called Hyper Text Markup Language (HTML), and uses English-like commands to tell a browser how to display the information.
In order to create a web page, you use a text editor to type the commands and text of the web page. You should note that you could use a word processor like MS Word for this purpose, but a simple text editor such as NotePad is the easiest way to learn HTML.
You could also use a program in which you simply place all elements of your web page where you would like them, and the program automatically generates the HTML codes for you. Unfortunately, if you use such a program, you do not learn how to use HTML coding, and troubleshooting a web page that does not look at you planned is very difficult.
In addition to learning HTML programming, you will learn about web page design and layout as you proceed through this module. You have probably figured out that there are some really great looking web pages on the Internet, and there are some really bad looking pages.
Start a new document in NotePad.
The first thing you need to know about HTML programming is that all HTML codes are called tags, and must be enclosed in the <> brackets. For example, the command to place text in the center of a line is
<CENTER>
Most HTML tags also require an ending tag. For example, the tag to end the center is

</CENTER>

Notice the addition of the"/".
The first command that every web page must contain is the begin HTML tag. This tag tells the browser it has encountered a web page and must display is as such. On your NotePad document, type the following tag:

<HTML>
Your Notepad document should now look like this:
It would be a good idea to save your NotePad document at this point. The standard name for the initial web page that should be shown on any web site is index. Save this document as index.htm.

Chech out how to save the file
The second line you need to type in is not a requirement for the Internet, but is one for all pages that your create for this class. It is a comment line and is used to place text on a web page that can be read in a text editor, but does not show up on the browser. To create a comment line, use the "!". You must place your name, class, period and date of the web page in the comment line:

<! YourName, Computer Programming 10, Period 2, September 10, 2002>

NOTE: Substitute your name, class, period and correct date for the information displayed above.
Your web page should now look like this:
The next line is called the title. The title tag places the text in the title bar of the browser. Type the following tag, substituting your name where appropriate; notice the title end tag:

<TITLE>YourName's First Home Page</TITLE>
NOTE: Substitute your name, class, period and correct date for the information displayed above.
Your web page should now look like this:
The next step is to place a heading on your home page using the HEAD tag. Notice that all tags are in CAPITAL letters. This is not a requirement in HTML programming, but it does make it easier to find the tags and keeps the page looking neater as you work in the text editor. This is good programming practice to get into.
<HEAD>This is Yourname's First Home Page</HEAD>

After the </HEAD> tag, type the new line tag:

<BR>

This starts the next line of text on a new line.

NOTE: It is very acceptable to combine the TITLE and HEAD tags as shown in this example: This is called "nested" commands
Now it is time to have a look at your handy work so far! To view your web page, you need to open the file in your browser. Navigate to your person disk space and find the "Home Page 1" folder, and double click on the "Index.htm" file. This will open your new web page in a new browser window.

Notice the location of both the TITLE and the HEAD on the document displayed in the browser.
Using the "Veiw" menu in the browser, select the "source" option
Now it is time to start the Body or main part of your web page. Start the body with the tag:
<BODY>
Type the text that will make up the body of your document; in this case, type some information about yourself.
As with other tags, you need to end the body with:

</BODY>
The last tag you require on a web page is the end page tag:

</HTML>

which tells the browser it has reached the end of the page to display.
Have a look at your web page in the browser. Ask your teacher to come to your workstation and have a look at it.
You have now made a basic home page. Of course, HTML programming has much more potential than you've used here, but this is a great start!

NOTE: You must use NotePad to write all of your HTML code for this course - you may NOT use any HTML editor such as Visual Page, HoTMetaL, or any Web service editor. The purpose of this course is for you to learn to hand-code Web pages.
Copy the folder and then past a copy of the folder (Named "Intro to HTML")Into the Hand In folder of your Personal disk space.(You will be using this process for the remainder of this module as we will be continuing to add to the original page.)
Continue to the next project to learn some more complex commands, by adding to this document..