<TITLE> HTML Basics</TITLE>

HTML + CSS

Sample Coding

doc1.htm

<HTML>

<HEAD>

<TITLE> HTML Basics</TITLE>

</HEAD>

<CENTER<IMG SRC = "duke_swinging.gif" width="64" height="64" </CENTER>

<H2 align= "center"> Welcome!</H2>

<P<B>I cause a blank line after me and my letters are bold.</B</P>

Now I will break in the line without a blank line after me<BR>

<I> I look like forward movement. Italics </I>

</BODY>

</HTML>

doc2.htm

<OL>

<LI>Numbered or

<LI>Ordered

<LI>List

</OL>

<UL<LI> Unnumbered List:

<UL<LI>Vermont

<LI>New Hampshire</UL>

<LI> Nested Bullets:

<UL<LI>Michigan

<LI>Indiana</UL>

</UL>

<PRE>My text stays as it is typed.

I don’t interpret program code. #!/bin/csh

cd $SCR

I can't display HTML code</PRE>

<XMP> I display HTML code on a HomePage<HTML<HEAD>

<a href="http://cnn.com">Click here for news ...</a>

Fizzics2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

html

head

<title>New Advances in Physics</title

</head

body

h1>New Advances in Physics</h1

h2>Turning Gold into Lead</h2

In a startling breakthrough, scientist B.O. "Gus" Fizzics

has invented a <strong>practical</strong> technique for

transmutation! For more details, please see

a HREF="give-us-your-gold.html">our transmutation thesis</a>.

h2>Perpetual Inactivity Machine</h2

In a radical approach that turned traditional attempts to

develop perpetual motion machines on their heads, Prof.

Fizzics has developed a verified, bona fide perpetual

strong>inaction</strong> machine. To purchase your own for

only $99.00 (plus $43.29 shipping and handling), please see

a HREF="rock.html">our order form</a>.

</body

</html

Fizzics.css

H1 { text-align: center;

font-family: Blackout }

H2 { font-family: MeppDisplayShadow }

STRONG { text-decoration: underline }

Cabinets.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

html

head

<title>Joe's Cabinets</title

</head

body

center

table WIDTH=360 HEIGHT=199

<trtd ALIGN="CENTER" CLASS="banner">Joe's Cabinets

</table

</center

Welcome to Joe's Cabinets. We specialize in

<li>Custom Cabinets

<li>Kitchen Remodeling

</ul

</body

</html

Cabinets.css

.banner { background: url(images/boards.jpg) repeat-x;

font-size: 50pt;

font-family: Arial Rounded MT Bold }

Bates.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

html

head

<title>An Open Letter to the IRS</title

</head

body BACKGROUND="images/bond-paper.jpg"

p CLASS="rhead"

April 1, 2001

p CLASS="rhead"

William A. Bates<br

Macrosoft Corporation<br

Blumond, WA 12345

p CLASS="lhead"

Internal Revenue Service<br

Philadelphia, PA 67890

Dear Sirs,

p CLASS="body"

I am writing to inform you that, due to financial difficulties,

I will be unable to pay my taxes this year.

p CLASS="body"

You see, my company has had reduced profits this year. In fact

gross revenues have now dropped below the GDP of <b>twelve</b>

foreign countries! Given this intolerable situation, I am sure

you will understand.

p CLASS="foot"

Sincerely,<br

William A. Bates

</body

</html

Bates.css

P { margin-top: 5px }

P.rhead { text-align: right;

margin-right: 0.5in;

font-family: sans-serif }

P.lhead { font-family: sans-serif }

P.body { text-align: justify;

text-indent: 0.5in }

P.foot { margin-left: 60%;

line-height: 300% }

JavaScript Programs

Hello

<HTML>

<HEAD>

// This is a comment in JavaScript

document.write("<h1>Hello folks!</h1>");

</SCRIPT>

</HEAD>

<BODY>

Welcome to this class!

</BODY>

</HTML>

For in Loop

<HTML>

<HEAD>

for (var i in window) {

document.write (i + "<BR>")

}

</script>

</HEAD>

</HTML>

Arguments & Parameters

<HEAD>

<!-- to hide script contents from old browsers

function square(i) {

document.write("The call passed ", i ," to the function.","<BR>")

return i * i

}

document.write("The function returned ",square(8),".")

// end hiding contents from old browsers -->

</SCRIPT>

</HEAD>

<BODY>

<BR>

All done.

</BODY>

Convert to Upper Case (onChange)

function convertField(field) {

if (document.form1.convertUpper.checked) {

field.value = field.value.toUpperCase()}

}

function convertAllFields() {

document.form1.lastName.value = document.form1.lastName.value.toUpperCase()

document.form1.firstName.value = document.form1.firstName.value.toUpperCase()

}

</SCRIPT>

<BR<B>First name:</B>

<P<INPUT TYPE="checkBox" NAME="convertUpper"

onClick="if (this.checked) {convertAllFields()}"> Convert fields to upper case

</FORM>

Hidden object

<P<INPUT TYPE="button" VALUE="Click me" NAME="button1"

onclick="document.form1.hiddenObject.value=this.value">

<P<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"

onClick="document.form1.hiddenObject.value=this.value"> Jazz

<P<INPUT TYPE="button" VALUE="Display hidden value" NAME="button2" onClick="alert('Last object clicked: ' + document.form1.hiddenObject.value)">

</FORM>

Radio Buttons

<INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"

onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul and R&B<br>

<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"

onClick="musicForm.catalog.value = 'jazz'"> Jazz<br>

<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"

onClick="musicForm.catalog.value = 'classical'"> Classical<br>

<BR> Selected Music:

</form>

Radio Buttons with CGI submit

<INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"

onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul and R&B<br>

<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"

onClick="musicForm.catalog.value = 'jazz'"> Jazz<br>

<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"

onClick="musicForm.catalog.value = 'classical'"> Classical<br>

<BR> Selected Music:

</form>

Submit Confirmation

// With JavaScript, can get the user the confirm before submitting a form.

function submitMe(form) {

if (confirm("Are you sure you want to submit this form?"))

return (true)

else

return (false)

}

</SCRIPT>

</form>

Selection List

// Displays a selection list and a scrolling list. Then shows the selections.

function testSelect(form) {

index = form.music_type_single.selectedIndex

alert(form.music_type_single.options[index].text+" and "+

form.music_type_multi.selectedIndex)

}

</SCRIPT>

<form>

Choose the music type for your free CD:

<OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues

</SELECT>

<P>Choose the music types for your free CDs:

<BR<SELECT NAME="music_type_multi" MULTIPLE>

<OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues

</SELECT>

<P<INPUT TYPE="BUTTON" NAME="Button" VALUE="ClickMe"

onClick="testSelect(this.form)">

</form>

Text Selection

creates a text object that is 25 characters long. The text field appears immediately to the right of the words "Last name:". The text field is blank when the form loads.

<p>

<form>

</form>

<p>

creates two text objects on a form. Each object has a default value. The city object has an onFocus event handler that selects all the text in the field when the user tabs to that field. The state object has an onChange event handler that forces the value to upper case.

<BR<B>City: </B<INPUT TYPE="text" NAME="city" VALUE="Anchorage"

SIZE="20" onFocus="this.select()">

<B>State: </B<INPUT TYPE="text" NAME="state" VALUE="AK" SIZE="2"

onChange="this.value=this.value.toUpperCase()">

</FORM>

Windows Manipulation

<HTML>

<HEAD>

<TITLE>Window object example: Window 1</TITLE>

</HEAD>

window2=open('win2.htm','secondWindow','scrollbars=yes,width=250,height=400')

document.writeln("<B>The first window has no name: " + window.name + "</B>")

document.writeln("<BR<B>The second window is named: " + window2.name + "</B>")

</SCRIPT>

<P<INPUT TYPE="button" VALUE="Open a message window"

onClick="window3=window.open('','messageWindow','scrollbars=yes,width=175,height=300')">

<P<INPUT TYPE="button" VALUE="Write to the message window"

onClick="window3.document.writeln('Hey there');window3.document.close()">

<P<INPUT TYPE="button" VALUE="Close the message window"

onClick="window3.close()">

<P<INPUT TYPE="button" VALUE="Close window2"

onClick="window2.close()">

</FORM>

</BODY>

</HTML>

Event Handler (onBlur)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>A Literary Exercise</TITLE>

<!--

function hasE() {

var thestr = document.myform.mytarea.value;

var uthestr = thestr.toLowerCase();

if ( uthestr == "" ) {

return;

}

if ( uthestr.indexOf("e") >= 0 ) {

alert("Alors! You've got an E in there!");

} else {

if ( uthestr.length <= 20 ) {

alert("Nice try, but too brief");

} else {

alert("Congratulations");

}

</SCRIPT>

</HEAD>

<BODY>

<P>The novel <I>A Void</I> does not contain a single "e".<BR>

Can you create a sentence without one?</P>

<P<HR>

</FORM>

<HR</P>

</BODY>

</HTML>

Simple Validation (Empty & E-mail fields)

<html>

<head>

<!-- Hide

function test1(form) {

if (form.text1.value == "")

alert("Please enter a string!")

else {

alert("Hi "+form.text1.value+"! Form input ok!");

}

function test2(form) {

if (form.text2.value == "" ||

form.text2.value.indexOf('@') == -1)

alert("No valid e-mail address!");

else alert("OK!");

}

// -->

</script>

</head>

<body>

Enter your name:<br>

<P>

Enter your e-mail address:<br>

</body>

Simple Validation (Range)

<HTML>

<HEAD>

<TITLE>A Simple Form Validation Example</TITLE>

<!--

function checkit() {

var strval = document.myform.mytext.value;

var intval = parseInt(strval);

if ( intval > 0 & intval < 10 ) {

return(true);

} else {

alert("Input value " + strval + " is out of range");

return(false);

}

</SCRIPT>

</HEAD>

<BODY>

<P>

<HR<FORM NAME="myform" onSubmit="checkit()"</P>

<P>Enter a number between 1 and 9: <INPUT TYPE="text" NAME="mytext" VALUE="" SIZE="10"</P>

<P<BR>

<HR</P>

</BODY>

</HTML>

Simple Clock

<HTML>

<HEAD>

<TITLE>JavaScript Clock</TITLE>

<!-- Hide me from other browsers

// Netscapes Clock - Start

// this code was taken from Netscapes JavaScript documentation at

// www.netscape.com on Jan.25.96

var timerID = null;

var timerRunning = false;

function stopclock (){

if(timerRunning)

clearTimeout(timerID);

timerRunning = false;

}

function startclock () {

// Make sure the clock is stopped

stopclock();

showtime();

}

function showtime () {

var now = new Date();

var hours = now.getHours();

var minutes = now.getMinutes();

var seconds = now.getSeconds()

var timeValue = "" + ((hours >12) ? hours -12 :hours)

timeValue += ((minutes < 10) ? ":0" : ":") + minutes

timeValue += ((seconds < 10) ? ":0" : ":") + seconds

timeValue += (hours >= 12) ? " P.M." : " A.M."

document.clock.face.value = timeValue;

// you could replace the above with this

// and have a clock on the status bar:

// window.status = timeValue;

timerID = setTimeout("showtime()",1000);

timerRunning = true;

}

// Netscapes Clock - Stop -->

</SCRIPT>

</HEAD>

<H1>Now you can add a clock to your pages!</H1>

</BODY>

</HTML>

SRC = *.js property

<HTML>

<HEAD>

<TITLE>Using JavaScript SRC = *.JS Extension</TITLE>

</HEAD>

<CENTER<P<B<FONT COLOR="#ff0000">

</SCRIPT>

</BODY>

</HTML>

Cookie

<HTML>

<HEAD>

<TITLE>Widgets "R" Us</TITLE>

<!--

// Read last name, first name, and account number

// from textfields and store as cookies

function storeCookies() {

var expires =

"; expires=Friday, 31-Dec-99 23:59:59 GMT";

var first = document.widgetForm.firstField.value;

var last = document.widgetForm.lastField.value;

var account = document.widgetForm.accountField.value;

document.cookie = "first=" + first + expires;

document.cookie = "last=" + last + expires;

document.cookie = "account=" + account + expires;

}

// Store cookies and give user confirmation

function registerAccount() {

storeCookies();

alert("Registration Successful.");

}

// This does not distinguish an empty cookie

// from no cookie at all, since it doesn't matter here.

function cookieVal(cookieName, cookieString) {

var startLoc = cookieString.indexOf(cookieName);

if (startLoc == -1)

return(""); // No such cookie

var sepLoc = cookieString.indexOf("=", startLoc);

var endLoc = cookieString.indexOf(";", startLoc);

if (endLoc == -1) // Last one has no ";"

endLoc = cookieString.length;

return(cookieString.substring(sepLoc+1, endLoc));

}

// If cookie values for name or account exist,

// fill in textfields with them.

function presetValues() {

var firstField = document.widgetForm.firstField;

var lastField = document.widgetForm.lastField;

var accountField = document.widgetForm.accountField;

var cookies = document.cookie;

firstField.value = cookieVal("first", cookies);

lastField.value = cookieVal("last", cookies);

accountField.value = cookieVal("account", cookies);

}

// -->

</SCRIPT>

</HEAD>

<H1>Widgets "R" Us</H1>

<FORM ACTION="cgi-bin/widgets"

NAME="widgetForm"

onSubmit="storeCookies()">

First Name: <INPUT TYPE="TEXT" NAME="firstField">

<BR>

Last Name: <INPUT TYPE="TEXT" NAME="lastField">

<BR>

Account Number: <INPUT TYPE="TEXT" NAME="accountField">

<BR>

Widget Name: <INPUT TYPE="TEXT" NAME="widgetField">

<BR>

<INPUT TYPE="BUTTON" VALUE="Register Account"

onClick="registerAccount()">

</FORM>

</BODY>

</HTML>

Illustrating the concept of Abstract Classes

(Account, SavingsAccount, and TestAccountSystem)

/**

* Abstract class Account - write a description of the class here

* @author (your name here)

* @version (version number or date here)

public abstract class Account

{

// instance variables

String accountHolder;

int balance;

public Account (String accountHolder, int balance) {

this.accountHolder = accountHolder;

this.balance = balance;

}

public abstract void deposit(int amountToBeDeposited);

public abstract int withdraw(int amountToBeWithdrawn);

public void print() {

System.out.println("accountHolder = " + accountHolder);

System.out.println("balance = " + balance);

}

/**

* Write a description of class SavingsAccount here.

* @author (your name)

* @version (a version number or a date)

public class SavingsAccount extends Account

{

float interestRate;

public SavingsAccount (String accountHolder, int balance, float interestRate) {

super(accountHolder, balance);

this.interestRate = interestRate;

}

public void deposit (int amountToBeDeposited)

{

balance += amountToBeDeposited;

}

public int withdraw (int amountToBeWithdrawn)

{

balance -= amountToBeWithdrawn; // pretend that we always have enough fund

return 0; // always succeed, i.e., status of 0

}

public void print() {

super.print();

System.out.println("interestRate = " + interestRate);

}

/**

* Write a description of class TestAccountSystem here.

* @author (your name)

* @version (a version number or a date)

public class TestAccountSystem

{

public static void main (String args[]) {

//Account acct = new Account("Billy", 1000); //will cause error

SavingsAccount acct = new SavingsAccount("Billy", 1000, 0.03f);

System.out.println("The state of the acct object:");

acct.print();

acct.withdraw(2000); // balance is now -$1000

acct.deposit(80000000); // won the lottery $80 millions

System.out.println("The state of the acct object:");

acct.print();

}

// output:

// The state of the acct object:

&lt;TITLE&gt; HTML Basics&lt;/TITLE&gt;

Cookie

<TITLE> HTML Basics</TITLE>