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

As always, open an xterm and create a lab4 directory under your Labs directory. Also open emacs, and open this document in Netscape.

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, but you will also need to refer to Appendix J (p. 721-740) in the text.

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. For example, <title> is a tag that indicates that this section contains the title of the document. 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 indicates 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 Netscape. Change the size of the Netscape window (click and drag any corner) and see how the text is reformatted as the window changes. Note that the title appears on 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>

  <P>In this lab you will learn about <I>HTML</I>, which 
  is lots of fun
  to use.  In particular, you will learn how to use fonts,
  paragraphs, lists, links, and colors in a web page.  Now you
  can make your own web page for your friends to visit!</P>

  <P>Later in this lab you will do some fancier stuff with 
  applets and graphics and include an applet on your web page.
  Can't you just feel the job offers start rolling in?</P>  
  <U>Yippee!</U>
  </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 <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 Riddler, 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:

Your name should appear somewhere in the document.

When you are done, view your document from Netscape. 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. Read about lists in the text from the bottom of p. 728 through p. 731.

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/CPSC120B">my favorite course!</A>

Visit my favorite course!
Read more about links in the text from p. 731 to p. 734.

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

Applets and Graphics

Last week you wrote an applet that drew shapes of random sizes in random places on the page. This week you will learn more about how to draw various shapes and place them where you want.

The Java Coordinate System

The Java coordinate system is discussed on pages 48-49 of the text. Under this system, the upper left-hand corner of the window is the point (0,0). The X axis goes across the window, and the Y axis goes down the window. So the bigger the X value, the farther a point is to the right. The bigger the Y value, the farther it is down. There are no negative X or Y values in the Java coordinate system (actually, you can use negative values, but they won't show up!).

Exercise #4: Save files Coords.java and Coords.html to your lab4 directory. File Coords.java contains an applet that draws a rectangle whose upper lefthand corner is at 0,0. Compile it, then use the applet viewer (or Netscape, if you prefer) to view this applet. (Remember that you have to do it through the html file: appletviewer Coords.html).

Modify the applet so that instead of 0,0 you use the coordinates of the middle of the applet window. This applet is set up to be 600 pixels wide and 400 pixels high, so you can figure out where the middle is. Save, compile, and view your applet. Does the rectangle appear to be in the middle of the screen? Modify the coordinates so that it does appear to be in the middle.

Now add four more rectangles to the applet, one in each corner. Each rectangle should go exactly to the edges of its corner.

Make each rectangle be a different color. To do this, use the setColor method of the Graphics class to change the color (this is already done once). Do not change the background color once it has been set!! Doing so causes the screen to flicker between colors.

Save your applet as Coords.java in your lab4 directory.

More graphics

We have been drawing rectangles and ovals, but there's lots more that can be done with Java graphics. For starters, in addition to ovals and rectangles, you can draw strings, 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 112, and read the description on pages 111-114. Pay particular attention to how an arc is defined.

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. Be sure you understand how the various figures were drawn.

Exercise #5: Write an applet that draws a smiling face. Give the face eyes with pupils, ears, a nose, and a mouth. Use at least three different colors, and fill in some of the features. Name this file Face.java, and create a corresponding .html file. View your applet using the applet viewer.

Now add your face 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. The applet will appear wherever you insert the applet tag. Note that you will have to copy the Face.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.