web programming

CBWP2203

Faculty of Information Technology and Multimedia Communication

January 2011

CBWP2203

Web Programming

MATRICULATION NO : 800717126061001

IDENTITY CARD NO. : 800717-12-6061

TELEPHONE NO. : 014-3343554

E-MAIL : [email protected]

LEARNING CENTRE : OUM, Petaling Jaya

CBWP2203

TABLE OF CONTENTS

P age

HYPERTEXT MARKUP LANGUAGE (HTML)………………………………………… 2

SCREENSHOT OF COMPLETE WEB USING INTERNET EXPLORER……………... 2

1. MAIN PAGE……………………………………………………………………….. 2

2. JAVASCRIPT IN ACTION………………………………………………………... 3

3. VBSCRIPT IN ACTION…………………………………………………………… 5

HTML CODES…………………………………………………………………………….. 5

1. ASSIGNMENT.HTML…………………………………………………………….. 6

2. COURSE_INFO.HTML…………………………………………………………… 7

3. CONTROLS.HTML……………………………………………………………….. 8

4. DISPLAY.HTML………………………………………………………………….. 9

5. HTMLJAVASCRIPT.HTML……………………………………………………… 10

6. VBSCRIPT.HTML………………………………………………………………… 13

SCREENSHOT VALIDATION………………………………………………………….. 14

1. ASSIGNMENT.HTML…………………………………………………………….. 15

2. COURSE_INFO.HTML…………………………………………………………… 16

3. CONTROLS.HTML……………………………………………………………….. 17

4. DISPLAY.HTML………………………………………………………………….. 18

5. HTMLJAVASCRIPT.HTML……………………………………………………… 19

6. VBSCRIPT.HTML………………………………………………………………… 20

REFERENCES…………………………………………………………………………… 21

1

CBWP2203

HYPERTEXT MARKUP LANGUAGE (HTML)

HTML is set of specifications that can be used to define the elements of hypertext

document. Web browser like an Internet Explorer act as platform to interpret it in correct

form.

Below page are screenshot of HTML document in form of frameset and using Internet

Explorer as web browser. The next page showing some function when embedded with

javascript and vbscript.

SCREENSHOT OF COMPLETE WEB USING INTERNET EXPLORER

1. MAIN PAGE

2

CBWP2203

2. JAVASCRIPT IN ACTION

Valid email address displayed when correct format email inserted and “Validate” button

clicked.

Invalid email address displayed when incorrect email format inserted and “Validate” button

clicked.

3

CBWP2203Message showed when option checked and “Process” button clicked.

All option checked and “Process” button clicked.

4

CBWP2203

3. VBSCRIPT IN ACTION

Vbscript showed time updated when “Update Time” button clicked.

HTML CODES

The next page are all files which written in HTML codes. All HTML codes are written in

accordance with Extensible Hypertext Markup Language (XHTML) standard.

All related files then validated using validation service to ensure all HTML codes follows the

XHTML standard at http://validator.w3.org.

5

CBWP2203

1. ASSIGNMENT.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> Frameset Example (assignment.html)</title>

</head>

<frameset rows="20%,80%" >

<frame src="course_info.html"/>

<frameset cols = "25%,75%">

<frame src ="controls.html" name="control"/>

<frame src ="display.html" name="display"/>

</frameset>

</frameset>

</html>

6

CBWP2203

2. COURSE INFO.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<title>Page for Top Frame (course_info.html)</title>

</head>

<body bgcolor="floralwhite">

<img align="left" border="0" src="oum.png" width="441" height="73"

alt="oum logo" />

<p align="right">

<b><font face="Tahoma" style="size:14pt" color="black" >

<br />CWBP2203 January 2011

<br />Assignment

<br />Submitted by: Mohd Hussain bin Abdullah

<br />Matric No: 800717126061001

</font></b>

</p>

</body>

</html>

7

CBWP2203

3. CONTROLS.HTML




<head>


<title>Page For Left Frame (controls.html)</title>

</head>

<body bgcolor="skyblue">

<form action="#">

<input type="button" value="HTML & JavaScript Example"

onclick="parent.display.location='htmljavascript.html'" />

<hr />

<input type="button" value="VisualBasic Example"

onclick="parent.display.location='vbscript.html'" />

<hr />

<input type="button" value="Back To Main Page"

onclick="parent.display.location='display.html'" />

<hr />

</form>

</body>

</html>

8

CBWP2203

4. DISPLAY.HTML




<head>


<title>Page For Main Display (display.html)</title>

</head>

<body bgcolor="lavender">

<h2 align="center"><font face="Arial" color="blue">Welcome to my webpage for<br />

CBWP2203 Assignment<br />

January 2011</font></h2>

<p align="center"><b><font face="Arial" style="size:20pt" color="black" >

This assignment demonstrates some of the features of HTML, JavaScript and<br />

VBScript.<br />

Click on the appropriate button<br />

on the left to look at the examples.</font></b></p>

</body>

</html>

9

CBWP2203

5. HTMLJAVASCRIPT.HTML




<head>


<title>HTML & Javascript </title>

<script type="text/javascript">

/*<![CDATA[*/

function validateForm()

{

var x=document.forms["myForm"]["email"].value

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

{

alert("You have entered invalid email address!");

return false;

}

if (atpos>1 && dotpos>atpos)

{

alert("Valid email address!");

return false;

}

}

//-----------for checkbox function-----------

function submitOrder()

10

CBWP2203 {

var alertString = String("You are interested in: ");

if((document.orderForm.programmesCB.checked == false) &&

(document.orderForm.coursesCB.checked == false) &&

(document.orderForm.campusCB.checked == false))

{

alert ("No option selected!");

return true;

}

if(document.orderForm.programmesCB.checked == true)

alertString += " Programmes Offered, ";

if(document.orderForm.coursesCB.checked == true)

alertString += " Short Courses, ";

if(document.orderForm.campusCB.checked == true)

alertString += " Visiting Your Campus ";

alert(alertString);

}

/*]]>*/

</script>

</head>


<form name="myForm" onsubmit="return validateForm();" method="post" action="#">

<table border="0" width="400">

<tr>

<td width="100">Name:</td><td><input type="text" name="name" size="25" /></td>

</tr>

<tr>

<td width="100">Email Address:</td><td><input type="text" name="email" size="25"

/><input type="submit" value="Validate" /></td>

</tr>

11

CBWP2203 </table>

</form>

<br />

<form name="orderForm" onsubmit="return submitOrder();" method="post" action="#">

How can we help you?<br />

<input type="checkbox" value="programmes" name="programmesCB" />I'm interested in

your programmes offered.<br />

<input type="checkbox" value="courses" name="coursesCB" />I'm interested in short

courses.<br />

<input type="checkbox" value="campus" name="campusCB" />I'm interested in visiting

your campus.<br />

<br />

<input type="button" value="Process" onclick="submitOrder()" />

</form>

</body>

</html>

12

CBWP2203

6. VBSCRIPT.HTML




<head>


<title>Date & Time</title>

</head>


<center>

<h3> This is just an example of what VBScript can do </h3>

<form name="timeForm" action="#">

<input type="text" name="showTime" />

<input type="button" value="Update Time" name="buttonTime" />

</form>

</center>

<script type="text/vbscript">



</script>

</body>

</html>

13

CBWP2203

SCREENSHOT VALIDATION

The validation page was done by using validator at http://validator.w3.org/. The process

made for all related files as follows:

1. assignment.html

2. course_info.html

3. controls.html

4. display.html

5. htmljavascript.html

6. vbscript.html

All files successfully validate as per XHTML standard. Validation screenshot attached for

reference. See next page for all related files screenshot.

14

http://validator.w3.org/

CBWP2203

15

CBWP22031. ASSIGNMENT.HTML

16

CBWP22032. COURSE_INFO.HTML

17

CBWP22033. CONTROLS.HTML

18

CBWP22034. DISPLAY.HTML

19

CBWP22035. HTMLJAVASCRIPT.HTML

20

CBWP22036. VBSCRIPT.HTML

21

CBWP2203

REFERENCES

Checkbox.(2011).[Online]. Available: http://www.java2s.com/Tutorial/JavaScript/0200__

Form/Checkbox.htm [2011, February 17].

Help and FAQ for the Markup Validator (2011).[Online]. Available: http://validator.w3.

org/docs/help.html [2011, March 3].

HTML 4.01 / XHTML 1.0 Reference (2011).[Online]. Available:http://www.w3schools.

com/TAGS/ref_byfunc.asp [2011, February 8].

Malaysia. Faculty of Information Technology and Multimedia Communication. Open

University Malaysia. (2011). Module CBWP2203 Web Programming. Open

University Malaysia.

Recommended Doctype Declarations to use in your Web document. (2011).[Online].

Available: http://www.w3.org/QA/2002/04/valid-dtd-list.html [2011, February 5].

Target a frame using <iframe> (2011).[Online]. Available: http://www.dynamicdrive.com

/forums/archive/index.php/t-235.html [2011, February 7].

The Form and its Web Controls.(2011).[Online]. Available:http://www.functionx.com/

vbscript/Lesson03.htm [2011, February 10].

22

web programming

Documents

cbwp2203 assignment

cbwp2203 message

cbwp2203 referencescheckbox

cbwp2203 screenshot

cbwp2203 var alertstring

validation page

html codes

html document