Embed Size (px)
Citation preview
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 11
Chapter 2Chapter 2
HTMLHTMLChapter 2Chapter 2
HTMLHTML
<html>
<head><title>An example HTML document</title></head>
<body><p>Hello world!<p></body>
</html>
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 22
Chapter 2Chapter 2
HTML Document StructureHTML Document StructureChapter 2Chapter 2
HTML Document StructureHTML Document Structure
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 33
Chapter 2Chapter 2
Poorly Structured HTML Poorly Structured HTML DocumentDocument
Chapter 2Chapter 2
Poorly Structured HTML Poorly Structured HTML DocumentDocument
<html><head><title>An example HTML document</title></head><body> <p>Hello world!<p></body></html>
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 44
Chapter 2Chapter 2
HTML Document with JavaScriptHTML Document with JavaScriptChapter 2Chapter 2
HTML Document with JavaScriptHTML Document with JavaScript
<head><title>JavaScript Greeting</title><script type = "text/javascript">//Display a greetingalert("Hello World!");</script></head>
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 55
Chapter 2Chapter 2
HTML Document with JavaScript HTML Document with JavaScript PromptPrompt
Chapter 2Chapter 2
HTML Document with JavaScript HTML Document with JavaScript PromptPrompt
<head><title>JavaScript User Name</title><script type="text/javascript">//initialize a variable with a null valuevar name = null;// Ask user for their namename = prompt("Please enter your first name", " ");//Greet the useralert("Welcome " + name);</script></head>
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 66
Chapter 2Chapter 2
A Java AppletA Java AppletChapter 2Chapter 2
A Java AppletA Java Applet
import java.awt.*;import java.applet.*;
public class Example_Applet extends Applet {
String message;
public void init() {message="My first Java applet";
}
public void paint(Graphics g) {g.setColor(Color.blue);g.drawString(message, 50, 60 );
}}
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 77
The HTML applet TagThe HTML applet TagThe HTML applet TagThe HTML applet Tag
<html>
<head> <title>The Einstein Applet</title> </head>
<body> <applet code="Einstein.class" width=350 height=175> </applet> </body>
</html>
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 88
Drawing a LineDrawing a LineDrawing a LineDrawing a Line
X
Y
10
20
150
45
page.drawLine (10, 20, 150, 45);
page.drawLine (150, 45, 10, 20);
or
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 99
Drawing a RectangleDrawing a RectangleDrawing a RectangleDrawing a Rectangle
X
Y
page.drawRect (50, 20, 100, 40);
50
20
100
40
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 1010
Drawing an OvalDrawing an OvalDrawing an OvalDrawing an Oval
X
Y
page.drawOval (175, 20, 50, 80);
175
20
50
80
boundingrectangle
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 1111
import java.awt.*;import java.awt.*;
import java.applet.*;import java.applet.*;
public class Shapes_Color extends Applet {public class Shapes_Color extends Applet {
public void paint(Graphics g) {public void paint(Graphics g) {
setBackground (Color.darkGray);setBackground (Color.darkGray);
g.setColor(Color.pink);g.setColor(Color.pink);
g.drawRect(50, 50, 40, 40);g.drawRect(50, 50, 40, 40);
g.setColor(Color.blue);g.setColor(Color.blue);
g.fillRect(100, 100, 150, 150);g.fillRect(100, 100, 150, 150);
g.setColor(Color.green);g.setColor(Color.green);
g.drawLine(20, 20, 300, 20);g.drawLine(20, 20, 300, 20);
g.setColor(Color.red);g.setColor(Color.red);
g.fillOval(250, 250, 50, 50);g.fillOval(250, 250, 50, 50);
g.drawArc( 10,10, 50, 30,20,110); g.drawArc( 10,10, 50, 30,20,110);
}}
}}
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 1212
Chapter 2Chapter 2
HTML TagsHTML TagsChapter 2Chapter 2
HTML TagsHTML Tags
Heading Tags: <h1> <h2> <h3> <h4> <h5> <h6>
Horizontal Rule Tag: <hr>can include size and align attributes
Paragraph Tag: <p></p>
Comment Tag: <!--comment-->
List Tags: <ul></ul> bulleted list<ol></ol> numbered list<li></li> item in the list
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 1313
Chapter 2Chapter 2
Hyperlinks, Tables, and ImagesHyperlinks, Tables, and ImagesChapter 2Chapter 2
Hyperlinks, Tables, and ImagesHyperlinks, Tables, and Images
Hyperlink Tag: <a href= "page.htm"></a>
Table Tags: <table></table> table<th></th> table header<tr></tr> table row<td></td> table data cell
The <table> tag can include border, cellpadding, and width attributes
Image Tag: <image src="file name">can include border, alt, height, and and width attributes
© 2007 Lawrenceville Press© 2007 Lawrenceville PressSlide Slide 1414
Chapter 2Chapter 2
Style SheetsStyle SheetsChapter 2Chapter 2
Style SheetsStyle Sheets Used to define the type, paragraph, and page
formats for an HTML document. Gives HTML documents a consistent appearance because they override the browser settings.
Style sheets can include rules and classes, a linked style sheet can include only rules.
Embedded style sheet defined with tag: <style type="test/css"></style>
Linked style sheet is a separate file with a .css extension applied with the tag:<link rel="stylesheet" href "style.css" type="text/css"> </link>
