HTML Practical Assignment-1
HTML Practical Assignment-1
HTML Practical Assignment-1
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">
</body>
</html>
OUTPUT :-
2)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> TMU </title>
</head>
</body>
</html>
OUTPUT :-
3)
INPUT :-
<!DOCTYPE>
<html>
</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">
</body>
</html>
OUTPUT :-
6)
INPUT :-
<!DOCTYPE html>
<html>
<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>
<h1>H<sub>2</sub>SO<sub>4</sub></h1>
</body>
</html>
OUTPUT :-
2)
i)
INPUT :-
<!DOCTYPE html>
<html>
</body>
</html>
OUTPUT :-
ii)
INPUT :-
<!DOCTYPE html>
<html>
</body>
</html>
OUTPUT :-
iii)
INPUT :-
<!DOCTYPE html>
<html>
</body>
</html>
OUTPUT :-
3)
INPUT :-
<!DOCTYPE html>
<html>
</body>
</html>
OUTPUT :-
4)
INPUT :-
<!DOCTYPE html>
<html>
</html>
OUTPUT :-
5)
INPUT :-
<!DOCTYPE html>
<html>
</body>
</html>
OUTPUT :-
5)
1)
INPUT :-
<!DOCTYPE html>
<html>
</body>
</html>
OUTPUT :-
SESSION=3
1)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> marquee effect </title>
</head>
</html>
OUTPUT :-
2)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> Ordered List </title>
</head>
<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>
</html>
OUTPUT :-
4)
a)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> Ordered List </title>
</head>
<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>
<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>
</html>
OUTPUT :-
5)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> Unordered List</title>
</head>
</html>
OUTPUT :-
SESSION=4
1)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title> Unordered List</title>
</head>
<body style="background-color:white;">
<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">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>
<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>
<ol type="A">
<li>Birds</li>
<ol>
<li>Sparrow</li>
<li>Parrot</li>
<li>Peacock</li>
</ol>
</ol>
<li>Animals</li>
<ol>
<li>Tiger</li>
<li>Lion</li>
<li>Deer</li>
</ol>
</ol>
<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>
<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>
<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>
</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>
</body>
</html>
OUTPUT :-
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link</title>
</head>
<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>
<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>
<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>
</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>
</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>
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>
</body>
</html>
OUTPUT :-
SESSION=9
1)
INPUT :-
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link</title>
</head>
<body>
</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>
<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>
<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>
<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;">
</body>
</html>
OUTPUT :-