AnimationWorld -- HTML pages

A HTML page is needed for an applet to be displayed by AppletViewer or a web browser. A HTML page is a text file which includes special tags which are ways of marking up the text (like circling misspelled words with a red pen). HTML files must be named with either a .htm or .html ending. The basic template for a HTML page which includes a Java applet is shown below.


<HTML>
<HEAD><TITLE>Web Page Title (Optional)</TITLE></HEAD>
<BODY>
<APPLET CODE="JavaAppletClassName.class"
        WIDTH=600 HEIGHT=400></APPLET>
</BODY>
</HTML>

The items in blue are required. The items in red must be substituted with your values. The items in black are optional.

Examples

The HTML code for all the examples in this documentation is shown below. Clicking on the name of the file will open the file in a new web browser window so you can compare the HTML with what the web page looks like. The examples start from the minimum template and grow in complexity. You do not need to learn HTML for this class. The minimum template is all that is needed to put applets on web pages. However, if you are interested in learning HTML, feel free to ask an instructor for tips and good web page tutorials.

RightBuggle.html
The minimum template.

<HTML>
<BODY>
<APPLET CODE="BuggleAnimationPlayer1.class" WIDTH=450 HEIGHT=100></APPLET>
</BODY>
</HTML>

RightLeftBuggle.html
Including a title for the page. Shows up in a web browser title bar.

<HTML>
<HEAD><TITLE>RightLeftBuggle Animation</TITLE></HEAD>
<BODY>
<APPLET CODE="BuggleAnimationPlayer2.class" WIDTH=450 HEIGHT=200></APPLET>
</BODY>
</HTML>

SpyBuggle.html
Including a headline on the web page, changing the background color of the web page, and centering the contents in the web page.

<HTML>
<HEAD><TITLE>SpyBuggle Animation</TITLE></HEAD>
<BODY BGCOLOR="TEAL">
<CENTER>
<H1>SpyBuggle Animation</H1>
<APPLET CODE="BuggleAnimationPlayer3.class" WIDTH=450 HEIGHT=200></APPLET>
</CENTER>
</BODY>
</HTML>

SpyArmy.html
Including more text in the web page. Introducing vertical spacing. Special tags around words indicate that they should be in bold or fixed-width fonts.

<HTML>
<HEAD><TITLE>Composition Sprite</TITLE></HEAD>
<BODY BGCOLOR="WHITE">
<H1>Composition Sprite</H1>
A <B>SpyArmy</B> is a Sprite made up of many Spies.
The Spies are stored in an array. To make a composition Sprite,
we must also define the <CODE>setBounds</CODE> method.
<P>
<APPLET CODE="BuggleAnimationPlayer4.class" WIDTH=450 HEIGHT=400></APPLET>
</BODY>
</HTML>

SpyArmyII.html

<HTML>
<HEAD><TITLE>SpyArmyII</TITLE></HEAD>
<BODY BGCOLOR="WHITE">
<H1>SpyArmyII</H1>
The animation below demonstrates <CODE>BuggleAnimation5</CODE>
which is the animation with parameters. This is the animation
created using the default constructor.
<P>
<APPLET CODE="BuggleAnimationPlayer5.class" WIDTH=450 HEIGHT=400></APPLET>
<P>
The animation above is displayed using the SimpleAnimationPlayer
with the control panel hidden. The animation is set to play once
each time the applet is loaded onto the page (i.e. the page is
loaded into the web browser).
</BODY>
</HTML>

SpyArmyIII.html

<HTML>
<HEAD><TITLE>SpyArmyIII</TITLE></HEAD>
<BODY BGCOLOR="WHITE">
<H1>SpyArmyIII</H1>
The animation below demonstrates <CODE>BuggleAnimation5</CODE>
which is the animation with parameters. This is the animation
created using the constructor which requires parameters
<P>
<APPLET CODE="BuggleAnimationPlayer6.class" WIDTH=450 HEIGHT=400></APPLET>
<P>
The animation above is displayed using the SimpleAnimationPlayer
with the control panel hidden. The animation is set to play every
time the applet is visible on the screen.
</BODY>
</HTML>

BugglesInAndOut.html

<HTML>
<HEAD><TITLE>BugglesInAndOut</TITLE>
<BODY BGCOLOR="WHITE">
<H1>BugglesInAndOut</H1>
This animation demonstrates showing and hiding Sprites and making
them active and inactive. The animation class is <CODE>BuggleAnimation6</CODE>.

<CENTER>
<APPLET CODE="BugglesInAndOut.class" WIDTH=600 HEIGHT=400></APPLET>
<H3>15 Frames per Second; 90 Frames; 600x400 applet size</H3>
</CENTER>
</BODY>
</HTML>

BuggleShowcase.html

<HTML>
<HEAD><TITLE>BuggleShowcase</TITLE></HEAD>
<BODY BGCOLOR="BLACK">
<CENTER>
<H3>BuggleShowcase</H3>
<APPLET CODE="BuggleShowcase.class" WIDTH=600 HEIGHT=400></APPLET>
<P>
<I>Pick an animation. It will play when selected.</I>
</CENTER>
</BODY>
</HTML>

AnimationWorld
Sprites
Animations
Animation Players
HTML pages