Mister Hungerford's Web Page

MESA

Web Page Design Competition

Web Page Creation Activity #1

The purpose of this activity is to introduce you to a few simple commands of Hyper Text Markup Language (HTML). You will experiment with web page creation using a simple text word processor and HTML coding. You will be creating a simple web page using a script that is provided.

Directions:

With a partner, do the following activity. One partner will type while the other reads the step-by-step instructions. Partway through the activity, change responsibilities.

1. Make a new folder on your floppy disk, and name it WebPage
NOTE: All of your work and graphics for web page design need to be saved in this folder.

2. Open a basic word processing program, such as Notepad on the PC.

3. HTML documents are divided into two parts, the head and the body. The head contains information not displayed as part of the web page. The body contains the displayed portion of the page. The first tag on the page will be the HTML tag to denote that indeed this is a web page. All web pages begin and end with this code. Type the following, open bracket, html, close bracket. It should look like this:

<html>

Tags are always surrounded with angle brackets, the less than/greater than characters. Most tags come in pairs and surround the material they affect. HTML tags are not case sensitive.

4. On the next line, type <head>. This tag contains heading information about the page.

<head>

5. Next, type the title for your Web Page. Insert a tag in front of your name and behind your name. It should look like this:

<title>Your Name's Web Page </title>

The tag <title> means to start the title and </title> means to stop the title (notice the /title). There will always be a slash in the ending tag. The title will only show in the title bar of your browser, not on your actual web page.

6. Type the following tags to end the heading section and to start the body of the page.

</head>

<body>

Everything that appears on the web page will go between the body tags. (NOTE: We will add an end body tag later.)

7. Save your work using the Save As command. Name the file homepage.htm on the Windows platform (if you were using a Macintosh you would use homepage.html). Save the file into the WebPage folder that you created in Step 1.

8. A heading tag is used to make a title or header at the top of the web page. Type the following:

<h1> Welcome to (Your Name's) Web Page </h1>

The tag <h1> is a code for a header. The 1 stands for the size of the font. The larger the number, the smaller the font. The smallest font is <h6>. You can also make your header bold or italicize by adding the following tags: For bold add the bold tags <b> and </b>. The <b> tag would follow the <h1> tag and the </b> tag follows the word Page. It would look like this: <h1> <b> Welcome to (Your Name's) Web Page </b></h1>. Experiment with the Italics tag.

9. To insert a graphic, follow these steps:

a. First find a graphic that is a .jpg or .gif. These are the only tow graphic formats that any Internet browser can recognize. Many web editors come this these file types.

b. Save the graphic into your folder called WebPage.

c. Open your homepage.htm file, insert the cursor below the heading tag, and type the name of your graphic file. Surround the name with quotation marks.

"apple.gif"

d. The tag for an image is <img src="name of graphic file">. Place the image tag in front of the graphic file name. Img stands for image, and src stands for source.

<img src="apple.gif">

10. To center the image, surround the image tag with the center tags.

<center> <img src="apple.gif"></center>

11. Save your work by clicking on File, Save.

12. To view your web page, Open Netscape. Split your screen so both Netscape and your .htm file can be viewed at the same time.

13. Once in Netscape, go to the File menu and select Open File. Find your folder called WebPage, and open the homepage.htm file. You should now see your file as a web page.

14. Click on the text screen in Simple Text to continue the html coding.

15. Save every five minutes (or sooner) and then view your progress in Netscape by selecting the Netscape window and clicking the Reload button.

16. Type your answer to the following questions in between the tags. Save and view often to see how your web page is developing.

<h2> What is your name and the name of your school? What grade are you in?</h2>

<br> (br=break which inserts a blank line space between the text)
<h2>What is your favorite topic in school?</h2>

</body>

</html>

The </body> and </html> tags are the ending tags for the body and the web page respectively.

17. When you finish, your source code will look like this:

<html>
<head>
<title>Your Name's Web Page </title>
</head>

<body>
<h1> Welcome to (Your Name's) Web Page </h1>
<center> <img src="apple.gif"></center>
<h2> My name is Mister Hungerford and I am a teacher at Gilroy High School. I teach students ranging in grade from 9^th to 12^th.</ h2>

<br>
<h2>I am currently teaching Integrated Math and Calculus, but my favorite topics to teach are Physics, Astronomy and Calculus.</h2>

</body>

</html>

If you would like to experiment further, here are more tags. Also, try viewing the source code of a page you like, and then copy and paste the source into your web page. Save, and reload the page to see the effects.

<b> bold text </b>

<i> italic text </i>

<img src+"name of graphic file"> inserts a graphic, must be .jpg or .gif

<p> places a break between paragraphs (note, no end tag on this one)

<hr?> inserts a horizontal rule (note, no end tag on this one)

<a href="URL address"> name of a web site </a> inserts a hot link

For more information on HTML tags check the following sites:

Digital's HTML Starter Page

http://thuban.ac.hmc.edu/www_common/ips/HTML_PRECONFIGURED/HOW2HTML.HTM#BASIC_PAGE

How a Web Page Works (excellent site)

http://www.howstuffworks.com/web-page.htm

AAA Free Clip Art