Chapter 8 Introduction to HTML and Applets Fundamentals of Java.

Chapter 8Introduction to HTML and

Applets

Fundamentals of Java

Fundamentals of Java 2

Objectives

Understand the basic features of hypertext, hypermedia, and the World Wide Web.

Use basic HTML markup tags to format text for a Web page.

Construct an HTML list and an HTML table to represent a linear sequence of items and a two-dimensional grid of items, respectively.


Objectives (cont.)

Use the appropriate markup tags to include images in Web pages.

Create links to other Web pages using absolute or relative path names.

Convert a Java application to an applet and embed the applet in a Web page.

Understand the constraints on applets that distinguish them from Java applications.


Vocabulary

Absolute path name Associative link Definition list External image Hyperlinks Hypermedia Hypertext


Vocabulary (cont.)

Hypertext markup language (HTML) Inline image Markup tag Memex Relative path name Uniform resource locator (URL)


Hypertext, Hypermedia, and the World Wide Web

Memex: Theoretical machine proposed by Vannevar Bush in 1945 that would link information in tables by keys– Every computer would have a memex that was

linked to the memexes on other computers.– Associative links between computers:

Could be traced backwards and forwards


Hypertext, Hypermedia, and the World Wide Web (cont.)

Hypertext: A structure consisting of nodes and links between them– Links to other nodes typically displayed to users

as embedded, highlighted terms within a given chunk of text

Early hypertext systems:– Douglas Englebart’s NLS/Augment (1968)– Cognetics Corporation’s Hyperties (mid-1980s)



Hypermedia: Extended hypertext that adds:– GUIs– Images– Sound– Animation– Applications



With development of the Internet, people began to think of sharing hypertext across a network of communicating machines.– Each node is a page.– Each page is linked to the World Wide Web.

The Web consists of:– Servers: House pages of information– Clients: Run browsers to access information

on servers



When you view a page in a browser and click on a link:– The browser sends a message to the node’s

machine, requesting a transfer of its information.

– If the request is successful, the information at the node is downloaded to the user’s browser.



Networked hypermedia systems require uniform means of:– Representing data via a machine-independent

hypertext markup language– Assigning node addresses using machine-

independent uniform resource locators (URLs)



Networked hypermedia systems require uniform means of (cont.):– Transmitting information from site to site using

machine-independent network transmission protocols

– Displaying information with browsers from different vendors


Overview of the Hypertext Markup Language

Hypertext markup language (HTML): Machine-independent language for representing information in a networked-based hypermedia system

Markup tags: Indicate format of textual elements or links to other nodes


Overview of the Hypertext Markup Language (cont.)

Figure 8-1: The Internet



Figure 8-2: Simple Web page



HTML for the simple Web page:



The document must be stored in a file having the extension:– “.html” on a UNIX system – “.htm” on a Windows system

Markup tags begin with a left angle bracket (<) and end with a right angle bracket (>).– Not case sensitive



Tags often occur in pairs.– Mark the start and end of a tag.– <TITLE> and </TITLE>

Tags can include attributes.– <P ALIGN=CENTER>



Table 8-1: Basic HTML markup tags



Minimal document structure:



HTML tag: Informs browser that it is dealing with an HTML document

HEAD tag: Identifies first part of document TITLE tag: Identifies document’s title

– Displayed at top of browser’s window – Used during searches for the document

BODY tags: Enclose information provided by the HTML document


Simple Text Elements

Headings: Six levels– H1 through H6– Different font size and style than normal text– <Hnumber>Heading Text</Hnumber>

Paragraphs: Contained within <P>…</P>


Simple Text Elements (cont.)

Forced line breaks: <br> tag Preformatted text: Display text “as is”

– Contained within <Pre>…</Pre> tags


Character-Level Formatting

Table 8-2: Some character format tags


Character-Level Formatting (cont.)

Escape sequences: Codes to display special characters

Table 8-3: Some escape sequences


Lists

Unordered (bulleted) lists: Tag <UL> Numbered (ordered) lists: Tag <OL> Definition (association) lists: Tag <DL> For bulleted and ordered lists, use <LI> tag

for each element in the list. For definition lists, use <DT> tag for terms

and <DD> tag for definitions.


Lists (cont.)

Unordered list example:

Definition list example:


Lists (cont.)

Nested list example:


Lists (cont.)

Figure 8-4: Nested list


Linking to Other Documents

Links (hyperlinks or hypertext references): Allow readers to move to other pages in the Web– Anchor tag: <A>– Can appear anywhere within any html

document– Hyperlinked text is highlighted in some way

when displayed:Underlined or a different color, or both


Linking to Other Documents (cont.)

Steps to place a link in a document:– 1. Identify target document that will be at link’s

other end. Path name or URL

– 2. Determine text that labels the link in the browser.

– 3. Place this information within an anchor.<A HREF="target document identifier">text of link</A>



Path names:– Absolute path name: Specifies exact position of

the file in the computer’s directory structure– Relative path name: Specifies a document’s

position relative to that of the currently displayed document

Uniform resource locator (URL): Used to specify files on another computer– http://server name/document path name



Table 8-4: Relative path names to MyPage.html


Multimedia

Inline images: Displayed when user opens a page– <IMG SRC="ImageLocation">– Images can be in GIF or JPEG format.– Size attributes:

<IMG SRC="mypicture.gif" HEIGHT=100 WIDTH=100>

– Alignment attribute:<IMG SRC="mypicture.gif" ALIGN=CENTER>


Multimedia (cont.)

External images: Not displayed until user clicks on a link– Use the anchor tag– <A HREF="mypicture.gif">Sample picture</A>

Colors and backgrounds: String of three, two-digit hexadecimal numbers specifies a color by indicating RGB value.


Multimedia (cont.)

Table 8-5: Some hypermedia filename extensions


Tables

Figure 8-8: A table


Tables (cont.)

Table 8-6: Table format tags


Tables (cont.)

Table 8-7: Table attributes


Tables (cont.)

Typical table format:


Applets

A Java application that runs in a Web page– Two components necessary:

HTML document that contains an applet markup tag

Byte code file for the applet

An applet markup tag has the following form:– <APPLET CODE="byte code file name" WIDTH=width HEIGHT=height></APPLET>

Applets present a graphical user interface.


Applets (cont.)

Figure 8-9: Applet within a Web page


Applets (cont.)

HTML code:


Applets (cont.)

Converting a Java application to an applet:– Replace the name JFrame with the name JApplet at the beginning of the class definition (extends JApplet).

– Replace constructor by the method init:


Applets (cont.)

Example 8.2: Applet with a specialized panel


Applets (cont.)

Sun’s applet viewer: Allows programmer to run an applet and view just its GUI – Without the surrounding Web page– Steps to use applet viewer:

Compile the Java source program as usual.Create HTML file with at least the minimal applet

tag for the applet.At the command line prompt, run appletviewer <html file name>.


Applets (cont.)

Constraints on applets:– Cannot access local files– Byte code file and html file should be in same

directory.– Dialog boxes may appear differently.

Loading images into an applet:


Applets (cont.)

Passing parameters to applets:– Example HTML:

Accessing the parameter from the applet class:


Summary

The World Wide Web is a hypermedia system that allows users to navigate among and use resources in a nonlinear manner.

HTML tags can format text for Web pages. Links to other pages using absolute or

relative path names can be included in HTML elements.


Summary (cont.)

Web pages can contain applets or Java applications that are downloaded from a Web server and run in the user’s Web browser.

A few steps are needed to convert an application to an applet.

Applets have most of the functionality of applications, including the GUI, but they lack file access to the user’s disks.

Chapter 8 Introduction to HTML and Applets Fundamentals of Java.

Documents

world wide web cont

extended hypertext

sharing hypertext

web pages

java objectivesunderstand

java applications

world wide webmemex

networked hypermedia