web programming
Post on 30-Jun-2015
201 Views
Preview:
TRANSCRIPT
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
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>
<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 & 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 & 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
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
top related