CIT CS Workshop: June 2001

Lab 5

Computer Science Department

Lab Assignment 5

The purpose of this assignment is to

review concepts from previous Labs
introduce you to HTML tables
introduce you to HTML frames
explore more JavaScript concepts

When you are happy with your personal web page,

let us add it to the class web page

Instructions

Printing out this page:
1. Remember to print out this Web page using lp -d flute
Looking at an HTML survey:
1. From Netscape, complete this survey
  if you have not already done so
  (The purpose of the survey will be explained next week)
Adding frames to a Web page:
1. Look at the index.html file
  for this workshop
  using View/PageSource
2. This contains a FRAMESET tag
  to create a page with two side-by-side frames
3. Try to make a page with frames
  and make a link from your Web page to it
  Remember to put new Web page files into public_html
  and to set the permissions to 644 using chmod
Coloring text and links:
1. Take look at the source code for the left frame
  Here colors are specified for the text and links
  in the BODY tag
2. This is also done in the Examples main page
3. See if you can change the colors of the links
  in one of your pages
Using different types of fonts:
1. If you are tired of the regular HTML fonts
  - Normal
  - Bold
  - Italics
  - Bold Italics
  - Typewriter
  - Bold Typewriter
  you should be pleased to know there are other fonts available
2. Try one of the following
  that can also be set in bold or italics:
  - <FONT FACE="helvetica"> for Helvetica
  - <FONT FACE="garamond"> for Garamond
  - <FONT FACE="palatino"> for Palatino
  - <FONT FACE="sans serif"> for sans serif
  - <FONT FACE="arial"> for Arial
  - <FONT FACE="timesroman"> for Times Roman
  - <FONT FACE="courier"> for Courier
  Not all browsers are able to represent some of these fonts
Considering Definition Lists:
1. Take another look at the source code for the left frame
  Also look at the source code for the Examples index
2. These contain a different type of list
  called a Definition List
3. A DL automatically indents DD items
  but has DT items come to the left margin
4. Several other workshop Web pages use this construct
5. If this would be useful in one of your pages,
  please go ahead and incorporate it
Getting more experience with tables:
1. Try running this example
  to change the background color of the page
2. Then study the source code for the example
  which contains a table of buttons for colors
3. Notice that the <TABLE> and </TABLE> tags
  enclose the table elements
4. The table contains eight rows
  Each row starts and ends with the <TR> and </TR> tags
5. Each item in a row starts and ends with the <TH> and </TH> tags
  where the TH stands for Table Heading
  These are centered and displayed with bold font
6. Another type of tag not used in this table are the <TD> tags
  where the TD stands for Table Data
7. Both the <TH> and <TD> tags
  can have a background color, BGCOLOR=...
  as do the elements of this table
8. The Temperature Conversion Example also contains a table
  as does the workshop home page
9. Is there a place in your pages for a table?
Learning more about JavaScript:
1. Look at the Examples index
  You should notice that a few more examples have been added
2. Try them out
  and then check the source code for each
  Try to understand what is happening
3. Be sure to ask, if you have questions
Using the Pico editor: (If you did not try this earlier)
1. Try editing your Poem or some other file in Pico
Using telnet: (If you did not try this earlier)
1. As a class exercise, bring up a regular window (dterm)
  Type telnet XXX.cs.colostate.edu
  where XXX is the name of the machine next to you in lab
2. Test this telnet window
  by using some Unix commands and the Pico editor
3. Then type logout to end your telnet session