1 / 23

Class 9 - HTML

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.

ashtyn
Download Presentation

Class 9 - HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  5. Structure of HTML documents <HTML> <TITLE> ... stuff ... </TITLE> <BODY> ... lots of stuff ... </BODY> </HTML> 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 <H1> Big title </H1> <P> When in the course of ... <P> Four score and seven ... “Paragraph” tag leaves space - matching </P> is optional

  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)

  8. Links Links 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>!

  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 be stored in sub- directory

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

  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. <APPLET CODE=“appletname.class” CODEBASE=“appletcode” HEIGHT = 400 WIDTH = 300> </APPLET> 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: <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>

  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 applet’s 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); } }

More Related