CSC 111: Introduction to Computer Science

Lab 9: More Exciting HTML

Thursday, April 7, 2011

NOTE that all the elements in the lab today will be part of the homework - you do not need to hand this work in at the end of lab, of course, but you will need to submit it along with the rest of what you add for the homework this week.

Part 1: You and the World! (...wide web)

The first thing for today is to upload your HW8 (.html) file to a directory that the whole world can access - you will be part of the world wide web! We have some special accounts set up for us on the Computer Science servers that will allow you to make your web pages accessible by all. The first thing will be to practice logging into these accounts and transferring files from your private drives and folders to the new "public_html" folder. To do this you need

To know which account to use for uploading your file
How to log onto that account
How to check that everything is as you expect

(1) Which Account

The account usernames and passwords will be provided in lab this week. Each lab group will share an account. Therefore you need to be careful about the following:

Do not share the username or password with ANYONE outside of your lab group. Do not write the password anywhere that could be connected to the account and username.
Clearly name all your own files with your name, or first-initial-last-name, or initials, etc -- Something that will ensure that as you upload a file you do not clobber someone else's file.
Keep the space NEAT - delete files you no longer need, being very careful not to delete someone else's file.
Maintain a copy of your own files very securely on your own drive, H: drive, laptop, etc. There are bound to be mistakes, clobbered, deleted and otherwise missing files. It will be your responsibility to make sure YOU have a backup.

(2) Logging-in, Uploading and Viewing Files

A very nice overview of how to upload files has been created by Prof. Nick Howe for his CSC102 class. Proceed to this tutorial now, upload your HW8 html file, and then using a new browser window, navigate to your webpage through the web (rather than by reading the file off your local machine as we did last week).

Note that the "path" will include a "~" before your shared username. Look at the "~" before "orourke" on the class webpage, or the "~" before "jcardell" on this page. This is part of the Unix naming convention. You will all have the "~" before your shared username (given out in lab as stated above). Then, following the ~username, there will be a "/" followed by your html filename (including the .html extension).

(3) Checking Everything is A-OK

For the homework, you MUST view what you have posted such that when others view it from any computer, we will see what you expect us to see. This means you need to upload your file and then check it via the web.

Part 2: Cleaning up your files - earning full credit in the homework!

For HW 9, you will be continuing conceptually from HW 8. However, this week, I will specifically be adding points (or taking them away, depending upon whether you are glass half-full or glass half-empty person), for neatness. A neat and clear program results from neat and clear thinking. I will be attaching points to the appearance of both your Python program and the HTML file created by your Python program. Use Comments in Both! (This means you need to have your Python program write appropriate comments into your HTML file.) Also, use white space (blank lines) and newlines as needed, to make both files a pleasure to read. And of course, you want the web page that is viewed through the browser also to be delightful. smiley face

With all this said, I suggest taking time, sooner rather than later, to clean up your HW8 files (the Python code itself and also the html file it writes) as needed, so you can use it to build upon for HW9. For HW8 it was OK to have the bulk of what you were writing be in one grand writeHTML() function. For this week I do want you to separate each different concept, item or section into a different function.

Thus, if your image and hypertext link are connected conceptually (e.g., a figure of Kermit and a link to Kermit), then it is fine to have them in one function. However, it will NOT be ok to also have the list(s) you are now adding also in that same function even if all are about Kermit. Divide and conquer - keep functions short, clear and to the point (to one point).

...And you might also want to take the time now to make everything visually neat and add comments to clarify what you are doing.

Part 3: Using Lists in HTML

For this part, add one or more lists to your HTML page. There is a good introduction here for ordered lists, unordered lists, definition lists, and mixing and matching them as nested lists. There are MANY such overviews out there - find one that works for you if you do not like the one I found.

You can put whatever content you want into your list(s), alone, nested, or otherwise. You MUST USE A LOOP in your Python code to enter the list items (the "li" tags) into the string to be written to your html file. Depending upon what you want to put in your list, you would do this different ways. For one example, if you were to list all the zodiac signs on your webpage, then you could create a Python list with those signs (as strings) in the list, and then loop through your Python list as you create each HTML list item.

Part 4: Retrieving your horoscope

Building upon what we did in class, retrieve a horoscope and today's date from the astrology URL, and put this text, nicely formatted, into your growing webpage. For the formatting YOU MUST USE the string formatting as discussed at the end of chapter 4, and as used in this example, and NOT string concatenation. Also this code must be in its own TWO FUNCTIONS. Use one function to retrieve the information from the url, and a second function to write the date and the horoscope to your html file.

Part 5: Homework!

Keeping all this as part of your homework, you are now ready to move on to that final task...