At the current time, it is almost impossible to separate the Java programming language from its use on the World Wide Web (WWW). Java applets were initially the most visible use of Java, and they continue to be the most widespread implementations of the language. Although stand-alone Java applications are possible, runtime speed is the limiting factor to a wider deployment of this type of application. As "just-in-time" and native code compilers become available for the Java platform, perhaps these applications will become more widespread. However, for the time being, Java applet developers will rely on current technologies to display and distribute their applets. These technologies include HTTP (the HyperText Transport Protocol), HTML (HyperText Markup Language), and World Wide Web browsers such as Netscape Navigator, Microsoft Internet Explorer, and Sun HotJava.
Other than the applet itself, the most visible of these technologies to the end-user will be the HTML page in which the applet is embedded. This chapter will attempt to provide the Java programmer with the knowledge needed to create interesting, visually appealing HTML pages to surround the Java applet(s) used.
The World Wide Web is an enormous collection of computing and information resources connected together in a computer network known as the Internet. It is important to understand that the World Wide Web lies "on top of" the Internet. The collection of networks known as the Internet can be used for standard intercommunication and file transfer between computers. Essentially, it is a vast number of computers (most of which run the UNIX operating system) that communicate among each other using the TCP/IP protocol. Virtually every operating system today currently supplies this protocol, thereby making it the de facto non-proprietary standard for computer intercommunication.
The World Wide Web was invented (by CERN in Switzerland) to provide a more visual means of linking these computing resources together. Using a technology known as hypertext, users can click on highlighted links and automatically jump to that topic. The actual text for this topic can reside within the current file, on the current computer, or on a computer anywhere else in the world. The requestor of information is commonly referred to as the client. The holder (and sender) of the information is known as the server. The requirements are as follows:
To determine whether you can "see" another computer across the Internet, you can execute the ping command. If you are using Windows 95/NT or UNIX, this command can be executed by simply typing ping. Figure 12.1 shows the Sun Web server being pinged. The user will be notified if the server could not be located.
Figure 12.1 : Using the ping command to locate www.sun.com.
Once this connection is established, the magic of the World Wide Web begins. A type of data file known as HTML (HyperText Markup Language) is transferred to the client machine. If the client is using what is known as a Web browser, the HTML file will be translated and displayed on the screen. The first popular Web browser was distributed freely by the National Center for Supercomputer Applications (ncSA). This browser was known as Mosaic. Other popular browsers include Netscape Navigator, Microsoft Internet Explorer, Spyglass Mosaic, Cello, and many others.
The format of HTML is standards-based. A consortium of organizations (including representatives from the banking, healthcare, government, and computer business sectors) known as the World Wide Web Consortium collectively vote on and manage the official HTML syntax. The World Wide Web Consortium, or W3C as it is also known, can be located at http://www.w3.org. At the time this book was published, the latest version of HTML, known as HTML 3.2, was being finalized.
When browser manufacturers (such as Netscape) add proprietary features to HTML, they press extremely hard for these features to be added to the next release of the HTML specification. Such was the case when Netscape 2.0 announced support for tables and Java applets. At that time, no other browser supported these two features, so the popularity of the Netscape browser increased dramatically. Partly because of this popularity and partly because these two items were truly good ideas, HTML 3.2 will support both tables and Java applets. Therefore, from this point on, if a browser manufacturer announces support for HTML 3.2, Java developers can be sure that their applet will run unmodified within that browser.
Many first-time users think that HTML files are actually programs
that run within the browser. This could not be further from the
truth. An HTML file is simply a text file containing a number
of special codes (known as tags). These tags are used by
browsers to display text, graphics, multimedia, and you guessed
it, applets on the browser screen.
| Note |
Because of the way HTML was designed, it is becoming more common to find fantastic Web pages created by desktop publishing gurus and artists than it is to find good pages created by software developers. (As a Java developer, however, you will be able to add a whole new level of interactivity that the less technically minded will find impossible to duplicate!) |
All of this would have been a fantastic technology had the Web creators stopped there…but they didn't. They also allowed "links" to other locations to be included as normal text, graphics, and so on. These locations are collectively known as Uniform Resource Locators (URLs). The format for designating a URL is the following:
URLType://Internet Node/File Path/File?Arguments
Some sample URLs include:
http://www.tasc.com (My company's home page)
ftp://ftp.sun.com (Sun's ftp site used to transfer files to your machine.
The JDK can be obtained here as well as from a Sun web page).
news://comp.lang.java (the Java language newsgroup.
An absolute must-visit for serious Java developers!)
The following types of URLs currently recognized include:
Listing 12.1 shows the contents of the HTML file that makes up the text-only (http://www.sun.com/960601/index.textonly.html) home page of Sun Microsystems (in June 1996). There is also a graphical home page and, of course, a Java version as well. Figure 12.2 shows how this HTML file is interpreted by the Netscape Navigator 2.0 browser.
Figure 12.2 : Index.textonly.html displayed in the Netscape Navigator browser.
Listing 12.1. Contents of the Sun Microsystems home page.
<HTML>
<HEAD>
<TITLE>Sun Microsystems</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<!-- HEAD_END -->
<H2>Sun Microsystems<br>
June 1996</H2>
<P>
<ul>
<font size=+2><strong>Scott says... <A HREF="/960601/cover/">
 kick butt and have FUN"</a></strong></font><br><em>Sun's feisty
 CEO Scott McNealy discusses Java, the Internet, his son Maverick,
 and more...</em>
<p>
<font size=+1><strong>Rapid, Reliable <A HREF="/960601/feature1/">
 Web Services</a></strong></font>
<p>
<font size=+1><strong>Sun's <A HREF="/960601/feature2/">Intranet</a>
 Boosts Productivity</strong></font>
<p>
<font size=+1><strong><A HREF="/960601/feature3/">Infoseek</a>
 Spiders Index the Web</strong></font>
</ul>
<UL>
<ul>
<LI><h3>Check out <A HREF="/960416/pbs_facts.html">"Life on the
 Internet" </A><br><strong> A 13-week PBS series underwritten
 by Sun.</strong></h3>
<LI><h3>Visit <A HREF=/sunworldonline/index.html>SunWorld Online
 </A> magazine - it's hot!</h3>
<LI><h3> <A HREF=whatshappening.html>What's New!</A></h3>
<LI><h3> <A HREF="/sunsoft/Developer-products/java">Develop Web
 Applications that Sizzle !</A></h3>
</ul>
</ul>
<HR>
<ul>
<h3><A HREF="/products-n-solutions/index.html">Products and Solutions</A></h3>
<h3><A HREF="/sales-n-service/index.html">Sales and Service</A></h3>
<h3><A HREF="/tech/index.html">Technology and Developers</A></h3>
<h3><A HREF="/corporateoverview/corp.html">Corporate Overview</A></h3>
</ul>
<HR>
<ul>
<h3><A HREF="/sun-on-net/index.html">Sun on the Net</A></h3>
<h3><A HREF="/search/search.html">Search</A></h3>
<h3><A HREF="/backissues.html">Back Issues</A></h3>
</ul>
<HR>
A version of this page with nice <A HREF="index.html">graphics</A> is available.
<P>
<!-- FOOT_START -->
<HR>
<FONT SIZE=2> Questions or comments regarding this service?
<A HREF="/cgi-bin/comment-form.pl"><EM>webmaster@sun.com</EM></A>
</FONT>
<P>
<H5><A HREF="/share/text/SMIcopyright.html">Copyright</A> 1996
 Sun Microsystems, Inc., 2550 Garcia Ave., Mtn. View, Ca 94043-1100 USA.
 All Rights Reserved
</H5>
</BODY></HTML>
This file is included on the companion CD-ROM to this book as index_textonly.html. If the pages still exist on the Web servers that this document points to, the document should be able to be loaded at any point in the future and still allow the reader to connect to any of its links. You can see, therefore, that the content of HTML pages is independent of where these pages reside.
The remainder of this chapter will focus on two topics:
Most new Java programmers probably had their first exposure to
Java through an applet embedded within a World Wide Web page.
Although the actual complex coding resides within the Java applet
(a .class file residing on
the Web server), HTML provides a tag that enables the developer
or Web publisher to "embed" the applet within the page.
This tag is known as the APPLET
tag. Before the APPLET tag
can be used, however, it is necessary for the developer to understand
the absolute basics of HTML. This section will cover the bare
minimum set of tags necessary for your applet to be displayed
within the browser. These tags will be examined in more detail
later in this chapter.
| Note |
Before continuing, please note the format of HTML tags. All tags begin with a "<" character and end with a ">" character. Tags that contain a group of information also are denoted by a closing tag (</tag>) similar to the start tag with a forward slash. This format is known as a begin-end pair. For example, an applet begins with <APPLET> and ends with </APPLET>. For more information on HTML publishing, see Teach Yourself Web Publishing with HTML in 14 Days from Sams.net. |
The very first tag that should appear in your HTML file is the HTML tag. This tag has no attributes. Simply add the following to the beginning of your document:
<HTML>
It simply denotes that this file is an HTML file for browsers that are reading in the file.
To end your document, use the ending HTML tag.
</HTML>
| Note |
Another tag that is rarely used at the beginning of documents, but is supported by the HTML standard, is the doctype tag. The doctype tag denotes, to systems that use SGML (Standard Generalized Markup Language), that this file is to use the HTML DTD (Document Type Definition). For more information on SGML, see http://www.sil.org/sgml/sgml.html. Its format is <!doctype html public "-//IETF//DTD HTML//EN"> |
After it sees the <HTML> tag, your browser is ready to process this HTML document. The HEAD tag is used after the HTML tag to contain information that will not appear directly on the page (also see the META tag later on in this chapter). The most important of these tags is the TITLE tag. The information inserted in the TITLE tag will be displayed at the top of most Web browsers. Adding these tags to the HTML tag would result in the following:
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
</HTML>
The preceding text represents a complete HTML file that could be loaded into any application that displays HTML markup. Unfortunately, at this point, it would only display a blank screen with the title on the top bar of the application. A little bit more information is needed to get an applet on the screen.
As mentioned already, the HEAD tag is used to contain header information for the HTML document. (It will be shown later that the HEAD tag can also contain several other items besides the TITLE tag.) The BODY tag is used to contain the information to be displayed on the browser screen. Using the HTML lines you entered earlier for the HEAD tag, now add the BODY tag.
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Now it's time to make this page display something besides a blank screen. Text can be displayed using a number of HTML tags. The two most commonly used tags are the heading tags and paragraph tags.
Because by definition, headings appear at the top of a paragraph,
they will be examined first. In HTML, there are six levels of
headings, known as Heading 1 through Heading 6. These six different
levels (denoted as <H#>…</H#>)
are typically displayed using the same type of font with smaller
point sizes as the heading number increases.
| Note |
Like Java, HTML was designed to be completely platform- and browser-independent. HTML in no way dictates which fonts or colors applications should be used to view it. |
Example1.html, shown in Listing 12.2, illustrates the use of all six headings within Netscape Navigator (see Figure 12.3).
Figure12.3 : Displaying the six heading types using Netscape's default settings.
Listing 12.2. Example1.html: Displaying the six heading types using HTML.
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
<BODY>
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
</BODY>
</HTML>
The paragraph tag is one of the most commonly used tags in HTML. It is used to contain regular text. Its format is
<P> Insert your text here... </P>
All text can be formatted using a large number of text formatting tags, but these will be saved for later in the chapter (see the section titled "Text Formatting").
Line breaks are used to insert blank lines within HTML pages without beginning a new, blank paragraph. Because line breaks do not actually contain anything, they have no ending tag. The format for a line break is
<BR>
Before adding an applet to a page, run Example2.html in Listing 12.3 to make sure that you fully understand these tags. You should see a result similar to that in Figure 12.4.
Figure 12.4 : Example2.html file displayed in Netscape Navigator.
Listing 12.3. Example2.html: A simple HTML file complete with onscreen display.
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
<BODY>
<H1>Welcome to the brave new world!</H1>
<BR>
<P>This page represents a first try at creating a fully functional
 HTML page.</P>
<BR>
<P>More exciting concepts will be visiting this page in a short time
 ...Stay tuned!</P>
</BODY>
</HTML>
At this point, all that is left is to add an actual Java applet to the screen. To do this, several steps are required:
This chapter is not intended to cover the specifics of Java applet development, but at this point we will demonstrate a simple Java applet for display within a browser so that you can traverse the process of creating HTML pages containing Java applets. For additional information on Java applets, see Chapter 7, "Developing Java Applets." The sample applet that will be created here is the now familiar HelloWorld applet. Listing 12.4 shows the Java source code necessary to print a string to the screen.
Listing 12.4. The HelloWorld applet: HelloWorld.java.
import java.awt.Font;
import java.awt.Graphics;
/* The following class prints the text "Hello World!" to the screen */
public class HelloWorld extends java.applet.Applet
{
Font tempFont = new Font("Helvetica", Font.PLAIN, 20);
public void paint(Graphics g)
{
g.setFont(tempFont);
g.drawString("Hello world!", 10, 25);
}
}
Compiling HelloWorld.java with the javac compiler will result in the creation of a HelloWorld.class file. Example3.html, shown in Listing 12.5, shows the Example3.html file with the APPLET tag for HelloWorld added to it. The text "If you can see this…" outside of the APPLET tag itself will be displayed to browsers that are not capable of hosting Java applets. The APPLET tag will be covered in more detail in the next section, but for now it may be useful to run this example to prove to yourself that it really is this simple. The results are shown in Figure 12.5.
Figure12.5 : Example3.html file displayed in Netscape Navigator.
Listing 12.5. Example3.html: A simple HTML file containing the HelloWorld applet.
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
<BODY>
<H1>Welcome to the brave new world!</H1>
<BR>
<P>This page represents a first try at creating a fully functional HTML
 page.</P>
<BR>
<P>Below you will find my HelloWorld applet.</P>
<BR>
<APPLET CODE="HelloWorld.class" WIDTH=150 HEIGHT=30>
If you can see this, your browser does not support Java applets.
</APPLET>
</BODY>
</HTML>
Now that a simple Java-enabled Web page has been demonstrated, it is time to explore the APPLET tag in more detail. The basic description of this tag is as follows:
<APPLET attributes>
applet_parameters
alternate_content
</APPLET>
What you are concerned with here are the attributes and the applet_parameters.
The APPLET tag supports a number of standard attributes. The majority of these attributes are nearly identical to the attributes of the IMG tag (to be discussed later in this chapter). The three required attributes are CODE/CODEBASE, WIDTH, and HEIGHT. The following list describes each attribute and its meaning.
ALT-Alternate text that can be displayed by text-only browsers. Some browsers also show this text when the applet is loading.
ALIGN-The ALIGN attribute designates the alignment of the applet within the browser page. Here are the possible choices for alignment:
CODE-(Required) The CODE attribute is used to indicate the .class file that loads the applet. This file must be in the same directory location as this HTML file. To load an applet located in a different directory, use the CODEBASE attribute.
CODEBASE-The CODEBASE attribute is used to indicate the location of the .class file that loads the applet. This attribute can contain either a directory name or a URL.
HEIGHT-(Required) The HEIGHT attribute is used to set the applet's box height.
HSPACE-The HSPACE attribute sets the amount of horizontal space to be set off around the applet. Both the HSPACE and VSPACE attributes are used only when the ALIGN attribute is equal to LEFT or RIGHT.
NAME-The NAME attribute sets the symbolic name of the applet. This attribute is useful when multiple applets present on a page need to locate each other.
VSPACE-The VSPACE attribute sets the amount of vertical space to be set off around the applet. Both the HSPACE and VSPACE attributes are used only when the ALIGN attribute is equal to LEFT or RIGHT.
WIDTH-(Required) The WIDTH attribute is used to set the applet's box width.
This section presents some examples detailing the use of the APPLET tag's attributes. Because the most commonly used attributes are the ALIGN, HSPACE, and VSPACE attributes, special attention will be paid to them.
Example4.html, shown in Listing 12.6, makes use of the APPLET tag's ALIGN attribute. The HelloWorld applet is loaded several times onto one form to show the use of the ALIGN attribute. Listing 12.7 is Example5.html, which expands on Example4.html by including the VSPACE and HSPACE attributes. The resulting pages are shown in Figures 12.6 and 12.7.
Figure12.6 : Example4.html showing the use of the ALIGN attribute.
Listing 12.6. Example4.html: Various uses of the APPLET tag's ALIGN attribute.
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
<BODY>
<H1>Welcome to the brave new world!</H1>
<BR>
<P>This page represents a first try at creating a fully functional HTML
 page.</P>
<BR>
<P>Below you will find my HelloWorld applet.</P>
<BR>
<P>Note the clever use of the ALIGN attribute to move the applet around
 on the screen.</P>
<BR>
<P><APPLET CODE="HelloWorld.class" WIDTH=150 HEIGHT=30 ALIGN=LEFT>
If you can see this, your browser does not support Java applets.
</APPLET>
To the left you will notice the HelloWorld applet
</P>
<BR>
<P><APPLET CODE="HelloWorld.class" WIDTH=150 HEIGHT=30 ALIGN=RIGHT>
If you can see this, your browser does not support Java applets.
</APPLET>
To the right you will notice the HelloWorld applet
</P>
<BR>
</BODY>
</HTML>
Listing 12.7. Repeats Example4.html, but it now includes the VSPACE and HSPACE attributes.
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
<BODY>
<H1>Welcome to the brave new world!</H1>
<BR>
<P>This page represents a first try at creating a fully functional HTML
 page.</P>
<BR>
<P>Below you will find my HelloWorld applet.</P>
<BR>
<P>Note the clever use of the ALIGN, VSPACE, and HSPACE attributes to set the
applet's location on the screen.</P>
<BR>
<P><APPLET CODE="HelloWorld.class" WIDTH=150 HEIGHT=30 ALIGN=LEFT HSPACE=25>
If you can see this, your browser does not support Java applets.
</APPLET>
To the left you will notice the HelloWorld applet
</P>
<BR>
<P><APPLET CODE="HelloWorld.class" WIDTH=150 HEIGHT=30 ALIGN=RIGHT VSPACE=50>
If you can see this, your browser does not support Java applets.
</APPLET>
To the right you will notice the HelloWorld applet
</P>
<BR>
</BODY>
</HTML>
The APPLET parameters stored in the PARAM tag actually have little directly to do with HTML. Instead, they are parameters passed directly to a Java applet. It is the responsibility of the applet to check the parameter values and respond accordingly.
There are two steps to passing parameters to applets:
The syntax required to pass these parameters is
<PARAM NAME=param_name VALUE=param_value>
In this syntax, param_name and param_value are the values passed to the Java applet.
Java applets retrieve these parameter values using the getParameter() method. Although this function can be called anywhere, the most common case occurs when this function is called in the applet's init() method. (For more on applet initialization, see Chapter 7.) The method syntax is the following:
String getParameter(String name);
| Note |
When passing parameters to applets, keep in mind that the parameter names are case-sensitive! Also note that all parameter values are converted to strings. |
It is now time to revisit the HelloWorld class created earlier in Listing 12.4. A new class entitled FancyHelloWorld will be created (see Listing 12.8) that will take a parameter named "COLOR" and draw the text on the screen according to the value of that parameter.
Listing 12.8. Class FancyHelloWorld reacts to the COLOR parameter.
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Color;
/* The following class prints the text "Hello World!" to the screen */
/* It also accepts a font color as input and draws the text in that color */
public class FancyHelloWorld extends java.applet.Applet
{
Font tempFont = new Font("Helvetica", Font.PLAIN, 20);
Color tempColor;
String tempString;
public void init()
{
tempString = getParameter("COLOR");
if (tempString.equals("WHITE"))
tempColor = new Color(255, 255, 255);
else if (tempString.equals("BLACK"))
tempColor = new Color(0, 0, 0);
else if (tempString.equals("GRAY"))
tempColor = new Color(128, 128, 128);
else if (tempString.equals("RED"))
tempColor = new Color(255, 0, 0);
else if (tempString.equals("GREEN"))
tempColor = new Color(0, 255, 0);
else if (tempString.equals("BLUE"))
tempColor = new Color(0, 0, 255);
else if (tempString.equals("YELLOW"))
tempColor = new Color(255, 255, 0);
else if (tempString.equals("MAGENTA"))
tempColor = new Color(255, 0, 255);
else if (tempString.equals("CYAN"))
tempColor = new Color(0, 255, 255);
else if (tempString.equals("PINK"))
tempColor = new Color(255, 175, 175);
else if (tempString.equals("ORANGE"))
tempColor = new Color(255, 200, 0);
else
tempColor = new Color(0, 0, 0);
}
public void paint(Graphics g)
{
g.setFont(tempFont);
g.setColor(tempColor);
g.drawString("Hello world!", 10, 25);
}
}
Example6.html, shown in Listing 12.9, modifies the HTML file built in Example3.html by passing in several COLOR parameters. Figure 12.8 shows the Example6.html loaded in Netscape.
Figure12.8 : Example6.html loaded into Netscape Navigator.
Listing 12.9. Example6.html passes several COLOR parameters to FancyHelloWorld.class.
<HTML>
<HEAD>
<TITLE>This is my applet's first home!</TITLE>
</HEAD>
<BODY>
<H1>Welcome to the brave new world!</H1>
<BR>
<P>This page represents a first try at creating a fully functional HTML
 page.</P>
<BR>
<P>Below you will find my HelloWorld applet.</P>
<BR>
<APPLET CODE="FancyHelloWorld.class" WIDTH=150 HEIGHT=30>
<PARAM NAME=COLOR VALUE="BLUE">
If you can see this, your browser does not support Java applets.
</APPLET>
<BR>
<APPLET CODE="FancyHelloWorld.class" WIDTH=150 HEIGHT=30>
<PARAM NAME=COLOR VALUE="RED">
If you can see this, your browser does not support Java applets.
</APPLET>
<BR>
<APPLET CODE="FancyHelloWorld.class" WIDTH=150 HEIGHT=30>
<PARAM NAME=COLOR VALUE="CYAN">
If you can see this, your browser does not support Java applets.
</APPLET>
<BR>
<APPLET CODE="FancyHelloWorld.class" WIDTH=150 HEIGHT=30>
<PARAM NAME=COLOR VALUE="YELLOW">
If you can see this, your browser does not support Java applets.
</APPLET>
</BODY>
</HTML>
The preceding section contains all the information needed to embed Java applets within HTML pages. However, it is only a tiny subset of the information needed to create complete HTML documents. Though there are hundreds of tags that make up the entire HTML specification, the remainder of this chapter will focus on the topics needed to provide a thorough introduction to HTML for Java programmers.
So far, the following tags have been introduced:
If you have much experience browsing World Wide Web documents, you probably realize that HTML allows a great deal more flexibility than what has been covered thus far. Features to be covered throughout the rest of this chapter include the following:
Earlier in this chapter the HEAD tag was introduced. It is generally used to store data that does not directly affect the appearance of the HTML document. To review, the TITLE tag was used to display the document's title and is contained within the document header. Two more additional tags are commonly used to stamp information into the HTML file should someone choose to view the source at a later date.
In addition to the title, the header can also contain what is known as metadata. This data is essentially miscellaneous information that may be of use to someone that views the HTML source at a later date. Each document can contain an unlimited number of META tags (use discretion here). <META> has three allowed attributes:
NAME-This attribute is used to define what information is stored in the current META tag. If NAME is used, HTTP-EQUIV should not be.
CONTENT-The CONTENT attribute defines the actual contents of the META tag.
HTTP-EQUIV-This attribute exists for the primary use of Web server administrators. This enables the HTML author to tie the contents of a META tag to an HTTP server's response header. If HTTP-EQUIV is used, NAME should not be.
Some examples that demonstrate the use of the META tag are as follows:
<HTML>
<HEAD>
<TITLE>Sample Meta Information</TITLE>
<META NAME="Creation_Date" CONTENT="June 9, 1996">
<META NAME="Author" CONTENT="Bryan Morgan">
</HEAD>
</HTML>
HTML also provides a tag that furnishes a self-referencing URL for the document. This allows the remaining URLs within the document to contain relative location information instead of continually "hard-wiring" themselves. This is especially useful if a document is mirrored at several locations. Use of the BASE tag allows the document's links to still point to valid addresses (if all of the additional files, and so on were mirrored with the main document). The BASE tag has one attribute:
HREF-The HREF attribute stores the URL of the document containing the BASE tag.
Several tags provided by HTML allow the document to provide a more visually appealing appearance (as opposed to black text on a gray screen!). This section discusses these tags briefly.
The BODY tag (<BODY>) has already been introduced in its simplest form-that of a container for the body of the document. However, it does have several attributes that allow the publisher to edit its visual appearance. These attributes include the BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, and ALINK attributes.
The colors available can be viewed in Figure 12.9.
Figure12.9 : Allowed colors in HTML.
The previous section dealt with "invisible" information that is placed into the HTML header section. The remainder of the topics that will be discussed directly affect the onscreen display of HTML.
HTML allows the publisher to completely format text output on a screen. This includes the ability to change the size, type, and color of fonts, modify the highlighting of characters to show emphasis, and add onscreen visual effects such as horizontal lines and background coloring.
One of the most common operations on text in a document is the modifying of various character styles to add effects to a document. The following paragraphs cover the most popular of these styles, and Example7.html, shown in Listing 12.10, gives an HTML file that demonstrates the use of many of these styles.
The <B>…</B> and <STRONG>…</STRONG> tags are used to boldface text. For these tags (and all of the remaining tags in this section), simply place the text to be made bold within these tags.
The <I>…</I> and <EM>…</EM> tags are used to italicize text.
The BASEFONT tag forces the size of all text within the page. It has one attribute, SIZE.
The syntax is
<BASEFONT SIZE=25>
Comments can be used in HTML but they also have a special tag to contain them. The format of this tag is a normal tag that begins with an exclamation point (no ending exclamation point is needed).
Here is the syntax:
<!...comments...>
One of the most visually appealing effects, if used properly, can be the modification of text's font size and color. To do this, HTML supplies the publisher with the FONT tag. The FONT tag has two attributes: COLOR and SIZE. These attributes have the following properties:
Figure12.10 : Example7.html demonstrating various text tags.
Listing 12.10. Example7.html: A simple HTML file demonstrating various text tags.
<HTML>
<HEAD>
<TITLE>Sample HTML Page</TITLE>
</HEAD>
<BODY>
<H1>Examples of HTML Character Formatting</H1>
<BR>
<P>
<!Show default font size first>
BASEFONT = Default<BR>
<B>Bold Text</B><I>Italic Text</I>
<BR><BR>
<!Now change the font size to 20>
BASEFONT = 20<BR>
<BASEFONT SIZE=20>
<B>Bold Text</B><I>Italic Text</I>
<BR><BR>
<!Let's play with the Font!>
<B><FONT COLOR=RED>Happy </FONT><FONT COLOR=WHITE>Fourth </FONT>
<FONT COLOR=BLUE>Of </FONT><FONT COLOR=RED>July!</FONT></B>
<BR><BR>
<!Now change the size>
<B><FONT COLOR=RED SIZE=7>Happy </FONT><FONT COLOR=WHITE SIZE=5>Fourth </FONT>
<FONT COLOR=BLUE SIZE=3>Of </FONT><FONT COLOR=RED SIZE=1>July!</FONT></B>
<BR><BR>
</P>
There are many advantages to creating documents using the HTML
format. Arguably, one of the greatest advantages is the ability
to create hyperlinks to other documents and embed these hyperlinks
as part of the current document with the implementation hidden
from the reader. HTML allows the creation of these hyperlinks
through the use of the Anchor (<A>…</A>)
tag.
| Note |
The <A>…</A> tag by itself does nothing. To create hyperlinks, the <A>…</A> tag must be used in conjunction with one of its attributes such as HREF or NAME. |
To link to another URL from the current document, the HREF attribute is provided. The <A> tag is called an anchor because it "anchors" text to a URL. You can see this by examining the syntax:
<A HREF="URL">LocationNameInText</A>
The actual location name displayed to the user is not an actual attribute. Instead, it is "anchored" to the HREF attribute.
Modify the phrase "Happy Fourth Of July!" in Example7.html (see Listing 12.11 and corresponding Figure 12.11) to point to the White House Web site
Figure12.11 : Example8.html with the White House link.
(http://www.whitehouse.gov). When you run the example, you should see a result like that in Figure 12.12.
Figure12.12 : The White House Web Page (note the Java Flag applet).
Listing 12.11. Example8.html: Adding a link to the White House web site using the Anchor tag.
<HTML>
<HEAD>
<TITLE>Sample HTML Page</TITLE>
</HEAD>
<BODY>
<H1>Examples of HTML Character Formatting</H1>
<BR>
<P>
<!Show default font size first>
BASEFONT = Default<BR>
<B>Bold Text</B><I>Italic Text</I>
<BR><BR>
<!Now change the font size to 20>
BASEFONT = 20<BR>
<BASEFONT SIZE=20>
<B>Bold Text</B><I>Italic Text</I>
<BR><BR>
<!Let's go to the White House!!>
<B><A HREF="http://www.whitehouse.gov">Happy Fourth Of July!</A></B>
<BR><BR>
</P>
</BODY>
</HTML>
| Note |
The URL used with the HREF attribute does not have to be an HTTP address. It could be FTP, e-mail, or any other URL qualifier. |
What if your document has no reason to point to a remote URL, but you would like to jump to a location at the end of the document? As you may have guessed by now, the designers of HTML thought of that also. This can be accomplished through the use of the NAME attribute. Using the NAME attribute actually requires two steps:
The syntax is
<A HREF="#named_location">named_location_text</A>
.
.
.
<A NAME="named_location">link_name_text</A>
Example9.html (see Listing 12.12) illustrates the use of the NAME tag.
Listing 12.12. Example9.html: Using the NAME attribute to jump through a document.
<HTML>
<HEAD>
<TITLE>Sample HTML Page</TITLE>
</HEAD>
<BODY>
<H1>Examples of HTML Anchoring</H1>
<BR>
<P>
<!>To test this, make your browser height really small. Otherwise,
you won't notice the jump. Now, let's make a named link!>
<B><A HREF="#jumphere">Jump Back Jack!</A></B>
<BR><BR>
Text<BR>
Text<BR>
Text<BR>
Text<BR>
Text<BR>
Text<BR>
Text<BR>
Text<BR>
Text<BR>
<B><A NAME="jumphere">Take a leap!</A></B>
</P>
</BODY>
</HTML>
Adding images to an HTML document can greatly improve the document's visual appeal. You can do this through the use of the HTML IMAGE tag. The basic syntax for using the IMAGE tag is the following:
<IMG SRC="graphic_URL">
The IMAGE tag actually has several attributes in addition to the SRC attribute. The following list gives more information on IMAGE tag attributes.
| Caution |
It is imperative that the image format included in your HTML document be viewable by all popular browser types. At the current time, the most common image formats are JPEG and GIF (with GIF being the most commonly accepted format). |
HTML is an open specification that enables anyone with a text editor to create dynamic, visually interesting documents that can be read on any computer in widespread use today. It is essentially comprised of a set of tags that enable the file creator to lay out the document in an implementation-neutral manner. (Details such as font type and screen resolution are of no concern to the HTML publisher.) Java applets can be embedded within an HTML page through the use of the <APPLET> tag. Tags that have attributes enable the HTML developer to customize the layout and display of the form.
One of the most exciting aspects of the World Wide Web is that it gives individuals the ability to publish information that can be viewed by the entire world. Although many programmers tend to ignore the publishing aspects of Web development, the appearance and functionality of Web pages are just as important as GUI screen layouts are. The time you spend planning out an HTML page and its interaction with Java applets will be time well spent if the application is deployed and met with success.