HTML is a formatting rather than a programming language. Through the use of tags <...> and </...> you can create formatted text for the web page. The general structure is as follows:
<HTML>
<HEAD>
<TITLE>
This is my title
</TITLE>
</HEAD>
<BODY>
The web page material goes here.
</BODY>
</HTML>
You can find a fairly complete list of these codes (without any explanation of what they do) on the View window of the UltraEdit editor (CTL-F8)
Finally, we created a couple of playful web pages in class. Feel free to make changes and see what happens.
<!-- File: fun.html
-->
<html>
<head>
<title> This is some fun stuff! </title>
</head>
<body>
<p align="center"><img src="bill.gif" width="150"
height="200"> </p>
<h1>WOW!</h1>
<h2>wow...</h2>
<h6>wow.......</h6>
<a href="first.html">
<p>Another Page</a> </p>
<p>Now is the <b>time</b> for all <i>good</i> men to come to
the aid of their country. </p>
</body>
</html>
<!-- File: first.html
-->
<HTML>
<HEAD>
<TITLE>Intro to HTML, Part I</TITLE>
</HEAD>
<BODY>
<!--This is a comment-->
<H1>This is a test of header 1</H1>
<H2>This is a test of header 2</H2>
<H3>This is a test of header 3</H3>
<H4>This is a test of header 4</H4>
<H5>This is a test of header 5</H5>
<H6>This is a test of header 6</H6>
I wonder what will happen if I just start typing
and do carriage returns and so forth.
.....
<P>This will start a paragraph I think.
<!-- NOTE: You don't need </P> at the end -->
<P>This too?
<P>You don't need to close these do you?
<BR> <!--
This stands for break (newline or end of line)
-->
What will this do???
<BR>
This just gives a carriage return
<PRE> <!--
This stands for pre-formatted
-->
<!-- Whatever you put here will be translated to HTML, including carriage returns
-->
</PRE>
What happened?
<EM>Try this!!!!</EM> <!--
<I>Try this!!!!</I> would probably
do the same thing -->
<STRONG>How about this?</STRONG>
<!-- <B>How about this?</B>
would
probably do the same thing -->
</BODY>
<HTML>
There is also an online HTML tutorial/ that you may find entertaining and informative.
Next, we re-introduced the "crayons" of Java, the Graphics guys. The underlying important idea is that a coordinate system is imposed on the applet. The origin (point (0,0)) is located at the top left hand corner. The x-axis goes to the right and the y-axis goes down. The units of measure on this grid is the pixel. So you can imagine a few hundred pixels (or units) along the x-axis and a few hundred pixels (or units) down the y-axis. Armed with this important piece of information, we'll be able to draw messages (Strings), boxes, ovals, and lines. We can make them appear anywhere in the applet and we can even fill them in. Furthermore, we can change the color of the graphic figures we draw. All of this is accomplished by creating a Graphics guy and telling him what to do. Let's look at a couple of examples.
Exercise 1. Write an applet that displays the message Hello World!!!!!!
//File: HelloApplet.java
//The following packages are necessary for any applet
import java.applet.*;
import java.awt.*;
public class HelloApplet extends Applet
{
//The paint() method is called by the browser whenever the applet must
be redrawn
public void paint (Graphics g)
{
Dimension d = new Dimension();
d=getSize(); //the size of
the applet that is....
int w = d.width;
int h = d.height;
String message = new String();
message = "Hello World!!!!!!";
g.drawString (message, w/2, h/2);
//NOTE: Using the coordinates w/2 and h/2
allows
// us to center the message.
}
}
The output applet looks like:
Note that maximizing the applet does not affect the centering of the letter "H" in "Hello World", accomplished by using the coordinates (w/2, h/w).
The size of the applet was determined by my html file
<!-- File: HelloWorld.html -->
<html>
<head>
<title>Hello World Applet</title>
</head>
<body>
<p>This is a test of my first applet. I hope it works.
<applet code=HelloApplet.class width=350 height=150></applet>
</body>
</html>
The prescription "WIDTH=350 HEIGHT=150" determines that the applet will be 350 pixels wide by 150 pixels high. Note also that if the applet is maximized, the message "Hello World!!!!!!" is centered.
Exercise 2. Write an applet that incorporates several graphic figures.
//File: Play.java
import java.applet.*;
import java.awt.*;
public class Play extends Applet
{
//The paint() method is called by the browser whenever the applet must
be redrawn
public void paint (Graphics g)
{
//In the following comments, I'll use the
convention that
//x1, y1, x2, y2 are the x and y coordinates of
//points 1 and 2 respectively
g.setColor (Color.blue);
g.drawLine (30, 60, 60, 30);
//(x1, y1, x2, y2)
//In the following, all of the figures are
based on a
//rectangle defined by the x and y coordinates
of the
//top left corner and the width and height of
the rectangle
g.drawRect (90, 30, 40, 30);
//(x, y, width, height)
g.fillRect (150, 30, 50, 30);
//(x, y, width, height)
g.drawOval (220, 30, 70, 30);
//(x, y, width, height)
//NOTE: You can create your own colors as
follows:
Color yourColor = new Color (200, 100, 250);
g.setColor (yourColor);
//g.setColor (Color.red);
g.fillOval (30, 80, 70, 30);
//(x, y, width, height)
g.fillArc (110, 80, 40, 30, 45, 315);
//(x, y, width, height,
starting angle, sweep angle)
g.drawRoundRect(170, 80, 60, 30, 30, 10);
//(x, y, width, height,
xpixels, ypixels)
//where xpixels and
ypixels are the number
//of pixels in from the
corners where rounding
//begins to occur
g.fillRoundRect (250, 80, 50, 30, 20, 20);
//(x, y, width, height,
xpixels, ypixels)
}
}
Incidentally, if you'd like a painless way to choose those mystifying 3 numbers (0 to 255) required to define a new color. It goes like this:
Click on the Start button.
Move the mouse to Programs -> Accessories -> paint and click on paint
Go to Options -> Edit Colors and click
Press the Define Custom Colors>> bar
Now just find your color in the rainbow display and click
You'll notice there is now star in the display where you clicked. Also, the bar on the right hand side of the display has a continuous variation in the spectrum around your choice of colors. You can now move the pointer on the lower right hand corner of the display until you find the precise shade you desire. You'll notice that there are now 3 values in the Red, Green, and Blue boxes respectively. Just copy those into your java program and you've got it!
Color myColor = new Color (129, 223, 123); //will give my choice of color
It's nice to be able to connect the Windows environment to our fun with Java activities!
Lab Exercise. Write an applet that draws the International Olympic Committee logo:
If you have trouble with this, feel free to examine my simple-minded solution, Olympic.java
