The PI Comp082s Internet and
Web Search Syllabus (Spring 2004)

prepared by Vance Stevens
Lecturer of Computing at Petroleum Institute, Abu Dhabi

Objectives: by the end of this lesson, students will have ...

• learned about how to organize their web projects and save them in such a way as to avoid foreseeable pitfalls later
• reviewed html coding learned in the first 6 lessons of the HTML tutorial
• started a new work space in each of their Home folders and place here an HTML document with two picture links and descriptions of each which they will use in the next lesson to render their document in table format

Procedures:

Preparation

1. Explain the objectives of the lesson
2. Show students the target document with tables to be achieved by the end of the following lesson.
3. Show students the sample HTML file that explains how to create the table effect. Show students how to View/Source to reveal the source code. Show how the table contains two text and two picture elements.
4. Make sure the students understand where they are going with the work they will do in this lesson.

Student Task

1. Have the students start with the Housekeeping document. Tasks here are

• make a work space in their Home folders and let the teacher know when done.
• Have them set their Tools / Folder Options / View so Windows doesn't hide file extensions.
• go over with them what is allowed and not allowed in file names and have them do the pull-down quiz. They can click on an image link at the bottom and compare their work with the correct answers.
• make sure they know how to save files correctly and why they should not use File / Save-as when saving their own work
• make sure they know how to work with Notepad and check their work in a browser, maintaining the cycle of work --> save --> check --> edit --> etc.

2. Students can skip the Web presence material and also the material they have already covered. Have them jump down to Take an online quiz on the concepts so far
3. Students do Review: Steps 1 to 6 - Tell them to follow the 8 instructions carefully.
4. When finished, they can save their work in their Home folders and continue with these documents in Lesson 2.

Products:

Students should now have:

• A work space containing only files associated with their new web projects
• An HTML file in that work space that displays two pictures and at least two items of text describing those pictures

Objectives: by the end of this lesson, students will have ...

• learned how to make arrange objects on a web page using code to produce tables
• learned how to format background color or use images as background
• learned how to change text color if necessary

Procedures:

Preparation

1. Explain the objectives of the lesson
2. Show students the target document with tables to be achieved by the end of the following lesson.
3. Show students the sample HTML file that explains how to create the table effect. Show students how to View/Source to reveal the source code. Show how the table contains two text and two picture elements.
4. Make sure the students understand where they are going with the work they will do in this lesson.

Student Task: Students should ...

• take a look at the explanation. You could print this out for the students or simply display it on the overhead.
• open the sample file and follow instructions there.
• create a web page from the previous lesson so that the pictures appear diagonally opposite in a 2 x 2 table. Have them make their text descriptions refer to the picture 'to the right' and 'to the left'. (as in the example here)

Add a background image, change text color -

• Have students use this worksheet
• Have them search Google for 'background images' (to find sites like http://www.backgroundcity.com/ or http://www.sdsu.edu/graphics/backgrounds/)
• Tell students to find a small image and save it in their MyHTML folder. The best images for this purpose are small 'tiles' which will make a consistent background for the page. Also, the best backgrounds are 'soft' ones, not 'loud' ones that will dominate your page and distract from its content (these are background images, remember? not foreground).
• Have students set up their web pages so that the image becomes a background.
• They may have to change text color so it can be read it against their background. Students can review HTML Tutorial #11 to see how.

Objectives: by the end of this lesson, students will have ...

• Created a page with bulleted lists with two levels of bullets
• Linked this page to their previous work as a start of a 'project' (their own interlinked web pages)

Procedures:

Preparation

1. Explain the objectives of the lesson. Tell students they will make a 'portal' page that introduces them and the web projects they have started at the PI and placed in their MyHTML folder.
2. Show students a sample target document with bullets in two levels similar to that to be achieved by the end of the lesson.
3. Show students the page that explains to them how they can create their bulleted items. Explain the concept of 'nesting' and show how the nested items are opened and closed like embedded parentheses. (If the internet site is unreachable, use the sample target document above).
4. Make sure the students understand where they are going with the work they will do in this lesson.

Student Task: Tell students ...

You will learn how to make a 'bulleted' or 'unordered' list (no numbers). You can learn how to make a bulleted list here. For this lesson, you need to know how to start an unordered list with <UL> and start each bullet with <LI> (the code before"Modifying the Bullet"). Note how the list items are 'nested' to get the promoted and demoted bullet effects.

Your new page will have a bulleted list of links to:

• Your own web projects
  • Your blog (the one you want marked)
  • The page with the pics in a table that you were working on last lesson
  • Work on the Internet from any of your other PI computing classes
  • Any other web sites you have on the Internet
• Any other 'favorite' sites you want to point us to on the Internet
  • You should list your first 'favorite' here
  • Your second 'favorite' goes here

The ° items should be hyperlinked. That means that when they are clicked on, the browser opens the target sites. To recall how to make links, review:

• Step 7 Linking to documents
• Step 8 - Linking to URLs in the HTML tutorial

Outcomes: Students should now have two web pages and perhaps some images in their MyHTML folders (there should be no files in that folder except working project files).

• Both files should link to each other.
• One should have two pictures and two texts in 4 quadrants of a table.
• One should have at least one bulleted list (with more than one level for full credit)
• One should have a colored background
• One should have an image background
• The text color should be easily readable for each background, and the text color should be different in each of the two pages

Learn how to put some simple effects in Web pages with Forms and JavaScripts

Objectives: by the end of this lesson, students will know some simple techniques for adapting form code and JavaScripts to their own Web pages.

Procedures for Forms

Preparation:

Explain to students that they can learn how to put form code on their web pages and have responses emailed to them here: http://www.response-o-matic.com. This site processes forms submissions on its own server(s) and emails the data to users for free. The site is self-explanatory. Examine the materials here to see how to create the various forms. Figure out where to put the email address where the information is sent when the viewer clicks on Submit. Show students that they can lift the code and put it where they like on their own pages.

Student Task: Have students ...

• At Response-o-Matic, use the Form Wizard here: http://www.response-o-matic.com/template.htm to create a template. A version of the code that is generated can be found here for convenience (in this version you have to put in your own email address and url; the form asks you to input these items and generates the code with your url and email inserted correctly).
  • Complete the Wizard to generate a template
  • The template is emailed to the user but it might be rendered in viewable html and not in source code so have students use the code that is generated on screen.
  • Copy the code into a Notepad and save it in a workspace in the Home folder
  • Change the code so that it looks like the desired product
  • For example, make a text box window that lets visitors 'sign' a guestbook they design for their page. Here is the part of the code that does this.
  • Another example: create a poll or survey that others can answer (and have responses emailed to any email address)
• Make a Riddle Game out of the Form code you find here / same thing but formatted in a table ...

For example:

Procedures for JavaScripts

Preparation and Tasks: Have students ...

• Try ONE of these effects (too many is too much, do you think?) .
  To see how to create the effect for your page, right click on the link and open it in a NEW window, then View / Source:
  • Make your browser window shake
  • Make your background change through a spectrum of colors
  • Make some text on your page change through a rainbow of colors
  • Generate code to make JavaScript popup window to your specifications or as in this example.
  • Drag a clock around on your web page
  • Set your background to an animated starscape
  • Make an announcement on your page with a textbox marquee.
    This one is actually a combination form and javascript
• 'Borrow' from free javascript libraries such as:
  • JavaScript Planet
  • JavaScript City
  • JavaScript search
  • The JavaScript Source
  • Find more by searching on free javascripts in Google

Homework:

Have students ...

• Put a Form effect on one of their Web pages (Riddle Game; or survey or guest sign-in box or some other effect from Response-o-Matic.
• Embed ONE 'borrowed' JavaScript effect in ONE of their Web pages.

Establishing a web presence

Refer to the following materials on

• Working with Blogs
• Setting up your own Web Site at a free web hosting service

Postponed indefinitely: Modules on Internet searches

• concordance with simple searches
• scavenger hunts
• webquests