1. Chapter 8 Introduction to HTML and Applets
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.
Fundamentals of Java

3. 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.
Fundamentals of Java

4. Vocabulary Absolute path name Associative link Definition list
External image
Hyperlinks
Hypermedia
Hypertext
Fundamentals of Java

5. Vocabulary (cont.) Hypertext markup language (HTML) Inline image
Markup tag
Memex
Relative path name
Uniform resource locator (URL)
Fundamentals of Java

6. 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
Fundamentals of Java

7. 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)
Fundamentals of Java

8. Hypertext, Hypermedia, and the World Wide Web (cont.)
Hypermedia: Extended hypertext that adds:
GUIs
Images
Sound
Animation
Applications
Fundamentals of Java

9. Hypertext, Hypermedia, and the World Wide Web (cont.)
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
Fundamentals of Java

10. Hypertext, Hypermedia, and the World Wide Web (cont.)
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.
Fundamentals of Java

11. Hypertext, Hypermedia, and the World Wide Web (cont.)
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)
Fundamentals of Java

12. Hypertext, Hypermedia, and the World Wide Web (cont.)
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
Fundamentals of Java

13. 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
Fundamentals of Java

14. Overview of the Hypertext Markup Language (cont.)
Figure 8-1: The Internet
Fundamentals of Java

15. Overview of the Hypertext Markup Language (cont.)
Figure 8-2: Simple Web page
Fundamentals of Java

16. Overview of the Hypertext Markup Language (cont.)
HTML for the simple Web page:
Fundamentals of Java

17. Overview of the Hypertext Markup Language (cont.)
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
Fundamentals of Java

18. Overview of the Hypertext Markup Language (cont.)
Tags often occur in pairs.
Mark the start and end of a tag.
<TITLE> and </TITLE>
Tags can include attributes.
<P ALIGN=CENTER>
Fundamentals of Java

19. Overview of the Hypertext Markup Language (cont.)
Table 8-1: Basic HTML markup tags
Fundamentals of Java

20. Overview of the Hypertext Markup Language (cont.)
Minimal document structure:
Fundamentals of Java

21. Overview of the Hypertext Markup Language (cont.)
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
Fundamentals of Java

22. 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>
Fundamentals of Java

23. Simple Text Elements (cont.)
Forced line breaks: <br> tag
Preformatted text: Display text “as is”
Contained within <Pre>…</Pre> tags
Fundamentals of Java

24. Character-Level Formatting
Table 8-2: Some character format tags
Fundamentals of Java

25. Character-Level Formatting (cont.)
Escape sequences: Codes to display special characters
Table 8-3: Some escape sequences
Fundamentals of Java

26. 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.
Fundamentals of Java

27. Lists (cont.) Unordered list example: Definition list example:
Fundamentals of Java

28. Lists (cont.)
Nested list example:
Fundamentals of Java

29. Lists (cont.)
Figure 8-4: Nested list
Fundamentals of Java

30. 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
Fundamentals of Java

31. 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>
Fundamentals of Java

32. Linking to Other Documents (cont.)
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
name/document path name
Fundamentals of Java

33. Linking to Other Documents (cont.)
Table 8-4: Relative path names to MyPage.html
Fundamentals of Java

34. 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>
Fundamentals of Java

35. 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.
Fundamentals of Java

36. Table 8-5: Some hypermedia filename extensions
Multimedia (cont.)
Table 8-5: Some hypermedia filename extensions
Fundamentals of Java

37. Tables
Figure 8-8: A table
Fundamentals of Java

38. Table 8-6: Table format tags
Tables (cont.)
Table 8-6: Table format tags
Fundamentals of Java

39. Table 8-7: Table attributes
Tables (cont.)
Table 8-7: Table attributes
Fundamentals of Java

40. Tables (cont.)
Typical table format:
Fundamentals of Java

41. 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.
Fundamentals of Java

42. Figure 8-9: Applet within a Web page
Applets (cont.)
Figure 8-9: Applet within a Web page
Fundamentals of Java

43. Applets (cont.)
HTML code:
Fundamentals of Java

44. 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:
Fundamentals of Java

45. Example 8.2: Applet with a specialized panel
Applets (cont.)
Example 8.2: Applet with a specialized panel
Fundamentals of Java

46. 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>.
Fundamentals of Java

47. Applets (cont.) Constraints on applets: Loading images into an applet:
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:
Fundamentals of Java

48. Applets (cont.) Passing parameters to applets:
Example HTML:
Accessing the parameter from the applet class:
Fundamentals of Java

49. 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.
Fundamentals of Java

50. 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.
Fundamentals of Java