Lab Manual Web Engr

EXPERIMENT 1

Page 1

<html>

<head><title>This is the 1st page</title></head>

<body TEXT="#673648" BGCOLOR="#4782152">

<h1 ALIGN="CENTER"><u>This is heading 1 </u></h1>

<p>The content is included in Para </p>

<p>This is

  <b>Bold</b>,  <i>Italic</i>,  <u>Underline</u>   <strong>Strong</strong>  <big>Big</big></p>

<img src = "t.jpg" LENGTH="75px" HEIGHT="50px">

<br><br><hr COLOR="#824526" WIDTH="500px" LENGTH="100px"><br><br>

<a href="2ndpage.html">Go to second page </a><br>

<a href="http://www.google.com" ><img src="g.png" LENGTH="75px" HEIGHT="50px"><br>Visit Google</img></a><br>

<table>

<th><u>This is the table heading</u></th>

<tr><td>1</td><td>2</td></tr>



</table><br><br>

<ul>This is unordered list

<li>1st item</li><li>2nd item</li><li>3rd item</li></ul><br><br>

<ol TYPE="A">This is ordered list<li>1st item</li><li>2nd item</li><li>3rd item</li></ol>

</body>

</html>

Page 2

<html>

<head><title>This is the 2st page</title></head>

<body TEXT="#768648" BGCOLOR="#ff82152">

<h1>This is heading 1 </h1>

<h2>This is heading 2</h2>





</body>

</html>

EXPERIMENT 2

Task 1

Details Page

<html>

<head> <title>Details</title></head>

<body>

<h1>Intro</h1>

<p><img src="mohsin.jpg" width="150" height="150"><br><br>

<a href="intro.html" >Intro</a>page<br>

<a href="education.html" >Education</a>page<br>

<a href="awards.html" >Awards</a>page<br>

<a href="interests.html" >Interests</a>page<br></p>

</body>

</html>

Awards Page

<html>

<head><title>Awards</title></head>

<body>

<h1>Awards</h1><br><br>

<p><a href="intro.html" >Intro</a>page<br>

<a href="details.html" >Details</a>page<br>



</body>

</html>

I ntro Page

<html>

<head><title>Table</title></head>

<body>

<h1>MY INFORMATION</h1>

<p><table border="1">

<tr><th>Institution</th><th>Account</th><th>Type</th><th>Balance</th></tr>

<tr><td>American</td><td>72653752</td><td>Credit</td><td>$723</td></tr>

<tr><td>Chess</td><td>76863</td><td>Saving</td><td>$87238</td></tr>

<tr><td>Chess</td><td>762573</td><td></td><td></td></tr>

<tr><td>Whaocovia</td><td></td><td></td><td></td></tr>

</table></p>

</body>

</html>

Education Page

<html>

<head><title>Education</title></head>

<body>

<h1>Education</h1><br>



<a href="awards.html" >Awards</a>page<br>


</body>

</html>

Interests Page

<html>

<head><title>Interests</title></head>

<body>

<h1>Interests</h1><br>




<a href="awards.html" >Awards</a>page<br></p>

</body>

</html>

Task 2

<html>


<body>

<h1 ALIGN="CENTER">MY INFORMATION</h1>

<p><table border="3" ALIGN="CENTER">

<tr><th>Institution</th><th>Account</th><th>Type</th><th>Balance</th></tr>

<tr><td>American</td><td>72653752</td><td>Credit</td><td>$723</td></tr>



<tr><td>Whaocovia</td><td>276386</td><td>Saving</td><td>$78686</td></tr>

</table></p>

</body>

</html>

Task 3

<html>


<body >

<h1 ALIGN="CENTER">Introduction</h1>

<p><table border="3" ALIGN="CENTER">

<tr><td>First Name</td><td><input type="Textbox" maxlength=30></td></tr>

<tr><td>Last Name</td>

<td><input type="Textbox" maxlength=30></td></tr>

<tr><td>DOB</td>

<td><input type="Textbox" size="2">  <input type="Textbox" size="2">  <input type="Textbox" size="2"></td></tr>

<tr><td>Country</td>

<td><select name="country" size=1>

<option>Pakistan</option><option>USA</option><option>Bangladesh</option>

<option>China</option><option>Afghanistan</option></select></td></tr>

<tr><td>Sex</td>

<td><input type="radio" name = "sex" value="Male" checked />Male<br>

<input type="radio" name = "sex" value="Female" />Female<br></td></tr>

<tr><td>Hobbies</td>

<td><input type="checkbox" checked="true" value="reading">Reading</input><br>

<input type="checkbox" value="computing">Computing</input><br>

<input type="checkbox" value="cooking" >Cooking</input><br></td></tr>

<tr><td colspan="2"><input type="Button" value="submit" ALIGN="CENTER"/><br></td></tr>

</table></p>

</body>

</html>

EXPERIMENT 3

HTML File

<html>

<head><link rel="stylesheet" type="text/css" href="lab3.css" /><title>Metro online shopping</title></head>

<body>

<h1>Metro Online Shopping</h1>

<p id="links"><a href="home.html" >Home</a>

<a href="menu.html" >Menu</a>

<a href="explore.html" >Explore</a>

<a href="jobs.html" >Jobs</a>

<a href="contactUs.html" >Contact Us</a>    </p>

<hr><IMG SRC="lapi.jpg" id="pic" align="right" /><br>

<h2>New items in Store NOW </h2>

<ul><li>Sony LED 60in</li><li>Samsung Galaxy S4</li><li>Dawlence Airconditioner</li></ul>

<p>F-8 Markaz<br>Islamabad,Pakistan<br>UAN: 111-067-067</p><br><br><br><hr>

<p id = "footer">Copyright © 2013 Metro Online Shopping <br> <a href="email.html" >XYZ Email</a></p>

</body></html>

CSS File

body{background-color:brown;}

h1{color:black; text-align:center; font-size:24pt; background-color:yellow;}

#links{text-align:center;}

#footer{text-align:center; background-color:yellow;}

#pic {width:200; height:150; align:right;}

EXPERIMENT 4

Lab Task

<html>

<head><script type="text/javascript">

function nameCheck()

{var n;

n =document.forms[0].name.value;

if(n == null || n == ""){

alert("Name not entered");

return false;} return true;}

function emailCheck()

{var n;

n =document.forms[0].email.value;

if(n == null || n == ""){

alert("Email not entered");


function zipcodeCheck()

{var n;

n =document.forms[0].zipcode.value;

if(n == null || n == ""){

alert("Zipcode not entered");


function countryCheck()

{var n;

n =document.forms[0].country.value;

if(n == 0){alert("Country not entered");


function submitPressed()

{var a,b,c,d;

a =document.forms[0].name.value; b =document.forms[0].email.value;

c =document.forms[0].zipcode.value; n =document.forms[0].country.value;

if(a == null || a == "" || b == null || b == "" || c == null || c == "" || d == 0)

{alert("Please complete the form");


</script>

<title> Lab Task </title></head><body>

<table border="1">

<tr><form id="form" name="form1"><td>Name</td><td><input type="Textbox" maxlength=30 onblur="nameCheck()" id="name"/></td></tr>

<tr><td>Email</td><td><input type="Textbox" maxlength=30 onblur="emailCheck()" id="email"></td></tr>

<tr><td>Zip code</td><td><input type="textbox" maxlength=5 onblur="zipcodeCheck()" id="zipcode"></td></tr>

<tr><td>Country</td><td><select name="country" size=1 onblur="countryCheck()" id="country">

<option value="0" checked >Choose country</option>

<option value="1">Pakistan</option>

<option value="2">USA</option>

<option value ="3">Bangladesh</option>

<option value ="4">China</option>

<option value ="5">Afghanistan</option></select></td></tr>

<tr><td></td><td><input type="Submit" onclick="submitPressed()" value="submit" ALIGN="CENTER" /></td></tr>

</form></table>

</body>

</html>

EXPERIMENT 5

Task 1

<html>

<head><script>

student = new Object();

student.name ="XYZ";

student.class = "BESE",

student.rollno = 12;

function showData()

{document.getElementById("p1").innerHTML= student.name+" "+student.class+" "+student.rollno;}

function deleteRollNo(){delete student.rollno;}

</script><title>Lab 5</title></head>

<body>

<p id="p1"></p><input type="button" id="b1" value="Show Data" onclick="showData()" /><br>

<input type="button" id="b2" value="Delete Roll No" onclick="deleteRollNo()" />

</body>

</html>

Task 2(a)

<html>

<head><script>


student.name ="XYZ";student.class = "BESE"; student.rollno = 12;

function showDate()

{var currentTime = new Date();

var month = currentTime.getMonth()+1;

document.getElementById("p1").innerHTML= currentTime.getDate()+" "+month+" "+currentTime.getFullYear();} </script>

<title>Lab 5</title></head>

<body>

<p id="p1"></p>

<input type="button" id="b1" value="Show Date" onclick="showDate()" /><br>

</body></html>

Task 2 (b)

<html>

<head><script>


student.name ="XYZ"; student.class = "BESE"; student.rollno = 12;

function showDays()

{var month = document.getElementById("t1").value; var year = document.getElementById("t2").value; var desired = new Date(year,month,0);

document.getElementById("p1").innerHTML = "No of days are :"+desired.getDate();}


<body><p id="p1"></p>

<input type="text" id="t1" maxlength=2 />

<input type="text" id="t2" maxlength=4 />

<input type="button" id="b1" value="Show No of Days" onclick="showDays()" /><br>

</body></html>

Task 3

<html> <head><script>

function changeStyle()

{document.getElementById("p1").style.color="red"; document.getElementById("p1").style.font="Arial";}


<body>

<p id="p1">This is the para when u click the button it will change its style</p>

<input type="button" id="b1" value="Change style" onclick="changeStyle()" />

</body></html>

EXPERIMENT 6

Task 1

<html>

<head><title>JQuery Intro</title>

<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script>

$("document").ready(function(){ alert("This is what loaded"); });

$("document").ready(function(){ $(".para1").css("border","3px solid red"); });

$("document").ready(function(){ $("li:lt(2)").css("border","3px solid red"); $("li:lt(2)").css("color","blue"); });

$("document").ready(function(){ $("ul#task1").css("border","3px solid green"); });

$("document").ready(function(){ $("li:eq(2)").css("border","3px solid black"); $("li:eq(2)").css("color","green"); });

$("document").ready(function(){ $("li:last").css("border","3px solid yellow"); $("li:last").css("color","orange"); });

</script></head>

<body>

<p class="para1">This was para 1</p>

<p class="para2">This is para 2</p>

<p id="para3">This is para3</p><br>

<ul id="task1">List items<li class="task1a">Item 1</li>

<li class="task1a">Item 2</li><li class="task1b">Item 3</li>

<li class="task1b">Item 4</li><li class="task1c">Item 5</li></ul>

</body></html>

Task 2

<html>

<head><title>JQuery Task 2 </title>


<script>

$("document").ready(function(){ $("tr:even").css({"background":"grey","color":"blue"}); });

$("document").ready(function(){ $("tr:odd").css({"background":"green","color":"yellow"}); });

$("document").ready(function(){ $("td:first").css({"background":"orange","color":"red"}); });

$("document").ready(function(){ $("td:last").css({"background":"red","color":"white"}); });

$("document").ready(function(){ $("td:eq(7)").css({"background":"yellow","color":"green"}); });

$("document").ready(function(){ $("tr:eq(2)").css({"background":"purple","color":"pink"}); });

$("document").ready(function(){ $("td:contains(Centro comercial Moctezuma)").css({"background":"pink","color":"purple"}); });

$("document").ready(function(){ $("tr:first").css({"background":"black","color":"white"}); });

</script>

</head>

<body><table border=1>

<tr><th>Company</th><th>Country</th></tr>

<tr><td>Alfreds Futterkiste</td><td>Germany</td></tr>

<tr><td>Berglunds snabbköp</td><td>Sweden</td></tr>

<tr><td>Centro comercial Moctezuma</td><td>Mexico</td></tr>

<tr><td>Ernst Handel</td><td>Australia</td></tr>

<tr><td>Island Trading</td><td>UK</td></tr>

</table>

</body></html>

Task 3

<html>



<script>

$("document").ready(function(){

$("#ab li:first").css("color","blue"); $("#ab li:last").css("color","orange");

$("#ab li:odd").css("color","red"); $("#ab li:eq(2)").css("color","green");

$("#task3b li:even").css("color","red"); $("#task3b li:odd").css("color","blue");

});

//$("document").ready(function(){ $("#task3a:last-child").css("color","orange"); });

//$("document").ready(function(){ $("li:lt(2)").css("border","3px solid red"); $("li:lt(2)").css("color","blue"); });

//$("document").ready(function(){ $("ul#task1").css("border","3px solid green"); });

//$("document").ready(function(){ $("li:eq(2)").css("border","3px solid black"); $("li:eq(2)").css("color","green"); });

//$("document").ready(function(){ $("li:last").css("border","3px solid yellow"); $("li:last").css("color","orange"); });

</script>

</head>

<body>

<ul id="ab"><li >Coffee</li><li >Milk</li><li >Tea</li><li >Sugar</li><li>Spice</li></ul>

<ul id="task3b">List 2:<li >Coffee</li><li >Milk</li><li >Tea</li><li >Sugar</li><li >Spice</li></ul>

</body>

</html>

EXPERIMENT 7

Task 1

<html>



<script>

$("document").ready(function(){

$("#ab li:first").css("color","blue"); $("#ab li:last").css("color","orange");

$("#ab li:odd").css("color","red"); $("#ab li:eq(2)").css("color","green");

$("#task3b li:even").css("color","red"); $("#task3b li:odd").css("color","blue"); });

</script></head>

<body>

<ul id="ab"><li >Coffee</li><li >Milk</li><li >Tea</li><li >Sugar</li><li>Spice</li></ul>

<ul id="task3b">List 2:<li >Coffee</li><li >Milk</li><li >Tea</li><li >Sugar</li><li >Spice</li></ul>

</body></html>

Task 2

<html>



<script>

var a = [0,10,30,40,50];

$(document).ready(function(){

$("button").click(function(){

$.each(a,function(index,value){alert(value); }); }); });

</script></head>

<body><button>Click</button></body>

</html>

Task 3a

<html>



<script>

var a = [0,10,30,40,50];



$("#text").text("Changed paragraph"); }); });

</script></head>

<body><button>Click</button>

<p id="text">This is a paragraph</p>

</body></html>

Task 3b

<html>



<script>



$("li:last").text("Tea"); }); });

</script></head>

<body>

<button>Click</button>

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>

</body></html>

EXPERIMENT 8

Task 1a

<html>

<head><title>Inserting Content</title>


<script type="text/javascript">


$("div").click(function(){ $("#b").before("Outside and Before the div");}); });

</script></head>

<body>

<div id="b">I am a div.</div><br />

</body></html>

Task 1b

<html>





$("div").click(function(){ $("#b").after("Outside and After the div"); }); });

</script></head><body>

<div id="b">I am a div.</div>

<br /></body></html>

Task 1c

<html>





$("div").click(function(){ $("#b").prepend("Inside but before ");}); });

</script></head>

<body>


<br /></body></html>

Task 1d

<html>





$("div").click(function(){

$("#b").append("Inside but after "); }); });

</script></head>

<body>

<div id="b">I am a div.</div><br />

</body></html>

Task 2a

<html>

<head><title>Sliding</title>

<script type="text/javascript" src=" jquery-1.3.2.js "></script>



$("p").hover(function(){ $("#div1").slideUp("slow");

$("#div2").slideUp(4000); $("#div3").slideUp("fast");

},function(){ $("#div1").slideDown("fast");

$("#div2").slideDown("slow"); $("#div3").slideDown(4000); }); });

</script></head>

<body>

<p>Slide</p><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:orange;"></div><br>

<div id="div3" style="width:80px;height:80px;background-color:purple;"></div>

</body></html>

Task 2b

<html>

<head><title>Sliding</title>

<script type="text/javascript" src=" jquery-1.3.2.js "></script>



$("p").hover(function(){ $("#div1").fadeOut("slow");

$("#div2").fadeOut(4000); $("#div3").fadeOut("fast");

},function(){ $("#div1").fadeIn("fast");

$("#div2").fadeIn("slow"); $("#div3").fadeIn(4000); }); });

</script></head>

<body>

<p>Slide</p><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:orange;"></div><br>

<div id="div3" style="width:80px;height:80px;background-color:purple;"></div>

</body></html>

EXPERIMENT 9

Task 1 & 2

<html>




var facebook= {"data": [{"id": "X999_Y999",

"from": {"name": "Tom Brady", "id": "X12"},

"message": "Looking forward to 2010!",

"actions": [{"name": "Comment","link": "http://www.facebook.com/X999/posts/Y999"},

{"name": "Like","link": "http://www.facebook.com/X999/posts/Y999"}],

"type": "status","created_time": "2010-08-02T21:27:44+0000","updated_time": "2010-08-02T21:27:44+0000"},

"id": "X998_Y998",

"from": {"name": "Peyton Manning", "id": "X18"},

"message": "Where's my contract?",

"actions": [{"name": "Comment",

"link": "http://www.facebook.com/X998/posts/Y998"},

{"name": "Like","link": "http://www.facebook.com/X998/posts/Y998"}],

"type": "status","created_time": "2010-08-02T21:27:44+0000","updated_time": "2010-08-02T21:27:44+0000"}]}

var fb = JSON.stringify(facebook);

jsonObject = JSON.parse( fb );

document.write(jsonObject.data[0].from.name+" "+jsonObject.data[1].from.name+"<br>");

document.write(jsonObject.data[0].message+"<br>");

document.write(jsonObject.data[0].updated_time+"<br>"); document.write(jsonObject.data[0].actions[0].link+"<br>");

document.write(jsonObject.data[0].id+"<br>"); document.write(jsonObject.data[1].created_time+"<br>");

document.write(jsonObject.data[1].actions[1].link+"<br>"); document.write(jsonObject.data[1].message+"<br>");

document.write(jsonObject.data[1].id+"<br>"); document.write(jsonObject.data[0].id+"<br>");

</script></head>

<body>

<div id="b">I am a div.</div><br /> </body></html>

Task 3

<html>






$.getJSON("facebook.json", function(result){

document.write(result.data[0].from.name+" "+result.data[1].from.name+"<br>");

}); }); });

</script></head>

<body>


<button>Click</button><br />

</body></html>

EXPERIMENT 10

Task 1

<html>

<head><title>display output</title></head>

<body>

<?php

echo "Task 1<br>";

$x=10;

$y=7;

if(++$x>=5&&$y--<=10)

echo $x+$y;

echo "<br>";

$variable=10;

$info='The value of variable is : '. $variable;

echo $info."<br>";

$number=25*50;

echo substr($number,1,2);

echo "<br>";

echo "a: [" . (20 > 9) . "]<br />";

echo "b: [" . (5 == 6) . "]<br />";

echo "c: [" . (1 == 0) . "]<br />";

echo "d: [" . (1 == 1) . "]<br />";

echo "<br>";?>

</body></html>

Task 2

<html>


<body>

<?php

echo "Task 2<br>";

$x=10; $y=7;

echo $x."+".$y."="; echo $x+$y."<br>";

echo $x."-".$y."="; echo $x-$y."<br>";

echo $x."*".$y."="; echo $x*$y."<br>";

echo $x."/".$y."="; echo $x/$y."<br>";

echo $x."%".$y."=";echo $x%$y."<br>"; echo "<br>"; ?>

</body></html>

Task 3

<html>


<body>

<?php

echo "Task 3<br>";

$str1 = 'The Quick Brown Fox Jumps';

$str2 = 'The Quick Brown Fox JuMps';

$temp = strspn($str1,$str2);

echo "First difference at position ".$temp." : ";

echo $str1[$temp]." vs "; echo $str2[$temp]."<br>"; ?>

</body></html>

Task 4

<html>

<head><title>display output</title>

</head>

<?php

echo $today="Monday"; $color = "white";

if($today == "Sunday" ) $color = "yellow";

else if($today == "Monday") $color = "orange";

else if($today == "Tuesday") $color = "green";

else if($today == "Wednesday") $color = "blue";

else if($today == "Thursday") $color = "brown";

else if($today == "Friday") $color = "purple";

else if($today == "Saturday") $color = "pink";

else

$color = "white";

echo "<body bgColor = $color >"; ?>

</body></html>

Task 5

<html>


<body >

<?php

$first = 1; $last = 49;

do { if($first%2 != 0) echo $first." ";

$first++;}

while($first<=49); ?>

</body></html>

Task 6

<html>


<body >

<?php

$number = 5;

echo "Factorial of ".$number." is :" . display($number);

function display($number1)

{ if($number1 == 1) return 1;

else return $number1 * display($number1-1); } ?>

</body></html>

Documents

Lab Manual Web Engr