Scribd
Upload
3K views

Web Technology Assignment

The document contains the answers to 11 HTML assignment questions. Each question asks the author to write HTML code to create a table, list, hyperlinks, frames, or other element. The author provides the HTML code to generate the requested element. For example, question 1 asks to create a table listing computer science classes and subjects, and the author provides the HTML code to generate that table. The document serves as an example of using HTML to create common elements like tables, lists, and images.

Uploaded by

Divakar Keshri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3K views

Web Technology Assignment

The document contains the answers to 11 HTML assignment questions. Each question asks the author to write HTML code to create a table, list, hyperlinks, frames, or other element. The author provides the HTML code to generate the requested element. For example, question 1 asks to create a table listing computer science classes and subjects, and the author provides the HTML code to generate that table. The document serves as an example of using HTML to create common elements like tables, lists, and images.

Uploaded by

Divakar Keshri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 50

HTML Assignment Author - Jeetu Sahu

Q1. Write an HTML program to create the following table :


Class Subject 1 Subject 2 Subject 3
BCA I Visual Basic PC Software Electronics
BCA II C++ DBMS English
BCA III Java Multimedia CSA

Answer: - Code for above table:

<!DOCTYPE html>
<html>
<head> <title> Table format </title>
<style>
table, tr, th{
border:2px solid black;
border-collapse:collapse;
width:500px;}
</style>
</head>
<body>
<table border="1">
<tr> <th> Class </th> <th>Subject 1 </th> <th> Subject 2 </th>
<th> Subject 3 </th> </tr>

<tr> <th> BCA I </th> <th>Visual Basic </th> <th> PC Software </th >
<th> Electronics</th> </tr>

<tr> <th> BCA II</th> <th>C++</th> <th> DBMS </th> <th> English</th>
</tr>

Author - Jeetu Sahu MasterProgramming.in


<tr> <th>BCA III</th> <th>Java</th> <th> Multimedia</th> <th> CSA</th>
</tr>
</table>
</body>
</html>
Output: -

Q2. Write an HTML program to create the following list:

(I) C
(II) C++
(III) Fortran
(IV) COBOL

Answer: - Coding for above list-

<!DOCTYPE html>
<html>
<head><title> list format </title>
</head>
<body>
<ol type="I">
<li> C </li>

Author - Jeetu Sahu MasterProgramming.in


<li> C++ </li>
<li> Fortran </li>
<li> COBOL </li>
</ol>
</body>
</html>
Output:-

Q3. Write an HTML program to create the following list:


1. Java
2. Visual Basic
3. BASIC
4. COBOL

Answer: - Coding for above list-

<!DOCTYPE html>
<html>
<head><title> list format </title>
</head>
<body>
<ol type="1">

Author - Jeetu Sahu MasterProgramming.in


<li> Java</li>
<li> Visual Basic </li>
<li> BASIC </li>
<li> COBOL </li>
</ol>
</body>
</html>
Output:-

Q4. Write an HTML program to demonstrate hyper linking between


two web pages. Create a marquee and also insert an image in the page.

Answer: - coding for above program

<!DOCTYPE html>
<html>
<head><title> hyper link format </title>
</head>
<body>

Author - Jeetu Sahu MasterProgramming.in


<a href="C:\Users\ Credible \Desktop\table.html"> Go to another file </a>
<h1><marquee > **This the marquee tag **</marquee> </h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg"
width=200px
height=200px>
</body>
</html>
Output: -

Q5. Write an HTML program to create frame in HTML with 3 column

(Width=30%, 30%, 40%)

Answer: - coding for above program:

<!DOCTYPE html>
<html>
<head> <title> frame format </title>
</head>

<frameset cols="30%,30%,40">

Author - Jeetu Sahu MasterProgramming.in


<frame NAME=" FRAME1" src="C:\Users\Credible \Desktop\frame1.htm"/>

<frame NAME="FRAME2" src="C:\Users\ Credible \Desktop\frame2.htm"/>

<frame NAME="FRAME3" src="C:\Users\ Credible \Desktop\frame3.htm"/>

</frameset>

</html>
Output: -

Q6. Write an HTML program to create a web page with a blue background and
the following text.

New Delhi
New Delhi, the capital and the third largest city of India is fusion of the
ancient and the modern. The refrain of the Muslim dynasties with its architectural
delights, give the majestic ambience of the bygone era.

Answer: - Coding for the above table

<!DOCTYPE html>

Author - Jeetu Sahu MasterProgramming.in


<html>
<head> <title> paragraph</title>
<body bgcolor=”blue”>
<i> <u>
<h1 align="center" >New Delhi
</h1></u>
<p>
New Delhi, the capital and the third largest city of India is fusion of the ancient
and the modern. The refrain of the Muslim dynasties with its architectural
delights, give the majestic ambience of the bygone era.
</p>
</i>
</body>
</html>

Output: -

Q7. Write an HTML program to create the following table:

Admission

Course OC BC MBC SC/ST TOTAL


Computer science 9 18 5 5 37
Commerce 14 25 6 5 50

Author - Jeetu Sahu MasterProgramming.in


Grand total 87

Answer: - coding for above program-

<!DOCTYPE html>
<html>
<head> <title> paragraph</title>
<style>
table, tr, th, td{
border: 2px solid black;
border-collapse:collapse;
width:600px;
height:20px;}
</style>
<body>
<i> <u>
<h1 align="center" >Admission
</h1></u>
</i>
<table>
<tr> <th> Course</th> <th>OB</th> <th>BC</th> <th> MBC</th>
<th> SC/ST</th> <th>TOTAL </th></tr>

<tr> <th> Computer science </th> <td>9 </td> <td> 18</td>


<td> 5</td> <td>5 </td> <td>37 </td> </tr>

<tr> <th> Commerce</th> <td>14</td> <td> 25</td> <td> 6</td>


<td>5</td> <td>50 </td></tr>

<tr> <td colspan="5"><b>Grand total </b></td> <td>87 </td></tr>


</body>
</head>
</html>

Output: -

Author - Jeetu Sahu MasterProgramming.in


Q8. Write an HTML program to create the following table:

Car Price List

Maruti Tata Ford


Model Price Model Model Price
Maruti 8000 2 Lac Sumo 2 Lac Ikon 5 Lac
Omni 3 Lac Scorpio 3 Lac Gen 2 Lac

Answer: - coding for the above table

<!DOCTYPE html>
<html>
<head> <title> paragraph</title>
<style>

table, tr, th, td{


border: 2px solid black;
border-collapse:collapse;
width:600px;
height:20px;}

</style>
</head>
<body>
<u>
<h1 align="center" >Car Price List
</h1></u>
<table align="center">
<tr> <th colspan="2">Maruti</th> <th colspan="2">Tata</th>
<th colspan="2">Ford</th> </tr>

Author - Jeetu Sahu MasterProgramming.in


<tr> <th> Model</th> <th>Price</th> <th> Model</th>
<th>Price</th>
<th> Model </th> <th>Price</th> </tr>

<tr> <td> Maruti 8000</td> <td>2 Lac</td> <td> Sumo</td> <td>2


Lac</td> <td>Ikon </td> <td>5 Lac</td> </tr>

<tr> <td >Omni</td> <td>3 Lac</td> <td>Scorpio</td> <td>3


Lac</td> <td>Gen</td> <td>2 Lac</td> </tr>
</body>
</html>
Output: -

Q9. Write the HTML program to create the following table:

Name Subject Marks


Arun Java 70
C 80

Author - Jeetu Sahu MasterProgramming.in


Ashish Java 75
C 69

Answer: - coding for above table

<!DOCTYPE html>
<html>
<head> <title> table formate</title>
<style>
table, tr, th, td{
border: 2px solid black;

border-collapse:collapse;

width:400px;
height:20px;}

td{
text-align:center;}
</style>
</head>
<body>

<table align="center">
<tr> <th>Name</th> <th>Subject</th> <th>Marks</th> </tr>

<tr> <td>Arun</td> <td>Java</td> <td>70</td> </tr>

<tr> <td> </td> <td> C </td> <td> 80</td> </tr>

<tr> <td >Ashish</td> <td>Java</td> <td>75</td> </tr>

<tr> <td> </td> <td>C</td> <td>69</td> </tr>

Author - Jeetu Sahu MasterProgramming.in


</body>
</head>
</html>

Output: -

Q10. Create the HTML document and embed a flash movie in it.

Answer: - Coding for above program

<!DOCTYPE html>
<html>
<head> <title> flash movies</title>
</head>
<body>

<embed src="C:\Users\ Credible \Desktop\movie.mp4"


width="500" height="500">
</body>
</html>

Output: -

Author - Jeetu Sahu MasterProgramming.in


Q11. Write the HTML coding to display the following table. Also insert an image
in the web page

Subject Max Min obtain


Java 100 33 75
Multimedia 100 33 70
Operating system 100 33 68
C++ 100 33 73

Answer: -Coding for above table

<!DOCTYPE html>
<html>
<head> <title> Table format</title>
<style>

table, tr, th, td{


border: 2px solid black;
border-collapse:collapse;
width:600px;
height:20px;}

Author - Jeetu Sahu MasterProgramming.in


</style> </head>
<body background="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
<u>
<h1 align="center" >Student records </h1></u>

<table align="center">
<tr> <th >Subject</th> <th >Max</th> <th >Min</th> <th
>obtain</th> </tr>

<tr> <td> Java </td> <td>100</td> <td> 33</td>


<td>75</td> </tr>
<tr> <td> Multimedia</td> <td>100</td> <td> 33</td>
<td>70</td> </tr>
<tr> <td> Operating system</td> <td>100</td> <td> 33</td>
<td>68</td> </tr>
<tr> <td> C++</td> <td>100</td> <td>33l</td>
<td>73</td> </tr>
</body>
</html>
Output: -

Q12. Write the HTML coding to display the following table

Name Rahul

Author - Jeetu Sahu MasterProgramming.in


Roll no. 101
Subject Max Min Obtain
Java 100 33 75
Multimedia 100 33 70

Answer:-Coding for above program

<!DOCTYPE html>
<html>
<head> <title> Table format</title>
<style>

table, tr, th, td{


border: 2px solid black;
border-collapse:collapse;
width:600px;
height:20px;}

th, td{
text-align:left;}
</style>

</head>
<body >
<u>
<h1 align="center" >Student records
</h1></u>

<table align="center">
<tr> <th colspan="2">Name</th> <th colspan="2"
>Rahul</th> </tr>

<tr> <th colspan="2">Roll No.</th> <th colspan="2"


>101</th> </tr>

<tr> <th> Subject</th> <th>Max </th> <th> Min</th>

<th>Obtain </th> </tr>

<tr> <td> Java</td> <td>100</td> <td> 33</td>


<td>75</td> </tr>

Author - Jeetu Sahu MasterProgramming.in


<tr> <td> Multimedia</td> <td>100</td> <td> 33</td>
<td>70</td> </tr>

</body>
</head>
</html>

Output:-

Q13. Write an HTML program to create a form as the following:

Enter Name:

Enter Roll No:

Enter Age:

Author - Jeetu Sahu MasterProgramming.in


Enter DOB

Answer: -Coding for above program


<!DOCTYPE html>
<html>
<head><title> list
</title>
</head>
<body>
<table width="300" >
<tr>
<td> Enter Name:</td> <td> <input type="text"> </td> </tr>
<tr>
<td>Enter Roll No:</td> <td><input type="text"></td> </tr>
<tr>
<td>Enter Age: </td> <td><input type="text"></td> </tr>
<tr>
<td>Enter DOB </td> <td><input type="text"></td> </tr>
</table>
</body>
</html>

Output: -

Author - Jeetu Sahu MasterProgramming.in


Q14. Write an HTML program to create a web page an image as background
and the following
New Delhi
New Delhi, the capital and the third largest city of India is fusion of the ancient
and the modern. The refrain of the Muslim dynasties with its architectural delights,
give the majestic ambience of the bygone era.
On the other side New Delhi, the imperial city built by British, reflect the first
paced. The most fascinating of all is the character of Delhi which varies from the
13th present century mausoleum of the Lodi kings to ultra modern glass
skyscrapers.

Answer: - coding for above program

<!DOCTYPE html>
<html>
<head><title> paragraph</title>
</head>
<body background="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
<h1 align="center" > <u>New Delhi </u></h1>
<p>
New Delhi, the capital and the third largest city of India is fusion of the

ancient and the modern. The refrain of the Muslim dynasties with its

architectural delights, give the majestic ambience of the bygone era.

Author - Jeetu Sahu MasterProgramming.in


</p>
<p>
On the other side New Delhi, the imperial city built by British, reflect the first

paced. The most fascinating of all is the character of Delhi which varies from

the 13th present century mausoleum of the Lodi kings to ultra modern glass

skyscrapers.

</p>
</body>
</html>
output:-

Q15. Create the


following
HTML form.

Answer: -Coding for above program:

Author - Jeetu Sahu MasterProgramming.in


<!DOCTYPE html>
<html>
<head><title> list
</title>
</head>
<body>
<form>
<table width="300" >
<tr>
<td> USER NAME:</td> <td> <input type="text"> </td> </tr>
<tr>
<td>PASSWORD:</td> <td><input type="password"></td> </tr>
</table>
When user types characters in a password field, the browser display asterisk
or bullets instead of characters.
<br/>
<button type=submit value=submit > submit Query</button>
</form>
</body>
</html>

Output: -

Q16. Create the following HTML form.

Answer: -Coding for above program

<!DOCTYPE html>
<html>

Author - Jeetu Sahu MasterProgramming.in


<head><title> list
</title>
</head>
<body>
<form>
<table width="300" >
<tr>
<td> FIRSTNAME:</td> <td> <input type="text"> </td> </tr>
<tr>
<td>LASTNAME:</td> <td><input type="password"></td> </tr>
</table>
GENDER: <br>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<br>
<br>
SUBJECT:<select>
<option value="1"> multimedia </option>
<option value="2"> operating system </option>
<option value="3"> CSA </option>
</select><br /><br/><br/>
<button type="submit" value="submit" > submit Query</button>
</form>
</body>
</html>

Output:-

Q17. Create the following HTML form.

Author - Jeetu Sahu MasterProgramming.in


Answer: - coding for above table

<!DOCTYPE html>
<html>
<head><title> list
</title>
</head>
<body>
<table width="300" >
<tr>
<td> Enter your name:</td> <td> <input type="text"> </td>
</tr>
<tr>
<td>Enter your roll no:</td> <td><input type="password"></td>
</tr>
</table>
Subjec t: <br/>
<input type="checkbox" name="subject">Java <br/>

<input type="checkbox" name="subject">C <br/>

<input type="checkbox" name="subject">Visual Basic <br/>

<input type="checkbox" name="subject">C++ <br/>

<br>

<br>

Class:<select>

<option value="1"> BCA-I </option>

<option value="2"> BCA-II </option>

<option value="3"> BCA-III </option>

</select><br /><br/><br/><br/>

<button type="submit" value="submit" > submit Query</button>


</body>
</html>

Author - Jeetu Sahu MasterProgramming.in


Output: -

Q18. Write the HTML coding for the following equations:

Answer: -Coding for above table

<!DOCTYPE html>
<html>
<head><title> list
</title>
</head>
<body><br/> <br/>
C<sub>2</sub>H<sub>5</sub>OH
+PCL<sub>5</sub>=C<sub>2</sub>H<sub>5</sub>CL
+POCL<sub>3</sub>+HCL
<br/>
4H<sub>3</sub>PO<sub>3</sub>=3H<sub>3</sub>PO<sub>4</sub>
+PH<sub>3</sub>
<br/>
PCL<sub>3</sub>+CL<sub>2</sub>=PCL<sub>5</sub>
</body>
</html>
Output: -

Author - Jeetu Sahu MasterProgramming.in


Q19. Write the HTML coding to display the following :

Answer: - coding for the above program:

<!DOCTYPE html>
<html>
<head><title> list format </title>
</head>
<body> <ol type="1">
<li>Actors<br/><ol type="1">
<li>Bruce Willis</li>
<li>Gerard Butler </li>
<li>Vin Diesel </li>
<li>Bradd pitt </li></ol> </li>

<li>Actress<br/><ol type="1">
<li>Julia Roberts</li>
<li>Angelina Jolie </li>
<li>Kate Winslet </li>
<li>Cameron Diaz </li> </ol> </li>
</body>
<html>
Output: -

Author - Jeetu Sahu MasterProgramming.in


Q20. Write the HTML coding to display the following :

1. Cricket players
1. Batsman
1. SachinTendulkara
2. Rahul Dravid
3. Virendrasehwag
2. Bowler
1. Kumbale
2. Zaheer Khan
3. Balaji
3. Spinner
1. Harbhajan
2. Kumbale
3. Jadeja

Answer: - coding for the above program:-

<!DOCTYPE html>
<html>
<head><title> list format </title>
</head>
<body> <ol type="1">
<li>Cricket players<br/><ol type="1">

<li>Batsman<ol type="1">
<li>SachinTendulkara</li>
<li>Rahul Dravid </li>

Author - Jeetu Sahu MasterProgramming.in


<li>Virendrasehwag</li></ol> </li>

<li>Bowler<br/><ol type="1">
<li>Kumbale</li>
<li>Zaheer Khan</li>
<li>Balaji</li></ol> </li>

<li>Spinner <ol type="1">


<li>Harbhajan</li>
<li>Kumbale</li>
<li>Jadeja</li>
</ol> </li>
</body>
</html>
Output: -

JAVA-SCRIPT
Q 1 Write a script to usingfor loop to print 1 to 50.
Answer:-
Coding for the Program (Using java-script):-

<!DOCTYPE html>
<html>

Author - Jeetu Sahu MasterProgramming.in


<head>
<title>
Print 1 to 50 number </title>
</head>

<body>

<script type="text/javascript">
document.write("The number 1 to 50 <br/>");

for(i=1;i<=50;i++)
{
document.write( i );

if(i<=10)
{document.write("&ensp;");
}
document.write("&ensp;");
if(i==10||i==20||i==30||i==40)

document.write("<br/><br/>");
}
</script>

</body>

</html>

Author - Jeetu Sahu MasterProgramming.in


Output: -

Author - Jeetu Sahu MasterProgramming.in


Q 2 Write a script to get largest value in array.
Answer: -
Coding for the Program (Using java-script):-
<!DOCTYPE html>
<html>
<head><title> Find large Number </title>
</head>
<body>
<script type="text/javascript">

var p=prompt("Enter the number of term");


var array=[],rray=[];
;
var k;
for(i=1;i<=p;i++)
{
array[i]=prompt(+i+"Enter the number");
rray=array;
}
k=array[1];
for(i=1;i<=p;i++)
{
if(k<=array[i])
{ k=array[i];
}
}
document.write("Given number is");
for(i=1;i<=p;i++)
{document.write("<br/>&ensp;&ensp;"+rray[i]);}

document.write("<br/>Grater number is"+k);

</script>

</body>

</html>

Output:-

Author - Jeetu Sahu MasterProgramming.in


Author - Jeetu Sahu MasterProgramming.in
Q 3 Write a script to print sum and multiplication of two numbers.
Answer:-
Coding for the Program (Using java-script):-
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script type=”text/javascript”>

var i=4, j=5;


var sum = i+j;
var mul = i*j;
document.write("Given Number is “ +i+ ” and ” +j+ “<br/><br/>");
document.write("Sum is"+sum+"<br/>");
document.write("And Product is"+mul);

</script>

</body>
</html>

Output:-

Author - Jeetu Sahu MasterProgramming.in


Q 4 Write a program to print date using java script.

Answer:-
Coding for the Program (Using java-script):-
<!DOCTYPE html>
<html>
<bodystyle=" font-size:30px;" >
<p id="demo"></p>
<script>

var d= new Date();


document.write("Date is"+d);
</script>

</body>
</html>

Output:-

Author - Jeetu Sahu MasterProgramming.in


Q 5 Write a program to demonstrate date validation form .
Answer:-
Coding for the Program (Using java-script):-

<html>

<body>
<script>
function validateform()
{
var name=document.getElementById("name");
var password=document.getElementById("password");
if (name.value==null || name.value=="")
{
alert("Name can't be blank");
return false;
}
else if(password.value.length<6)
{
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form method="get" onsubmit="return validateform()" action="register.html">
<table>
<tr>
<td>
Enter Name: </td><td><input type="text" id="name"/></td></tr>
<tr><td>
Password: </td><td><input type="password" id="password"/></td></tr>
</table>
<input type="submit" value="submit">

</form>
</body>

</html>

Register.html file

<!DOCTYPE html>

Author - Jeetu Sahu MasterProgramming.in


<html>
<head><title> paragraph</title>
</head>
<body>
<h1>&ensp; &ensp;!!Congratulation !!<br/>
You have successfully registered </h1>

</script>

</body>
</html>

Output:-

Author - Jeetu Sahu MasterProgramming.in


If any error:-

After submit:-

Author - Jeetu Sahu MasterProgramming.in


CSS
Q 1 Create a wed-pagewhich show the change of header Dynamically.

Answer: -

A. Coding for theProgram (Using CSS):-

<!DOCTYPE html>
<html>
<head>

<title>My dynamic header </title>


<style>

#first{
text-align: center;
width:500px;
background-color:rgba(123,12,245,.5);
}

#first:hover{
background: yellow;
}

</style>

</head>
<body>

<center>
<h1 id="first" >This is heading </h1>
</center>

</body>
</html>

Author - Jeetu Sahu MasterProgramming.in


Output:-

Author - Jeetu Sahu MasterProgramming.in


B. Coding for the Program (Using javascript):-

<!DOCTYPE html>

<html>
<head>

<title>My dynamic header </title>


<style>
h1{
text-align: center;
width:500px;
background-color:rgba(123,12,245,.5);
}
</style>

<script type="text/javascript">

function effect(){
var x=document.getElementById("first");
x.style.backgroundColor="red";
x.style.fontSize="40px";
}

function eback(){
var x=document.getElementById("first");
x.style.backgroundColor="rgba(123,12,245,.5)";
x.style.fontSize="30px";
}
</script>
</head>
<body>
<center>
<h1 id="first" onmouseover="effect()" onmouseout="eback()">This
is heading </h1>
</center>
</body>

</html>

Author - Jeetu Sahu MasterProgramming.in


Output:-

Author - Jeetu Sahu MasterProgramming.in


Q 2 Create a web-page which explain the use of relative position.

Answer: -Relative - the element is positioned relative to its normal position.

When we set the position relative to an element, without adding any other positioning

attributes (top, bottom, right, left) nothing will happen. When we add an additional

position, such as left: 20px the element will move 20px to the right from its normal

position. Here, we can see that this element is relative to itself. When the element moves,

no other element on the layout will be affected.

There is a thing we should keep in mind while setting position - relative to an element limits

the scope of absolutely positioned child elements. This means that any element that is the

child of this element can be absolutely positioned within this block.

In this example, you will see how the relatively positioned element moves when its

attributes are changed. The first element moves to the left and top from its normal

position, while the second element stays in the same place because none of the additional

positioning attributes were changed.

Author - Jeetu Sahu MasterProgramming.in


Coding for the webpage:-
<!DOCTYPE html>
<html><head>
<style>
#first_element {
position:relative;
left: 30px;
top: 70px;
width: 500px;
height:100px;
background-color: #fafafa;
border: solid 3px #ff7347;
font-size: 24px;
text-align: center;
}
#second_element {
position: relative;
width: 500px;
height:100px;
background-color: #fafafa;
border: solid 3px #ff7347;
font-size: 24px;
text-align: center;
}
</style></head>
<body>
<div id="first_element">First element</div><br/>
<div id="second_element">Second element</div>
</body>
</html>

Output: -

Author - Jeetu Sahu MasterProgramming.in


Before relative position: -

After relative position left: 30px; top: 70px; moved the first element from his exact
position.

Author - Jeetu Sahu MasterProgramming.in


Q 3 Design a wed-page to if the user right clicks on the document area and alert box
should appear instead of the shortcut menu.
Answer:-
Coding for the webpage:-
<!DOCTYPE html>
<html>
<head><title>ONCONTEXTMENU</title>
<script>
function effect()
{
alert(" You cann't Edit");
}

</script>
<style>
#first_element
{

background-Color:red;
width:400px;
height:100px;
}
center
{
position:absolute;
top:5%;
left:8%;

}
</style>
</head>
<body>
<div id="first_element" oncontextmenu="effect();">
<center style="font-size:30px;"> Right Click Here</center>
</div>
</body>
</html>

Author - Jeetu Sahu MasterProgramming.in


Output:-

Author - Jeetu Sahu MasterProgramming.in


Q 4 Design a web page to display a digital clock.
Answer:-
Coding for the program:-
<!DOCTYPE html>
<html>
<head>
<title> display clock</title>

<style type="text/css">
#clock{
width:800px;
margin:150px;
text-align:center;
font-size:150px;
}
</style>

</head>

<body>
<div id="clock"> </div>

<script type="text/javascript">
setInterval(displayclock , 500);
function displayclock() {
var time = new Date();
var hrs = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds();

if(hrs>12){
hrs=hrs - 12;
}

if(hrs==0)
{
hrs = 12;
}
if(hrs<10)
{
hrs= '0'+ hrs;}
if(min<10)

Author - Jeetu Sahu MasterProgramming.in


{
min= '0'+ min;
}
if(sec<10)
{ sec= '0'+ sec;
}
document.getElementById('clock').innerHTML = hrs + ':' + min + ':' +sec;
}

</script>
</body>
</html>

Output:-

Author - Jeetu Sahu MasterProgramming.in


PHP PROGRAMS
1) Create a script using for loop to add all integer between 0 to 30 and display.
Answer:-
Coding for the program:-
<?php

$sum=0;
echo"<h2>sum of first 30 digit is :- </h2>";
for($i=1;$i<=30;$i++)
{ $sum=$i+$sum;
echo"$i";
if($i<30)
{
echo"+";
}
if($i>=30)
{
echo"= $sum";
}
}
echo" <h2>sum of 1 to 30 number is : $sum</h2>";
?>

Output:-

Author - Jeetu Sahu MasterProgramming.in


2) Create a script to construct the following patter using nested loop
Answer:-
Coding for the program:-
<?php
echo "This is the trangle pattern:-<br/>";
for ($i=1; $i<=9; $i++)
{
for($j=1;$j<=$i;$j++)
{
echo " * ";
}
echo "<br/>";
}
?>

Output:-

3) Write a PHP script to get the largest key in an array.


Answer:-
Coding for the program:-
<?php
$x = array(
'value1' => 3021,
'value2' => 2365,
'value3' => 5215,
'value4' => 5214,
'value5' => 2145);
reset($x); // optional.

Author - Jeetu Sahu MasterProgramming.in


arsort($x);
$key_of_max = key($x);
echo "Index of the highest value : ".$key_of_max."\n";
?>

Output:-

4) Write a function to calculate the factorial of a number.


Answer:-
Coding for the program:-
<?php
$num = 4;
$factorial = 1;
for ($x=$num; $x>=1; $x--)
{
$factorial = $factorial * $x;
}
echo "Factorial of $num is $factorial";
?>

Output:-

Author - Jeetu Sahu MasterProgramming.in


5) Write a PHP script to check palindrome number
Answer:-
Coding for the program:-
<?php
function palindrome($n){
$number = $n;
$sum = 0;
while(floor($number)) {
$rem = $number % 10;
$sum = $sum * 10 + $rem;
$number = $number/10;
}
return $sum;
}

$input = 1235321;
$num = palindrome($input);
if($input==$num)
{
echo "$input is a Palindrome number";
} else {
echo "$input is not a Palindrome";
}
?>

Output:-

Author - Jeetu Sahu MasterProgramming.in

You might also like