Lab Exercises
Topics Lab
Exercises
HTML Introduction
to HTML
Applets Drawing
Shapes
Colors Drawing
a Face
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 this lab you will learn a little about HTML so that you can create
a web page containing headings, interesting fonts, lists, and links as well as
applets.
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 Introduction to HTML:
<title>Introduction
to HTML</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>Introduction to
HTML</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>
To see what this looks like, open the file in the web browser. Change
the size of the browser 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>Introduction to
HTML</TITLE>
</HEAD>
<BODY BGCOLOR="lightgreen">
<H1
align="center">Introduction to HTML</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
<B>own</B> 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>
Run the HTML document 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.
*** Instruct students how to create and/or access the public html directory on
the local system. ***
Open a new file called MyPage.html in a directory where it will be
accessible from the web. Write a simple web page about things that interest
you. Your page should contain at least the following:
·
A title (using the <TITLE> tag)
·
Two different levels of headings
·
Two paragraphs
·
Some bold, italic, or underlined text
Your name should appear somewhere in the document.
When you are done, view your document from the browser. Just type
in the URL, don't use File | Open Page.
------------------------------------------------------------------------
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. For
example, the code below creates the list shown; replacing the <OL> and
</OL> tags with <UL> and </UL> would produce the same list
with bullets instead of numbers.
Things I like:
<OL>
<LI>chocolate
<LI>rabbits
<LI>chocolate rabbits
</OL>
Things I like:
------------------------------------------------------------------------
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> (anchor) tag. When creating a link you have to specify
two things:
·
The URL of the document to go to when the link is clicked. This is
given as the HREF attribute of the A element.
·
How the link should be displayed (that is, what text or image to
click on to go to the linked document). This appears between the <A> and
</A> tags.
For example, the code below creates
the link shown, which goes to a page about the history of computing:
Learn more about <A
HREF="http://ei.cs.vt.edu/~history">the history of computing.</A>
Learn more about the
history of computing.
------------------------------------------------------------------------
Exercise #3: Add at
least one link that ties in to the material on your page.
------------------------------------------------------------------------
Drawing Shapes
The following is a simple applet that draws a blue rectangle on a
yellow background.
//
****************************************************************
// Shapes.java
//
// The program will
draw two filled rectangles and a
// filled oval.
//
****************************************************************
import javax.swing.JApplet;
import java.awt.*;
public class Shapes extends JApplet
{
public void paint (Graphics
page)
{
// Declare size constants
final int
MAX_SIZE = 300;
final int
PAGE_WIDTH = 600;
final int
PAGE_HEIGHT = 400;
// Declare variables
int x,
y; // x and y coordinates of upper
left-corner of each shape
int width,
height; // width and height of each shape
// Set the background color
setBackground
(Color.yellow);
// Set the color for the next shape to be drawn
page.setColor (Color.blue);
// Assign the corner point and width and height
x = 200;
y = 150;
width = 100;
height = 70;
// Draw the rectangle
page.fillRect(x, y, width, height);
}
}
Study the code, noting the following:
·
The program imports javax.swing.JApplet
because this is an applet, and it imports java.awt.*
because it uses graphics.
·
There is no main
method—instead there is a paint
method. The paint method is automatically invoked when an applet is displayed,
just as the main method is automatically invoked when an application is
executed.
·
Most of the methods that draw shapes (see the list in Figure 2.12)
require parameters that specify the upper left-hand corner of the shape (using
the coordinate system described in Section 2.9) and the width and height of the
shape. You can see this in the calls to fillRect, which draws a rectangle filled with the current
foreground color.
·
This applet will be drawn assuming the window for drawing (the
Graphics object - named page here) is
600 pixels wide and 400 pixels high. These numbers are defined in constants at
the beginning of the program. (They currently have no use but you will use them
later). The width and height of the applet are actually specified in the HTML
file that instructs the Web browser to run the applet (remember applets are
executed by Web browsers and Web browsers get their instructions from HTML
documents—note that the code executed by the browser is the bytecode for the program, the Shapes.class
file). The code in the HTML document is as follows:
<html>
<applet
code="Shapes.class" width=600
height=400>
</applet>
</html>
Save the files Shapes.java and Shapes.html
to your directory. Now do the following:
1. Compile Shapes.java,
but don't run it—this is an applet, so it is run through a browser or a special
program called the Applet Viewer.
2. Run the program through your browser. You
should see a blue rectangle on a yellow background.
3. Now run the program through the Applet
Viewer by typing the command
appletviewer Shapes.html
You should see a new window open
displaying the rectangle.
4. Now open the program in your text editor
and change the x and y variables both to 0. Save and recompile the program,
then view it in the Applet Viewer (this is generally less trouble when making
lots of changes than using the browser). What happened to the rectangle?
5. Now change the width to 200 and the height
to 300. Save, recompile and run to see how this affects the rectangle.
6. Change x to 400, y to 40, width to 50 and
height to 200. Test the program to see the effect.
7. Modify the program so that it draws four
rectangles in all, as follows:
·
One rectangle should be entirely contained in another rectangle.
·
One rectangle should overlap one of the first two but not be
entirely inside of it.
·
The fourth rectangle should not overlap any of the others.
8. One last touch to the program ... Change
the colors for at least three of the shapes so the background and each of the
three shapes are different colors (a list of colors is in Figure 2.10 of the
text). Also change two of the fillRect methods to fillOval so the final program draws two rectangles and two
ovals. Be sure that the overlap rules are still met.
Drawing a Face
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 a web page you created (you may have created
one in an earlier lab exercise). 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.