Class 9 HTML

1
Class 9 - HTML

• Creating a personal web page
• Structure of HTML documents
• HTML tags
• The APPLET tag

2
HTML

• Web pages are text documents with special
  formatting commands, called tags.
• The formatting language is called HTML.
• Can view raw HTML by selecting view source in
  browser.

3
Creating a personal web page

• Use text editor to create file index.html
  containing HTML document
• Place in public_html directory under your home
  directory.
• Set permission correctly
• -rw-r--r-- 1 udr ... Feb 22 1657
  index.html
• see www.uiuc.edu, web publishing link for
  details.
• URL for your page is www.cs.bham.ac.uk/yournetid

4
Overview of HTML

• HTML documents are text documents, i.e. created
  with text editor (like Java programs)
• Contain text and tags
• lttag-name ...attributes...gt ... text ...
  lt/tag-namegt
• E.g. Read this ltstronggtnowlt/stronggt!
• would show up as Read this now!
• HTML is mostly free-form (lines breaks not
  significant)

5
Structure of HTML documents
ltHTMLgt ltTITLEgt ... stuff ... lt/TITLEgt ltBODYgt
... lots of stuff ... lt/BODYgt lt/HTMLgt
title of browser window
contents of browser window
6
Structure of HTML documents (cont.)

• Stuff consists of text and tags
• Matching tag pairs are nested, like braces or
  parentheses in programs

Level 1 heading - displays in large font
ltH1gt Big title lt/H1gt ltPgt When in the course of
... ltPgt Four score and seven ...
Paragraph tag leaves space - matching lt/Pgt
is optional
7
The ltHi gt and ltPgt tags

• ltH1gt, ..., ltH6gt set text in larger fonts for
  section headings
• H1 is largest heading, H6 smallest
• Matching tags should be included
• ltPgt leave space, i.e. start a new paragraph
• Matching tag optional (usually omitted)

8
Links

• Links created using ltAgt tags with HREF attribute
• E.g.

ltA HREF...url...gt text lt/Agt
highlighted in browser - click to follow link
ltPgt My favorite class is ltA HREFhttp//www.cs.bh
am.ac.uk/courses/java/fywgt SEM107lt/Agt!
9
Images

• In-line GIF and JPEG images included using IMG
  tag, with SRC attribute. (Matching tag usually
  omitted.)

ltIMG SRCmyface.jpggt ltIMG SRCgifs/blueline.gif
gt ... text to be set off by blue lines ... ltIMG
SRCgifs/blueline.gifgt
images can be stored in sub- directory
10
HTML Resources

• Lots of books on HTML
• On-line tutorials. (E.g. in Yahoo, search for
  beginners html)
• Use view source in browsers
• Obtaining graphics
• Download image to disk in browser
• Free graphics from many sites, e.g.
  www.thefreesite.com

11
Applets

• Applets are Java programs. Compile to create
  .class files.
• Applets have a special form, and use parts of the
  API we have not used before.
• Include in HTML document using APPLET tag.

12
The APPLET tag

• Place all class files in a subdirectory, say
  appletcode.

ltAPPLET CODEappletname.class
CODEBASEappletcode HEIGHT 400
WIDTH 300gt lt/APPLETgt
stuff in here will be displayed if browser is not
Java-equipped
mandatory
13
Simple applet example

• We will discuss applets in detail in upcoming
  classes. This example is included just to show
  how the pieces fit together, not to show how to
  program applets.
• Example is a simple HTML page containing a simple
  applet to draw a red circle
• Suppose this belongs to a student whose netid is
  superman.

14
Simple applet example (cont.)

• File Redcircle.java
• Redcircle.class is placed in appletcode directory.

import java.awt. import java.applet. public
class Redcircle extends Applet public void
paint (Graphics g) g.setColor(Color.red)
g.drawOval(0,0,50,50)
15
Simple applet example (cont.)

• File index.html

ltHTMLgtlttitlegtSuperman lt/titlegt ltBODYgtltH2gtSupermanlt
/H2gtltHRgt lth2gtAppletslt/h2gt ltPgt Well, really just
one applet ltAPPLET CODE"Redcircle.class"
CODEBASE"appletcode" WIDTH55
HEIGHT55gt lt/APPLETgt ltPgtHope you liked
it! lt/BODYgtlt/HTMLgt
16
Simple applet example (cont.)

• index.html placed in public_html (with correct
  permissions).
• Accessing www.cs.bham.ac.uk/superman from
  anywhere yields

17
Simple applet example (cont.)
18
Writing applets

• The general form of an applet is

import java.applet. import java.awt. public
class appletname extends Applet public void
init () ... public void paint
(Graphics g) ... ... other methods
...
Usually present
19
init and paint methods

• Most applets have these two methods (at least)
• init initializes instance variables (see below).
• paint performs graphics operations to draw shapes
  in the applets window
• Called when applet is first displayed, and
  whenever it is re-displayed.
• The Graphics objects is used to do the drawing

20
The graphics coordinate system

• Keep in mind that the graphics coordinate system
  is upside-down - the lower the location on the
  screen, the higher the y value. The upper left
  corner is (0,0).
• The applet window is of limited size. Anything
  drawn outside of it will simply be clipped
  (without warning).

21
Drawing operations

• The Graphics class defines numerous instance
  methods
• drawLine(int x0, int y0, int x1, int y1) - draw
  a line from (x0,y0) to (x1,y1)
• drawRect(int x0, int y0, int width, int height)
  - draw a width x height box, with upper left
  corner at (x0,y0)
• fillRect(int x0, int y0, int width, int height)
  - same as drawRect, but filled

22
Drawing operations (cont.)

• drawOval(int x0, int y0, int width, int height)
  - draw an oval inscribed in the rectangle
  described above
• fillOval(int x0, int y0, int width, int height)
  - similarly
• drawString(String s, int x0, int y0) - draw s
  with its bottom-left corner at (x0,y0)

23
Example drawing a LineList

• When the paint method is called with a Graphics
  object, it can call other methods. The Graphics
  object can be used to draw in the applet window.
• Draw a LineList in a Graphics object

static void drawLineList (LineList L, Graphics g)
if (!L.empty()) Line ln L.hd()
g.drawLine(ln.x0(), ln.y0(), ln.x1(), ln.y1())
drawLineList(L.tl(), g)