25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 1 Class 9 - HTML r Creating a personal web page r...

25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 1

Class 9 - HTML

Creating a personal web pageStructure of HTML documentsHTML tagsThe APPLET tag


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.


Creating a personal web pageUse text editor to create file index.html

containing HTML documentPlace 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


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)


Structure of HTML documents

<HTML><TITLE> ... stuff ... </TITLE><BODY>

... lots of stuff ...

</BODY></HTML>

title of browserwindow

contents of browserwindow


Structure of HTML documents (cont.)

“Stuff” consists of text and tagsMatching 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 ...

“Level 1 heading” -displays in large font

“Paragraph” tagleaves space -matching </P> isoptional


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)


LinksLinks created using <A> tags with HREF attribute:

E.g.

<A HREF=“...url...”> text </A>

highlighted in browser -click to follow link

<P>My favorite class is<A HREF=“http://www.cs.bham.ac.uk/courses/java/fyw”>SEM107</A>!


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

images can bestored in sub-directory


HTML ResourcesLots of books on HTMLOn-line tutorials. (E.g. in Yahoo, search for “beginner’s html”)Use “view source” in browsersObtaining graphics

“Download image to disk” in browser Free graphics from many sites, e.g. www.thefreesite.com


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.


The APPLET tag

Place all class files in a subdirectory, say appletcode.

<APPLET CODE=“appletname.class” CODEBASE=“appletcode” HEIGHT = 400 WIDTH = 300></APPLET>

mandatory

stuff in here will bedisplayed if browser isnot Java-equipped


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.


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



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 HEIGHT=55></APPLET>

<P>Hope you liked it!</BODY></HTML>



index.html placed in public_html (with correct permissions).

Accessing www.cs.bham.ac.uk/~superman from anywhere yields:


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

Usuallypresent


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


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


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


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)


Example: drawing a LineListWhen 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/00SEM107 - © Kamin & ReddyClass 9 - HTML - 1 Class 9 - HTML r Creating a personal web page r...

Documents

Transcript of 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 1 Class 9 - HTML r Creating a personal web page r...