class 9 - html
DESCRIPTION
Class 9 - HTML. Creating a personal web page Structure of HTML documents HTML tags The 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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/1.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 1
Class 9 - HTML
Creating a personal web pageStructure of HTML documentsHTML tagsThe APPLET tag
![Page 2: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/2.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 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.
![Page 3: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/3.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 3
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
![Page 4: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/4.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 4
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)
![Page 5: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/5.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 5
Structure of HTML documents
<HTML><TITLE> ... stuff ... </TITLE><BODY>
... lots of stuff ...
</BODY></HTML>
title of browserwindow
contents of browserwindow
![Page 6: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/6.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 6
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
![Page 7: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/7.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 7
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)
![Page 8: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/8.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 8
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>!
![Page 9: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/9.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 9
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
![Page 10: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/10.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 10
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
![Page 11: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/11.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 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.
![Page 12: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/12.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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></APPLET>
mandatory
stuff in here will bedisplayed if browser isnot Java-equipped
![Page 13: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/13.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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.
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.
![Page 14: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/14.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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); }}
![Page 15: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/15.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 15
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 HEIGHT=55></APPLET>
<P>Hope you liked it!</BODY></HTML>
![Page 16: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/16.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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:
![Page 17: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/17.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 17
Simple applet example (cont.)
![Page 18: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/18.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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 ...}
Usuallypresent
![Page 19: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/19.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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 Called when applet is first displayed, and
whenever it is re-displayed. The Graphics objects is used to do the
drawing
![Page 20: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/20.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 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).
![Page 21: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/21.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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
![Page 22: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/22.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 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)
![Page 23: Class 9 - HTML](https://reader034.vdocuments.site/reader034/viewer/2022050711/56813ede550346895da952d0/html5/thumbnails/23.jpg)
25/2/00 SEM107 - © Kamin & Reddy Class 9 - HTML - 23
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); }}