Page |1
Ch:->1
Program 1
<html>
<head>
<style>
body{
background-color:yellow;
}
p{
font-family:"oldEnglis text MT";
color:purple;
font-size:30px;
text-align:center;
border:3px;
border-style:dotted;
}
h1{
background-color:rad;
color:white;
letter-spacing:6px;
text-align:center;
}
h2{
background-color:blue;
color:yellow;
word-spacing:30px;
}
h3{
background-color:green;
color:white;
direction:r+1;
text-decoration-line:underline;
}
</style>
</head>
<body>
GUBCA mr_faisal_607 coder__333
Page |2
<p>This is my css prectile .I am very happy to do this </p>
<h1>Computer app</h1>
<h2>fy BCA</h2>
<h3>Lockmany group of collage</h3>
</body>
</html>
Program 2
[Link]
<html>
<head>
<title>
External CSS and CLASS
</title>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>
<body>
<h3 class="test">This is my External css program</h3>
<h4 class="test">This is my another tag</h4>
<h2><br>This is my p tag<br><BR></h2>
</body>
</html>
[Link]
.test{
color:red;
text-align:center;
font-size:50px;
}
h2{
background-color:pink;
word-spacing:10px;
color:white;
direction:r+1;
border-radius:50%;
text-align:center;
GUBCA mr_faisal_607 coder__333
Page |3
Program 3
<html>
<head>
<title>
ID in CSS
</title>
<style>
body{
background:url(D:\photo/[Link]);
}
#border{
border-radius:30px;
padding:50px;
border-style:double;
background-color:black;
color:white;
border:10px solid red;
height:250px;
width:150px;
font-size:50px;
}
</style>
</head>
<body>
<p id="border">Hello this is my id selector progam</p>
</body>
</html>
GUBCA mr_faisal_607 coder__333
Page |4
Program 4
<html>
<head>
<title>
program 4
</title>
<style>
body
{
background-color:yellow;
}
p{
font-size:30px;
margin-top:10px;
margin-right:30px;
margin-left:50px;
}
h3{
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>
hello this is my paragraph paractical
</p>
<h3>
This is my another maragin
</h3>
</body>
</html>
GUBCA mr_faisal_607 coder__333
Page |5
Program 5
<html>
<head>
<title>
bg in img
</title>
<style>
body{
background:url([Link]);
background-repeat:no-repeat;
background-position:center;
}
</style>
</head>
<body>
<h1>
This is my background attribute program
</h1>
</body>
</html>
GUBCA mr_faisal_607 coder__333
Page |6
Ch:->2
Program 1
<html>
<head>
<title>
JavaScript first program
</title>
<script type="text/javascript">
[Link]("hello <br>");
[Link]("this is javascript<br>");
</script>
</head>
<body>
</body>
</html>
Program 2
<html>
<head>
<title>
my second program
</title>
<script>
function add()
{
var num1,num2;
num1=Number([Link]("num1").value);
num2=Number([Link]("num2").value);
[Link]("ans").value=num1+num2;
}
</script>
GUBCA mr_faisal_607 coder__333
Page |7
</head>
<body>
<div>
<table align="center" height="150vh" width="150vh">
<tr>
<td>
Enter number1
</td>
<td>
<input type="text" id="num1">
</td>
</tr>
<tr>
<td>
Enter number2
</td>
<td>
<input type="text" id="num2">
</td>
</tr>
<tr>
<td>
Answar
</td>
<td>
<input type="text" id="ans">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="add" onclick="add()">
</td>
</tr>
</table>
</div>
</body>
</html>
GUBCA mr_faisal_607 coder__333
Page |8
Program 3
<html>
<head>
<title>
2 javascript
</title>
<script>
var num = Number(prompt("enter the value"));
result= sumofnaturano(num);
[Link]("<h1>"+"The sum of "+num+" Natural number are
="+result);
function sumofnaturano()
{
var i;
var sum=0;
for(i=0;i<=num;i++)
{
sum=sum+i;
}
return sum;
}
</script>
</head>
<body>
</body>
</html>
GUBCA mr_faisal_607 coder__333
Page |9
Program 4
<html>
<head>
<script>
function allLeter()
{
var latter = /^[a-zA-Z]+$/;
if([Link](latter))
{
[Link]([Link]);
}
else
{
alert("Enter only latter");
return false;
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
Enter value
</td>
<td>
<input type="text" id="inputbox" >
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="click" value="click"
onclick="allLeter()">
</td>
</tr>
</table>
</form>
</body>
</html>
GUBCA mr_faisal_607 coder__333
P a g e | 10
Program 5
<html>
<head>
<script>
function allLeter()
{
var a=/^([A-Za-z0-9_\-\.])+\+\.([A-Za-z]{2,4})+$/;
if([Link](a))
{
[Link]("<h1>"+[Link]);
}
else
{
alert("Enter valid email");
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
Enter value
</td>
<td>
<input type="text" id="inputbox" >
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="click" value="click"
onclick="allLeter()">
</td>
</tr>
</table>
</form>
</body>
</html>
GUBCA mr_faisal_607 coder__333
P a g e | 11
Program 6
<html>
<head>
<title>
reversed
</title>
<script>
function display()
{
var s=" ";
var a=[Link]("str").value;
for(var i=[Link]-1;i>=0;i--)
{
s += a[i];
}
[Link](s);
}
</script>
</head>
<body>
<form onsubmit="display()">
<table>
<tr>
<td>Enter your string</td>
<td>
<input type="text" id="str">
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
GUBCA mr_faisal_607 coder__333
P a g e | 12
Ch:->3
Program 1
<html>
<head>
<title>
jQurey
</title>
<script src="[Link]"></script>
<script>
[Link]=function ()
{
if([Link])
{
alert("jQurey is loda your page");
}
else
{
alert("jQurey is not loda your page");
}
}
</script>
</head>
<body>
</body>
</html>
Program 2
<html>
<head>
<title>
jQurey
</title>
GUBCA mr_faisal_607 coder__333
P a g e | 13
<style>
#top{
background-color:red;
height:70px;
width:60px;
color:yellow;
font-size:16px;
text-align:center;
}
</style>
<script src="[Link]"></script>
<script>
$(function()
{
$("#top").click(function(){
$("html, body").animate({ scrollTop: 0},2000);
return false;
});
});
</script>
</head>
<body>
<h1>Top of page</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div align="center">
<a href="#" id="top">top</a>
</div>
</body>
</html>
GUBCA mr_faisal_607 coder__333
P a g e | 14
Program 3
<html>
<head>
<title>
jQurey
</title>
<script src="[Link]"></script>
<script>
$(document).ready(function(){
$(document).contextmenu(function(){
alert("contextmenu even is called!!");
return false;
});
});
</script>
</head>
<body>
<p>disabled right click</p>
</body>
</html>
Program 4
<html>
<head>
<title>
jQurey
</title>
<script src="[Link]"></script>
<script>
$(document).ready(function(){
var max_length=10;
$("#textarea").keyup(function(){
var text_length = $("#textarea").val().length;
var text_remin = max_length - text_length;
$("#remin").text(text_remin);
});
GUBCA mr_faisal_607 coder__333
P a g e | 15
});
</script>
</head>
<body>
<form>
<textarea id="textarea" maxlength="10">
</textarea>
<samp id="remin">10</samp>remainins
</form>
</body>
</html>
Program 5
<html>
<head>
<title>
jQurey
</title>
<script src="[Link]"></script>
<script>
$(document).ready(function(){
$("p").contextmenu(function(){
alert("contextmenu even is called!!");
return false;
});
});
</script>
</head>
<body>
<p>right click hear</p>
<p>again right click hear</p>
</body>
</html>
GUBCA mr_faisal_607 coder__333
P a g e | 16
Ch:->4
Program 1
<?xml version="1.0" encoding="UTF-8"?>
<student_Result>
<student>
<rollno>101</rollno>
<name>Faisal(fk)</name>
<subject>
<sub1>s.s
<marks>94</marks>
</sub1>
<sub2>
maths
<marks>98</marks>
</sub2>
<sub3>
science
<marks>100</marks>
</sub3>
</subject>
<total>292</total>
<percentage>97%</percentage>
<result>PASS</result>
</student>
</student_Result>
GUBCA mr_faisal_607 coder__333
P a g e | 17
Program 2
<?xml version="1.0" encoding="UTF-8"?>
<student_list>
<studet rollno="1">
<name>Heena</name>
<sub1 sname="dhtml">
<marks>90</marks>
</sub1>
<sub1 sname="c">
<marks>90</marks>
</sub1>
<sub1 sname="dbms">
<marks>90</marks>
</sub1>
<total>270</total>
<pereentage>90%</pereentage>
<graade>"A+"</graade>
</studet>
</student_list>
GUBCA mr_faisal_607 coder__333
P a g e | 18
Program 3
[Link]
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE myBook SYSTEM "[Link]">
<myBook>
<bk_name>computer world</bk_name>
<price>230</price>
<author>FK</author>
<publisher>computer world publisher</publisher>
</myBook>
[Link]
<!ELEMENT myBook(bk_name,price,author,publisher)>
<!ELEMENT bk_name(#PCDATA)>
<!ELEMENT price(#PCDATA)>
<!ELEMENT author(#PCDATA)>
<!ELEMENT publisher(#PCDATA)>
GUBCA mr_faisal_607 coder__333
P a g e | 19
Program 4
<?xml version="1.0"?>
<!DOCTYPE tea[
<!ELEMENT water (#PCDATA)>
<!ELEMENT milk ANY>
<!ELEMENT sugar EMPTY>
<!ELEMENT heating (#PCDATA|gas)*>
]>
<tea>
<water>cup</water>
<milk>1cup</milk>
<sugar/>
<heating>Microwave</heating>
</tea>
Program 5
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE info[
<!ELEMENT info (subject+,student+,facalty+)>
<!ELEMENT subject (name)>
<!ATTLIST subject id ID #REQUIRED >
<!ATTLIST subject sub CDATA #REQUIRED >
<!ELEMENT student (name,contact)>
<!ATTLIST student subid IDREF #IMPLIED>
<!ATTLIST student gender (Male|Female) "Male">
<!ELEMENT name (#PCDATA)>
<!ELEMENT contact (#PCDATA)>
<!ATTLIST contact phone NMTOKEN #REQUIRED >
<!ELEMENT faculty (name)>
<!ATTLIST facalty subid IDREF #REQUIRED >
<!ENTITY prof "Professor">
]>
<info>
GUBCA mr_faisal_607 coder__333
P a g e | 20
<subject id="CC-108" sub="ACP">
<name>Advance C Programming</name>
</subject>
<subject id="CC-109" sub="dhtml & xml">
<name>dhtml & xml</name>
</subject>
<student subid="CC-108 CC-109" gender="Male">
<name>Coder_333</name>
<contact phone="8200116885"></contact>
</student>
<student subid="CC-108 CC-109" gender="Male">
<name>mr_faisal_607</name>
<contact phone="8200116885"></contact>
</student>
<facalty subid="CC-108">
<name>&prof; [Link]</name>
</facalty>
<facalty subid="CC-109">
<name>&prof; Pathan Faisal</name>
</facalty>
</info>
GUBCA mr_faisal_607 coder__333