Scribd
Upload
89 views35 pages

Web Design & Validation Guide

The document contains instructions for a student named Sinnarkar Krishna B. to write HTML and CSS code to design several web pages with frames and links. It provides examples of code for framesets that divide the screen, internal style sheets, and pages with headings, images, menus, and tables to display exam schedules. The student is asked to create pages that display appliance information in different frames when links are clicked.

Uploaded by

Ajinkya Bhagat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
89 views35 pages

Web Design & Validation Guide

The document contains instructions for a student named Sinnarkar Krishna B. to write HTML and CSS code to design several web pages with frames and links. It provides examples of code for framesets that divide the screen, internal style sheets, and pages with headings, images, menus, and tables to display exam schedules. The student is asked to create pages that display appliance information in different frames when links are clicked.

Uploaded by

Ajinkya Bhagat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 35

Name: Sinnarkar Krishna B. Roll no: 4353 TY.

BBA(CA)

1] Write HTML and CSS code to design a web page. Divide the browser
screen into two frames. The first frame will display the heading.
Divide the second frame into two columns. The frame on the right
contains a image of “Home and Kitchen Appliances”. The frame on
the left contains a menu consisting of hyperlinks. Clicking on any
one of these hyperlinks will display related information in a new
page as shown below.
Use External style sheet with appropriate attributes to display
information of each frame.

Home Shopping
Kitchen & Dining
Image of
Home & Kitchen
Home and appliances
Kitchen i. Cookware
Appliances ii. Kitchenware
iii. Bakeware
 Kitchen & Dining
iv. Serveware
 Furnishings
 Home Décor
 Home
Improvement

Frame.html

<html>
<frameset rows="20%,*">
<frame src="one.html">
<frameset cols="30%,*">
<frame src="two.html"name="fff">
<frame src="three.html">
</frameset>
</frameset>
</html>

One.html

<html>
<head>
<link rel="stylesheet" style="text/css" href="aa.css">
</head>
<body>
<h1 align="center">Home Shopping</h1>
</body>
</html>

Two.html

<html>
<head>
<link rel="stylesheet" style="text/css" href="aa.css">
</head>
<body>
<img src="lighthouse.jpeg"alt="Image Of Home and Kitchen Appliances"
width="50%">
<body>
</html>

Three.html
<html>
<head>
<link rel="stylesheet" style="text/css" href="aa.css">
</head>
<body>
<h1>Home & Kitchen appliances</h1>
<ul type="square">
<li><a href="kd.html" target="_BLANK">Kitchen & Dinning</a>
<li><a href="f.html" target="_BLANK">Furnishing</a>
<li><a href="hd.html" target="_BLANK">Home Decor</a>
<li><a href="hi.html" target="_BLANK">Home Improvement</a>
</ul>
</body>
</html>

Kd.html

<html>
<head>
<link rel="stylesheet" style="text/css" href="aa.css">
</head>
<body>
<h1>Kitchen & Dinning</h1>
<ol type="i">
<li>Cookware
<li>Kitchenware
<li>Bakeware
<li>Serveware
</ol>
<br><br>
<a href="frame.html"target="_BLANK">back...</a>
</body>
</html>

aa.css

h1{
text-align="left";
background-color:pink;
}
ol,ul{
font-family:comic sans ms;
background-color:Green;
}
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

2] Write HTML and CSS code to design a web page displaying list of
hyperlinks. Divide the browser screen into two frames. The first
frame will display the heading. Divide the second frame into two
columns. The frame on the left will be a menu consisting of
hyperlinks. Clicking on any one of these hyperlinks will display
related information as a new page which must be open in frame
on the right hand side.
Use Inline style sheet with appropriate attributes to display
information of each frame.

IT Industries in INDIA
City Pune
1. Pune  Infosys
2. Banglore  TCS
3. Hydrabad  Tech-Mahindra
4. Delhi  Persistent

Frame.html
<html>
<frameset rows="20%,*">
<frame src="one.html">
<frameset cols="35%,*">
<frame src="two.html">
<frame src="three.html"name="kk">
</frameset>
</frameset>
</html>

One.html

<html>

<body>

<h1 style="text-align:center;background-color:#543456"> IT Industries in


INDIA</h1>

<body>

</html>

Two.html

<html>
<body>
<h1>City</h1>
<ol type="1">
<li><a href="pune.html"target="kk">Pune</a>
<li><a href="ban.html"target="kk">Banglore</a>
<li><a href="hyd.html"target="kk">Hydrabad</a>
<li><a href="del.html"target="kk">Delhi</a>
</ol>
</body>
</html>

Pune.html

<html>
<body>
<h1 style="background-color:#528155;">Pune</h1>
<ul style="background-color:#248695;">
<li> Infosys
<li> TCS
<li> Tech-Mahindra
<li> Persistent
</ul>
</body>
</html>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

3] Write HTML and CSS code to design a web page. Divide the browser
screen into two frames. The first frame will display the heading.
The second frame contains a menu consisting of hyperlinks.
Clicking on any one of these hyperlinks will display related
information in a new page as shown below.

Use Internal style sheet with appropriate attributes to display


information of each frame.

COMPUTER SCIENCE F.Y. B.C.A. Exam Time Table


DEPARTMENT

Date Time Subj Subje


ect ct
Cod Nam
e e

12/10/ 10:30 am – 101 PPA


2015 1:30pm

13/10/ 10:30 am – 102 MOE


2015 1:30pm

14/10/ 10:30 am – 103 BC


2015 1:30pm

15/10/ 10:30 am – 104 PM


2015 1:30pm

16/10/ 10:30 am – 105 FA


2015 1:30pm

Frame.html

<html>
<frameset cols="35%,*">
<frame src="one.html">
<frame src="two.html">
</frameset>
</html>

One.html

<html>
<head>
<style type="text/css">
h1{
background-color:pink;
}
</style>
</head>
<body>
<h1 align="left">COMPUTER SCIENCE DEPARTMENT</h1>
</body>
</html>

Two.html

<html>
<head>
<style type="text/css">
h3{
background-color:cyan;
}
</style>
</head>
<body>
<h3><a href="fybca.html"target="_BLANK">F.Y. B.C.A. Exam Time
Table</a><br><br>
<a href="sybca.html">S.Y. B.C.A. Exam Time Table</a><br><br>
<a href="tybca.html">T.Y. B.C.A. Exam Time Table</a>
</h3>
</body>
</html>

Fybca.html

<html>
<head>
<style type="text/css">
table{
background-color:yellow;
}
</style>
</head>
<body>
<h2>F.Y. B.C.A. Exam Time Table</h2>
<table border="1">
<tr>
<th>Date</th>
<th>Time</th>
<th>Subject Code</th>
<th>Subject Name</th>
</tr>
<tr>
<th>12-19-2015</th>
<th>10:30 to 1:30</th>
<th>101</th>
<th>PPA</th>
</tr>
<tr>
<th>13-19-2015</th>
<th>10:30 to 1:30</th>
<th>102</th>
<th>MOE</th>
</tr>
<tr>
<th>14-19-2015</th>
<th>10:30 to 1:30</th>
<th>103</th>
<th>BC</th>
</tr>
<tr>
<th>16-19-2015</th>
<th>10:30 to 1:30</th>
<th>105</th>
<th>FA</th>
</tr>
<tr>
<th>12-19-2015</th>
<th>10:30 to 1:30</th>
<th>101</th>
<th>PPA</th>
</tr>
</table>
<br><br>
<a href="frame.html"target="_BLANK">back<a>
</body>
</html>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

4] Write a JavaScript program to design student registration form and


perform following validation:
- Check all fields should not contain a null value
- Check name field contains only alphabets
- Mobile No. field should be of 10 digits.s
- Pin code field should be of 06 digits.

<html>
<body>
<form name="f1">
<pre>
Name OF student:<input type="text" name="t1"/>
Mobile No. <input type="text" name="t2"/>
Address Line: <input type="text" name="t3"/>
City: <input type="text" name="t4"/>
State: <input type="text" name="t5"/>
Pincode: <input type="text" name="t6"/>
</pre>
<input type="button" value="ok" onClick="a()"/>
<input type="reset" value="reset">
</form>
</body>
</html>
<script type="text/javascript">
function a()
{
var name=document.f1.t1.value;
var mno=document.f1.t2.value;
var add=document.f1.t3.value;
var city=document.f1.t4.value;
var state=document.f1.t5.value;
var pincode=document.f1.t6.value;

if(name.length==0||mno.length==0||add.length==0||city.length==0||state.lengt
h==0||pincode.length==0)
{
alert("Plzzzz Enter All Fields");
}
f=0;
for(i=0;i<name.length;i++)
{
if(!((name.charAt(i)>='A' && name.charAt(i)<='Z')||(name.charAt(i)>='a'
&& name.charAt(i)<='z')))
{
f=1;
}
}
if(f==1)
alert("Invalid Name");
if(mno.length!=10)
{
alert("Invalid Mno");
}
if(pincode.length>6)
{
alert("Invalid pincode Number:");
}
}
</script>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

5] Write a JavaScript program to compare the values of password and


confirmed password field and display message accordingly. Also
perform the validation to check any of the field should not be empty.

<html>
<head>
<script language="javascript">
function show()
{
var name=document.f1.t1.value;
var pass=document.f1.t2.value;
var confirm=document.f1.t3.value;
if(name.length==0)
{
alert("Plzzz Enter Username");
}
if(confirm.length==0)
{
alert("Plzzz Enter Pass and Confirm Pass");
}
else if(pass==confirm)
{
alert("Password And Confirm password Same");
}
else
{
alert("Password And Confirm pass Not Same");
}

}
</script>
</head>
<body>
<form name="f1">
Enter The Username:
<input type="text" name="t1"><br>
Password:
<input type="password" name="t2"><br>
confirm Password:
<input type="password" name="t3"><br>
<input type="button" value="Ok"onClick="show()">
</form>
</body>
</html>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

6] Write a PHP script to display a Multiplication table in tabular


format. Design HTML page to accept a value

Multiplication.html

<html>
<body>
<form method="post" action="multiplication.php">
Enter The Number:
<input type="text" name="t1">
<br>
<input type="submit" value="Ok">
<input type="reset" value="Clear">
</form>
</body>
</html>

multiplication.php

<?php
$no=$_POST["t1"];
echo("<table border=1>");
for($i=1;$i<=10;$i++)
{
echo("<tr>");
echo("<td>".$i*$no);
echo("</td></tr>");
}
echo("</table>");
?>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

7] Design a HTML form to accept a String. Write a PHP function to


count the total number of vowels (a,e,i,o,u) from the string. Show the
occurrences of each vowel from the string

Vo.html

<html>
<body>
<form method="post" action="vo.php">
Enter The STring:
<input type="text" name="t1">
<br>
<input type="submit" value="Ok">
<input type="reset" value="Clear">
</form>
</body>
</html>

Vo.php

<?php
$s1=$_POST["t1"];
$i;
countv($s1);
function countv($s1)
{
$cnt=0;
for($i=0;$i<strlen($s1);$i++)
{

if($s1[$i]=='a'||$s1[$i]=='A'||$s1[$i]=='e'||$s1[$i]=='E'||$s1[$i]=='i'||$s1[$i]=='I'
||$s1[$i]=='O'||$s1[$i]=='o'||$s1[$i]=='u'||$s1[$i]=='U')
{
$cnt++;
}
}
echo("COunt=".$cnt);
}
?>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

8] Design HTML page to read the value for n. Write a PHP script to
display first n even numbers with font size = 12 and color = red and
first n odd numbers with font face = Times new Roman , size = 17 &
color = yellow.

EvenOdd.html

<html>
<body>
<form method="post" action="EvenOdd.php">
Enter The Limit:
<input type="text" name="t1">
<br>
<input type="submit" value="Ok">
<input type="reset" value="Clear">
</form>
</body>
</html>

EvenOdd.php

<?php
$n=$_POST["t1"];
echo("<font size=12 color='red'>Even Numbers:");
for($i=1;$i<=$n;$i++)
{
if($i%2==0)
{
echo("<br>".$i);
}
}
echo("</font><br>");
echo("<font size=17 face='Times new Roman'color='yellow'>Odd Numbers:");
for($i=1;$i<=$n;$i++)
{
if($i%2!=0)
{
echo("<br>".$i);
}
}
echo("</font>");
?>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

9] Write a menu driven program in PHP to perform the following


operations on an associative array:
i. Display the elements of an array along with the keys.
ii. Display the size of an array
iii. Delete an element from an array from the given index.
iv. Reverse the order of each element’s key-value pair [Hint: use
array_flip()]
v. Traverse the elements in an array in random order [[Hint: use
shuffle()].

<html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">

Select Options:<br>
<input type="radio" value="display" name="d1">Display Elements of
Array</input>
<br><input type="radio" value="size" name="d1">Count of Array</input>
<br><input type="radio" value="delete" name="d1">Delete Elements from
Array</input>
<br><input type="radio" value="reverse" name="d1">Flip Array</input>
<br><input type="radio" value="shuffle" name="d1">Shuffle Array</input>
<br><input type="submit"><br>
</form>
<?php
echo "<br>Associative ARRAY..........<br>";

$a=array("one"=>"1","two"=>"2","three"=>"3");
if($_SERVER["REQUEST_METHOD"]=="POST")
{
$opt=$_POST['d1'];
if($opt=='display')
{
print_r($a);
}

else if($opt=='size')
{
$c=count($a);
echo "<br>Count is:$c";
}

else if($opt=='delete')
{
unset($a['one']);
print_r($a);
}

else if($opt=='reverse')
{
$r=array_flip($a);
print_r($r);
}

else if($opt=='shuffle')
{
shuffle($a);
print_r($a);
}
}

?>
</body>
</html>
Name: Sinnarkar Krishna B. Roll no: 4353 TY.BBA(CA)

10] Write a menu driven program in PHP to perform the following


operations on associative arrays:
1. Sort the array by values (changing the keys) in ascending,
descending order.
2. Also sort the array by values without changing the keys.
3. Filter the odd elements from an array.
4. Sort the different arrays at a glance using single function.
5. Merge the given arrays.
6. Find the intersection of two arrays.
7. Find the union of two arrays.
8. Find set difference of two arrays.

<html>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Select options:<br>
<input type="radio" value="Sort the keys" name="d1">Sorting of Keys</input>
<br><input type="radio" value="Sort the values" name="d1">Sorting of
values</input>
<br><input type="radio" value="Odd elements" name="d1">Filter the odd
elements</input>
<br><input type="radio" value="Multisort" name="d1">Sort the different arrays
at a glance using single function</input>
<br><input type="radio" value="Merge" name="d1">Merge the Arrays</input>
<br><input type="radio" value="Intersection" name="d1">Intersection of two
Arrays</input>
<br><input type="radio" value="Union" name="d1">Union of two Arrays</input>
<br><input type="radio" value="Difference" name="d1">Difference of two
Arrays</input>
<br><input type="submit"><br>
</form>

<?php
echo "<br>Associative ARRAY.1......";
$a = array("one"=>"1","two"=>"2","three"=>"3");
echo "<br>Associative ARRAY.2......<br>";
$a1 = array("four"=>"4","two"=>"2","six"=>"6");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$op=$_POST['d1'];
if($op == 'Sort the keys')
{
echo"Ascending order<br>";
sort($a);
foreach($a as $k => $v)
{
echo "Key $k Value $v <br>";
}
echo"Descending order<br>";
rsort($a);
foreach($a as $k => $v)
{
echo "Key $k Value $v <br>";
}
}
else if($op == 'Sort the values')
{
echo"Ascending order<br>";
asort($a);
foreach($a as $k => $v)
{
echo "Key $k Value $v <br>";
}
echo"Descending order<br>";
arsort($a);
foreach($a as $k => $v)
{
echo "Key $k Value $v <br>";
}
}
else if($op == 'Odd elements')
{
echo "Odd elements";
function test_odd($var)
{
return ($var &1);
}
print_r(array_filter($a,"test_odd"));
}
else if($op =='Multisort')
{
$b1=array_multisort($a,$a1);
print_r($b1);
}
else if($op =='Merge')
{
print_r(array_merge($a,$a1));
}
else if($op =='Intersection')
{
$r = array_intersect($a1,$a);
print_r($r);
}
else if($op =='Union')
{
$b=array_unique(array_merge($a,$a1));
print_r($b);
}
else if($op =='Difference')
{
$b1=array_diff($a,$a1);
print_r($b1);
}
}
?>
</body>
</html>

You might also like