You are on page 1of 48

HTML

PRACTICAL
ASSIGNMENT
Name: ARSHAD SHAIKH.
PRN NO. : 46420000595

SESSION =1

1)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> my First html page </title>
</head>
<body style="background-color:purple">

<h1 style="text-align: center">Tilak Maharashtra University</h1>

<h2 style="text-align: left">Tilak Maharashtra University</h2>

<h3 style="text-align: right">Tilak Maharashtra University</h3>

<h4>Tilak Maharashtra University</h4>

<h5>Tilak Maharashtra University</h5>

<h6>Tilak Maharashtra University</h6>

</body>

</html>

OUTPUT :-

2)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> TMU </title>
</head>

<body style="background-color: blue">

<h1 style="text-align:center"> A friend in need is a friend indeed


</h1>

<h2 style="text-align:left"> A friend in need is a friend indeed


</h2>

<h3 style="text-align:right"> A friend in need is a friend indeed


</h3>

<h4> A friend in need is a friend indeed </h4>

<h5> A friend in need is a friend indeed </h5>

<h6> A friend in need is a friend indeed </h6>

</body>

</html>

OUTPUT :-
3)
INPUT :-
<!DOCTYPE>
<html>

<body style="background-color: brown;">


<h1 style="font-family:monotype corsiva"> PRACTICE MAKES MAN
PERFECT </h1>

<h1 style="font-size:10px"> PRACTICE MAKES MAN PERFECT </h1>

<h1 style="color:red">PRACTICE MAKES MAN PERFECT


</h1>

</body>

</html>

OUTPUT :-

4)
INPUT :-
<!DOCTYPE html>
<html>
<body style="background-color:purple">
<h1 ><b> This sentence is in bold </b></h1>
</body>

</html>

OUTPUT :-

5)
INPUT :-
<!DOCTYPE html>
<html>

<body style="background-color:blue">

<h1><i> This sentence is in Italics </i></h1>

</body>

</html>

OUTPUT :-
6)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: darkgreen;">

<h1 style="font-family:Arial"></h1><h1
style="color:magenta"><b><i><u>TIT FOR TAT </u></b></i></h1>

</body>

</html>

OUTPUT :-
SESSION=2
1)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">


<h1>x<sup>2</sup>y + z<sup>3</sup>y<sup>2</sup>z</h1>

<h1>H<sub>2</sub>SO<sub>4</sub></h1>
</body>

</html>

OUTPUT :-

2)
i)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">

<h1> (a+b)<sup>2</sup>=a<sup>2</sup>+ b<sup>2</sup>+ 2ab </h1>

</body>

</html>

OUTPUT :-

ii)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">

<h1><s> Hyper Text Markup Language</s></h1

</body>

</html>

OUTPUT :-
iii)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">

<h1 style="text-align:center"> * * * * </h1>


<h1 style="text-align:center"> * * </h1>
<h1 style="text-align:center"> * </h1>
<h1 style="text-align:center"> * * </h1>
<h1 style="text-align:center"> * * * * </h1>

</body>

</html>

OUTPUT :-
3)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">

<h1 > * * * * * </h1>


<h1 > * * * * </h1>
<h1 > * * * </h1>
<h1 > * * </h1>

</body>

</html>

OUTPUT :-
4)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">


<pre>
<h1> One two buckle my shoe </h1>

<h1> Three four shut the door </h1>

<h1> Five six pick up the sticks </h1>

<h1> Seven eight lay them straight </h1>

<h1> Nine ten a big fat hen </h1>


</pre>
</body>

</html>

OUTPUT :-
5)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">

<hr width="50%" color="blue" size="5" />

<p style="text-align:center">Jack and Jill went up the hill to


fetch a pail of water. Jack fell <br> down and broke his crown and Jill came
tumbling after.</p>

<hr width="50%" color="blue" size="5" />


<p style="text-align:center">Twinkle twinkle little star, how I
wonder what you are <br> Up above the world so high like a diamond in the
sky.</p>

<hr width="50%" color="blue" size="5" />

</body>

</html>

OUTPUT :-

5)
1)
INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: chartreuse;">

<hr width="80%" color="cyan" size="5" />

<p style="text-align:right"> The basic unit of information


displayed over the net is a web page. <br> Website is a collection of such web
pages, whic are interlinked.</p>
<p style="text-align:center"> The various web pages are prepared
independently and in the end <br> they are linked in the required sequence,
depending on the logical <br> makeup of information on the site.</p>
<p style="text-align:right"> The link for a web page is basically
a URL that is an address of <br> the computer where the page is present.</p>
<p style="text-align:right"> Such a collection of related web
pages is known as web site.</p>

<hr width="80%" color="cyan" size="5" />

</body>

</html>

OUTPUT :-

SESSION=3
1)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> marquee effect </title>
</head>

<body style="background-color: cadetblue;">


<marquee style="size=50" width="100%" color="blue"> Tilak
Maharashtra University.</marquee>
</body>

</html>

OUTPUT :-
2)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Ordered List </title>
</head>

<body style="background-color: cadetblue;">

<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
<li>Ruler</li>
</ol>

<ol type="I">
<li>Rice</li>
<li>Wheat</li>
<li>Jowar</li>
<li>Bajra</li>
</ol>

</body>

</html>

OUTPUT :-
3)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Ordered List </title>
</head>

<body style="background-color: cadetblue;">

<ol type="a" start="3">


<li >Pen</li>
<li >Pencil</li>
<li >Ruler</li>
<li >Eraser</li>
</ol>

</body>

</html>

OUTPUT :-
4)
a)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Ordered List </title>
</head>

<body style="background-color: cadetblue;">

<ol>
<li>Monitor</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Mouse</li>
</ol>

</body>

</html>

OUTPUT :-
b)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Ordered List </title>
</head>

<body style="background-color: cadetblue;">

<ol type="I">
<li>Wordpad</li>
<li>Notepad</li>
<li>Ms-Word</li>
<li>Ms-PowerPoint</li>
</ol>

</body>

</html>

OUTPUT :-

c)
INPUT :-
<!DOCTYPE html>

<html>
<head>
<title> Ordered List </title>
</head>

<body style="background-color: cadetblue;">

<ol type="A" start=3>


<li>Inkjet Printer</li>
<li>Deskjet Printer</li>
<li>Laser Printer</li>
<li>Dot-Matrix Printer</li>
<li>Daisy-Wheel Printer</li>
</ol>

</body>

</html>

OUTPUT :-

5)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Unordered List</title>
</head>

<body style="background-color: cadetblue;">


<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Ruler</li>
<li>Eraser</li>
</ul>
</body>

</html>

OUTPUT :-

SESSION=4
1)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Unordered List</title>
</head>

<body style="background-color:white;">

<h1 style="color:magenta"><b>"SUN AND SAND restaurant "</b></h1>


<ul><b>
<li><font color="red"> Snacks</font></li>

<ul style="color:green">
<li>Pakodas</li>
<li>Potato chips</li>
<li>Samosa</li>
</ul>

<li><font color="red">Cutlets</font></li>

<ul style="color:green">
<li>Garden court special</li>
<li>Mutten cutlet</li>
<li>Chicken cutlet</li>
</ul>

<li><font color="red">Cold Drinks</font></li>

<ul style="color:green" >


<li>Pepsi</li>
<li>Cola</li>
<li>Orange</li>
</ul>

<li><font color="red">Soups</font></li>

<ul style="color:green">
<li>Mushroom soup</li>
<li>Tomato soup</li>
<li>Cream of veg soup</li>
</ul>
</b></ul>

</body>

</html>

OUTPUT :-
2)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Unordered List</title>
</head>

<body style="background-color: cadetblue;">

<ul style="list-style-type:square;">
<li>Canada</li>
<li>Australia</li>
<li>Poland</li>
<li>India</li>
</ul>

</body>
</html>

OUTPUT :-

3)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title> Ordered List</title>
</head>

<body style="background-color: cadetblue;">

<ol type="A">

<li>Birds</li>

<ol>
<li>Sparrow</li>
<li>Parrot</li>
<li>Peacock</li>
</ol>
</ol>

<ol type="A" start=2>

<li>Animals</li>

<ol>
<li>Tiger</li>
<li>Lion</li>
<li>Deer</li>
</ol>
</ol>

<ol type="A" start=3>

<li>Insects</li>

<ol>
<li>Ant</li>
<li>Cockroach</li>
</ol>
</ol>

</ol>

</body>

</html>

OUTPUT :-

4)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Nested List</title>
</head>

<body style="background-color: cadetblue;">

<ol><b>
<li style="list-style-type:square">Software</li>
<ol type="a">

<li>System Software</li>

<ol type="a">
<li>Disk Operating System</li>
<li>Windows</li>
</ol>

<li>Application Software</li>

<ol type="a">
<li>Visual Basic</li>
<li>Oracle</li>
</ol>

</ol>

<li style="list-style-type:square" >Hardware</li>

<ol>
<li>Input Device</li>

<ol type="a">
<li>Keyboard</li>
<li>Scanner</li>
<li>Mouse</li>
</ol>

<li>Output Device</li>

<ol type="a">
<li>Printer</li>
<li>Plotter</li>
<li>Monitor</li>
</ol>
</ol>

</b></ol>
</body>

</html>

OUTPUT :-

SESSION=5
1)
INPUT :-
<!DOCTYPE html>

<html>

<body>
<a href="https://Welcome.htm"> click here</a>
</body>
</html>

OUTPUT :-

INPUT :-
<!DOCTYPE html>

<html>

<body style="background-color: cadetblue;">

<h1> Welcome to HTML programming</h1>

</body>

</html>

OUTPUT :-

2)
INPUT :-
<!DOCTYPE html>

<html>
<body>
<a href="prayer.htm">PRAYER</a>
</body>

</html>

OUTPUT :-

INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyper Link</title>
</head>
<body style="background-color: cadetblue;">
<h1><b>
O God, help us to keep ourselves physically strong, mentally <br>awake
and
morally straight, that in doing our duty to Thee and to <br>our
country we
may keep the honor of the Service untarnished.<br>Strengthen us to
guard our
country from external aggression and <br>internal disorders. Awaken
our admiration
for honest dealing and <br>clean thinkung, and guide us to choose the
harder right,
instead of <br>the easier wrong.<br><br>
kindle our hearts with fellowship for our comrades at arms and
<br>with loyalty to the
men we command. Endow us with the courage<br> which is born of the
love of what is noble
and which knows no <br>compromise or retreat when truth and right are
in peril. Grant us<br>
new oppurtunities of service to Thee, to our country and to the
men<br> we lead, and ever
help us to place such service above self.
</b></h1>
</body>
</html>

OUTPUT :-

SESSION=6
1)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Hyper Link</title>
</head>
<body>

<a href="website.html">What is a Website?</a><br><br>

<a href="introduce.html">Introduction to HTML</a><br><br>

<a href="feature.html">Features of HTML</a>

</body>

</html>

OUTPUT :-

INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Hyper Link</title>
</head>

<body style="background-color: cadetblue;">

<h1><b>Website</b></h1>

<p><b>
Website is a collection of two Web Pages, which are
interlinked.The<br>
various web pages are prepared independently. And in the end
they<br>
are linked in the required sequence depending on the
logical<br>
makeup of information on the site. The link for a web page is
<br>
basically a URL [Uniform Resource Locator]<br>
i.e the address of the computer where the web page is
present<br>
Such a collection of related web pages is called a Website.
<b></p>

</body>

</html>

OUTPUT :-

INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Hyper Link</title>
</head>

<body style="background-color: cadetblue;">

<h1><b>Introduction to HTML</b></h1>

<p><b>
In 1980, a mark up language was devloped to create
documents<br>
that could be displayed consistently on computers of
different<br>
hardware and operating system. It was called the Standard<br>
Generalized Markup Language or SGML on the web. HTML is<br>
used to construct formatted pages for the web known as web
pages.
</b></p>

</body>

</html>

OUTPUT :-

INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Hyper Link</title>
</head>

<body style="background-color: cadetblue;">

<h1><b>Features of HTML</b></h1>

<p><b>
1.Each tag is enclosed within a < (left bracket) and > (right
bracket).<br>
These special characters are what differentiate the tags
from ordinary<br>
text.<br><br>
2.Opening is denoted by <>, for example <I>. This is the
opening tag<br>
to display text in italics.<br><br>
3.Closing tag is denoted by </>, for example </I>. This is the
closing<br>
italics tag.<br><br>
4.Tag names are not case sensitive but as a convention they
are written<br>
in upper case so as to distinguish them from the normal
text.
</b></p>

</body>

</html>

OUTPUT :-

2)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Hyper Link</title>
</head>

<body>

<a href="yahoo.html">Yahoo.com</a>

</body>
</html>

OUTPUT :-

INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Hyper Link</title>
</head>

<body>

<img src="school.jpg" alt="school" width="500" height="500">

</body>

</html>

OUTPUT :-
SESSION=7
1)
INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables</title>

<style>
table{
border: 1px solid black;
background-color: lightgreen;
align-items: center;
}

</style>

</head>
<body>

<table border="3" cellspacing="0" cellpadding="13" >


<tr>
<th>Acad no</th>
<th>Name</th>
</tr>
<tr>
<td>26466</td>
<td>Kabir</td>
</tr>
<tr>
<td>25t255</td>
<td>Vishal</td>
</tr>
<tr>
<td>28464</td>
<td>Ghosh</td>
</tr>

</table>

</body>
</html>

OUTPUT :-
SESSION=8
1)
INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>

table{
border: 1px solid black;
}
table tr{
border: 1px solid black;
}
.name{
background-color: yellow;
}
</style>

</head>
<body>
<table border="1" cellpadding="15" cellspacing="0">
<tr class="name" >
<th>Country</th>
<th>Capital</th>
<th>Currency</th>
</tr>

<tr>
<td>India</td>
<td>New Delhi</td>
<td>Rupee</td>
</tr>
<tr>
<td>Japan</td>
<td>Tokyo</td>
<td>Yen</td>
</tr>
<tr>
<td>USA</td>
<td>Washington</td>
<td>Dollar</td>
</tr>
<tr>
<td>France</td>
<td>Paris</td>
<td>Mark</td>
</tr>
</table>

</body>
</html>

OUTPUT :-
2)
INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
table{
background-color: palevioletred;
}
</style>
</head>
<body>

<table border="1" cellpadding="15" cellspacing="0">


<tr>
<td>BCA</td>
<td rowspan="3" style="padding: 50px;">TMU</td>
</tr>
<tr>
<td>MBA</td>
</tr>
<tr>
<td>MCA</td>
</tr>
</table>
</body>
</html>

OUTPUT :-

3)
INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
text-align: center;
background-color: lightskyblue;
}
</style>
</head>
<body>

<table border="1" cellpadding="15" cellspacing="0" >


<tr>
<td colspan="5">EMPLOYEE DETAILS</td>
</tr>
<tr>
<td>SR NO</td>
<td>NAME</td>
<td>PH NO.</td>
<td>LOCATION</td>
<td>SALARY</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>
</body>
</html>

OUTPUT :-
SESSION=9
1)
INPUT :-
<!DOCTYPE html>

<html>

<head>
<title>Hyper Link</title>
</head>

<body>

<a href="session9-1_112329.html">Health is Wealth</a>

</body>

</html>

OUTPUT :-

INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
text-align: center;
}
</style>
</head>
<body>

<table border="1" cellpadding="15" cellspacing="0" >


<tr style="background-color: yellow;">
<td colspan="3"><a href="session8-3.html">Health is
Wealth</a></td>
</tr>
<tr><b>
<td>Fruits</td>
<td>Vegetables</td>
<td>Image</td>
</b></tr>
<tr>

<td>Apples</td>
<td>Potato</td>
<td rowspan="4"> <img src="apple.png" alt="" width="100"
height="100"></td>
</tr>
<tr>

<td>Mangoes</td>
<td>Tomato</td>
</tr>
<tr>

<td>Banana</td>
<td>Onion</td>
</tr>
<tr style="background-color: black; color: white;">
<td colspan="2" style="text-color:yellow">An apple a day keeps the
doctor away.</td>
</tr>

</table>
</body>
</html>

OUTPUT :-
SESSION=11
INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>

body{

justify-items: center;
}
form{
border: 1px solid black;
/* text-align: center; */
width: 600px;
padding: 20px 10px;
}
.buttons{
display: flex;
justify-content: center;
gap:20px;

.submit,.reset{
background-color: gray;
border: 1px solid black;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>

<form action="session11-2form.html" method="post">


<h1>JET AIRWAYS RESERVATION</h1>

<label for="">Name: </label>


<input type="text" name="" id="">
<br><br>
<label for="">City: </label>
<input type="text" name="" id="">
<br><br>

<label for="">Qualification</label>
<br>
<input type="checkbox" name="" id="">
<label for="">10 <sup>th</sup> pass</label><br>
<input type="checkbox" name="" id="">
<label for="">12 <sup>th</sup> pass</label><br>
<input type="checkbox" name="" id="">
<label for="">Graduate</label><br>
<input type="checkbox" name="" id="">
<label for="">Post-graduate</label>

<br><br>

<label for="">Class:</label> <br><br>

<input type="radio" name="" id="">


<label for="">Business</label>
<input type="radio" name="" id="">
<label for="">Economy</label>
<br><br>

<label for="">Mode of payment</label>


&nbsp;
<textarea name="" id="" cols="25" rows="5">
By cheque
By cash
By credit card
</textarea>

<br><br>

<div class="buttons">
<input type="submit" value="submit" class="submit">
<input type="reset" value="reset" class="reset">
</div>

</form>
</body>
</html>

OUTPUT :-
INPUT :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: cadetblue;">

<h1>You have submitted the data properly</h1>

</body>
</html>

OUTPUT :-

You might also like