Slip1:
Write the HTML code for generating the form as shown below. Apply the internal CSS to
following form to change the font size of the heading to 6pt and change the color to red and also
change the background color to yellow.
soluation:
<!DOCTYPE html>
<html>
<head>
<title>CSS EXmple</title>
<style>
.black{
color:black;
background-color:aqua;
text-align:center;
margin-top:=40px;
padding:auto;
margin-bottom:50px;
.division{
background-color:aqua;
text-align:center;
margin-left:500px;
margin-right:400px;
padding:left:80px;
height:600px;
width:400px;
border-radius:20px;
margin-top:20px;
.btn{
background-color:blue;
color:white;
border-radius:20px;
.btn1{
background-color:green;
color:white;
border-radius:20px;
padding:5px;
}
</style>
<body>
<div class="division">
<h1 class="black">Project Management</h1>
<form>
Project Name:-<input type=text" placegolder="Enter Your Project"> <br> <br> <br>
Assign To:- <input type="text" placeholder="Assign to"> <br> <br> <br>
Start Date:-<input type="date"> <br> <br><br>
End Date:- <input typee="date"><br><br><br>
Priority Name:<input type="radio" name="abc">High
<input type="radio" name="abc">Average
<input type="radio" name="abc">Low <br> <br> <br>
Description <input type="text"><br> <br> <br>
<button class="btn">Submit</button>
<button class="btn1"> Clear </button>
</form>
</div>
</body>
</html>
Slip2:
Create HTML5 page with following specifications [15]
i) Title should be about your City.
ii) Color the background by Pink color.
iii) Place your city name at the top of page in large text and in blue color.
iv) Add names of the landmarks in your city, each in different color, style and font
v) Add any image at the bottom. (Use inline CSS to format the web page).
-->>
<!DOCTYPE HTML>
<HTML>
<head><TITLE><CENTER>My City</CENTER></TITLE>
</head>
<body style="background-color:pink;">
<h1 style="text-align: center ; Color: blue;"> My City name: Pune </h1>
<h1 style="font-size=30; color: powderblue; "> ::Pune city Landmarks:: </h1>
<ul >
<li style="color : blue; font-size=20; font-family:verdana;">National Defence Academy</li>
<li style="color : red; font-size=21; font-family:arial;">Dagadusheth Halwai Ganapati Temple</li>
<li style="color : green ;font-size=19; font-family:courier;">ISKCON NVCC
28
Temple</li>
<li style="color : yellow; font-size=22; font-family:Calibri;">Pune University</li>
</ul>
<div style="background-color: lightblue;width: 210px; height: 210px; overflow: scroll;">
Pune, also called ‘Poona’, is situated in the state of Maharashtra, India.
It is also known as the ‘Queen of the Deccan’ and attained its high importance when it became the
capital
of Bhonsle Marathas in the 17th century.
</div>
<img style="border: 1px solid red; border-radius: 4px; padding: 5px; width: 150px;"
src="pune.jpeg"></img>
</body>
</HTML>
Slip3:
Write a program using html with following CSS specifications-
i. The background colour of the company name should be in green.
ii. The text colour of the company name should be red.
iii. The heading should be large –with font ''comic sans ms''
iv. The description of the company should be displayed in blue color in a paragraph.
--->>>
<!DOCTYPE HTML>
<html>
<head>
<title>Titan FastTrack</title>
<style>
h1{background-color:green;color:red;font-family:Comic Sans MS;}
p{color:blue;}
</style>
</head>
<body>
<h1 align="center">Titan Fast Track</h1>
<p> Fastrack is a fashion accessory retail brand in India. The company was launched in 1998 as a
sub-brand Titan Watches. </p>
</body>
</html>
Slip4:
Write a HTML code, which generate the following output
<!DOCTYPE html>
<html>
<body>
<table border="1">
<th colspan="4"> LIST OF BOOKS </th>
<tr>
<th rowspan="2"> ITEM No</th>
<th rowspan="2"> ITEM NAME</th>
<th colspan="2">PRICE</th>
</tr>
<tr>
<td>Rs</td>
<td>Paise</td>
</tr>
<tr>
<td>1</td>
<td>PROGRAMMING IN PYTHON</td>
<td>500</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>PROGRAMMING IN JAVA</td>
<td>385</td>
<td>00</td>
</tr>
</table>
</body>
</html>
Slip5:
Create following Bootstrap Web Layout Design and change Title, add your personal information,
educational information, job profile.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Personal Information</h3>
<p>Add your personal information..</p>
<p>...</p>
</div>
<div class="col-sm-4">
<h3>Educational Information</h3>
<p>Add your educational information....</p>
<p>...</p>
</div>
<div class="col-sm-4">
<h3>Job Profile</h3>
<p>Add your job profile information.....</p>
<p>...</p>
</div>
</div>
</div>
</body>
</html>
Slip7:
Design HTML 5 Page Using CSS Which Displays the following Navigation Bar.
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color:grey;
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
.topnav a:hover {
background-color:white;
color: blue;
.topnav a.active {
background-color:gray;
color: blue;
</style>
</head>
<body>
<div class="topnav">
<a class= href="#home">Home</a>
<a href="#Java">Java</a>
<a href="#Html">HTML</a>
<a href="Css">CSS</a>
</div>
</body>
</html>
Slip8:
Design an HTML form to accept two strings from the user. Write a PHP script for the following.
a. Find whether the small string appears at the start of the large string.
b. Find the position of the small string in the big string.
c. Compare both the string for first n characters, also the comparison should not be case
sensitive.
=>
<!DOCTYPE html>
<html>
<body>
<form name=f method=get action=http://localhost/as3setb1.php>
<center>
<table>
<tr><th colspan=2><h1>Choose Menu</h1></th></tr>
<tr><td>Enter the string 1:</td><td><input type=text name =s1></td></tr><br>
<tr><td>Enter the string 2:</td><td><input type=text name =s2></td></tr><br>
<tr><td><input type=radio name=op value=1></td><td>a.Find whether the small string appears
at the start of the large string.
.</td></tr><br>
<tr><td><input type=radio name=op value=2></td><td>b.Find the position of the small string
in the big string. </td></tr><br>
<tr><td><input type=radio name=op value=3></td><td>c. Compare both the string for first n
characters, also the comparison
should not be case sensitive. </td></tr><br>
<tr><thcolspan=2><input type=submit name=sb value=Submit></th></tr>
</table>
</center>
</body>
</html>
/*as3setb1.php*/
<?php
include("func.php");
$x=$_GET['s1'];
$y=$_GET['s2'];
$ch=$_GET['op'];
switch($ch)
{
case 1:appear($x,$y); break;
case 2:echo strpos($y,$x); break;
case 3:compare($x,$y); break;
}
?>
****func.php***
<?php
function length($x)
{
$i=0;
while($x[$i]!=NULL)
{
$i++;
}
echo "length of the given string=".$i;
}
function vowels($x)
{
$cnt=0;
$l=strlen($x)
for($i=0;$i<$l;$i++)
{
if($x[$i]=='a'||$x[$i]=='A'||$x[$i]=='e'||$x[$i]=='E'||$x[$i]=='i'||$x[$i]=='I'||$x[$i]=='o'||$x[$i]=='O'||$x[$i]
=='u'||$x[$i]=='U')
{
$cnt++;
}
}
echo "total number of vowels in string in:".$cnt;
}
function tlower($x)
{
$l=strtolower($x);
$t=ucwords($x);
echo "given string in lower case is:".$l;
echo "given string in title case is:".$t;
}
function pad($x)
{
echo str_pad($x,45,'x',STR_PAD_BOTH);
}
function whitespace($x)
{
echo str replace("","",$x);
}
function rrev($x)
{
echo strrev($x);
}
Slip9:
Write a PHP script for the following: Design a form having a text box and a drop down list
containing any 3 separators(e.g. #, |, %, @, ! or comma) accept a strings from the user and also a
separator.
a. Split the string into separate words using the given separator.
b. Replace all the occurrences of separator in the given string with some other separator.
c. Find the last word in the given string.
<!DOCTYPE html>
<html>
<body>
<form name=f method=get action=http://localhost/as3setb2.php>
<center>
<table>
<tr><th colspan=2><h1>Choose Menu</h1></th></tr>
<tr><td>Enter a string:</td><td><input type=text name =t></td></tr><br>
<tr><td>Enter a separator:</td>
<td><select name=sep>
<option value=#>#</option>
<option value=|>|</option>
<option value=%>%</option>
</select></td></tr><br>
<tr><td><input type=radio name=op value=1></td><td>a.Split the string.</td></tr><br>
<tr><td><input type=radio name=op value=2></td><td>b.Replace separator.</td></tr><br>
<tr><td><input type=radio name=op value=3></td><td>c.Find the last word.</td></tr><br>
<tr><thcolspan=2><input type=submit name=sb value=Submit></th></tr>
</table>
</center>
</body>
</html>
/**** as3setb2.php***/
<?php
include("func.php");
$x=$_GET['t'];
$ch=$_GET['op'];
$s=$_GET['sep'];
switch($ch)
{
case 1:splits($x,$s); break;
case 2:replace($x,$s); break;
case 3:last($x); break;
}
?>
Slip10 :
Write a script to accept two integers(Use html form having 2 textboxes).
Write a PHP script to,
a. Find mod of the two numbers.
b. Find the power of first number raised to the second.
c. Find the sum of first n numbers (considering first number as n)
d. Find the factorial of second number.
(Write separate function for each of the above operations.)
/****as3seta1.html****/
<!DOCTYPE html>
<html>
<body>
<form name=f method=get action=as3seta1.php>
<centre>
<table>
<tr><thcolspan=2><h1>Choose menu</h1></th></tr>
<tr><td enter 1st number:</td><td><input type=text name=t1></td></tr></br>
<tr><td enter 2nd number:</td><td><input type=text name=t2></td></tr></br>
<tr><td><input type=radio name=op value=1></td><td>a.find the mod of 2
numbers.</td></tr></br>
<tr><td><input type=radio name=op value=2></td><td>b.find the power of first raised to
second.</td></tr></br>
<tr><td><input type=radio name=op value=3></td><td>c.find the sum of first n numbers
.</td></tr></br>
<tr><td><input type=radio name=op value=4></td><td>a.find the factorial of second
numbers.</td></tr></br>
<tr><thcolspan =2><input type=submit name=s value=Submit></th><tr>
</table>
</centre>
</form>
</body>
</html>
/***Fun2.php***/
<?php
function mod($n,$m)
{
$md=$n%$m;
echo "Mod of".$n."and".$m."is".$md;
}
function power($n,$m)
{
$p=1;
for($i=0;$i<$m;$i++)
{
$p=$p*$n;
}
echo $p;
}
function sum($n)
{
$s=0;
for($i=1;$i<=$n;$i++)
{
$s=$s+$i;
}
echo $s;
}
function fact($m)
{
$f=1;
while($m>0)
{
$f=$f*$m;
$m--;
}
echo $f;
}
?>
/***as3seta1.php***/
<?php
include("fun2.php");
$n=$_GET['t1'];
$m=$_GET['t2'];
$ch=$_GET['op'];
switch($ch)
{
case 1:
mod($n,$m);
break;
case 2:
power($n,$m);
break;
case 3:
sum($n);
break;
case 4:
fact($m);
break;
}
?>
Slip11:
Create a button with different style (Secondary, Primary, Success, Error, Info, Warning, Danger) using
BootStrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
Slip12:
Write a PHP script for the following: Design a form to accept two numbers from the user. Give
options to choose the arithmetic operation (use radio buttons). Display the result on the next
form. (Use the concept of function and default parameters. Use ‘include’ construct or require
statement)
<html>
<body>
<form method="post" action="a1setb1.php">
Enter first number :
<input type="text" name="no1" value=" "><br>
Enter Second number :
<input type="text" name="no2" value=" "><br>
<input type='radio' name='op' value='1'>Addition<br>
<input type='radio' name='op' value='2'>Multiplication<br>
<input type='radio' name='op' value='3'>Subtraction<br>
<input type='radio' name='op' value='4'>Division<br>
<input type='submit' name='submit' value='submit'>
</form>
</body>
</html>
calculator.php
<?php
function add($a,$b)
{
$s=$a+$b;
return $s;
}
function sub($a,$b)
{
$s=$a-$b;
return $s;
}
functionmul($a,$b)
{
$s=$a*$b;
return $s;
}
function div($a,$b)
{
if($b==0)
echo "Division not possible.<br>";
else
$s=$a/$b;
return $s;
}
?>
a1setb1.php
<?php
include 'calculator.php';
$a=$_POST['no1'];
$b=$_POST['no2'];
$c=$_POST['op'];
switch($c)
{
case 1:
$d=add($a,$b);
echo "Addition :$d";break;
case 2:
$d=mul($a,$b);
echo "Multiplication :$d";break;
case 3:
$d=sub($a,$b);
echo "Subtraction:$d";break;
case 4:
$d=mul($a,$b);
echo "Division:$d";break;
}
?>
Slip14:
Create a container add row inside it and add 3 columns inside row using BootStrap.
➔<html lang="en">
<head>
<style>
.row>div {
background: lightgrey;
border: 1px solid grey;
</style>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" >
<div class="row" border=1>
<div class="col-sm-4">
<p>Colum1</p>
</div>
<div class="col-sm-4">
<p>Colum2</p>
</div>
<div class="col-sm-4">
<p>Colum3</p>
</div>
</div>
</div>
</div>
</html>
Slip15:
Design a form to accept string from the user and perform the following operations
a. To select first 5 words from the string
b. Convert the given string to lowercase and then to Title case.
c. Pad the given string with “*” from left and right both the sides.
d. Remove the leading whitespaces from the given string.
e. Find the reverse of given string.
<?php
// Function to find the length of a string without using built-in functions
functionfindStringLength($string) {
$length = 0;
while (isset($string[$length])) {
$length++;
}
return $length;
}
// Function to count the total number of vowels in a string
functioncountVowels($string) {
$vowels = ['a', 'e', 'i', 'o', 'u'];
$count = 0;
$string = strtolower($string);
for ($i = 0; $i<strlen($string); $i++) {
if (in_array($string[$i], $vowels)) {
$count++;
}
}
return $count;
}
// Function to convert a string to lowercase and then to title case
functionconvertToTitleCase($string) {
$string = strtolower($string);
$string = ucwords($string);
return $string;
}
// Function to pad a string with "*" from left and right
functionpadString($string) {
$string = "*" . $string . "*";
return $string;
}
// Function to remove leading whitespaces from a string
functionremoveLeadingWhitespaces($string) {
$string = ltrim($string);
return $string;
}
// Example usage
$inputString = "Hello World";
echo "Length of the string: " . findStringLength($inputString) . "<br>";
echo "Total number of vowels: " . countVowels($inputString) . "<br>";
echo "String in title case: " . convertToTitleCase($inputString) . "<br>";
echo "Padded string: " . padString($inputString) . "<br>";
echo "String with leading whitespaces removed: " . removeLeadingWhitespaces($inputString) .
"<br>";
?>
Slip17:
Write a PHP script to sort the following associative array :
array(“Sagar"=>"31","Vicky"=>"41","Leena"=>"39","Ramesh"=>"40") in
a) ascending order sort by Value
b) ascending order sort by Key
c) descending order sorting by Value
d) descending order sorting by Key
<?php
echo "Associative array : Ascending order\n sort by value";
$array2 = array("Sagar" => "31", "Vicky" => "41", "leena" => "39", "Ramesh" => "40");
asort($array2);
foreach ($array2 as $y => $y_value)
echo "Age of " . $y . " is : " . $y_value . "";
echo "Associative array : Ascending order sort by Key";
$array3 = array("Sagar" => "31", "Vicky" => "41", "leena" => "39", "Ramesh" => "40");
ksort($array3);
foreach ($array3 as $y => $y_value)
echo "Age of " . $y . " is : " . $y_value . "";
echo "Associative array : Descending order sorting by Value";
$age = array("Sagar" => "31", "Vicky" => "41", "leena" => "39", "Ramesh" => "40");
arsort($age);
foreach ($age as $y => $y_value)
echo "Age of " . $y . " is : " . $y_value . "";
echo "Associative array : Descending order sorting by Key";
$array4 = array("Sagar" => "31", "Vicky" => "41", "leena" => "39", "Ramesh" => "40");
krsort($array4);
foreach ($array4 as $y => $y_value)
echo "Age of " . $y . " is : " . $y_value . "";
?>
Slip24:
Write a PHP program to read two file names from user and append content of first file into second file.
<?php
$sourceFname="test.txt";
$fp1=fopen("test.txt","r");
$fp2=fopen("test2.txt","a");
fwrite($fp2,fread($fp1,filesize($sourceFname)));
echo "Data Copied";
?>
***test.txt***
hey! hi vaishnavi
***test2.txt**
ye hii...
