Scribd
Upload
117 views

Faculty of Information Technology and Multimedia Communication

This document provides code samples and screenshots demonstrating features of HTML, JavaScript, and VBScript. It includes the code for 6 webpages: Assignment.html, Course_Info.html, Controls.html, Display.html, HTMLJavaScript.html, and VBScript.html. Screenshots are provided to validate that the code samples function as intended when viewed in a web browser.

Uploaded by

Mohd Hussain Abdullah
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
117 views

Faculty of Information Technology and Multimedia Communication

This document provides code samples and screenshots demonstrating features of HTML, JavaScript, and VBScript. It includes the code for 6 webpages: Assignment.html, Course_Info.html, Controls.html, Display.html, HTMLJavaScript.html, and VBScript.html. Screenshots are provided to validate that the code samples function as intended when viewed in a web browser.

Uploaded by

Mohd Hussain Abdullah
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

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

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page For Left Frame (controls.html)</title>
</head>
<body bgcolor="skyblue">
<form action="#">
<input type="button" value="HTML &amp; 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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>
<body bgcolor="lavender">
<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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Date &amp; Time</title>
</head>
<body bgcolor="lavender">
<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">
<!--
timeForm.showTime.value = (Date() & Space(1) & Time())
Sub buttonTime_OnClick
timeForm.showTime.value = (Date() & Space(1) & Time())
End Sub
-->
</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

You might also like