Lesson 4

Lesson 4: Creating High School Web Pages

Instructional Objectives: Students will learn how to format and connect web pages. Students will create a personal portfolio of their selected high schools to share with other students, their guidance counselor and parents.
Time Required: two to four class periods
Advance Preparation: You should have a projector or TV screen setup beforehand to use. You should have on hand a basic html book or a printout of html tags. You can printout a guide from http://www.digitalpublishingservices.com/html/ . You should also have three jpeg or gif images downloaded to student computers for insertion into student web pages. A good site for images is http://www.clipart.com .
Materials / Resources Required: A projector or TV screen setup, computer with Internet access and a basic word processor such as Notepad, SimpleText or Wordpad. You might want to have a copy of the book, web pages for dummies or any book on basic html for reference.
Vocabulary: hypertext markup language (html), tags, browser, link, webpage, website
Concepts, Focus Questions (and responses), Generalizations, Key Points: Focus questions for this lesson are:
How do you format a webpage? How do you link web pages? How do you insert an image into a webpage?
The following tags change the look of the:
Background color of the page: <body bgcolor=?>
Sets the background color, using name or hex value
Color of text: <body text=?>
Sets the text color, using name or hex value
Color of hyperlinks: <body link=?>
Sets the color of links, using name or hex value
Color of links you have visited: <body vlink=?>
Sets the color of followed links, using name or hex value
Color of links when you click on them: <body alink=?>
Sets the color of links on click

To make an internal connection or as it is called in webpage terms link to one of your files, you use the tag <A HREF=?> to open the link. You use the tag </A> to close this tag.
You can use these tags to create a home or back or next button to one of your other Web Pages.

Lets call your second page index2.html.
This is a sample code of how to do that.

<A HREF="index2.html">On To Next Page</A>

On your webpage you would see the words On To Next Page like this: On To Next Page

The following commands will insert an image into a document:
<IMG SRC="name"> Adds an image
<IMG SRC="name" align=?> Aligns an image: left, right, center; bottom, top, middle
<IMG SRC="name" border=?> Sets size of border around an image
<IMG SRC="name" width=? height=?> Sets the size of the image in pixels or as a percentage of its original size
The best types of images to insert into a document are jpeg and gif. File formats of other types are permitted, but they take longer to load and if you are viewing webpages with older versions of browsers, you may not be able to view the images.
This link from Draac.com provides an excellent example for inserting images into a webpage.
The following tag inserts a horizontal line divider in a document: <hr>.

Procedures:

Review the concepts from the previous lesson such as the basic format for a webpage, what tags are needed on a webpage, how do you create lists on a webpage (ordered-numbered <OL>, unordered-bullets<UL>.

Students are to edit the first webpage they created with Notepad or whatever basic editor you are using.

<HTML>
<HEAD>
<TITLE> This is my first web page </TITLE>
</HEAD>
<BODY><H1><U><CENTER>About me</CENTER></U></H1>
<BR><H3>
I am a student in the 8th grade. I have one sister. I like eating plantains and yucca. I like playing sports and video games.
</H3>
<H3><B>
<UL>
<LI>I am tall.
<LI>I have curly hair.
<LI>I have hazel colored eyes. 
</UL></B></H3>
<BR><BR><BR>Right after this line, students are to type the following:The following links are my favorite websites:<OL><LI> <A HREF="http://www.ny1.com"> New York 1 Webpage </A><LI> <A HREF="http://www.sony.com"> Sony's Website </A></OL><BR><BR><BR>What this will do is insert 2 links in a numbered list 
and will then skip 3 lines.<H7><CENTER><I>Last revised by Anthony Salcedo.</I></CENTER></H7>
</BODY>
</HTML>
Click on this example link to see the webpage.

Have students create a second webpage called page2.htm. This page is to be titled This is my second web page. In the body of the webpage, centered and underlined in an <H1> font students are to write My Picture Page. After writing this they are to skip a line and write in an <H3> font Here I will show you a couple of images on this page. They will then insert 3 images into the page and skip one or two lines between each image. After the last image, they are to skip three lines and insert the following link Return to index page. After this, they are to skip three lines and write the following centered, in an <H7> font and in italics Last revised by and their name. Below is an example of what the code for page2.htm will look like.

<HTML>
<HEAD>
<TITLE> This is my second web page </TITLE>
</HEAD>
<BODY><H1><U><CENTER>My Picture Page</CENTER></U></H1>
<BR><H3>
Here I will show you a couple of images on this page.
</H3>
<IMG SRC="2%20Cars%20-%20The%20Fast%20And%20The%20Furious-Supra%20&%20Mazda%20Rx70.jpg" width="392" height="293"><p>
<IMG SRC="Dodge%20-%20Viper%20-%20Dodge%20-%20Viper%20-%20Dodge%20-%20Viper%20-%20Wallpapers%20-%20Sports%20Cars%20-%20Vipe.jpg" width="398" height="298"><BR><BR>
<IMG SRC="Mixed%20cars%20-%20Mixed%20-%20Good%20Cars%20(Ferrari%20355%20F1,%20Acura%20NSX,%20Porsche%20911,%20Chevrolet%20Co.jpg" width="640" height="424"><BR>
</p>
<BR><BR><BR>
<A HREF="example1.htm">Return to index page</A>
<BR><BR><BR>
<H7><CENTER><I>Last revised by Anthony Salcedo.</I></CENTER></H7>
</BODY>
</HTML>

Click on this example link to see the webpage Page2.htm.

Students are to go back to index.htm and add the following line to their list: <LI> <A HREF="page2.htm"> My Picture Page </A>. Their list will now look like this:

<OL><LI> <A HREF="http://www.ny1.com"> New York 1 Webpage </A><LI> <A HREF="http://www.sony.com"> Sony's Website </A><LI> <A HREF="page2.htm"> My Picture Page </A></OL>Click on this example link to see the final index webpage.

Activities: Students are to research three different high schools and create webpages based on the information they researched. Click on the High Schools Link to see the assignment.
Students should reference their strengths and weaknesses and check to see if there
are schools that are compatible with their personal inventory. Students should be
given a copy of the Researching High Schools Rubric before being given the assignment. Students
should present their work to the class and explain the reasons for choosing certain
schools.
Summary: Images are inserted into webpages via the <IMG SRC="name"> tag. Hyperlinks are inserted into documents via the <A HREF="name"> & </A> tags. Hyperlinks can be linked to websites or other webpages. In this project, we created web pages to save our research on high schools we may apply to next year. This web page can be modified all year long and shared with your family and friends. With the new technical skills you have learned, what other types of web pages would you be interested in creating? What did you learn during this process that will make it easier the next time? Remember that you can always refer to online tutorials on html to help you advance your skills.
Sample Projects: Fair Student Sample, Excellent Student Sample, Excellent Student Sample,
Good Student Sample
Evaluation: Before assigning students the assignment, students should be given a quiz on html, click here for a sample quiz. Evaluation for the project is done via the Researching High School Webpage Rubric
NOTE: If you would like to view any link in a separate window, Right click on the
link and select Open in new window.