Scribd
Upload
13 views33 pages

11 STD HTML Com and Sci Practicals For Journal 2024-25-1

The document outlines a series of HTML and JavaScript experiments, detailing their names, dates, and objectives. Each practical includes specific coding tasks, such as creating web pages with various elements like tables, forms, and multimedia. The document serves as a guide for students to learn web development through hands-on programming exercises.

Uploaded by

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

11 STD HTML Com and Sci Practicals For Journal 2024-25-1

The document outlines a series of HTML and JavaScript experiments, detailing their names, dates, and objectives. Each practical includes specific coding tasks, such as creating web pages with various elements like tables, forms, and multimedia. The document serves as a guide for students to learn web development through hands-on programming exercises.

Uploaded by

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

INDEX

PARTICULARS OF THE EXPERIMENTS PERFORMED


Expt Page Date of
Name of the Experiment Remark
No No Experiment
1 HTML PROGRAM WITH FORMATING TAGS 08-08-24
HTML PROGRAM WITH IMAGE , PARAGRAPH,
2 11-08-24
TABLE
3 HTML PROGRAM FOR STUDENT FORM 14-08-24
4 HTML PROGRAM WITH TABLE AND HYPERLINK 17-08-24
HTML PROGRAM WITH FORM ELEMENTS RADIO
5 21-08-24
, CHECKBOX
6 HTML PROGRAM FOR HEADING LEVELS 24-08-24
HTML PROGRAM FOR TABLES (INPUT OUTPUT
7 28-08-24
DEVICES)
8 HTML PROGRAM USING TABLE AND LINK 07-09-24
HTML PROGRAM USING FORM ELEMENT AND
9 11-09-24
LINK
10 HTML PROGRAM FOR TABLE AND ROWSPAN 25-09-24

11 HTML PROGRAM USING COLGROUP 27-09-24

12 HTML PROGRAM FOR INSERTING IMAGE 29-09-24


HTML PROGRAM FOR USING MULTIPLE AUDIO
13 04-10-24
FORMAT ON WEBPAGE
HTML PROGRAM FOR USING MULTIPLE VIDEO
14 06-10-24
FORMAT ON WEBPAGE
15 HTML PROGRAM WITH MARQUEE AND HR TAG 09-10-24

16 JAVASCRIPT PROGRAM FOR CALCULATOR 11-10-24


JAVASCRIPT PROGRAM TO FIND AREA OF
17 13-10-24
CIRCLE
18 JAVASCRIPT PROGRAM TO FIND EVEN OR ODD 04-12-24
JAVASCRIPT PROGRAM TO FIND GREATER
19 06-12-24
NUMBER
20 JAVASCRIPT WELCOME FUNCTION PROGRAM 08-12-24
JAVASCRIPT EVENT DRIVEN PROGRAM(AGE
21 11-12-24
QUALIFY)
22 JAVASCRIPT TABLE PROGRAM 12-12-24
11 STD PRACTICALS FOR JOURNAL
Practical 1
Write a program using HTML with following specifications.
• The background colour should be light green.
• The text colour should be red.
• The heading should be large in size as 'My First Web Page'.
• Display a horizontal line after the heading.
• Display your name in Bold, address in Italics and standard as 11th
Ans : Practical 1
Aim : To Create Web Page Using Physcial tags
Software Requirment : Notepad / Microsoft Edge Browser
filename : practical1.html
<!doctype html>
<html>
<head>
<title> Practical 1 </title>
</head>
<body bgcolor="lightgreen" text="red">
<h1> My First Web Page </h1>
<hr>
<b> Student Name </b><br>
<i> Student Address </i> <br>
Standard 11<sup>th</sup>
</body>
</html>
Practical 1
Output

Practical 2
Create a web page with, following specification.
• Image of any scientist with an alternate text as his name.
• Create a paragraph related to information of that scientist.
• Create a table of his/her inventions.

Ans : Practical 2
Aim : To Create Web Page Using Formatting Software
Requirment : Notepad / Microsoft Edge Browser
filename : practical2.html
<!doctype html>
<html>
<head>
<title> Scientist </title>
</head>
<body>
<img src="abdulkalam.jpg" alt="A.P.J Abdul kalam" width="200"
height="200">
<p>
<ol>
<li>Nandhi<br>
It was his first invention for his college project. He made a double
engine powered hovecraft and it was completed after a lot of
struggle. It flew above one foot with two people. </li>
<li>Pokhran 2 </li>
It consists of five detonations, the first was fusion bomb and the
rest were fission bombs. The speciality of Pokhran 2 was that it was
tested in ultimate secrecy. The test was a success as the spy
satellites and CIA satellites could be avoided.<br>
<li>Indigenous Guided Missiles</li>
APJ Abdul Kamal was appointed as the CEO of Integrated Guided
Missile Development Program. He was responsible for the
development and operation of AGNI and PRITHVI missiles.<br>
<li>Kalam Raju Stent</li>
Kalam developed a low cost coronary stent which led to the
reduction of prices of imported coronary stents by more than 50
per cent.
</p>

<table border="5">
<caption> A.P.J Abdul Kalam Inventions </caption>
<tr align="center">
<th> SrNo </th>
<th> Inventions </th>
<th> Year </th>
</tr>
<tr align="center">
<td> 1 </td>
<td> Nandhi </td>
<td> 1965 </td>
</tr>
<tr align="center">
<td> 2 </td>
<td> Pokhran 2 </td>
<td> 1970 </td>
</tr>
<tr align="center">
<td> 3 </td>
<td> Indigenous Guided Missiles </td>
<td> 1978 </td>
</tr>
<tr align="center">
<td> 4 </td>
<td> Kalam Raju Stent </td>
<td> 1998 </td>
</tr>
</table>
</body>
</html>
Practical 2
Output

Practical 3
Create a webpage with following specification.
• Display heading 'Application Form' in highest heading with center
• alignment.
• Accept name, standard 11th or 12 th with only one selection choice.
• Submit the form.

Ans : Practical 3

Aim : To Create Web Page using Form


Requirment : Notepad / Microsoft Edge Browser
Filename : Applicationform.html
<!doctype html>
<html>
<head>
<title> Student Application Form </title>
</head>
<body bgcolor="lightgrey" text="purple">
<h1 align="center">Application Form </h1>
<form method="post" action="/student.php">
Enter Name : <input type="text" name="t1"><br><br>
Standard : <br>
<input type="radio" name="r1">11<sup>th</sup><br>
<input type="radio" name="r1">12<sup>th</sup><br>
<input type="Submit" value="Submit">
</form>
</body>
</html>
Output
Practical 3

Practical 4
Write a program using HTML with the following specification.
A webpage with details about a class with total number of students-
100, (Boys-50), Girls- 50 in tabular form.
e.g.

Link this page to another page as follows.

Ans : Practical 4
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename : Class Strength
<!doctype html>
<html>
<head>
<title> Class Strength </title>
</head>
<body>
<table border="5">
<caption> Class Strength </caption>
<tr bgcolor="pink">
<th> Number of Students </th>
<th> Boys </th>
<th> Girls </th>
</tr>
<tr bgcolor="lightblue" align="center">
<td>100</td>
<td>50</td>
<td>50</td>
</tr>
</table>
<br>
<a href="class.html">Click here to view Division
</a>
</body>
</html>
Practical 4
Output

Filename : demo.html
<!doctype html>
<html>
<head>
<title>Link Page</title>
</head>
<body>
<p style="border:1px solid black">
<b>Std XI</b><br>
<i>Stream - Science</i><br>
<u>Div - A</u>
</p>
</body>
</html>
Practical 4
Output

Practical 5
Q.5 Write a HTML program to display different text level formatting
tags

Ans : 5
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
File name : formatting tags.html
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML5 text formatting tags</title>
</head>
<body>
<b>This text is bold</b><br><br>
<i>This text is italic</i><br><br>
<mark>This text is marked</mark><br><br>
This is <sub>subscript</sub> and <sup>superscript
</sup><br><br>
<ins>Inserted Text</ins><br><br>
<del>Deleted Text</del><br><br>
</body>
</html>

Practical 5
Output
Practical 6
Q.6 Write a HTML program to display different heading Levels

Ans 6:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
File name : Headings level.html

<!DOCTYPE html>
<html>
<head>
<title>Heading levels</title>
</head>
<body bgcolor=skyblue>
<H1>Heading level 1 Text is largest in size</H1>
<H2>Heading level 2 </H2>
<H3>Heading level 3</H3>
<H4>Heading level 4</H4>
<H5>Heading level 5</H5>
<H6>Heading level 6 Text is smallest in size</H6>
</body>
</html>
Practical 6
Output
Practical 7
Write a HTML program to get the below Output

Ans 7:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
File name : Input Output.html

<!DOCTYPE html>
<html>
<head>
<title>Table with 4 rows and 3 columns
</title>
</head>
<body>
<table border="2">
<tr><th>Sr. No.</th>
<th>Input Device</th>
<th>Output Device</th> </tr>
<tr>
<td>1</td>
<td>Keyboard</td>
<td>Monitor</td>
</tr>
<tr>
<td>2</td> <td>Mouse</td>
<td>Printer</td>
</tr>
<tr>
<td>3</td>
<td>Joystick</td>
<td>Plotter</td>
</tr>
</table>
</body>
</html>
Practical 7
Output

Practical 08
Write a HTML program to get the below Output

Ans 08:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename ;Student Form1.html

<!DOCTYPE html>
<html>
<head><title>Form with Input elements</title></head>
<body bgcolor="orange">
<h1>USE OF FORM</h1>
<form method="post" action="/student.php">
Enter your name <input type="text" Name="n1"
maxlength="20"><Br>
Enter your standard : <input type ="radio" name="r1"
value="11"> 11<sup>th</sup>
<input type="radio" name="r1" value="12">12<sup>th
</sup><br> Choose your optional subjects : <br>
<input type="checkbox" name="c1"
Value="Hindi">Hindi<br>
<input type="checkbox" name="c2"
Value="German">German<br>
<input type="checkbox" name="c3"
Value="Biology">Biology<br>
<input type="checkbox" name="c4" Value="IT">IT<br>
<input type="submit" value="Submit"><br>
</form></body></html>
Practical 08
Output

Practical 09
Ans 09:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename: Student Form2.html
<!DOCTYPE html>
<html>
<head>
<title> Form elements and textarea</title>
</head>
<body bgcolor="cyan" text="Red">
<h1> Use of form elements </h1>
<form method="post" action="/data.php">
Enter your name: <input type="text" name="fn"> <br>
Select your city :
<select name="ct">
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
</select><br>

Enter your address:<br>


<textarea name="address" rows="3" cols="30"
placeholder="Type your address" required>
</textarea> <br>
<input type="submit" value="Send">
</form>
</body>
</html>
Practical 09
Output

Practical 10
Write HTML Code for the following table

Ans 10:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename:Temperature.html

<!doctype html>
<html>
<head>
<title> Temperature in Celcius</title>
</head>
<body>
<table border="5" cellpadding="15">
<caption> State Temperature in Celcius </caption>
<tr bgcolor="pink">
<th>Place</th>
<th>State</th>
<th>Maximum Temperature in Celcius</th>
</tr>
<tr bgcolor="skyblue" align="center">
<td> Wardha </td>
<td rowspan="2"> Maharashtra </td>
<td> 47.5</td>
</tr>
<tr bgcolor="skyblue" align="center">
<td>Akola </td>
<td>46.4 </td>
</tr>
<tr bgcolor="skyblue" align="center">
<td> Khajuraho </td>
<td rowspan="2">Madhya<br>Pradesh</td>
<td>46.4 </td>
</tr>
<tr bgcolor="skyblue" align="center">
<td>Sagar </td>
<td>46.2 </td>
</tr>
</table>
</body>
</html>
Practical 10
Output
Practical 11

Write a program using HTML to diplay Marks Weightage of chapters

Ans 11:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename: marks.html

<!DOCTYPE html>
<html>
<head>
<title> Use of colgroup</title>
</head>
<body style="font-size:30px">
<table border="2">

<colgroup>
<col span="1" bgcolor="red">
<col span="1" bgcolor="lightgreen">
<col span="1" bgcolor="navyblue">

</colgroup>
<tr align="center">
<th>Sr</th>
<th>Topic Name</th>
<th>Weightage</th>
</tr>
<tr align="center">
<td>1</td>
<td>Basics of IT</td>
<td>20</td>
</tr>
<tr align="center">
<td>2</td>
<td>Introduction to DBMS</td>
<td>15</td>
</tr>
<tr align="center">
<td>3</td>
<td>Impressive Web Designing</td>
<td>30</td>
</tr>
</table>
</body>
</html>

Practical 11
Output

Practical 12
14.Write HTML program for inserting image in the below
order
Ans 12:
Aim : To Create Web Page using IMG TAG
Requirment : Notepad / Microsoft Edge Browser
File Name : imagesize.html
Ans :
<!doctype html>
<html>
<head>
<title> Different Images </title>
</head>
<body align="center">
<img src="lighthouse.jpg" width="100" height="100"
alt="Lighthouse picture"><br><br>
<img src="lighthouse.jpg" width="200" height="200"
alt="Lighthouse picture"><br><br>
<img src="lighthouse.jpg" width="300" height="300"
alt="Lighthouse picture"><br><br>
</body>
</html>
Practical 12
Output
Practical 13
Use of Multiple Audio on web pages using html5
Create webpage named audio1.html which provides multiple source
file formats for the same audio file that plays a sound automatically
with controls. The browser should display the message with
appropriate attribute when audio file is not supported by browser.
The code must incorporate the list of sound files formats (like wav,
MP3 or ogg etc).

Ans 13:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename : audio1.html

<!DOCTYPE html>
<html>
<head>
<title> Multiple Audio files with controls</title>
</head>
<body align="center">
<h1 align="center"> Multiple Audio with controls </h1>
<h2> The text between the audio tags will only be displayed in
browsers that do not support the audio element/tag </h2>
<h3> List of sound file formats </h3>
<ol>
<li> Mp3--> audio/mpeg</li>
<li> Ogg--> audio/ogg</li>
<li> Wav--> audio/wav</li>
</ol>
<audio controls autoplay loop="-1">
<source src="kalimba.wav" type="audio/wav">
<source src="kalimba.mp3" type="audio/mp3">
<source src="kalimba.ogg" type="audio/ogg">
</audio>
</body>
</html>

Practical 13
Output

Practical 14
Use of Multiple video on web pages using html5
Create webpage which provide multiple source file formats for the
same audio file that plays a sound automatically with controls. The
dimension of video area should be 100* 100 pixels. The browser
should display the message with appropriate attribute when audio
file is not supported by browser. The code must incorporate the list
of video files formats (like webM, MP4 or ogg etc)

Ans 14:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename : video.html

Answer
Coding :
<!DOCTYPE html>
<html>
<head>
<title>Multiple Video File on Web Page with controls</title>
</head>
<body>
<h1 align="center">Multiple Video File on Web Page with
controls</h1>
<h2>
The text between the video tags will only be displayed on browsers
that do not support the video element </h2>
<h3>List of video files formats</h3>
<ol>
<li>WebM-video/Webm</li>
<li>Mp4-video/Mp4</li>
</ol>
<video controls width="100" height="100" autoplay>
<source src="Wildlife.webm" type=video/webm>
<source src="Wildlife.mp4" type=video/mpeg>
</video>
</body>
</html>
Practical 14
Output
Practical 15
WRITE HTML PROGRAM WITH MARQUEE AND HR TAG

Ans 15:
Aim : To Create Web Page using table and link
Requirment : Notepad / Microsoft Edge Browser
Filename : marquee.html

<!doctype html>
<html>
<head>
<title> Marquee and Hr Tag </title>
</head>
<body bgcolor="black" text="navyblue" style="font-size:30px;text-
transform:uppercase; font-family:arial">
<marquee scrollamount="20" behavior="alternate"
direction="right">
<hr color="orange" width="300" size="50"> </hr>
<hr color="white" width="300" size="50"> </hr>
<hr color="green" width="300" size="50"> </hr>
<p align="center" style="font-size:30px; text-
transform:uppercase"> East or West India is the Best </p>
</marquee>
<marquee behavior="alternate" scrollamount="1" style="font-
size:30px"> Slow Scrolling </marquee>
<hr color="blue" width="1400" size="5"> </hr>
<marquee behavior="alternate" direction="right"
scrollamount="12" style="font-size:30px" bgcolor="brown">Little
Fast Scrolling</marquee>
<hr color="blue" width="1400" size="5"> </hr>
<marquee behavior="alternate" direction="left" scrollamount="20"
style="font-size:30px" bgcolor="purple">Fast Scrolling</marquee>

<hr color="blue" width="1400" size="5"> </hr>


<marquee behavior="alternate" direction="right"
scrollamount="50" style="font-size:30px" bgcolor="blue">Very
Fast Scrolling</marquee>
</body>
</html>

Practical 15
Output

Practical 16
Write a javascript program to accept two numbers and
perform addition, subtraction, division, subtraction and
module(remainder)and square of two numbers

Ans 16:
Aim : To Create event driven program (mouse click)
Requirment : Notepad / Microsoft Edge Browser
Filename : calc.html

// Start of the script


<script>
{
// Declare variables a, b, add, sub, mul, div, and mod
var a, b, add, sub, mul, div, mod;

// Prompt the user to enter the first number and convert


it from string to integer
a = parseInt(prompt("Enter the first number"));

// Prompt the user to enter the second number and


convert it from string to integer
b = parseInt(prompt("Enter the second number"));

// Calculate the addition of a and b


add = a + b;
// Display the result of the addition in the browser
document.write("<br>The Addition of " + a + " + " + b + " = "
+ add);

// Calculate the subtraction of a and b


sub = a - b;
// Display the result of the subtraction in the browser
document.write("<br>The Subtraction of " + a + " - " + b + " =
" + sub);

// Calculate the multiplication of a and b


mul = a * b;
// Display the result of the multiplication in the browser
document.write("<br>The Multiplication of " + a + " * " + b + "
= " + mul);

// Calculate the division of a by b


div = a / b;
// Display the result of the division in the browser
document.write("<br>The Division of " + a + " / " + b + " = " +
div);
// Calculate the modulus (remainder) of a divided by b
mod = a % b;
// Display the result of the modulus in the browser
document.write("<br>The Modulus/Remainder of " + a + " % "
+ b + " = " + mod);

// Calculate a raised to the power of b (exponentiation)


square = a ** b;
// Display the result of the exponentiation in the browser
document.write("<br>The Square of " + a + " ** " + b + " = " +
square);
}
// End of the script
</script>

Practical 17
Output

Practical 18
Write a Event Driven Javascript Program to display factorial
of user number

Ans : Practical 18
Aim : To Create a JavaScript program to area of circle
Requirment : Notepad plus plus/ Microsoft Edge Browser
Filename : factorial.html
<script>
// Start of the script block
{
// Declare variable i (used for iteration), and f (to store factorial
result), initialize f to 1
var i, f = 1;

// Prompt user to enter a number for which factorial is to be


calculated
num = prompt("Enter a number to get factorial");

// Start for loop to iterate from the number entered by the user
down to 1
for (i=num; i>= 1; i--)
{
// Multiply f by the current value of i and store result back in f
f = f * i;
}

// Output the factorial result to the browser


document.write("Factorial of " + num + " = " + f);
}
// End of the script block
</script>

Practical 18
Output

Practical 19
Create JavaScript program to accept a integer and display
even or odd number.

Ans : Practical 19
Aim : To Create a JavaScript program to find even and odd
number
Requirment : Notepad plus plus/ Microsoft Edge Browser
Filename : evenodd.html

<!doctype html>
<html>
<title>Even or Odd</title>
<body>
<script>
// Declare a variable num to store the number entered by
the user
var num;

// Prompt the user to enter a number, convert it from a


string to an integer using parseInt, and store it in num
num = parseInt(prompt("Enter Your Number to find even or
odd"));

// Check if the number is even by using the modulus


operator (%) which returns the remainder when num is
divided by 2
if (num % 2 == 0)
// If the remainder is 0, it means the number is even,
so display a message saying the number is even
document.write("Your Entered Number is Even");
else
// If the remainder is not 0, it means the number is
odd, so display a message saying the number is odd
document.write("Your Entered Number is Odd");
</script>
</body>
</html>
Practical 19
Output
Practical 20
Create a JavaScript program to accept two integers and
display larger number of them.

Ans : Practical 20
Aim : To Create a JavaScript program to accept two integers
and display larger number of them.
Requirment : Notepad plus plus/ Microsoft Edge Browser
Filename : greaternumber.html
<script>
{
alert("test");
var a,b,c;
a=parseInt(prompt("Enter the first number"));
b=parseInt(prompt("Enter the second number"));
if(a>b)
{
alert("First no i.e " +a+ " is greater than second number i.e " +b);
}
else if (a==b)
{
alert("First no i.e " +a+ " is equal to second number i.e " +b);
}
else
{
alert("Second number i.e " +b+ " is greater than first number i.e "
+a);
}
}
</script>
Practical 20
Output
Practical 21
Create a JavaScript program using function displaying
welcome to function

Ans : Practical 21
Aim : To Create a JavaScript program using function
displaying welcome to function
Requirment : Notepad plus plus/ Microsoft Edge Browser
Filename : Welcome.html
<!DOCTYPE html>
<html>
<head>
<title>Function program</title>
<script language="javascript">
function show()//defining a function
{
alert("Welcome to function");
}
</script></head>
<body bgcolor="green">
<h1> Use of Function in Javascript </h1>
<script language="javascript">
show();//calling of function
</script>
</body>
</html>
Practical 21
Output
Practical 22
Create Event driven JavaScript program to find enter age is
qualify for driving or not
Ans : Practical 22
Aim : To Create Event Driven Javascript program using
function to convert enter string to upper case
Requirment : Notepad / Microsoft Edge Browser
Filename : agequalify.html

<!DOCTYPE html>
<html><head><title>conditional statement</title>
<script language="javascript">
function check()
{
var age;
age=form1.t1.value;
if(age>=18)
alert("Qualifies for driving");
else
alert("Does not qualifies for driving");
}
</script></head>
<body>
<form name="form1">
<center>
Enter your age:-
<input type="text" name="t1"><br><br>
<input type="button" value="SUBMIT" onClick="check()">
</form>
</body>
</html>
Practical 22
Output
Practical 23
Write an event driven Javascript program to display table of
accepted number(eg. 2x1=2, 2x2=4,…..i)

Ans : Practical 23
Aim : To Create Event Driven Javascript program using
function to get table of a given number
Requirment : Notepad / Microsoft Edge Browser
Filename:multable.html

<!DOCTYPE html>
<html>
<head>
<title>Table of any number</title>
<script>
var n,i,m;
n=prompt("Enter a number");
for(i=1;i<=10;i++)
{
m=n*i;
document.write(n+"x"+i+"="+m+"<br><br>");
}
</script>
Practical 23
Output

You might also like