Lab 4 In-Class: PuTTY, HTML, Applets, and Graphics

STOP!!! Today things will start differently! Several students have expressed interest in learning how to access the Linux server and work on their programs from computers other than those in lab. The simplest way that can be done is to use a program that lets you remotely connect to a computer on the Internet using the SSH (Secure Shell) protocol. One such program is called PuTTY. So, the first thing we will do in today's lab is learn how to connect to cs through PuTTY and how to use emacs in PuTTY (your mouse will not work so you must use key strokes for all commands). So, to get started do the following:

You are now in an xterm window and can issue shell commands. So, as usual, create a lab4 directory under your labs subdirectory of cs120. Change into that directory. We will practice using emacs by adding some formatting (from the NumberFormat and DecimalFormat classes - Section 3.6, pages 130 - 134 in the text) to a program.

Formatting Output

The file Deli.java contains a program that reads in the price per pound of a deli item and the weight (in ounces) that a customer plans to purchase. The program then computes and prints the number of pounds and the total price for the item. You will add code to format the output. Do the following:

Introduction to HTML

HTML is the HyperText Markup Language. It is used to describe how text, images, and multimedia are displayed by Web browsers. In the last lab you used an HTML file to display your applets. In this lab you will learn more about HTML so that you can create a web page containing headings, interesting fonts, lists, and links as well as applets. This handout provides an introduction to HTML.

HTML uses tags to describe the layout of a document; the browser then uses these tags to figure out how to display the document. Tags are enclosed in angle brackets and are not case sensitive. For example, <title> is a tag that indicates that this section contains the title of the document, and could also be written <TITLE> or <Title>. Many tags, including <title>, have corresponding end tags that indicate where the section ends. The end tags look just like the start tags except that they start with the character /, e.g., </title>. So the following text means that the title of the document is CPSC 120 Lab 4:

<title>CPSC 120 Lab 4</title>
There are a few tags that almost every document will have: <html>, <head>, <title>, and <body>. Here is an example of a simple HTML document:
<html>
  <head>
    <title>CPSC 120 Lab 4</title>
  </head>

  <body>
  In this lab you will learn about HTML, which is lots of fun
  to use.  In particular, you will learn how to use fonts,
  paragraphs, lists, links and applets in a web page.  Now you
  can make your own web page for your friends to visit!
  </body>
</html>
Click here to see what this looks like in Firefox. Change the size of the Firefox window (click and drag any corner) and see how the text is reformatted as the window changes. Note that the title appears on the title bar of the window, not as part of the document.

The head of a document (everything between <head> and </head>) contains the introduction to the document. The title goes in the head, but for now we won't use the head for anything else. The body of a document (everything between <body> and </body>) contains everything that will be displayed as part of the document. Both the head and the body are enclosed by the HTML tags, which begin and end the document.

This document contains only plain text, but an HTML document can have much more structure: headings, paragraphs, lists, bold and italic text, images, links, tables, and so on. Here is a document containing a heading, two paragraphs, and some fancy fonts:

<html>
  <head>
    <title>CPSC 120 Lab 4</title>
  </head>

  <body bgcolor="lightgreen">
  <h1 align="center">Lab 4 In-Class</h1>

  There's lots you can do with HTML.  You can make the page a pretty
  color, <u>underline</u> text,
  or put it in <i>italics</i> or <b>bold</b>.  You can also 
  make lists, links, and tables, but we'll get to those later.

  <p>When you go on to a new topic, you can start a new paragraph.  
  You don't
  have to worry about indenting or otherwise formatting the paragraph -- the
  browser will decide that for you.  Usually it leaves a blank line.
  If you just want to go to a new line, without
  any vertical space, you <br> can <br>do <br> that <br> too. 
  </body>
  </html>
Click here to see what this looks like in the browser.

In this document the <h1> tag creates a level 1 heading. This is the biggest heading; it might be used at the beginning of the document or the start of a new chapter. Level 2 through level 6 headings are also available with the <h2> through <h6> tags.

The <p> tag creates a new paragraph. Most browsers leave a blank line between paragraphs. The <br> tag just goes to the next line, without leaving a blank line. The <b> tag creates bold text, the <i> tag creates italic text, and the <u> tag creates underlined text. Note that each of these tags is closed with the corresponding end tag. The bgcolor attribute on the body tag sets the background color.

Note that line breaks and blank lines in the HTML document do not matter -- the browser will format paragraphs to fit the window. If it weren't for the <P> tag, the blank line between the paragraphs in this document would not show up in the displayed document.


Exercise #1: For a file to be visible on the Web, it must be where the web server knows how to find it. The web server that runs on cs.roanoke.edu is set up to look in the public_html directory under each user's home directory on the Linux server, so you need to create this directory as follows: Now if you save a .html file in your public_html directory, you can view it from a web browser anywhere. If your user name is astudent and the file name is Test.html, the URL for your page is
    http://cs.roanoke.edu/~astudent/Test.html
Now on to the exercise!

In Emacs, open a new file called MyPage.html in your public_html directory. Write a simple web page about things that interest you. Your page should contain at least the following:

Please Note! We understand how excited you are to be creating a web page. While we encourage you to embellish this document with your personal expression and creativity, for now we are more interested in the learning the mechanics of HTML. We recommend that you use the lab time wisely and keep your page simple for now. You can always make changes to this page later in the semester (or over the next few years if you decide to major!)

When you are done, view your document from Firefox. Just type in the URL, don't use File | Open Page.


 

More HTML

Lists We often want to add a list to a document. HTML provides two kinds of lists, ordered (e.g., 1, 2, 3) and unordered (e.g., bulleted). A list is introduced with the <ol> or <ul> tag, depending on whether it is ordered or unordered. Each list item is introduced with a <LI> tag and ended with the </LI> tag. The entire list is then ended with </ol> or </ul>, as appropriate. The following is an ordered list of instructions for creating a list:

    <ol>
      <li>Type the tag <ol> (if you want an ordered list) or
           <ul> (if you want an unordered list)
      <li>For each item in your list, type the <li> tag followed
           by the text you want in the list.
      <li>To end the list type the tag </ol> or </ul> 
           (depending on the list type - match the beginning tag)
    </ol>
Click here to see what this looks like in the browser.


Exercise #2: Add a list, either ordered or unordered, of at least three elements to your document.

Links Links connect one document to another. Links are created in HTML with the <a> tag. When creating a link you have to specify two things:

For example, the code below creates the link shown, which goes to the CPSC 120 home page:
Visit <a HREF="http://cs.roanoke.edu/Fall2005/CPSC120A">my favorite course!</a>

Visit my favorite course!


Exercise #3: Add at least one link that ties in to the material on your page. Don't link to the course home page!

Tables Tables let you align elements in rows and columns; they can be used in the traditional way to display data, or simply to format page elements. There are three important tags for an HTML table:

For example, the code below creates the table shown:
<table border=1>
<tr>
<td>Name</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>

<tr>
<td>Mickey Mouse</td>
<td>78</td>
<td>92</td>
</tr>

<tr>
<td>Donald Duck</td>
<td>83</td>
<td>87</td>
</tr>
</table>

Name Test 1 Test 2
Mickey Mouse 78 92
Donald Duck 83 87

A few things to note:


Exercise #4: Use a table to add your class schedule to your page. Label the columns with days of the week (M-F), and the rows with "morning" and "afternoon." (Since MWF and TTh classes meet at different times, it's more complicated if you try to use actual times.) In each cell put the classes you have on that day and time, one per line. You can use an unordered list or the <br> tag to get them on separate lines.

Applets and Graphics

Last week you wrote an applet that drew a dart board and some randomly placed darts on a Graphics page; you also drew a rectangle with your name in it at the bottom of the window. This week you will get more practice drawing various shapes and placing them where you want.

Last week we drew rectangles, ovals,and strings but there's lots more that can be done with Java graphics. For starters, you can draw lines and arcs. All of these shapes can be drawn in outline with the "draw" methods (drawRect, drawArc, etc), or drawn in filled in form with the "fill" methods (fillRect, fillArc, etc).

Refer to the list of graphics method on page 100, and read the description on pages 99-102. Pay particular attention to how an arc is defined (note the diagram on page 102).

Now save files MoreShapes.java and MoreShapes.html to your lab4 directory. Look at the .java file, then compile it and view it using the appletviewer (the command is appletviewer MoreShapes.html). (Note: Sometimes the background color doesn't initially show up - use the Applet | Restart option on the menu to get the color.) To be sure you understand the arc methods open MoreShapes.java in emacs and do the following:


Exercise #5: Write an applet that draws a frog. Your frog should have wide ovals for the head and body, semi-circles for the eyes (sort of on top of the head). The eyes should have pupils in them (circles or semi-circles). The frog should also have a tongue (an arc). Your applet should have at least three colors in it (at a minimum the frog's body, pupils and tongue, and the background should all be different colors). Name this file Frog.java, and create a corresponding .html file (just copy MoreShapes.html then make the appropriate change). View your applet using the applet viewer.

Now add your frog to the web page you created earlier in the lab. You will do this using the <APPLET> tag that is in the .html file you are using with the applet viewer -- you can just copy it out of that file and paste it into your other file (choose a size for the applet that makes sense). The applet will appear wherever you insert the applet tag. Note that you will have to copy the Frog.class file to your public_html directory for the web server to find it. Of course, the web page that you created earlier should already be in that directory.


What to turn in

You don't need to e-mail the .html file in your public_html directory -- we can load it from there (if you have everything in the correct place with the correct name!).