Lab 10: Due Tuesday, April 25, 2000

You may not have enough time during the organized lab time to finish this exercise. You will need to go to the U.C. user room at another time to finish it.

Goal:

Explore the World Wide Web and create a World Wide Home Page on Sage and have fun doing it.

It is wise to get started on this assignment early and allow some extra time to complete it in case of difficulties.

Pre-lab Assignment

• Reading: Go over lecture note handouts on HTML. Read this assignment very carefully. As you do it, follow the directions very carefully.
• Design: Decide what you would like to have in your homepage.
• Bring to lab: Two disks (one for backups!), this assignment, and html handouts.

Notes

1. You will need an account on Sage, a computer with WWW browser such as Netscape, an internet connection, and an FTP program to complete this assignment. Some editing of a home page can be done on any computer with Notepad.
2. You will need at least 50 KBytes or so of disk space on your Sage account, more if you will be using images. If you have a lot of e-mail saved or you otherwise use your account a lot, you may be running short on disk space. Make sure you clear some room for this assignment. You may need to delete old e-mail. You can check space left on your account by selecting "E-mail Account Disk Usage" on the "On-line services" page on the PLU web site or the option "[U] DISKUSE - Your Disk Usage" on the Sage menu.
3. Be sure that you save your files on your own disk, using the A: drive.

Instructions

Part I: Search on the World Wide Web

1. Start Netscape or other browser.
2. Start a search. Some browsers have a button labeled "Search". If not, you will need to find a menu item such as "Edit|Search Internet" or "Directory | Internet Search".
3. One of the search engines may be picked randomly. If desired, you can pick a different one.
4. Type the words you would like to search for in the box and the click the "Search" (or similar button) near the box.
5. The search engine will normally find many WEB pages containing the search words. Click on one that seems of interest. Use the "Back" button to return to the list of WEB pages. At the end of the first list, you may find a "Next" or similar button that you can use to see another list of possible WEB pages.
6. Note: you may find that the original choice of search words led to a overly long list of items. Many search engines provide ways to refine the search. Unfortunately, these techniques vary. You may find some help is available for the search engine being used.
7. In your lab report, record the search words and the name of the search engine you are using.
8. Record the URL (as found in the Netsite or Location box) for at least 2 web sites related to your topic of interest. Write a sentence describing the material at that site.

Part II: Create a home page

Part A. Create a public_html directory on Sage

Follow the directions in step 1 of the "Creating a home page for Sage" section at the end of the "Introduction to HTML" handout.

Part B. Create the HTML document:

Summary: You will use Notepad to create a text file on your PC disk. This text file will be an HTML document, which uses the HTML tags (commands) we discussed in lecture and in the handout.

1. Start Notepad.
2. Type in the template illustrated shown at beginning of the handout. Be sure you begin and end the HTML, HEAD, and BODY sections. You can change the title and text in the body as desired.
3. Now you are ready to customize your home page! What should be in your HTML document? You will be creating a personal home page about you or about your interests. List your interests. Write about yourself. List some links to favorite web pages. Include some images which tell more about you or your interests. A great way to get more examples of HTML files is to choose Page Source or Document Source from the View menu in Netscape. Look at the CSCI 115 class home page, PLU's home page, and other student home pages.
4. Save your work often. Be sure to save your file with the name home.html (Sage is case sensitive). (This assumes you are using Windows 95, 98, or NT. Ask for help if you are using an older version of Windows.)
5. When you are ready to test your file in Netscape, save your file as just explained and go to Part C. It will be easier of you don't quit Notepad, but rather switch between the Notepad and Netscape applications, keeping both of them open for a while. This will allow you to get into Notepad again quickly to fix your mistakes or make improvements. Hint: Use the buttons on the task bar or hold down the ALT key and press TAB. These are the quickest ways to switch between open applications.

• A note on privacy: Normally a personal home page contains personal information. However, if you have privacy concerns about a home page that is accessible to the world, here are some suggestions:
1. Don't include any personal information such as your name, pictures, address, phone, etc. The content of your home page is entirely up to you. You can do something on Dr. Seuss or China or the Marching Band--whatever you feel like. Images you include can be of anything--it doesn't have to be a picture of you!
2. After you have received you home page assignment back, you can remove your home page by selecting the "[W] More Menu Options: >>>>> " and then "[K] UNWEBPAGE Remove Your Personal Web Page" options from Sage's menu.
• Here are some requirements for your home page:
1. Your page should have some kind of theme.
2. You must use reasonably good style and organization.
3. You must use proper spelling and grammar.
4. Your home page must be readable! (E.g. do not use dark colored text on a dark background).
5. You must write the HTML file yourself. Do not use a special "HTML Editor" to create your home page.
6. You must have a title on your home page. Use one of the header types (<h1>, <h2>, etc.) to format it.
7. You must include at least three links to other web pages including a link to the PLU home page (http://www.plu.edu/)
8. You must include at least one ordered or unordered list.
9. You must use at least three images on your home page. These could include bullets, buttons, pictures, etc.
10. You must include text of different sizes, formats, and colors. Be creative!
11. Include two other HTML significant features such as specifying colors or background in the body, a mailto address, a second type of list, or a table.
• Here are some ideas for images you can include on your home page:
1. Use an inline image. Normally, it is best to have a local copy of the image, rather than a link to someone else's copy. You have two choices here:
1. You can use a scanner to scan in a photo or picture that you have on paper. (The library has a scanner you can use.) You want to save the image with a .gif or .jpg extension.
2. You can copy an image that you like from the web. To do this, right click the image in Netscape, and choose the "Save image as..." menu option. Put it on your floppy. It will probably be a .gif file or .jpg file. Either is fine. Keep the same extension on the file. Be careful to observe copyrights, if any.
2. Use fancy backgrounds, color text, color bullets, lines etc. Make sure your page is readable on-line and on the printout (e.g., don't use black text on a dark background). Ask about special considerations if you want to use white text. One place to find some sample backgrounds and images is www://www.cs.plu.edu/pub/faculty/csce220/html/pluce.html which originally was put together by PLUCE (PLU Computer Enthusiasts), a student organization which is no longer active.

---

Part C. Testing your home page:

You will probably need to correct some errors or want to make some improvements in your page. So test your home page in Netscape. As many times as needed, fix your errors in Notepad, save the file, and then view the updated web page in Netscape.

See step 3 near the end of the handout. See what comes up! Don't be discouraged by errors. Try to figure out what went wrong. Take a look at your source. (You can see the source of this or any other HTML document in Netscape by choosing "Page Source" from the "View" menu). See step 4 in the handout to see how to correct errors while switching back and forth between Netscape and Notepad.

---

Part D. Transfer your file to Sage:

Summary: Your home page is (almost) done. When you are happy with how your home page looks in Netscape, you are ready to install it on Sage, so that everyone in the world (or at least everyone with internet access) can access it! In this section, you will use the WS_FTP (or WinFTP) program to transfer your home page from your floppy disk to your Sage account. If you have trouble using this program, you can ask your instructor. Here's the procedure you will use:

1. You will find the FTP program on the desk top in the UC.
2. You need to connect to your Sage account from the FTP program. Do this by clicking the "Connect" button (if needed) and then, under "Profile Name", choose Sage from the list. You need to type your login name in the User ID box and your password in the Password box (or type your password when requested).
3. Next, you want to transfer your home.html file to your Sage account. Also transfer any additional .htm, .html, .gif, or jpg files you are using. Do the following:
1. If needed, scroll down and double click on [-A-] in the left panel so you can see the contents of your floppy disk (A drive). You should see the contents of your Sage account on the right, if you connected properly in step 2.
2. Double-click on the public_html directory on the right (on Sage). You may have to scroll down the files on your Sage account to find this directory. This directory should exist since the webpage command you ran in part A created it for you.
3. Choose the ASCII option at the bottom of the FTP program window when transferring .html files (NOT binary). If you use binary, you may eventually run into serious trouble and have to transfer the file(s) again.
4. For images--.jpg or .gif files--you MUST use the binary option.
5. Select the home.html file on the left. Then, click the right arrow button >, and the FTP program will copy the file from your computer into your public_html directory shown on the right. The file name should almost immediately appear in the right window.
6. Transfer any image or other files that might be needed.

---

Part E.  To Finish Up:

Summary: Make sure it all looks good on Sage and print everything out.

1. Go into Netscape and try loading the file by typing "http://www.plu.edu/~youraccount/" in the "Netsite:" or "Location" box: substituting your account name for "youraccount". The tilde (~) must precede your account name. Make sure all the links work properly, and that any images are properly displayed. If there are any problems with your home page, double check to make sure all files have been copied correctly to the "public_html" directory on Sage. To improve your page or correct errors you need to go all the way back to Notepad and make the changes. Then repeat Parts C and D.
2. Use the File | Print to print a paper copy of your home page after you are satisfied that is OK.
3. Print your html-source file from Notepad.
4. Write down the complete URL of your page (It should have the format: http://www.plu.edu/~youraccount/home.html)
5. It may take up to a day before your home page will appear in PLU's index of student home pages.
6. Close all the open programs running on your computer.

---

To turn in:

1. Your search words, search engine, and 2 URL's together with a short description of each for Part I (steps 7 and 8).
2. Printout of HTML source file (from Notepad). Important: Mark the places where you satified requirements f. through k. to make sure the paper grader gives you credit for them.
3. Complete http address (URL) of your home page.
4. A printed copy of your home page on Sage as printed by Netscape.

---

Earlier versions of this assignment were written and edited by Michelle Folsom, James Brink, Debbie Berman, and Laurie Murphy. Their efforts are greatly appreciated.

Lab10.html,4/10/00