In this lab, we'll work with the elements of HTML that will be most useful to us in this course, namely basic formatting, lists and tables. It may be helpful to have our lecture notes and the W3C school HTML manual available as you work through this material.

Downloading a Copy of an Existing Web Page

Start by grabbing a copy of my old homepage and storing it in a working directory on your local lab machine. You can do this by clicking mouse right on this link: Keith's old homepage, and selecting "save link target as" ("save target as" in IE). This will save the HTML source for the page in the location you specify.

Your first task is to get the page running normally on your local machine. This may not be as easy as it appears. Try loading the file you just downloaded by choosing File-OpenFile in Netscape (or File-Open-Browse in IE). The page may not look quite right - why is this? Figure it out and get the page to load properly. You will probably need to look at the HTML source code for the page by choosing View-PageSource (or View-Source on IE).

Microsoft Visual Studio

Because HTML pages are written entire in ASCII text, you can use any text editor to work with HTML pages. Common tools include MS Word, DreamWeaver, Xemacs, even Notepad (Microsoft's simplest text editor). In this class, we'll work with Microsoft Visual Studio.Net (VS.Net), Microsoft's latest and greatest Interface Development Environment (IDE).

Start VS.Net from the Windows Start-Programs menu and load keith.html. You'll see a design view of the page in the main editing window. You could edit the page in this mode, sometimes called WYSIWYG (What You See Is What You Get) mode, but for this class, we will need to work directly with the HTML source code itself. You can switch between design (i.e., WYSIWYG) mode and HTML mode using the tabs on the lower left of the workspace.

Modifying an Existing Page

Switch to HTML mode and familiarize yourselves with the HTML code. This page is similar to one we discussed in class. It is a (slightly modified) version of my old home page. We're looking at it rather than my current homepage because my current page uses cascading style sheets (CSS), which we won't be studying in this course (if you're interested in CSS, be sure to take IS 337).

The first thing to note about the page is the way in which I formatted the title, with the (very dated) photo, the Calvin seal image and the address information. I used a table to do all this. VS.Net automatically shows you the borders on the table in design view, though they don't appear in a standard browser. Look for the starting and ending table tags in the HTML source.

Modify the text on the page for some other person, I don't care whom, by doing the following:

• Get a proper image, change the address and email address, and remove the Calvin seal if appropriate. Experiment a bit here to get the look that you want. A note on the mailto feature - this allows you to include an email address directly in the page, which is convenient, but also exposes the email to web robots that may grab the address and add it to junk emailing lists. To avoid this problem, web designers either mutilate the address in some way (e.g., kvlinden<AT>calvin<dot>edu) or include a jpg or gif image of the address. The user of the web page then has to manually type the email address, but it won't generally be readable by a robot.
• Set the person's name in bold font rather than the normal font used here.
• Remove those silly red balls and replace them with an unordered HTML list. See the notes from class on how to do this.
• Also, change the four hyper links to things that are appropriate to your chosen homepage owner. Include at least on
• Remove the "last modified" information, that is text automatically set by Xemacs (the editor I tend to use for HTML editing).

If you have questions about how to do something, ask. Before moving on, figure out what the and tags do. They will be useful to you.

Modifying a Table

As a final lab exercise, grab the full Acme products web page and add a 4th column that describes each product. Add in a manner that is most appealing and readable to you, and include an appropriate description of the products. Try to use italics or bold somewhere in one of your descriptions, and choose the most appropriate value for the align attribute (left, center or right).

Feel free to add rows for any products that you think should be in the catalog...

Checking In

To conclude, each person will show the full class what he/she created. Also, use KV to submit your HTML page(s) and be sure to save them for project #7.

Back to the top