Ppt chapter08

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.

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.

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

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

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

7
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)

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

9
 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

10
 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.

11
 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)

12
 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

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

14
Markup Language (cont.)
Figure 8-1: The Internet

15
Figure 8-2: Simple Web page

16
 HTML for the simple Web page:

17
 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

18
 Tags often occur in pairs.
– Mark the start and end of a tag.
– <TITLE> and </TITLE>
 Tags can include attributes.
– <P ALIGN=CENTER>

19
Table 8-1: Basic HTML markup tags

20
 Minimal document structure:

21
 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

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>

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

24
Character-Level Formatting
Table 8-2: Some character format tags

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

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.

27
Lists (cont.)
 Unordered list example:
 Definition list example:

28
Lists (cont.)
 Nested list example:

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

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

31
(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>

32
(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
– http://server name/document path name

33
(cont.)
Table 8-4: Relative path names to MyPage.html

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>

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.

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

37
Tables
Figure 8-8: A table

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

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

40
Tables (cont.)
 Typical table
format:

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.

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

43
Applets (cont.)
 HTML
code:

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:

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

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

47
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:

48
Applets (cont.)
 Passing parameters to applets:
– Example HTML:
 Accessing the parameter from the applet
class:

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.

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.

Ppt chapter08

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ppt chapter08

Similar to Ppt chapter08 (20)

More from Richard Styner

More from Richard Styner (20)

Recently uploaded

Recently uploaded (20)

Ppt chapter08