1. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 1 Class 9 - HTML r Creating a personal web page r Structure of HTML documents r HTML tags r The APPLET tag

2. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 2 HTML r Web pages are text documents with special formatting commands, called tags. r The formatting language is called HTML. r Can view raw HTML by selecting “view source” in browser.

3. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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. r 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

4. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 4 Overview of HTML r HTML documents are text documents, i.e. created with text editor (like Java programs) r Contain text and tags:... text... E.g. Read this now ! would show up as: Read this now! r HTML is mostly free-form (lines breaks not significant)

5. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 5 Structure of HTML documents... stuff...... lots of stuff... title of browser window contents of browser window

6. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 6 Structure of HTML documents (cont.) r “Stuff” consists of text and tags r Matching tag pairs are nested, like braces or parentheses in programs Big title When in the course of... Four score and seven... “Level 1 heading” - displays in large font “Paragraph” tag leaves space - matching is optional

7. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 7 The and tags ,..., : set text in larger fonts for section headings m H1 is largest heading, H6 smallest m Matching tags should be included  : leave space, i.e. start a new paragraph m Matching tag optional (usually omitted)

8. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 8 Links Links created using tags with HREF attribute: E.g. text highlighted in browser - click to follow link My favorite class is SEM107 !

9. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 9 Images  In-line GIF and JPEG images included using IMG tag, with SRC attribute. (Matching tag usually omitted.)... text to be set off by blue lines... images can be stored in sub- directory

10. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 10 HTML Resources r Lots of books on HTML r On-line tutorials. (E.g. in Yahoo, search for “beginner’s html”) r Use “view source” in browsers r Obtaining graphics m “Download image to disk” in browser  Free graphics from many sites, e.g. www.thefreesite.com

11. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 11 Applets  Applets are Java programs. Compile to create.class files. r Applets have a special form, and use parts of the API we have not used before.  Include in HTML document using APPLET tag.

12. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 12 The APPLET tag  Place all class files in a subdirectory, say appletcode. <APPLET CODE=“ appletname.class” CODEBASE=“appletcode” HEIGHT = 400 WIDTH = 300> mandatory stuff in here will be displayed if browser is not Java-equipped

13. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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. r Example is a simple HTML page containing a simple applet to draw a red circle r Suppose this belongs to a student whose netid is superman.

14. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 15 Simple applet example (cont.)  File index.html : Superman Applets: Well, really just one applet: <APPLET CODE="Redcircle.class" CODEBASE="appletcode" WIDTH=55 HEIGHT=55> Hope you liked it!

16. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 17 Simple applet example (cont.)

18. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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 applet’s window r Called when applet is first displayed, and whenever it is re-displayed.  The Graphics objects is used to do the drawing

20. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 20 The graphics coordinate system r 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). r The applet window is of limited size. Anything drawn outside of it will simply be clipped (without warning).

21. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 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. 25/2/00SEM107 - © Kamin & ReddyClass 9 - HTML - 23 Example: drawing a LineList r 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. r 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); }