|
Sample programs. Paste these into notepad and save them as junk.html to the desktop. Double click on the desktop icon to run them. Tweak them to see what they do.. See if you can incorporate some of the stuff into your About Me or Form Letter Programs
<html>
<head>
<title>Style Sheets</title>
<!-- this begins the style sheet section -->
<style type = "text/css">
em { background-color: #8000ff;
color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }
</style>
</head>
<body>
<body>
<!-- this class attribute applies the .blue style -->
<h1 class = "special">Deitel & Associates, Inc.</h1>
<p>Deitel & Associates, Inc. is an internationally
recognized corporate training and publishing organization
specializing in programming languages, Internet/World
Wide Web technology and object technology education.
Deitel & Associates, Inc. is a member of the World Wide
Web Consortium. The company provides courses on Java,
C++, Visual Basic, C, Internet and World Wide Web
programming, and Object Technology.</p>
<h1>Clients</h1>
<p class = "special"> The company's clients include many
<em>Fortune 1000 companies</em>, government agencies,
branches of the military and business organizations.
Through its publishing partnership with Prentice Hall,
Deitel & Associates, Inc. publishes leading-edge
programming textbooks, professional books, interactive
CD-ROM-based multimedia Cyber Classrooms, satellite
courses and World Wide Web courses.</p>
</body>
</body>
</html>
Extensions:
1. Change background color, text color, font
2. Add a new block for what to do for an h2 tag
<html>
<!-- Fig. 7.2: welcome2.html -->
<!-- Printing a Line with Multiple Statements -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Printing a Line with Multiple Statements</title>
<script type = "text/javascript">
<!--
document.write( "<h1 style = \"color: magenta\">" );
document.write( "Welcome to JavaScript " +
"Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
Extensions: Change the color of the text. Change to an h2 tag. Change the content of what is displayed.
<html>
<!-- Fig. 7.3: welcome3.html -->
<!-- Printing Multiple Lines -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>Printing Multiple Lines</title>
<script type = "text/javascript">
<!--
document.writeln( "<h1>Welcome to<br />JavaScript" +
"<br />Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
Extensions: Describe how to put text on several lines using JavaScript. Try making a 4 line output, with EACH word on a separate line. Compare .write with .writeln with <br>
<html>
<!-- Fig. 7.4: welcome4.html -->
<!-- Printing multiple lines in a dialog box -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>Printing Multiple Lines in a Dialog Box</title>
<script type = "text/javascript">
<!--
window.alert( "Welcome to\nJavaScript\nProgramming!" );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
Extensions: Take one of the \n characters out. Try some of the other escape sequences described on page 202 in your text.
|
