Wednesday 13 May 2015

Java and HTML: The Basics

 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 APPLETtag. 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.

Starting the Document: The <HTML>Tag

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 HTMLtag.
</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">

Setting Up the Title: The <HEAD>and the <TITLE>Tags

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 METAtag 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.

The Center of Attention: The <BODY>Tag

As mentioned already, the HEADtag is used to contain header information for the HTML document. (It will be shown later that the HEADtag can also contain several other items besides the TITLEtag.) 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 HEADtag, 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.

Displaying Text on the Page: Headings, Paragraphs, and Line Breaks

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.


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.htmlin Listing 12.3 to make sure that you fully understand these tags. 

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>

Adding a Java Applet

At this point, all that is left is to add an actual Java applet to the screen. To do this, several steps are required:
  1. The Java language .javasource file must be created.
  2. The .java source file must be compiled into a .classfile.
  3. The .class file must be referenced from within the HTML page using the <APPLET>tag.

Creating the Java Applet

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. 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.javawith the javac compiler will result in the creation of a HelloWorld.classfile. Example3.html, shown in Listing 12.5, shows the Example3.htmlfile 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 APPLETtag 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. 

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>

No comments:

Post a Comment