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:
- <HTML> HTML tag
- <HEAD> Header tag that can contain document information
- <TITLE> Header title tag that contains the document title
- <BODY> Body tag
- <H1>-<H6> Body heading tags
- <P> Body paragraph tag
- <BR> Body line breaks
- <APPLET> Java applet tag
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:
- Additional header information
- Complete text formatting (including lists, effects, and character entities)
- Hyperlinks to remote documents or files
- Images
Additional Header Information
Earlier in this chapter the HEADtag 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.
The <META> Tag
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 METAtag. If NAME is used, HTTP-EQUIVshould not be.
CONTENT-The CONTENTattribute defines the actual contents of the METAtag.
HTTP-EQUIV-This attribute exists for the primary use of Web server administrators. This enables the HTML author to tie the contents of a METAtag to an HTTP server's response header. If HTTP-EQUIVis used, NAME should not be.
Some examples that demonstrate the use of the METAtag 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>
The <BASE> Tag
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 BASEtag 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 BASEtag has one attribute:
HREF-The HREFattribute stores the URL of the document containing the BASEtag.
Overall Document Formatting
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.
Modifying the BODY Tag
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.
- BGCOLOR-Sets the background color of the document.
- BACKGROUND-Designates the URL of the background image to be used.
- TEXT-Sets the color of regular text (overrides browser defaults).
- LINK-Sets the color of hyperlinks (overrides browser defaults).
- VLINK-Sets the color of visited links (overrides browser defaults).
- ALINK-Sets the color of active links (overrides browser defaults).
Complete Text Formatting
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.
Text Tags
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.
Making Text Bold
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.
Italicizing Text
The <I>…</I>and <EM>…</EM>tags are used to italicize text.
Setting the Base Font
The BASEFONT tag forces the size of all text within the page. It has one attribute, SIZE.
The syntax is
<BASEFONT SIZE=25>
Using Comments
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...>
Font Color and Size
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 FONTtag. The FONT tag has two attributes: COLOR and SIZE. These attributes have the following properties:
- COLOR-The COLORattribute can be any of the values illustrated in Figure 12.10.
- SIZE-The SIZEattribute can range from 1 to 7, with 1 being the smallest and 7 representing the document's BASEFONT.
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>
Using Anchors to Create Hyperlinks
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. |
Linking to Another URL
To link to another URL from the current document, the HREFattribute 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 HREFattribute.
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. |
Linking within the Page
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:
- Using an anchor to set a link to the NAMEDlocation.
- Setting the NAMED location through the use of the #character.
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 NAMEtag.
Listing 12.12. Example9.html: Using the NAMEattribute 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>
HTML and Images
Adding images to an HTML document can greatly improve the document's visual appeal. You can do this through the use of the HTML IMAGEtag. The basic syntax for using the IMAGEtag is the following:
<IMG SRC="graphic_URL">
The IMAGE tag actually has several attributes in addition to the SRCattribute. The following list gives more information on IMAGEtag attributes.
- SRC-Used to set the URL of the image being loaded.
- ALT-Contains text that will be displayed in text-only browsers (or browsers that have image-loading turned off).
- ALIGN-Can be one of two possible values: TOP or MIDDLE. These values behave the same as the APPLETtag's ALIGN attribute.
| 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). |
No comments:
Post a Comment