Faculty of Information Technology and Multimedia Communication

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 : mdhussainabdullah@gmail.com
LEARNING CENTRE : OUM, Petaling Jaya
CBWP2203
TABLE OF CONTENTS
Page
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
CBWP2203
Message 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
CBWP2203
15
CBWP2203
1. ASSIGNMENT.HTML
16
CBWP2203
2. COURSE_INFO.HTML
17
CBWP2203
3. CONTROLS.HTML
18
CBWP2203
4. DISPLAY.HTML
19
CBWP2203
5. HTMLJAVASCRIPT.HTML
20
CBWP2203
6. 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

Faculty of Information Technology and Multimedia Communication

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Faculty of Information Technology and Multimedia Communication

Uploaded by

Copyright:

Available Formats

CBWP2203

Faculty of Information Technology and Multimedia Communication

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

SCREENSHOT OF COMPLETE WEB USING INTERNET EXPLORER

All option checked and “Process” button clicked.

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

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

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

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

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

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

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

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

You might also like