TASKS

PRE-LAB TASK

Apply for a web account. You should have your web account ready by now.

 

Task 1 Create Web Pages with HTML CODE

1. Create 3 folders

   Folder #1: name it "lab3_HTML"
   Folder #2: name it "images". This folder should be in the folder "lab3_HTML". All the images should be placed in thsi folder.
   Folder #3: name it "project". This folder should also be in the folder "lab3_HTML". files related to project are saved in this folder. 

2. Create 3 pages with the following content:

   Page 1: Home Page (file name: "index.htm"), and save it in the folder "lab3_HTML". Click here to see the sample page.
   Page 2: IST Project Page (file name "project.htm"), and save it in the folder "lab3_HTML". Click here to see the sample page.
   Page 3: Useful Links (file name "links.htm"), and save it in the folder "lab3_HTML". Click here to see the sample page.
   Page 4 (Optional): Project #2 page, and save it in the folder named "project".

3. Link the pages to each other (see specific criteria below).
4. Criteria:

   The "index.htm" page should contain:

   • a title with Heading 1 or Heading 2
     a table, used in an appropriate way to describe yourself
   • at least an image
   • a footer menu bar linked to the other pages
   • an email link and the author's name who created the web page.
   • All the links should work.

   The "project.htm" page should contain:

   • a layout by using the table
   • background image on the bottom left cell
   • an IST banner or group banner
   • menu bar on the left (or appropriate position) for the project
   • a footer menu bar linked to the other pages, and consistently placed at the bottom of the page
   • The font color should be appropriate to show up if you use a dark background.
   • All the links should work.

   The "links.htm" page should contain:

   • a collection of external links (at least 3 links), with at least one link targeted "_blank"
   • background image
   • a horizontal bar
   • a footer menu bar linked to the other pages, and consistently placed at the bottom of the page
   • The font color should be appropriate to show up if you use a dark background.
   • All the links should work.

| Top |

Task 2: File Transfer Protocal (FTP)

• The following page will guide you to transfer your files to your personal web space. However, you need to have your personal web account.  Managing your web space and FTP
• Files not uploaded to your personal web site will not be graded.

| Top |

Due Date: Task #1 & #2 are both due by 11:59 pm Friday (Jan. 26). If you need help, please come and see me during my office hours 12-2:00 pm on Friday, in 509 B Rider. You should send me your URL via the email at ge@ist.psu.edu. If you need further extension, please contact the instructor before the deadline and explain why you need it.

OBJECTIVES

 After completing this lab, you will be able to:

• To develop a personal web site by writing HTML code and using Notepad or Programmer's File Editor
• To publish a personal web page on the web through FTP

| Top |

SKILLS

• To write basic HTML code (head, tittle, body, headings, paragraphs, etc.)
• To insert an image
• To copy, save, insert an images
• To make lists (bulleted, numbered, nested, and definition)
• To make linking (absolute and relative paths)
• To make a table
• To add background color or background image
• To use font face; type; or size; color
• To transfer files through FTP

| Top |

RESOURCES

• Castro, E. HTML 4 for the World Wide Web: Visual Quickstart Guide. Berkeley, CA: Peachpit Press. (Available from the bookstore)
• Introduction to HTML 4.0
• NCSA -- A Beginner's Guide to HTML Home Page
• HTML Goodies
• Color Names and Codes
• Background Colors
• Free Graphics
• Free Graphics Resources
• Penn State Free Images
• Managing Your Webspace -- Accounts and FTP

| Top |

EVALUATION

This lab is worth 1 point. It will be assessed based on the following components:

1. HTML pages created with coding and they show up in the browser
2. use of image
3. use of table for page organization
4. use of text color and font
5. links (internal and external)
6. links color
7. background color and image
8. menu bar
9. use of folders to organize files
10. FTP

 | Top |

LAB GRADE. Lab 3 grade will be posted here by Wednesday night (February 1st) next week. Resubmit deadline is Februray 9th, 12 am.

| Top |