Computer Science 111 Fundamentals of Computer Programming I

1
Computer Science 111Fundamentals of Computer
Programming I

• Introduction to HTML
• and Applets

2
HTML

• HyperText Markup Language
• Allows us to markup up text with special tags so
  that web browsers will display the content as
  indicated
• For the most part HTML tags are placed in angle
  brackets like ltBgt and occur in pairs like ltBgt
  Here is some text lt/Bgt

3
Some HTML tags

• HTML this tag together with its end tag enclose
  the entire document
• HEAD there are two sections to the document,
  the head and the body. For the most part the head
  section contains the title of the document
• TITLE enclose the page title
• BODY enclose the body of the document,
  essentially all of the displayed content

4
A Minimal HTML document
ltHTMLgt ltHEADgt ltTITLEgt Title of your page
lt/TITLEgt lt/HEADgt ltBODYgt
All the good stuff goes here
lt/BODYgtlt/HTMLgt
5
More tags

• H1 There are six levels of headings in HTML,
  numbered H1 through H6 with H1 being the largest
  and boldest
• P Marks the beginning of a new paragraph.
• UL enclose an unordered list bullet list
• OL enclose an ordered or numbered list
• LI enclose an item in a list

6
Example HTML page
7
And in the browser
8
More tags

• BR Causes a line break to occur. Does not use
  an end tag
• HR Causes a horizontal line to be drawn across
  the page. No end tag.
• B enclosed text is bold
• I enclosed text is in italics

9
Linking to other pages

• The ltAgt or anchor tag is used for links. Suppose
  we want to have a link on our page to link to
  WLs home page. The following markup will
  achieve thisltA HREFhttp//www.wlu.edugt My
  University lt/Agt will do this.

10
Linking to locations in same page

• In order to link to specific locations within a
  page, these locations must first be given names
  that are recognized by HTML.
• To do this we use the anchor tag again, but now
  using the NAME parameter rather than the HREF
  parameter.
• General form is ltA NAME location-namegt
  Location-titlelt/Agtwhere location-name is the
  name that will be used in anchors that link to
  this location and Location-title will appear at
  the top when such a link is activated.

11
Linking to locations in same page (cont.)

• Example ltA NAMECh2gtChapter 2 Tree
  Algorithmslt/Agt
• Suppose we put the above tag at the beginning of
  the Chapter 2 section of our page. Then to link
  from another location to Chapter 2, we could use
  any of the following ltA HREF Ch2gt
  Chapter 2lt/Agt ltA HREF Ch2gt Tree
  Algorithmslt/Agt ltA HREF Ch2gt Chapter 2
  Tree Algorithmslt/Agt
• Here the indicates that we are linking to an
  anchor location within the page.

12
Images

• Here is an example for having an image in the
  fileltIMG SRC Gkids.jpggt

13
(No Transcript)
14
What is an applet?

• An applet is a Java program designed to run in a
  web page.
• There are two things necessary for an applet to
  execute
• A compiled applet - a .class file
• An HTML file with the proper markup tag

15
Applets versus stand alone applications

• For our purposes, the code changes are
• Use GBApplet instead of GBFrame
• Remove the main method - this stuff will be
  automatic for applets.
• Dont use SetTitle (if youve been using it)
• Instead of a constructor, use the method
  init public void init()

16
HTML applet markup tag

• The markup tag needed to place an applet on a web
  page looks like thisltAPPLET CODEname of .class
  file WIDTHwidth HEIGHTheightgt lt/APPLETgt
• Example ltAPPLET CODEMyApp.class
  WIDTH250 HEIGHT300gtlt/APPLETgt

17
Blackjack on the web?
18
Place your bets
19
(No Transcript)
20
If the short ones were in front, we could see all
of 'em...