Transcript PowerPoint
Class 9 - HTML
Creating a personal web page
Structure of HTML documents
HTML tags
The APPLET tag
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 1
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.
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 2
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 16:57 index.html
see www.uiuc.edu, “web publishing” link for
details.
URL for your page is
www.cs.bham.ac.uk
/~yournetid
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 3
Overview of HTML
HTML documents are text documents, i.e.
created with text editor (like Java programs)
Contain text and tags:
<tag-name ...attributes...> ... text ... </tag-name>
E.g. Read this <strong>now</strong>!
would show up as: Read this now!
HTML is mostly free-form (lines breaks not
significant)
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 4
Structure of HTML documents
<HTML>
<TITLE> ... stuff ...
</TITLE>
<BODY>
... lots of stuff ...
title of browser
window
contents of browser
window
</BODY>
</HTML>
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 5
Structure of HTML documents
(cont.)
“Stuff” consists of text and tags
Matching tag pairs are nested, like braces or
parentheses in programs
<H1> Big title </H1>
<P>
When in the course of ...
<P>
Four score and seven ...
25/2/00
SEM107 - © Kamin & Reddy
“Level 1 heading” displays in large font
“Paragraph” tag
leaves space matching </P> is
optional
Class 9 - HTML - 6
The <Hi > and <P> tags
<H1>, ..., <H6>: set text in larger fonts for
section headings
H1
is largest heading, H6 smallest
Matching tags should be included
<P>: leave space, i.e. start a new paragraph
Matching
tag optional (usually omitted)
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 7
Links
Links created using <A> tags with HREF
attribute:
<A HREF=“...url...”> text </A>
highlighted in browser click to follow link
E.g.
<P>
My favorite class is
<A HREF=“http://www.cs.bham.ac.uk/courses/java/fyw”>
SEM107</A>!
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 8
Images
In-line GIF and JPEG images included using
IMG tag, with SRC attribute. (Matching tag
usually omitted.)
<IMG SRC=“myface.jpg”>
<IMG SRC=“gifs/blueline.gif”>
... text to be set off by blue lines ...
<IMG SRC=“gifs/blueline.gif”>
25/2/00
SEM107 - © Kamin & Reddy
images can be
stored in subdirectory
Class 9 - HTML - 9
HTML Resources
Lots of books on HTML
On-line tutorials. (E.g. in Yahoo, search for
“beginner’s html”)
Use “view source” in browsers
Obtaining graphics
“Download
image to disk” in browser
Free graphics from many sites, e.g.
www.thefreesite.com
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 10
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.
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 11
The APPLET tag
Place all class files in a subdirectory, say
appletcode.
<APPLET CODE=“appletname.class”
CODEBASE=“appletcode”
HEIGHT = 400
WIDTH = 300>
stuff in here will be
</APPLET>
displayed if browser is
not Java-equipped
mandatory
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 12
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.
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 13
Simple applet example (cont.)
File Redcircle.java:
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);
}
}
Redcircle.class is placed in appletcode
directory.
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 14
Simple applet example (cont.)
File index.html:
<HTML><title>Superman </title>
<BODY><H2>Superman</H2><HR>
<h2>Applets:</h2>
<P> Well, really just one applet:
<APPLET CODE="Redcircle.class"
CODEBASE="appletcode" WIDTH=55
</APPLET>
HEIGHT=55>
<P>Hope you liked it!
</BODY></HTML>
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 15
Simple applet example (cont.)
index.html
placed in public_html (with
correct permissions).
Accessing
www.cs.bham.ac.uk/~superman from
anywhere yields:
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 16
Simple applet example (cont.)
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 17
Writing applets
The general form of an applet is:
import java.applet.*;
import java.awt.*;
public class appletname extends Applet {
public void init () {
Usually
...
}
present
public void paint (Graphics g) {
...
}
... other methods ...
}
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 18
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 applet’s window
Called when applet is first displayed, and
whenever it is re-displayed.
The Graphics objects is used to do the
drawing
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 19
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).
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 20
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
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 21
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)
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 22
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);
}
}
25/2/00
SEM107 - © Kamin & Reddy
Class 9 - HTML - 23