HTML and Css Manual

HTML
Q1 . Write first html code using hedings and paragraph.

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
OUTPUT:
Q 2. Write a html program to connect a link
code:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">Go to w3 school</a>
</body>
</html>
output:
Q3. write a html prgram to display an image
code:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<h2>image of saloni pawar</h2>
<img src="C:\Users\DELL\Desktop\sakhi.jpeg" alt="W3Schools.com" width="104"

height="142">
</body>
</html>
OUTPUT:
Q 4. Write a html program to change the colour of text
code:
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">SALONI SITARAM PAWAR.</p>
</body>
</html>
OUTPUT:
Q5. Write a program to give a title to the web page.
Code:
<!DOCTYPE html>
<html>
<head>
<title>SALONI</title>
</head>
<body>
<h2>HTML title </h2>
<h2>image of saloni pawar</h2>
</body>
</html>
Output:
Q6. Write a program to give a bacjground color to the web page
Code:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>SALONI PAWAR</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:
Q7. Write a program to give backgrount colour to the heading and the paragraph
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">Introduction to Animals</h1>
<p style="background-color:tomato;">Animals play an essential role in human life and planet

earth. Ever since an early time, humans have been using animals for their benefit. Earlier, they
came in use for transportation purposes. Further, they also come in use for food, hunting and
protection.
Animals are important because they help to keep the planet clean and healthy. They do this in a
number of ways, such as by eating plants and other animals (which helps to control the
population of those species), by spreading seeds through their droppings, and by aerating the
soil with their digging.
.</p>
</body>
</html>
OUTPUT:
Q8. Write a program to move the complete webpage to center.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>
</head>
<body>
<h2>How to Center Align Text in CSS</h2>
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy
text. This is more dummy text. This is more dummy text. This is more dummy text. This is more
dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This
is more dummy text.</p>
<h2>The Explanation</h2>
<p>Using either the universal selector or type selector <strong>body</strong> and the CSS text-
align property set to “center,” everything on the page will be centered.</p>
</body>
</html>
OUTPUT:
Q9.Write a program to chnage the font of the text
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Font</title>
</head>
<body>
<h1>Our Products</h1>
<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
This is demo text
</p>
</body>
</html>
OUTPUT:
Q10.Write a program to use blockquote
Code:
<!DOCTYPE html>
<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries. At every level, we collaborate
with people around the world to develop and deliver innovative solutions that protect
communities, wildlife, and the places in which they live.
</blockquote>
</body>
</html>
OUTPUT:
Q11. Write a program to use external CSS
Code:
HTML
<div id="box">
<ul>
<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-book"> about</i></a></li>
<li><a href="#portfolio"><i class="fa fa-cog"> portfolio</i></a></li>
<li><a href="#services"><i class="fa fa-folder"> services</i></a></li>
<li><a href="#contact"><i class="fa fa-envelope"> contact</i></a></li>
</ul>
<div id="home">
<section class="content">
<h1>
Creative Agency</h1>
</section>
</div>
<div id="about">
<h1>
About</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti
dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus
nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore
totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem
voluptatem?</p>
</section>
</div>
<div id="portfolio">
<h1>
Portfolio</h1>
<p>
voluptatem?</p>
</section>
</div>
<div id="services">
<h1>
Services</h1>
<p>
voluptatem?</p>
</section>
</div>
<div id="contact">
<h1>
Contact</h1>
<p>
voluptatem?</p>
</section>
</div>
</div>
CSS:
*{
margin: 0;
padding: 0;
body{
font-family: lato;
#box{
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow-y: scroll;
#box div{
position: relative;
height: 100%;
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
padding: 0 40px;
.content h1 {
font-size: 70px;
font-weight: bold;
color: #262626;
text-transform: uppercase;
margin-bottom: 40px;
#about .content h1,
#portfolio .content h1,
#services .content h1,
#contact .content h1{
color: #5b5b5b;
.content p {
line-height: 1.5;
margin: auto;
color: #000;
ul {
padding: 0;
text-align: center;
position: fixed;
margin: 2% auto;
z-index: 1;
width: 1100px;
left: 0;
right: 0;
font-family: lato;
ul li{
list-style: none;
display: inline-block;
ul li a {
display: block;
text-decoration: none;
height: 45px;
font-size: 20px;
background: #fff;
width: 200px;
color: #262626;
margin: 4px 0;
text-transform: uppercase;
line-height: 45px;
ul li a:hover{
background: deeppink;
color: #fff;
#home{
background-image: url(1.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
#portfolio,
#contact
background: #f3f3f3;
OUTPUT:
Q12. Write a program to use inline css
Code:
<article>
<p
class="paragraph-one"
style="color: darkmagenta; font-size: 2rem; text-align: center"
>
<a href="freecodecamp.org" style="text-decoration: none; color: crimson"
>freeCodeCamp</a
>
is one of the best platforms to learn how to code
</p>
<p class="paragraph-two">
Learning to code is free on freeCodeCamp, that's why they call it
freeCodeCamp
</p>
<p class="paragraph-three">
freeCodeCamp generates money through donations inorder to pay employees
and maintain servers.
</p>
<p id="paragraph-four">
If you're generous enough, consider joining others who have been
donating to freeCodeCamp
</p>
<p class="paragraph-five">
At freeCodeCamp, it's not all about typing on a code editor alone,

there's a forum like StackOverflow, where you can ask questions about
your coding problems and get answers from campers alike.
</p>
</article>
OUTPUT:
Q13. Write a program to use internal css
Code:
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Internal CSS</title>
<style>
body{
background-color:#9F6;
h1{
color:#C39;
text-align:left;
text-transform:capitalize;
text-decoration:underline;
P{
font-size:20px;
font-family:Verdana, Geneva, sans-serif;
background-color:#FFF;
color:#963;
h2{
color:#F03;
margin-left:10px;
img{
border:5px double #903;
width:400px;
height:300px;
margin-left:10px;
a{
margin-left:10px;
a:hover{ /*---------------This is formate of Pseudo-element---------------*/
color:#009;
font-size:18px;
font-weight:700;
</style>
</head>
<body>
<h1>Example for Internal CSS</h1>
<p>Cascading Style Sheet is a style language that defines layout of HTML documents.CSS
properties such as background, border, font, float, display, margin, opacity, padding, text-align,
vertical-align, position, color etc.</p>
<h2>Image Affected with styles</h2>
<img src="/images/p9.png"><br /><br />
<a href="/../../../Documents/Unnamed Site 2/p9.png" target="_blank">Download Image</a>
</body>
</html>
OUTPUT:
Q.13 Design a webpage using different tag formats. (bold , italic , emphasize , small , big ,
subscript , superscript , deleted , inserted text).
<html>
<head>
<title> Text Formatting </title>

</head>
<body>
<h1 align = center> Kancheepuram </h1>
<b> Kanchipuram is part of Tondaimandalam </b> <br> <i> Kanchipuram is 72 km away from
Chennai </i> <br>
<u> It is the administrative headquarters of Kancheepuram District. </u>
<br>
<b><i> Kanchipuram is well-connected by road and rail. </i> </b>
<p> Chennai <b> International Airport </b> is the nearest domestic and international
airport to the town, which is located at Tirusulam in Kanchipuram district. </p>
</body>
</html>
OUTPUT:
Q.14Design a webpage with links to different pages and allow navigation between webpages.
code:
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Navigation Bar
</Title>
<style type=text/css>
body
height: 125vh;
margin-top: 80px;
padding: 30px;
font-family: sans-serif;
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
header * {
display: inline;
header li {
margin: 20px;
header li a {
color: blue;
</style>
</Head>
<Body>
<header>
<nav>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Contact </a>
</li>
<li> <a href="#"> Terms of use </a>
</li>
<li>
<a href="#"> Join Us </a>
</li>
</ul>
</nav>
</header>
You are at JavaTpoint Site.....
</Body>
</Html>
OUTPUT:
Q 15.
<!DOCTYPE html>
<HTML>
<HEAD> <TITLE> DEMONSTRATION OF ORDERED AND UNORDERED LIST</TITLE></HEAD>
<BODY>
<H3>Grocery List</H3>
<OL>
<LI>Oils, Sauces, Salad Dressings, and Condiments.</LI>
<LI>Frozen Foods.</LI>
<LI>Pasta and Rice</LI>
</OL>
<H3>Grocery List</H3>
<UL>
<LI>Meat and Fish</LI>
<LI>Oil</LI>
<LI>Dairy and Eggs</LI>
</UL>
</BODY>
</HTML>
OUTPUT:
UNORDERD LIST :
CODE:
<HTML>
<HEAD> <TITLE> TYPES OF COMPUTER ON THE BASIS OF SPEED/SIZE.</TITLE></HEAD><BODY>
<H3>ON THE BASIS OF SIZE</H3>
<OL>
<LI>Super Computer</LI>
<LI>Mainframe</LI>
<LI>Mini Computer</LI>
<LI>Micro Computer</LI>
<UL>
<LI><H3>Social Media</H3></LI>
<OL TYPE="dotted">
<LI> </LI>
<LI>Facebook</LI>
<LI>WhatsApp</LI>
<LI>Instagram</LI>
</OL>
<LI><H3>NON-PORTABLE MICROCOMPUTER</LI>
<OL TYPE=”I”>
<LI>Desktop</LI>
<LI>Workstation Computer</LI>
</OL>
</UL>
</OL>
</BODY>
</HTML>
OUTPUT:
Q.18 Design a webpage demonstrating all types of semantic.
CODE:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: mediumaquamarine;
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: thistle;
.browser > h2, p {
margin: 4px;
font-size: 90%;
</style>
</head>
<body>
<article class="all-browsers">
<header>
<h1>SOCIAL MEDIA </h1>
</header>
<article class="browser">
<nav>
<summary><a href="https://www.instagram.com/accounts/login/"><h2>INSTAGRAM</h2></
a></summary>
<p>instagram is a free photo and video sharing app available on iPhone and Android. People
can upload photos or videos to our service and share them with their followers or with a select
group of friends. They can also view, comment and like posts shared by their friends on
Instagram.</p>
</article>
<summary><a href="https://web.whatsapp.com/"><h2>WHATSAPP</h2></a></summary>
<p>WhatsApp started as an alternative to SMS. Our product now supports sending and
receiving a variety of media: text, photos, videos, documents, and location, as well as voice
calls. Some of your most personal moments are shared with WhatsApp, which is why we built
end-to-end encryption into our app.</p>
</article>
<summary><a href="https://www.facebook.com/login.php/"><h2>FACEBOOK</h2></a></
summary>
<p>Facebook is a website which allows users, who sign-up for free profiles, to connect with
friends, work colleagues or people they don't know, online. It allows users to share pictures,
music, videos, and articles, as well as their own thoughts and opinions with however many
people they like.</p>
</article>
</nav>
</body>
<body>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
</style>
</head>
<body>
<aside>
<b><p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal special
events.</p></b>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was
amazing! I had a great summer together with my family!</p>
</article><br><br>
<footer>
<center><button type="button" class="block"><a

href="file:///C:/Users/DELL/Downloads/homepage.html">MOVE TO LIST </a></button>
</footer>
</body>
</html>
OUTPUT:
Q 19: Design a webpage demonstrating image source file and with different link of social
media website.
CODE:
<!DOCTYPE html>
<html>
<style>
ul{list-style: none;}
ul{text-align: center;}
a:link,a:visited{
color: green;
background-color: transparent;
text-align: center;
padding: 10px;
color: purple;
background-color:none;
display: inline-block;}
a:hover{color: red;}
h3{text-align: center;}
</style>
<body style="background-color:aqua;">
<header>
<p style="text-align: center;"><img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTTzxQ6lgjUQo9o26WLS8dwAw_Jn8UEsr4DOA&usqp=CAU" alt="social media " width="300" height="300"></p>
</header>
<hr>
<u><h2 style="text-align: center;">INTRODUCTION</h2></u>
<h3>
<b>What is social media?
Social media is an internet-based form of communication. Social media platforms allow users to have conversations, share
information and create web content. There are many forms of social media, including blogs, micro-blogs, wikis, social
networking sites, photo-sharing sites, instant messaging, video-sharing sites, podcasts, widgets, virtual worlds, and more..</b>
</h3>
<hr>
<h2 style="text-align: center;">LOG IN </h2>
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td><a href="https://accounts.snapchat.com/accounts/login?client_id=ads-api&referrer=https%25253A%25252F
%25252Fads.snapchat.com%25252Fsetup"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAACcCAMAAAC9ZjJ/AAAAq1BMVEUCAgL//////
AABAQH6+AX++gP7+QT++wAAAAP//
wCWlAOZlwDe3t7V1dW3t7dvbQRNTATr6wCNjAJHRgPr6+tnZgKmpqYaGiPHx8eEggKwrwTa2ATo5wTKyAS4twIbGx4pKABbW1tkZG
SDg4OXl5cmJQRsbG0KChxDQ0NWVQB7egAJDQB1dAJhYAMgICAyMQAAAA8wMDMaGwA9OwNNTU0WFgA4ODgnJyugoAAdelJu
AAAIOklEQVR4nO2caXPiOBCGg9pYFreBEHxgknAsYcgQhknC//9l2zI3loxkC7K15XdSlQ+xm8d9SWIkPzwUyih4AOlP2t/
ucc9P+6bQbVTkXKF7q8i5QoVOVBREoXuryLl7CJzcuok3kMsAWoynQaiUC9xop+m1q7nV9pqdrQcN5RzaavmBazEjstzAb6HJ7FE8Q5
u0Q26VGBK3FbYnBvDwEb3AHNgRMPByew9TbWAebYs36FytjNSCcJxH9yZoMZ77iIWRuSAwpNbN2JDO8rJHFhyP3JAN6YiXtStjTG/
pt5jOekz1nTznnM7t8u1A52JVZMg5xxncnA3pBpnSzvHuwIZ0XgY4mAT3gQsm8vDJ4u2078KGdG1HN+ccJ9SG2w7s2neF2lnntLQ+B
aFsy3XD0HUtW5OQtbThfI0PwGE8qiw6k18AvyadZiUKdPiYrwnnOMrlgBj++zOOwx/DWB/
YuJ7ffKKMxwJpXMXJqNqAKbbRDTpsNurVu6VY3XpvNEMXblRb+LYRaxQENC01w2zQAnjp78D26vZfAFqqky2rqTfAKnZgZi0ApvWSQ
LUpwEJtbNbsw2pdjuKMDIYNERpXYwhqs8G40+nkXPXCKhWIWRN46crYMLgvMFHxHatq5ZyTgBPZtN5T2WK6dwU6hNOJqxrc4gob
0r3C4kfgWAS/
r7Ah3W+IrluSwinmXNJiuAZpLRzVgPXVQdpszsXV4MHoOlupNIKrXclcWHeVSlyAq0GNAwvgMnoPuJM2MoexClupNIY5409zU7izFke
sJdTU4GqwtLY368Nla8JsAFM1tlJpCgO2fyYZXI6CEAwOvmpUeVx9drzTdFhFI1cbeqpwPWiz03tNwolGVULnH31VuP7H3KZpdJlzToT
G62Hxj3CiJFL9n4V9acdIzonZEO79SbFYsVyf3q2kobxhlZDRMsK96cC9CeBO8LLAydhizxmAo9fhJDlXYSJzZfxnDm6Pp51zQrjy0XOPeX
PuhE47rGLPHeGaOtXalMLFeKbh7Jyt5IzOOJxmE06tLkMFcTToqUyDt2qAd8qW5MxREOXj73IcBfxdJnpjK9nfeWrwCFfJHdYYjjHLYoy
UWVVnVoJNk+3uFIXBAFwckmgN8OaHFt3owG2oG7SfAZa+IKhpcMo5h55jG/wj/
vX5vbnUgVs2WwAw+w2QzJYtXO4mXMZFzQeWQf/16/tpNVVa3nB1p6un79kYr+87EAoikjesZS4WwN/
tx9Xqymjx9fXdcPICwa3gyvSPejBFGsMfUdJp51yVJdDQdYM/MGtoOe3EfY2/8GfAEo0kQ86dwpUPYgFW69dUeXA4qj/
9AlgHLA5A3rBWD49YPhVj0QJ7gvrwsFUDb3leRIzt0iM3nACN22UkiDqgl3tjgE4UEHa0ZgTuko2Lf0u9VB+9+Pi15N9dnz9k/
oIQsW0rA2bqcDNc8idM5C0IGRo6z52s1OFWE5cIjBzh9Bc4KWy8HX+pw31BYBouha3M2joVMYa22NpVOOnAn8Km/
M3hVl3AITWFLsNkM91xSl+57jWSua6cLaxpcFirK+WFIVdtJarXA51JOMrWuuP/
GNYye2Zzzsb1w189tlLprzSwZYM5Z9ssgqHymnWv+hAiKZ2psCJboD3sc+HQH8jozMDZnO1Zr1L3GvGNKhI4/
ZmwCM3mW1QysXG6T0nJZlh9CdgI9SErG6cDn4jwMqy+Emg0/k/zHIsInNY1LZYcZvOG1SaMhBWcomeYoR/
Vx6l6Jbyc2uWFYyyMPFw+jDIubvbqYmjX3sBiTA1OIeeotVniImA41RqzxKpNhwC/
OhvLVM4xH29+7Wl3XrHqvVd8eJ+dwWUOq80q2UtUrBFUzMBhBwnAGRsI6V618cfZcJE553jntan/
AKvp5Z6gbOr2pyt48E8LNnPOxXA2Cz1eErNxIw9ht98Yz9DM0gsVqzUdzt6JkDB6BK5ZZrruLDbwGIWE2Abg7KMoi5vdW57h682L+O
EFyu3lhrMvhGv9UGdNeK4v4IPDwVjegriEQ1lrJ+tXYM7aOrWUsyAEbLa9gH6p1uiNR6Nx7/
pXdd39lTWcbi7OLeUKq5CNbOD768mBrb5fUoeN+sv37kJ4Wn3Dhojp8sJZFv5wURenTW+L6sb3N1XvGUA+4PK9h8/e9sr5+
+evuUt14aQ5J3QcVq0VhvuDTHbof8JKsqJorODTD+3dlXiXRS9tZcs5cNpERMZ9uPNkLJtZbXSeIPW66La2xXYX8odKoB3giHRbpCSu3r
ktSyZKo0+YJZzXwIY7oPRwmeRJd3CaG/
txPi32W0I2c+cA54XBN+LOXXZ2WQqcfCuuJOc6l9krdyA6DwfeaW9XGbUeRnQZnbjtCh3R3cTsOIFiXPnnElrtAHwMh6vVcPgB0KlSlrh
DCpey/VtG57NLuBRALIyo3ZoA3zjfakdWEi2FTnvjPD9yoBTTo/fKlhsGAbaZMhFfKoXTP3LghJfNJBUu/
nAa94uUC0R0aYc1xAURbwDXY7suCZz+MRd+QIgYhhPSkbQDQvLAzplhNiEdm2c69+UMmGm4JF36oTRZvOPjfMQwWwKOZDzOFx
+EpLeFo9Zj9mOank2Nsl3QUTvzEdLt4VtyOzhy9fCtPOf2x5ZNsp3S5Ty2vDvwLRmO8sFRfuA793F0Zx4wev1D9eAIC+YmXjSwe8kANd
aHKTX1kgEuTL3WJnBx5nE4DUFF++AuJbgKLcSvZwC1Kk0tiMMsYPdii0puGX+xxc57P/BKEB39V1+m8jNSyjmNH5P3/
LRvCt1GRc4VKnSioiAK3VtFzhW6t4qc+z/qXxkLGwcUJjxQAAAAAElFTkSuQmCC" alt="snapchat" width="250" height="250"></td>
<td><a href="https://www.instagram.com/accounts/login/"><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiA
dHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/
RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//
AABEIAHwAfAMBEQACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAACBgcDBAUBAP/
EAEYQAAEEAAIECAcOBgIDAAAAAAEAAgMEBREGEiExByJBUWFxkdETVHOTsbLBFSQyNUJSVXSBkqGiwuEUFkNEYpRy8CMlM//
EABsBAAIDAQEBAAAAAAAAAAAAAAADAgQFAQYH/
8QAMhEAAwABAgIIBQQCAwEAAAAAAAECAwQRBSESEyIxMlFScRUzQWGRgbHR8EKhFCPhwf/
aAAwDAQACEQMRAD8AsbTHSn3IyqUg11xzcyXbREOQ5cp6FOJ37y9pNJ13aru/
cra7fu3pC+5ammJ+e8kdm4K1Oy7jZjFELaVsaZCaqJgITVQALU1UAHBMVAAtTVQALUxUACE1UAHBMVAAtTVQALUxUACE1UB4xz43
h8bi1w2hzTkQp7p8mDW/Jkq0Y09xXBrDG25pb1LPjxyu1ntHO1x9G5Z+r4Vg1C3hdGvt/
wDSnn0UZFvPJl20LsGIU4blR4kgmaHMcOULx+THeO3FLmjDqXNOX3opnE7Drt+zaeSTLK523mz2DsRNHpcUKIUr6GoQmqiYC1MVA
AhNVAeMifM4shY6Rw5GDWP4JirbvBtLmxnDrviVrzLu5TWWfMh1kepfkBw+74ja8w7uTFlnzDrI9S/
ITh17xG35h3cmrLPmvyHWR6l+UA4de8Rt/wCu/uTFlj1L8o7049S/KMZw694hc/139yassepflB049S/
KBLQuRtLpKdljRtLnQuAHaEycsvkmvyCuX3Nfk1Njhm0gjoT09iYSExUcAWpqoAEJio6TbQzTX3Awh1GXjgTOezMfBBA2dufasrX8N/
5OXrF5GfqdJ1t9JGsWrxyovgITVQHsFaW1PHBXjdJLIcmsbvJTFRGqUrd9xYWAaDVKzGzYsG2Z9/g/6bOjL5X27EPI/
oY+fX3XLHyX+yVa1SjCG5w14m7hsY0JfNlHtW/Mx+62G/SFTz7e9HRfkS6rJ6Wee62G/
SFTz7e9d6FeQdVk9LPvdbDfpCp59vejoV5B1WT0s+918M+kann296OhXkHVZPSz73Xwz6Rp+fb3rvV35MOqyelijxPD5XBsd6q9x3Bsz
SfSuPHS70ceO13o08Z0cwjGmH+OpRveRsmaNWQdThtTcWpy4vBX8E8Woy4vCyp9MNDrWjzvDxuNjD3HJs2XGjJ3B49u7qW/
o9dOfsvlXl/Bs6bVzn5d1f3uIsQtJUWwFqYqABCYqOkwcF81miIC1NVHSwtAcFZWpDEpm/8AnsDiE/JZ0de/sTU+Ri6/P0r6tdy/f/
w90x0qdhjjQw4tNotzfIdoiB6Of0LqDR6PrO3fd+5W9qaa1KZbUr5pDvdI7WKfLNmZmVtK2MDmDmTVR0BYOZNVAAtHMExUACwc
wTVQALAmKgMUgY0cfVA6U2aZ1bvuO/
o5pZiWBytDJXWaZPHryOzGX+J+SfwSc2mjMufJ+ZVz6SMq8n5lvVp6OP4Q2WMNnp2oyC1w3g7CCOQjd1rFc3hvbuaMKpvDe3c0U
hpNgz8DxqxQcS5jMnROPyozuPs6wV6bTZ+uxK/
7uehwZVlxqzkEK2qGhLUxUBLy1fNVRwLYnSPbG34TyGjrKbNBvtzZcp8HTpHVGUUEewcwaP2Vw8xzuvcpe1LJasSWJTnJK4vcekqCo9
NEqZUr6GAtTVRIDgmKgDqlzg0DMncBvKaqA3Y8BxaZuvHhtst5D4Fw9Kmskr6iXqMS76Rp26NqmcrdWeDysZbn2ps2n3MZOSb8L3
NVwTVRIt7QHDqlXR2rYgY0zWGa8suXGJz3Z8w3ZLP1N1WRp/
QwNbkqszT7kRDhSw6pUxKnYqxtjksseZg0AAlpbk7LnOZ7Fd0OSnLT+he4bkqopV9Njf4JLr/
f+HOPEbqzMHNnsd7FDiErs3+gvicLs3+hi4YKg8JhtxuWZ14n9O4t/V2pnC726U+x3hlcqkrchbKo1AkJnSAl5avmqo4ZKQ9/
VvLM9YJsVzIZPA/
Zlr4t8VXPIP8AVK0X3HncPzJ90U3q7Aq00elC4JqoDoYDgdjG7ZihOpEzbLKRmGj2noTZYjUaicM7vvLNwjAsPweICpCNfLjTP2vd1nuX
W2zDy6jJlfaZ7PpBhFd5jmxKq143t8ICR2I2YTp81LdSzYgs0cTgd4CaC1Edjg1we37Uc0QqbxvmtmQ3SvQaJ0b7eCs1JGjN9YfBd/
x5j0bupWcedrlRoabXtPo5fz/
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
b8z/
I9y7eRTy+oaXSvM934SsZNZ73Pe4uc4klx3k86UqN1JJbIxlqYqJA1UxUBMHNyJB3jevm+7T2ZHvAQpqgAQmqgM9HELVB2daUgE5lh
2tP2dyuafWZcD7D/T6CsuDHlXbR2odLHAZT1Mz85j/YR7Vrxxr1x+H/f3KFcN9NGU6XQeKTfeCcuMY/S/
9Efht+oP84QDfUm+8FJcWxv/ABf+g+G36jz+ca/ik3aFJcUj0sPht+o8Omdcf2c33mqS4lHpYfDb9R5/OlbxOf7zVNcQjyYfDb9SA/
TaADiUZSeYvAXf+dP0QLhteo5OI6YYhZaWV2sqtPK06z+09yhWqqu7kWcfD8c865kbkLnvL3uLnOOZc45klQVF1JJbIxkJio6AhNVAOKr
NMC6NhcActiYqOO0u8nWOUX1rb5A0+ClOs08x5QvG8Y0dafO7S7Nc/
wBfIp6PMsmNL6o5hasxUXAFqYqABamqgAQmqgAQmKjoCExUACE1UAS1MVAAtTVQAcExUAC1NVAAhMVAAhNVAHUJcA0EknIAD
MkpssO4srRjBG4fhTI7UbXTyOMkgO3VJy2dgCvROy5mDqtR1mTee47U8Uc8ZjlYHMO8FGTFGWXFrdMrTVS95fMjGM4dBUOcRft5C
c147ivDsOl549zY0movKu0cghYyZeAQmpgAhMTABCZLABCamdAQmJgAhNTADgmJgAhNTABCYmACE1MBQRiWZrHEgE8idHN7Eae
y3LCwLR+hRayzGx0k5GYkkIJb1bNi1MWKZ5ow9RqsmTeX3HbATiof/9k=" alt="insta" width="250" height="250"></td>
<td><a href="https://www.facebook.com/login/"><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiA
dHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/
AABEIAHsAuAMBEQACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABgcBBAUDAv/
EAD4QAAIBAwICBQgHBgcAAAAAAAABAgMEBQYRITEHEkFhcRMUUXKBobGyFSIzNkLB0SMkU3OR4hYyNFKCkqL/
xAAaAQEAAwEBAQAAAAAAAAAAAAAABAUGAQMC/
8QALBEBAAIBBAAEBQQDAQAAAAAAAAECAwQFESESEzFBIjI0cbFRYYGhFTNC0f/
aAAwDAQACEQMRAD8A5BvmOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6Ac5DjoAAAAAAAAAAAAAAAAAAAAB2b
nRlRk5KMYtyb2SS3bOTMRHMu8TzxDr2el85eJOhja3Vf4p7QX/rYh5Nw01OpukV0ee3pVv/AOA9QdXfyFPw8rE8P8vpefWXv/
jtQ0LzS2dtE5V8bWcV+KntNe496bjpr9Rd420eevrVyJRlCTjNOMlzUls0TImJjmJRpiazxPTGwJjgDgAAAAAAAAAAAAAAAAejvOk9Qkul
9IXec6teq3b2W/2jXGfqr8yr1u5U0/
wV7ssNLoZzfFf0Wbh9PYzEU0rK2gp9tWX1pv2mcz6vNnnm9l1i0+PFHFYdTYjcPdnY6MdXicHMy+AxuWg1e2sJT22VWK2mvaSMGqz
YZ5pb/wAeOTBjy9WhWeqNH3eF61xbt3Flvxml9an6y/
M0ei3Omfil+rKXU6C2HmadwjHNfqWqujsOAAAAAAAAAAAAAAABKtDaZ+mrt3V3F+Y0XxX8SX+3w9JVbnrvIr4KfNP9LHQaXzJ8dvR
bdOnGnCMYRUYxWySWySMtPc8y0EREPsDDew5GlkstY4ul5W/
uadGL5dZ8ZeC5s9cWHJmnikcvPJlpjjm08OBU6QcFCWylcSXpjS4fEnRtGqmPRFtuGCvrLfxOrcRlrqNraVqnl5ptQnTa32W54Z9BnwV8
V46emLWYctvDSe3bnCM4OMoqUZLZprdNEOOY7hK9VTa70x9D3Cu7OL8yrS5fw5ejw9Bp9s1056+Xf5o/tQ6/
SeX8dETLhWBwAAAAAAAAAAAAA9bS3qXlzStqK3qVZqEV3t7HxkvGOk3t6Q+8dJvaKx7r2w+Oo4zG0LO3W0Kcdt1+J9r9piM2W2XJ
N7e7VY8cY6RSG6eb0ANXJ3lPH4+4vK32dCnKpJLt2XI+sVJyXikesvjJeKUm0+yjcrkrjLX07y8m5VJ8k3wiuyK7jbafT0wUilWXz5ZzX8UtR
bcorj6Ee3Me7yivPVY7Sbo/
pzjqq1clNLqz4uLX4WVe7XrOmmIlY6Ctoz98rhMqv2plLGjkrGtaXEd6dWPV8H2P2cz7xZJxXi9fWHxkpF6zWVE31rOxvK9rWX7WjNwl
7O03GLJGXHF492Vy4/LvNf0eB9vMAAAAAAAAAAAACVdGtmrnUvlJrdW1J1F48l8WVW8ZJrp/
DHvKx2ynizTM+0LdRlmgZAARvpAk46Uver29RP8A7In7ZHOqoia6eMFlNvma9mVodGeLtliHkJ0oSuKtSUVNrdxiuGy/
puZjeM95z+Xz1HC/27HWcXj47lNlFJ8Ev6FQsn0Bh8gKm6TbNUNRRrxWyuKCk/WT2fu2NRs2Txaea/pLP7nTjNE/
rCIlsrgAAAAAAAAAAAAJ70SxXnmSltxVOmvfIot8n4aR91ttPzW+0LLM8uwDkZvUWPwc6Ub+c4uqm49Sm5cvAk6fSZdRz5cejwy6im
L5kS1bq7E5bA3FpZ1KrqzceqpUnFcGnzLTRbdqMOet7x1CBqdZiy4bVrKu2zRKTlYOjdWYnD4Gla3tSqqqnOTUaTkuL3M/
r9v1GfUTekdLrR6vDiwxFpSrDarxeZvPNbCdWVXqOf1qTiklt2vxRWajQ59PXxZI6TsOrxZp4o7pDSQCuOlqKVTGT247VF8pf7FPzx9lPu
0fLKvi/UwAAAAAAAAAAAAE16KrhU8zd0G/taG68Yv+5lLvdecVbfpK02ueL2haSM1C9ZOitulr/U431Z/FGg2P/v8AhS7t/
wAoBw9DXsL/AI4VPMSANlx5t9yHqTEJ50VUOtkL654vqUo017Xu/gUO924pSn3lb7ZHNrW5WYZ5csMCsela4U8nZW6f2dFzf/J/
2mj2SvFL2/
dSbrb4q1QYu1SAAAAAAAAAAAAB09N5H6JzdreN7U4T2qeq+D+O5G1uDzsFqJOly+VliV505KcFKL3T4p+lGKmOOmniee4fQdad9i7
DIODvrSjXcP8AL5WClt4bn3TLkx/JaYfFqVt80IvrfC4uz03c17TH21GtFw6tSnTSa+su0stu1Ga+prW1pmELWYsdcM2iO1Vvmaln/
daGgsNjL3TlGveWFvXqupUTnUppvZSexmNzz5aama1tMR17/
sv9BipbBFpjtLbHG2WPjNWNrRt1NpyVKCjuVeTJfJ888p1MdafLHDbPh9vmclFNt7JcWwKP1TkvpbPXd1F70ut1Kfqrgv19ps9Dg8nT1r
Pqy+sy+bmmf06cklowAAAAAAAAAAAAGVx4HXY75hZ/R1qJXlosVdT/AHmhH9k3+OC/NfDYy+66KcV/Np8s/
lf7fqoyUik+sJvuU8LFk6I10g/
dS88YfMiftn1dEPXf6LKcfM17N+63ujf7q0P5tT5mZLdvq7fx+Gj276ePvP5Sork1hvY4IZ0h6hjY2Usba1P3u4jtJrnTg/zfIttr0fnX8y3yx/
av1+pjHSaV9ZVX+hqme79w4AAAAAAAAAAAAADo9KFerb1YVrepKnVpyUoyi+KZ8WpW9Zrb0l91yTSea+q1NKaztspCFrfyhb33Li9o
1H3eh9xltbtt8E+KndV/pddXLHFupS+L3RWJ6N9IX3UvPGHzIn7X9XRD13+iynHzNf7M37re6N/urQ/m1PmZkt3+rt/H4aPbvp4+8/
lKW9iuTUT1XrK2xEKltZuNe+222XGNPvff3FlotuvnnxW6r+UHVa2mGOI7lVVzcVrq4qXF1OVSrUk5SlJ8WzU46Vx1itY4iFBe9rWm1vV
4no8w4AAAAAAAAAAAAAAADnt3B2eeuEjw+s8viowpeV85oLgqdbi0u6XP4lbqNrwZe4jwz+ydi3DJj6nt1M9re2zWBrWMrSrRuKnV
afWUocGnz5+4i6ba8mDPW/
i5iEjPr8eXFNOO0IL1UxEpppzWlvg8DTsvNKte4jOct1JRjxbfPn7ik1e2ZNTnnJ4uIWmm11MOGKzHfbn5nWuYykZUoVFa0HwcKPBvxlz
+B76fasGHu3xT+7xy7hmydV6hG+e7lzLP0jiEHie5kDgAAAAAAAAAAAAAAAAAAB0AAAAAOAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//Z" alt="facebook" width="250" height="250"></td>
<td><a href="https://twitter.com/i/flow/login?input_flow_data=%7B%22requested_variant%22%3A%22eyJsYW5nIjoiZW4ifQ
%3D%3D%22%7D"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACCCAMAAAC93eDPAAAAV1BMVEVQq/H///
9IqPFCpvA7pPDz+f7g7/zN5fr7/f/A3vlar/FgsvKezfb3+/7t9f3V6fuu1fiFwfSNxfVzufN9vvRrtvO02Pi72/
mYyvbH4fqn0fcuoPDn8v1FYYRXAAADuklEQVR4nO2a2ZarIBBFSYGKs4JTjP//
nRczxzhUKbn9wn7rXg2erpESGXM4HA6Hw+FwOBwOx98DwLngHP7s+TyqVBGe20Lp6C9kAFNBdnqQBRVMRQCLfipAJK/
n31V04l0EF/
1QU3bkNAWinAq4iqjEU2HdyFNO2BXKnqQBmhkBBlmMdgCIyjw1P1aE+BD+SVEUn+cVGELOuQ5vJsoJCqA0CzRaA+SLCk6noE0fJok
IEnhgVqQaueL61wgUKU2vSzyc63iPU1CI7b2eXP0wWq5C+QKpYNwLBLIyQPu03bby1UB4YWoEF3HidThvvDm33VoBGiMg05eoKgZ
5CrDx8PaP5Wx9ESoW07b1r3mZIQUw5r8t96pVZ8Qeyg93Y+B7hP+xMFwxBHQkBei0nEZYVi12XrFcF48oYPDl3yBaSE8+153mGSjFE
WaKTcPmQyL9/
tN5Avzz2UKiySaeEVFLpILN7J7AZ8PcO9dfByGNlNBTqvPVDO3CTrkpch8qkBLSmKiAsWh5t1Ax8YrNGCmBcmK7IcKV/
WSeaCPjZg1cOO6QsFX05JA3pTEuXAacBLojGMdUvcwPWlxd2COBwZoryHj05492wJkYKYE4E5hUM5kHpB64QXahSsh8ZYZTixp8a
mUam7XMO13je9AGZ3JxvDVr6VkzA202Y7azYaSkTvpzzfoQUhMVMKgtSyCcGR/
MN+v9UIb6hxksB0NBl8AsewI7IL8jkMMyDnqHYGNAoo+lCM67Xr5hJ3YUyFH2S4PFiCQ3iDvIoR0BuUG8sBWS5Or8QiRWFGQ7isITH
tlwxs5gvANQBdiJbdEIh947g0HE3TEVe4rziz7pSpX04ZHDkzzmBhsp0R+TgHqZto538GLEQnU6lg42Tk87zioTxMI1AxZZW7igOjbVJRY
UHDs30GeoWQ3xfg2epfs42D/VHeiQEw2M8IL1HfIQt4Ko/
O0HfhFaVDC2qzKgDje5lVD8EBGrcCBM2r5lATcVXFyW3oh+MWxcpOzVwNAtw7caB08B0KHdEPxGQYzvmuEvnCAiwmCT2LcBCE0o
Tp62nI3AIe58wvE1oNz+LD/
2BdN9TmpTiZUvWHTbK1UqlTRnal3OYzthAPXOE+NQWotD0xF2tKWst1oQQSjigU32SxeZB0RUhET0P78esiaCRwXKH9nM1aE1ONN
FtpqT0gvLX39JxsV4Tph/fhokmv/EA1NACB6rJgz8IfNSmXqZn5/bRJvf/
88P6W6lkrFo5Fq2f+d+h8PhcDgcDofD4djkH1JvKxBo+ZG+AAAAAElFTkSuQmCC" alt="twitter" width="250" height="250"></td>
<td><a href="https://www.youtube.com/account"><img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQ_pNOJv5eXnvyVFsWONjTf7HUHnQPX-_NjUW8D0J9YYQ&s" alt="hotels" width="250" height="250"></td>
</tr>
</table>
<hr>
<hr>
<h1 style="text-align: center;">TOP SOLD MENU WITH PRICES</h1>
<table width="100%" style="border:2px solid black;">
<tr style="background-color:cornflowerblue;">
<th style="border-collapse: collapse; border:2px solid black;"><h3><a href="">MILK PRODUCTS</a></h3>
<ul>
<li>CURD</li>
<li>BUTTER MILK</li>
<li>COFFE</li>
<li>LASSI</li>
<li>TEA</li>
</ul></th>
<th style="border-collapse: collapse; border:2px solid black;"><h3><a href="">MILK PRODUCTS</a></h3>
<ul>
<li>ghee</li>
<li>paneer </li>
<li>milkshakes</li>
<li>ice cream</li>
<li>milk sweet </li>
</ul></th>
</tr>
<tr style="background-color:cornflowerblue;">
<th style="border-collapse: collapse; border:2px solid black;">
<h3><a href="">SUBJECT IN SCI</a></h3>
<ol>
<li>BIOLOGY </li>
<li>CHEMESTRY</li>
<li>PHYSICS</li>
</ol></th>
<th style="border border-collapse: collapse; border:2px solid black;"><h3><a href="desert.html">SUBJECTS IN SCI</a></h3>
<ol>
<li>MATHS</li>
<li>ENGLISH</li>
<li>COMPUTER SCI</li>
</ol></th></tr></table>
<table width="100%">
</table>
</body>
</html>
OUTPUT:
Q.20: Design a webpage demonstrating table layout.

CODE:
<!DOCTYPE html>
<html>
<head>
<title>Fitness</title>
</head>
<header>
<body style="background-color:grey;">
<div style="background-color:yellow; border: 1px solid black; width: 98.7%; height: 80px;"><center><h1>Devlope Your Workout</h1>
</div></header>
<div style=" background-color:pink; border: 1px solid black; width: 20%; height: 500px; float: left;"><h2>Advantages of workout</h2><br>
<h4>1.Boost Energy</h2><br><h4>2.promotes better sleep</h4><br><h4>3.increase lifespan</h4><br><h4>4.reduce body fats</h4>
</div>
<div style="border: 1px solid black; width: 78.5%; height: 500px; float: left;">
<div style= "background-color:blue; border: 1px solid black; width: 90%; height: 80px; margin-top: 20px; margin-left: 5%;"><p>Regular
exercise keeps your muscles, bones and joints strong and functioning well, but also helps prevent falls and fractures. Try doing exercises that
strengthen your bones and muscles twice a week. Exercise burns calories and helps to maintain a healthy weight which in turn reduces your risk
of many health problems.</p></div>
<div style="border: 1px solid black; width: 40%; height: 350px; margin-top: 10px; margin-left: 5%; float: left;"><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUVFBgVFBUZGRgaGyAbGxobGx0bHR0dHRodGhweGiAbIC0kGx0
pIBsaJTclKS4wNDQ0GiM5PzkyPi0yNDABCwsLEA8QHhISHjIrJCkyMjU1MjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/
AABEIAOEA4QMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBQMGAAIHAQj/
xABEEAACAQIEAwYEAwUHAwIHAAABAhEAAwQSITEFQVEGEyJhcYEykaGxFCPBQlJi0fAHFTNygpLhQ6LxU7IWJER1s8LS/
8QAGQEAAwEBAQAAAAAAAAAAAAAAAQIDBAAF/8QAJhEAAgICAgICAgIDAAAAAAAAAAECEQMhEjEEQSJRE2EysXGBof/
aAAwDAQACEQMRAD8A6Tw63Lg7RrTykPCr/iHypb2w7UthMThLS5ctx/zZEkIWVAQZ8OrEz/DWHw2uDNHkJ8yzY7/
Db0qHCYwNC5T+lVPjvae4mPt4bw909uYjxd5LZZM7HKBHUin3Y7GNiMHYv3Aud0lsogTmI0HLaq/
KUri9f2JpRp9hOPZs6jSJ0HmdKjxGBYMWmQarfD8VjsTfvNbuWEt2MU1nK1tixVcp3BicrAT1oztF2nfD4/CYYRkuf4siTDnJbgzp4t6WXj8m+T/
wFZHGqHeHv/kkDdQRUmFvsbRYx8O/
tzqmcY4xjLeKxFvDtZCWbP4h1dCS4BIZQwOhgVJwbtHdutdthFyLh7dxRHiBuAlpPOglKKTb9B1J0l7LlwZptLPn9zRrKDvVK4fx9rF1EvFRhrltijxBS5bJZ0Y
7EMniHoRTrspjr2Isd/eAUXHZ7SAQVtE/l5tdWI8U6bitEKcUSnqTPMbw60WVGtjxc4FU/tJw+3bdUV5EjTfKDv8AKrL2v402GuYQDLku3slzMJOUiJU/
swSDPQVTu2PEyMZiAiqVwltLh01LkpuZ1EXFEeRqE8P0isJ/
ZZePcPtphMyE6QOsz9utUa0ma2T0p7xntHjLdjEWL3cm4Esuropy5Lz5CpVj8Q5Gqfc4nctW7lshSyuoJAMEMJ2Ox0pZ4aaoaE9bLF2X4itjEI7AldVMCT
4hAIHPWrd29uk2FGUiXkE/5T8jXMMHxFlvIyxC3LUSJ0YgmrNxvtbcu28ZYfLntYrIhC/
9IXWt666sIGv8VPGD4tCSa5WXTsZjw+GRMplBlMDQwd6J7RcW7gISpIYkHTyPOqx2Sx2NOU2bdt8Mt9rLJ8NxQD4rpZmAYCfhAJjYVYe3OFa5g7mQS
y+JfUT/
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
w1JdsNfsvhkjPcZDbLTlDo3OATBUsNudNeL9m/
wt27fAHdth1tINZDhbaMx0gDKnWZY6VSE04UJONSKFexI7u4pBlrpaY0+IHfrpQ6b5ufeDX3pjjcKy2zqCWuF9OQPXTel+Hty4E6Zg3nRUkGmMcFcKgkf
+o33qwdjBYbKDhibwuOwvG34RBkDvORHSq01u4hIlMpctznUz0q+dmMJxCzbt2wMObDvmP+IbkOcxjQKDUZq7pjIJ7eO5wVyWMQunL415VR+z2I
W1cuEaL3ZJHKQ2/
wAq6R2m7P37+HuImQEgRmY6wQx2B6VzLCcLuOlxpXMRkjUAa6k6etdiTiqkGTTehYbhg5t3IuKehJNTEtcYXTprEemh+s1tfwAV1y7TGv3r3xWwFIBOs
dNSTVJSvoVIlxBBUg7FT86QYdypiTVguW5WTocgmNp8qQO4zEU6QrYdn86yoMo61lGkCz6F4WPEKeUm4b8dOal4n8Bs/
wDIjvmFNbiocWPAfb7iphV12yXogxiyjek/LWpLJlQfKtcSwCtO0GoOG3w9tfIR8tKVtc6/R1OgbtCfy/
f9KF7NODacTsx+RUVL2gfLbIHOkvAMZbQXM5gnb01286xznWWzTGN4xx2YjIxnXNt7Coe1fGu4SFPiI948vOgezOLys+hIOopHx+8jXGe54jqFXkOZ2pZ
Z6gox7GhiubcuiuniF+6XdBOTU7xB0196J4viAlseJDABPiMzHMRI+VRvxEqjBYH7wGg8h96CTFKxMgECB66SfvUYRrs1ci0f2Ydoi+ew6/
xpHMxquvlt6Un4vfZ3eRHibTpqdK97N8Us2XVwgGsmPKRp7GaI7TWMt1ivwkyPQ66eVPKbqn9kFH5WCzNpZ3qDDMACJqa1cm0R0pWG86aCBJ6G
vBcWLeItNvFxfqYP3rqvaGxnwt5eZRo9QJ/SuJrdCFXG4YH5Ga6xe7W4VrQ8Tk3EDAKjsYdXInKumiNM7RrWvD00zNk7s5k4ARZ1kGq/
ZEOTTB+KpAGsAdP66UtRwTRaCmM7kFQ1dV7McSw5w9qX8QAEHUgxFctR1KeWZUEgjxMMwG3QTNXjsji8Fawwa58ZLFjkYkR3pGw00suf9NT4yct
BbVFzx3FEtqZJ22jX61ybBvCuQIVrjx5CSQK6BxTG2buGN9hcKoSjRbuB1OkymXMBsZIjUVzx8SlsFCW/
xGgFSG0KggiJBlgIrmpOWwR4i+64kDmJJoO6ZHnUuMxKFiVJ23g9J6b60K9wDcmYkaHQUUqY9oNxrgWySIkACkKYVsjPGnM9KNxN13tlSBCsCOtb4G
8QhU7NpHrVeROhXA61lNf7hHnWV3JC8Wdz4Tc8evn9qf1TcNictwHoatdq8CBrWXxc0Yri2W8iD5WacQaEJ6R96IRpANLOO3otx1IqPDcSlFneKaflwhJ
2SWNtWNLqhhBE0Lwm3ltjSCSfvQ7Yxspy6k7c6nsYgpbzXQEjzn+jRw5llfJLrs5xaVAHFsIzMdysVXeKcMdIZPhKge/v1qyYvjXhlEdgRowGh/
WkN3i90mO5JXoVIHvNYfIlFS+NmzDGbW0ZhLfdWSQ2rEmegHL1mq3j9QzdNPbyqxcWcsEjmNvfy+fvVW4qzG2yj+p5j60KoukJMSpCzyMk/
wCkHX5x86HWVVieU/
MCD9aluXJbKZghUPTXxOfT+VB8UfZQZnN8yVn7n5VaCslIjwt3RRO0z8yP0q1WMX32GKk+K3DA88shWHsSD7mqQt8KXk7GB+v6/
KrB2NfOzg6jubhPoQOm2sU2WGrJxluh3ZwmbCvdE7wdNN4qvF4NdH4bdX+67i5fECynSNS2aROsCR8q5libviiOdUhFJom5WmR3b5yn1q/
8G7MLdwVvEIyLFsMysjMC1tbqs3huLDHOCOQy6gzVLxPCrvcd8E8ExPvG3SdK6f8A2blW4aVOoDXA33+xrTDuiU+jkeJwOUAg7gcucGo8MhzetG4xtF
56VHgxJpZSYYItnZ7ss9+1dbvSMoOUKu7hUyEyTIAQ6CD4hqOZ/Zfs739m8guZWNwtJXMApsXbQUajZrrv71Yf7PFmw5ndgI/0/
wDNe9h2CviEGoDAzy0LCjbtfsV9MOw/Cm7i9Ye6rXLrF2ZUKqJyqIUsTsg/a51zftBw2cZiWzBWFwnafiKOJ18vrXZ8omYE7TXJOOOHv4pwP2yNP4AF/
Smm2jodlRxGBjnJjp5Adeo+tDXLU6npGg20inGLWIjmtQLakecip82V4o3sYYZWnUspO0AE9NaVAadKsOGw0NDGdDBHWlD2QWI/ij61zkJQ1/
D3f3l+dZVx/uU/
+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
wDsywhTDvdbe48D/
KgiY82LfKqS3Z3HM+RLRIHNioX1zTFda4Tg+5w9q0YlEAaP3olvqTQnpDR2zzHXYBqnY68JJYgAbkmAPMmrRxJtDVRxeHW46K5y282ZzpqE1Canm0a9F
NY1FzlRslLhCwzDWSTCKY6/rTCxb11HtU1vGIuqrM+c/aobnFFWYUA/11rX+LJJUqSPPeRdsDvp4oAM/
ajFwz+HwEgDXQ9eelLcRx88v5Usu9onn4vrRXg/chPz/
ou5UQJkGl3ErYDCPFI+tV7AdqM7ZDy3O4qwtildVK1DL4rhvtFYZlLREmGaMk6HrUlwqttlGw0rTE3dtSNaX8RzCCo8OaW6nSsvGxm6YE+F1nkdjSXjW
AYloI0E+9W9QCoMelQJhAWYnnWjHNxewOKKlwNLtl0KmBEt0Pkf51a7vGs1q4FBD922UcpymINY+DJAA5HT0rc4EFTAg9Kt+RtnJNIVCLfBVAOj2dfNn
Mt9zPvSLgoDcExOYwFxKE7dLYG/
mak7ZL3NhbCZsjNnIJ8KweQ3Elpjb0rfsjbL8Jx6ASwbOAPJEYf+2t8HaszT7oqJVToGMzp1mSBEev1qw4a0rFCXIdgFYGDqANiv2qr3LrBlJEQ0yCJGoOnt
96uPBLc3O8W2IDfGxktm0mJ01g0Mr+IccU1bLBw3gKkCWDCcw05gc6lv4BUbPAKuygjprW2AxWS+8/
CdB686kxr5rhXUADflH86wptGhUxNxzD27d12ABXICI6n/
AMVTi2a6CBqdT5Vd+MWvy8p1kxO+9Ajh1sWyj+B1khyOR2zAbg1aEqROS2B9m8V+Z3ZEqxn0PI1dMUruqKTIBkn0Glc9w2DuqH2VlghpEFeRBHxA+
VX/AIbcz5CdoBHyg+1LlSvQY9A2VfL/AG1lN/
wQ6isqP42MWLELzJAFQWLavrBy9STr6eVTtaLnUwo3HM+XkPr6VOWFaKJmioJAAgVLdbetbXxVpiWgGp5WXwqxLxe9ANc94pxX8xlU/D4fcb/Wn/
aziHdo7cwNP8x0H1qmdnsMbt1FOoJk/
ep4I3cinky6iWvgvCHuAXLhIB2A0JqxrhbYEFJH8Xi+9SqAAANhW4NbImJi3E8JsMD4CP8AKSP+KS4XhVsElLfeeIjNcaRpoQojUAyMx5g6RrVovaj9aVXH
GVyfDbTQgcwNMoPmdz0jqapypbJ1vRoHtnw93HRkXwg+oH/FDYPFhGdTy3jy5+WhFLX45f7/ACkqi5QVQIsZYzALA5r9qO4Pirl9BcK25d2XLkElRlG/
QFtT0FRnlUouP2U/HK7D0xivqDtWYhpgA7yDTZ+EWj/04/ysw+hJH0qB+DLuHdfUK3/81D8LorUvYFbUAAE7CpheUCSdJ+dY/
B31i4pnkcyn7EfWgLvB8TyCED4RnXfpvSvGzraHqupVY3I/
oUq45x23hVGcnO0hFAJk6DUgaDXWaIXh93JqRIBACsBLTofiEDQmJ1+9c7R8Hd734nulZsgNwKZ7vKCxaRAbcSdTC+VDFFOXyGk2o6KvxG53iu7iMy6n
WSd5M/tE/oOVWj+yiwWsYnUZWuKpzbHwwR75gPeldvBqMLjnuCXtW1VJ/
ZNw5S0fvR8pPWjuxN4pw4ACS+KneJCC2STpybLp5V6iqjHbKvxfgTLcu27YLi3cKAjX9oKuafVRVs4Jw5ltohCqxiQGzGdhmPI8oqW9ibdu5iwEZgbhZyN4
cZtP+33NLuB4oNbm2SxEqJ3GpiT1g1nytyRWFIc38KwuZTyO41qZ7YFyRckfQH9aW2BczgEGWnzJyzt12NNBg8yAggeLMTuSJ2+tZ5a7LRX0TY3CC4iEk
DI2nsZE0obDFrhS8Tn2VyYzCSAdd/
i28qcW3ADLup+GdzzB+VAcVsHVlJJVQQPcHTrQjIMogGHw4W2+Zc6k5wh0C5SA+WdtiYOhmn+FdO7TuhCkbHSPY7UpQ+Hu2kllkyNRJmPMa/
Sm+GUKomMwESPSmb0LFEk3OtZUPfispQl2JqJmqTFQok6co8+ZrEsBv2gNJNVeuyWro9wxkmtMVYzaVtdTuhqc2bpp/
W9DjFTU8kX3RoxSS9lS7Tdjnvr+XdykHNDjMDoeY1G/
nSTs92bxWGvTctysQHQ5h+hHyrpwuiNa1N1aWM+KpFJQUnYgZiOR+RrQX9YAJPkCasfeComxABiJPQchVFkJPD+xb3KKPzHynp09T1pBx3G4VE7t2IQ
7EN8RnXlrqaZ8e4ldMJasq/UuRA9jvSdLBu/
9G3ASRAjxZs1xCAIGgXxdSDSSyN6HUIxV0Icbhu9Nu9bDeEW1UltMqSJfTY+FeutWbsWiIkA7Z9OgzkSPWFrXB8LgobfgQaATMrGuYbSWzSeirTFbYttm
AEMANOXPblypVIRysfB1jfSoHvKASTtr50vsXGzkE+HLoOpJ1P6Vl8wvz+Z0940qjyOtADRfQxIPWPKD/UVpduKGBGm48tdh8/
vUGHsyI5aROmgjWTsfOoMTcCk5+WpImPKI3oObcQ0FWzJmNjvO3ijX/d9a0t3RmWRvy6wNvPSflSr8QG2fY6wYOnrHMA1viXRgAdvJoI9/
lU8afdAv7Kdxle7t8TthiwLYdgSR8L3MwAjkAcvtR/ZZB+DwhzRFy85/3ZRPuF+Vb2+z9k9/mcsl3JInLGRlZRmk/
umT5nUU34ZggLWTIVRWDpkAOTqhJMH18/LXf+RVRDg7sR4y+i37i6CcpcddEj9ddtKh7C2Ei5YbcOrE+sqo9cq/
U1YH4BbuXbtyJFxQg5MqgADflodd9fSPE4GbRZ7ZkuFH+0kj6sajKa3EaMfYze0qtlkfDCA76jKahfDhFAGkgg8t96jwVu8AO8GYydQdQJGkk60RfeYJBHX
mI5/pUpOlZVAty14NognfXTrIrYW/
AwMTuNNRRNt0HiRw4Gh0gAnyPTrUOYFszQZke1Si37HIEw4LSRPKZ1HUVKbQAMR6VuqrqRAj6+vSsvpt85pmAEy/
w1lSd6K8oWCmX66gMEjahrpKxG/Lp6VCrXoBJX5Vl67dA0y/
Kpymnu2OoUZiL8Alt45naTO9K7hlgYOUAmZjWpcdgL9xJt3VDeaz8taquJ4DjipBxhAO4CAfWa7k77o7gqLTf4ihHiZFMaANQ2Gx9u40LdTTeY/
o1T7nYKYZ8Q7Md5P2ih7XY+2GiGOuplv506493/wFNaOiPYzMTadWneDQuKR1IYMFYaMSNdDpzgiluG4FZtEfhyyHLrDMdfcxXjI6KQzM8tOu+
+1cpRYKkF4gZgTIInca7nXY0PcW7bYsrDKRAJPOPrWzllUQmXnFRuc6BWHmek9adNAaYIl+6GYOLbQZ3IJOk8tPrUl7iAcaFgBp4Y0161lmzlJkjxc1Bn61
7duBQFXSNZOnzin0LtEiPmGjvl9gZ9t69vFUzBbjknWAdJ29qXfjBrBA57GhXxrnViY6frXKAHIbrxLL8dzMFAga/
EN+Yn7aUInGLjFyxITks6a7idxSsX4zCdT1io7DrvmI6xGtPGNCuTYwS81x80Ag8pJg9fpQ+HdrlxhByiZOwHLcbz0ou1fCDMSTI02/
StxxS2qFe7EbyDz32ottegJJhnBOGIJuOTuYB105R0qw3cQgTKsRG4ggeR6Gq1w3iQugzaKxqJ2PpFF4e7duPk7tVQwdTGoPpUm3ZVJBV0EgBCFB366b
wf0qa6GVoyKUgGTM5j0A5VG+AvDMzugHKDP6UvZnBlmJMfvUtPsbQRexXdwFVVMnNmJ1J125etCPxQNOdWVd/
AsyY6nlWiYHvWkhyw1mdKIOHKAzJY8m2oJO9na9EGCx2GznvGysRAXXf251NisVbtgXFSVG+ZtfbSoxw451dso56CTXt3ChizNczAbLAAp9LoRqTPE4la
u+C3AZt62e4+qAiV0pY+DRHzp4Seg2rz8UFJgljzNck32BWiTI371ZUX4s/
ufWvKPAbkdKFwDc1FjLokR786S23J3NbvfI01rLa9FqoaIdJU0Nc1oSxjMu9E3Lmk0UczABOorC6jYUKMUKGvYyJo3QBkrgjatLhVdSBSc8SciAKBxd664i
d6ZWxWx2+KD7xQdxhPhiqiz4m3MEETzqexevDxGPSq8dCci3LbPMa0vxVhi2gEelKLXGrpeIou5xdh8QM+VFIDZNfsqYkCh8Zg0YaaUI/
Eww31qG5xLSKqrRN7MscN8/pS/
EYNs+VWNMLHEZECZqMvDSR86e2LR5YwzxBameE4DcYZoLLUeJUhMwPtRnA+03dLkuCRyPMeR60rkwpI2OHKCFYitlR4MufnSjiPEu9uFk0HrWhxzC
BIil4DchqA41zMR5mitCmra0rHERGtbJiwedBxDyGOBxPdnVv686l4nxB7ixbHnNKWvAkVI+LyjSK6jrNrGIur8epo5MUikAj4qQ4riWuoivbONQ6k13E7
kPvxSK4lZXnzrOJ4uwWXuwJI1IEek+dVx+IgsRNaZlY77+dHidY471On1rKTfh1617XUwaOjrgm30qFsMaaveAFBvdFYFE12CLhZoj8KMsTWpujlWy3JFN
QtgDYXLzrGtAjlWY19YFCpcOxpkcYiRMjagsbcIMCKlvgnYkUA6EHWqRQjZ49ssNanGA0G+2tLnxBB50Vh+IaazT0yegh+HqoBAkigl4XcugsuUAsVUFoL
MqZyFEa+GvcXxRQNTFD2O0DLbNu2coLFp5+JQhEnbQbjXU1SEfbEkyZ+zN2TkAIDKmrAHO4QqseefTlAMxW6dmrgDAlQ8oFB0Vg/
eAklgCI7s6RJ5bihn45d37x/Yx+705+BNd/
CK9tcZukz3hG2wUDTNGgEftty1zGaroQ2PA7yFpyDLn0LEFu7QXHyiJMKRvHTrUmI4Rc8ebIoQsHYtouUISTAmPGgEczUtrjzywLhsysCGiPEnd6aeGFjQ
QPCKHxPFbzD/
EMieSkGQFbMCIeQo+KdhR0c7Jb3C72REBUu3e5l1OVLeTxjKCXBDr8IJ8S6amFFvhNxrly34Ea0VV8zwAXcIkEAzJZfnWt3HXyT+YTJYmQrT3gAcHMDKt
AlT4TA00FRjFXdZuNqQToBMXO8EwOTgEdI6aUaQtsZ8P7L3y6d4AiPcCEzJALm3I0ynxCIBnUEgDWkl66FJEzBIkTBjmJ5VP/fF+R+a0hs4Okhs/
ebxMZyWyzE8qBxILksSJJkwAB7AQB7V2g2yb8VO1RvfcbCtbZAopRzoUGzTDYi5OtMFuNpNANdFEJiNKDODWthhrFC4jhwgkEVnfyNKhe4dqFMNgD
2cp3r1X6GiHWRrQZt670Ugt0HeLqKyhcvnWUeIvM7NiKEesrK803ETVJa51lZXAA8RuaiWvayigMjfagMTWVlVXYjFN3evbNZWVREmLeN0ssb1lZVl0Ix
g+1eJtWVlEDB7nxCjKysrvZx6K2basrKYCFbb1tcr2srkcyE70amwr2srgAzbmt12rKygEmtVMdqysrgoGfahqysrkdI2rKyspyZ//2Q==" width="100%"
height="350px" ></div>
<div style="border: 1px solid black; width: 40%; height: 350px; margin-top: 10px; margin-left: 55%;"> <img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQR6yD6WeL1MH6NTwuQdQ-N35zWpibT2vQrsw&usqp=CAU" height="350px" width="100%" ></div>
</div>
<footer>
<div style="background-color:red; border: 1px solid black; width: 98.7%; height: 80px; margin-top: 500px;"><center><button>
<h2>flexibility</h2> </button> <button><h2> strength<h2></button> <button><h2> weight</h2> </button> <button><h2>body
composition</h2></button></div>
</footer>
</body>
</html>
OUTPUT:
Q21: Design a webpage demonstrating table.
CODE:
<!DOCTYPE html>
<html>
<style>
table,th,td{
border:5px solid black;
</style>
<head>
<body>
<center><h1>STUDENT INFORMATION</h1>
<table width="100%" height="200">
<tr style="background-color:gray;">
<th>NAME</th>
<th>SURENAME</th>
<th>year</th>
<th>CONTACT</th>
<th>Age</th>
</tr>
<tr style="background-color:hotpink;">
<td>Saloni</td>
<td>Pawar</td>
<td>3RD</td>
<td>8779910117</td>
<td>18</td>
</tr>
<tr style="background-color:red;">
<td>Aditi</td>
<td>Pawar</td>
<td>2nd</td>
<td>87799101545</td>
<td>16</td>
</tr>
<tr style="background-color:yellow;">
<td>Sayli</td>
<td>Polai</td>
<td>3RD</td>
<td>996965665</td>
<td>15</td>
</tr>
<tr height="50">
<td colspan="6"><center>BOYS</td>
</tr>
<tr style="background-color:powderblue;">
<td>Sanket</td>
<td>khamkar</td>
<td>3RD</td>
<td>9083786543</td>
<td>21</td>
</tr>
OUTPUT:
Q.21.Design a web page demonstrating form.
CODE:
<div class="container">
<h1>HTML registration form with varification</h1>
<form name="registration" class="registartion-form" onsubmit="return formValidation()">
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" name="name" id="name" placeholder="your name"></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="text" name="email" id="email" placeholder="your email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="phoneNumber">Phone Number:</label></td>
<td><input type="number" name="phoneNumber" id="phoneNumber"></td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td>Male: <input type="radio" name="gender" value="male">
Female: <input type="radio" name="gender" value="female">
Other: <input type="radio" name="gender" value="other"></td>
</tr>
<tr>
<td><label for="language">language</label></td>
<td>
<select name="language" id="language">
<option value="">Select language</option>
<option value="English">English</option>
<option value="Spanish">Spanish</option>
<option value="Hindi">Hindi</option>
<option value="Arabic">Arabic</option>
<option value="Russian">Russian</option>
</select>
</td>
</tr>
<tr>
<td><label for="zipcode">Zip Code:</label></td>
<td><input type="number" name="zipcode" id="zipcode"></td>
</tr>
<tr>
<td><label for="about">About:</label></td>
<td><textarea name="about" id="about" placeholder="Write about yourself..."></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" class="submit" value="Register" /></td>
</tr>
</table>
</form>
</div>
OUTPUT:
Q 22:Create a web page by using additional inputs in formhtml.(search , email , url ,

number ,range ,date ,time ,month ,colure ,week)
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form For Job </title>

<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="regform">
<h1>Registration Form For Job</h1>
</div>
<div class="main">
<div id="name">
<h2 class="name">Name </h2>
<input class="firstname" type="text" name="first_name"><br>
<label class="firstlabel">first name</label>
<input class="lastname" type="text" name="last_name"><br>
<label class="lastlabel">last name</label>
</div>
<h2 class="name"> Company </h2>
<input class="company" type="text" name="company">
<h2 class="name"> Email</h2>
<input class="email" type="email" name="email">
<h2 class="name"> Phone</h2>
<input class="Code" type="text" name="area_code">
<label class="area-code">Area Code</label>
<input class="number" type="text" name="phone">
<label class="phone-number">Phone Number</label>
<h2 class="name"> Search</h2>
<input class="search" type="search" id="query" name="q" placeholder="search.." aria-label="search throuch site ">
<h2 class="name">D.O.B</h2>
<input class="DOB" type="date" name="DOB">
<h2 class="name">Range</h2>
<input class="Range" type="range" name="Range">
<h2 class="name">Suitable Time </h2>

<input class="from" type="time" name="from">
<h2 class="name">Subject</h2>
<select class="option" name="subject">
<option disabled="disabled" selected="selected">--Choose option--</option>
<option>Subject 1</option>
</select>
<h2 id="coustomer">Are you beginner?</h2>
<label class="radio">
<input class="radio-one" type="radio" checked="checked" name="rdiobtn">
<span class="checkmark"></span>
Yes
</label>
<label class="radio">
<input class="radio-two" type="radio" name="rdiobtn">
<span class="checkmark"></span>
No
</label>
<a href="complete.html">
<button type="submit">Register</button></a>
</form>
</div>
</body>
</html>
OUTPUT:
Q 23: Design a webpage demonstrating Audio.
CODE:
<!DOCTYPE html>
<html>
<head>
<body style= "background-color:grey;">
<center><h1 style ="color:red;">Sound</h1>
<audio width="100%" height="50%" controls>
<center><source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
</audio>
</body>
</head>
</html>
OUTPUT:
Q24:Design a webpage demonstrating Video
CODE:
<!DOCTYPE html>
<html>
<body style="background-color:grey;">
<center><h1 style="color:solidblack;">Space</h1>
<center><video height="100%" width="50%" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
</body>
</html>
OUTPUT:
Q 25:Design a webpage demonstrating YouTube.
CODE:<!DOCTYPE html>
<html>
<head>
<body style= "background-color:hotpink;">
<center><h1 style ="color:red;">youtube video</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/OnnIOLTokvk" title="YouTube video player"

frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</iframe>
</body>
</head>
</html>
OUTPUT:
Q26: Design a webpage incorporating multimedia feature in HTML5.
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url('universe.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
</style>
</head>
<header>
<h1 style="color:Darkblue;"><center>Space</h1><br>
<h2><center> An Introduction To Space</h2>
<center><img height="500" width="900" src="http://planetary-science.org/wp-content/uploads/2014/09/Esa-space-exploration.jpg"></center>
<b><p>Space exploration is the ongoing discovery and exploration of celestial structures in outer space by means of continuously evolving and
growing space technology. While the study of space is carried out mainly by astronomers with telescopes, the physical exploration of space is
conducted both by unmanned robotic probes and human spaceflight.
While the observation of objects in space, known as astronomy, predates reliable recorded history, it was the development of large and
relatively efficient rockets during the early 20th century that allowed physical space exploration to become a reality. Common rationales for
exploring space include advancing scientific research, uniting different nations, ensuring the future survival of humanity and developing military
and strategic advantages against other countries.
Space exploration has often been used as a proxy competition for geopolitical rivalries such as the Cold War. The early era of space exploration
was driven by a “Space Race” between the Soviet Union and the United States, the launch of the first man-made object to orbit the Earth, the
USSR’s Sputnik 1, on 4 October 1957, and the first Moon landing by the American Apollo 11 craft on 20 July 1969 are often taken as landmarks
for this initial period. The Soviet space program achieved many of the first milestones, including the first living being in orbit in 1957, the first
human spaceflight (Yuri Gagarin aboard Vostok 1) in 1961, the first spacewalk (by Aleksei Leonov) on 18 March 1965, the first automatic landing
on another celestial body in 1966, and the launch of the first space station (Salyut 1) in 1971.
After the first 20 years of exploration, focus shifted from one-off flights to renewable hardware, such as the Space Shuttle program, and from
competition to cooperation as with the International Space Station (ISS).
With the substantial completion of the ISS following STS-133 in March 2011, plans for space exploration by the USA remain in flux. Constellation,
a Bush Administration program for a return to the Moon by 2020 was judged inadequately funded and unrealistic by an expert review panel
reporting in 2009. The Obama Administration proposed a revision of Constellation in 2010 to focus on the development of the capability for
crewed missions beyond low earth orbit (LEO), envisioning extending the operation of the ISS beyond 2020, transferring the development of
launch vehicles for human crews from NASA to the private sector, and developing technology to enable missions to beyond LEO, such as
Earth/Moon L1, the Moon, Earth/Sun L2, near-earth asteroids, and Phobos or Mars orbit. As of March 2011, the US Senate and House of
Representatives are still working towards a compromise NASA funding bill, which will probably terminate Constellation and fund development
of a heavy lift launch vehicle (HLLV).
In the 2000s, the People’s Republic of China initiated a successful manned spaceflight program, while the European Union, Japan, and India have
also planned future manned space missions. China, Russia, Japan, and India have advocated manned missions to the Moon during the 21st
century, while the European Union has advocated manned missions to both the Moon and Mars during the 21st century.
From the 1990s onwards, private interests began promoting space tourism and then private space exploration of the Moon (see Google Lunar X
Prize).</p>
<hr>
<h2><center>How Space Looks .....</h2>
<center><video width="620" height="420" controls>
<source src="desktop/space.mp4" type="video/mp4">
<source src="space.ogg" type="video/ogg">
</video><br>
<hr>
<h2>The beautiful Sound Of The Space</h2><center>

<audio controls>
<source src="spaceaudio.ogg" type="audio/ogg">
<source src="spaceaudio.mp3" type="audio/mpeg">
</audio><br>
<img height="200" width="200"

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJ
x8fLT0tMTU3Ojo6Iys/
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
C1ddicXXieq8F9lQWZB81uE1qOYalB/
ovQc75So7H7rc1/8Wy5MpR23slcNt7XvW9wvhRXTgfDytbshzhufySI12ZxKfJWx3WiaXVQ7DstD5mtHKjS5fZu6nFUJs3ZGQGN357BVrnFziSdyj3F5txt
eVKIxwREXQREQEREBERAREQEREBERAREQEREGQSOCtjZnD1REwbW5TgOAsnKJ5RFzIceTkHyXkzuKwi6NZcTyVhYRHRERAREQEREBERAREQf/
2Q==">

x8fLT0tMTU3Ojo6Iys/
AABEIAHwAugMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAABAgADBAUGB//
EACoQAAICAQMDAwMFAQAAAAAAAAABAhEDBCExBRJBBhNRImGBFDJScZHB/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAECA//
EAB0RAQEBAAICAwAAAAAAAAAAAAABEQIxEiEDE0H/2gAMAwEAAhEDEQA/
APErCtxLGT2IGTICIx0iAFE80EBohpCItitixpVJWwVRd2t8Id4oe1bk+74M3irFBwyxx8CuNEKXcljUwBCkuxgMytIEgAygAsFbAHcHBOS3BhlmyRhHlsor
GM3qPT8mgUFk5krRhUMCOgohCAodSoSyF0WWRMVMJrQ0WWJiRCi6sXY5Ux3vFFUFZdGDcWXW5FSjZHBLgyceO1wN7T5ozi+LBlHcVxMrJjd3VIp
cTNTFLQrRZJFbIzSMg1AoMlCwhqy4ESHi3F3G0/
sxowvjcV815NYL9Rqs2ohFZcspKH7VJ8FFgYaKEIElnMBBJREAfA0RRkUOh4iRLoK3SKsWYYXwZuDA2+P9JoNJkyyXZGT/AAdZ0voOXN20o/
lljrLMaXT6HvW8FsWvpr7X9L/CPSel+inkxxyZpKMH5ZusfpDp/
b2vK390i6n2cY8R1HT3GLXa7NXkwdrao9z6l6Fx5YyekyW14ao4Dq3pbU4Ms4dsfp+XTM1fLjenAZI0ymjc9R6ZqdO5OeJ0vK3NVKNOmiYzyV0EKRGW
MUjREM0A0hsb7JpomRqTuqABlCyJZJAIFQUTZP8AsjOYDCQgBQyBEaii7S4XqM0YKShFv6py4ivlm10ujhjnJ3GUMb3yy4a+UjD0qisEPiWSp/
8ALNhr04y0uK+3D2XfKb3ssg33Ts+DtSgpSra5bL/DsPTsJ6nPjhGowW8qXg830eSUJRS424PV/QkVLFN19ThtsdfXiljo8uWfYoRtRXCsqjlzR/
bNr+mZX6XNklUYuxdRoc+BKWSNJ8GdnTchcOrzwlbm5P7swPUsIZ9J+pqpx2ltyjIhCcn9KboTqdLpeqWRUlje4sh1Xk3WMnbmknCMkv47M0s8GDVtr
Gu+X8JbS/DMvqeWUskubNPkc4aiMsdrImmq+TFb+ST8Yup0ssUpSg21H90Wt4mM3Z0HWp+51KOVqPuZHH3FFUt1uqOfkoxnNR/
b3Ov6I5AxSSYjZdDWBsV2Zen6fn1Oi1Grx9ntaZJ5LlT34peRoxGw2KGxoEkQIaGABoNBGCJDpCocoswZXhtNd0Jcxs3GlzY8uJYpv3IcpN/
VFmkX3DGTT2bXxQHY9N0eBKUlNTd7RapnpXoDU4tLqIfqfphXbueKaTqGeDS77S8Pc7HofX54opT8fDYvTWPa+q6mazKeCdbbKPBganWajUpRySbS4
Ry+h9YwaUc2N5YLa73Ru9L6h6Xla7ZTjJ+HETjMWbGy0WKMU3KM03w4+DXeqcs3056fbvns5JeDYZvUOhx6Ltw75PLOF696h73Kpt/
czOXsnu65TqGg9vuey+8maTK8Olk5xXuZVxJ8RL+r9UyZJSprk57UZXNtyk2/
uVeWrdXnm4PLFSk5Nr3a2XzT+TXJUix5J+2sbm3jTtRvZP5K2yOYOhHyHwBkERLaVJvfkgAIEASg+Q0QJ0RAoAG9yUMw2I2FMzqmbGK7DdEF0JUzYaf
U9i5s1SZdGdIutSug0nUXF88m003Vfbkvq5OPx5WnyZ2HMmt5F10118urdkWk7tfJpdV1Bzk09r4NbPUdqu3/
AKY+bN3VJP7ETJDaze6d+bNfL7l8stunwY+VpytcBLVbEYzYrI5lZEEAEoAaAQTwEAdigtkTAyNl0Egtk5JaCRE4IiAp7hECmBYmMmVpjIosTfgyMckmYv5G
7nRWpV08l7FbnsJ3C2QtFyFctiWKysjYGBB5ABA0ACChZDIAaANRQpAkAAfAWlYGiCWANAoCBQKGoCJDrYEUNSNgWRN7h7UCt6FETB4GpLYlIyF8AY
zQtUAPBBlFPcNUUJbINQGi0KRhojMhbCGiUgP/2Q==">

x8fLT0tMTU3Ojo6Iys/
AABEIAIEArAMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABQEDBAYHAgj/
xAA3EAABAwMCBAMGBQMFAQAAAAABAAIDBBEhBTEGEkFRImFxBxNCgaHBIzKRsdEUM3JDgqKy4ST/
xAAYAQEBAQEBAAAAAAAAAAAAAAAAAQIDBP/EABsRAQEBAQEBAQEAAAAAAAAAAAABEQIxIRID/
9oADAMBAAIRAxEAPwDhyIiAiIgoiqqICIqgIKL3HG6R7WRtc57jYNaLkrfOEvZpqOrclTqbX0lKbEMt+JIPT4R658l1TR+D9M0SC1JTNjNsu3c71O6siWuF0
PB+uVdiKMxNOzpnBv03+ikxwBWgfi1LGnqGsJ+67XPSsYbW5fIbrBnhYPht6oONzcF1EYPLUX/2f+qKq9Araf4Q8eWF2epgYb/
ZQtZRNdfwXHoorj8kUkZtI0tPmvC6BqmkRvBuxahqGmvpnFwHh7II5ERAREQEREFUREBETogoiKqD1HG972sjaXOcQGtaLkk9AF3H2b+zRlA2LUtZibJX
Gz2ROy2D7F3n06d1ieyHgttPFHr+pxAzyNvSxuH9tp+P1PTsF1xsgDQAMDYBbkz7Wao2BkTbcwNuwWDVzhtw0C/
YLKme5wtex7BYhhzt9FnrpqcoyT3rr8oDb+WSsd1Od3ElTLoRuTf0VmSMAYCx+msQstNvgBRtXC0XWwzN7KOqIgd7JasjVauAG+FrupUIe03HTst3qYW
m4H1UPWQstaySpY5dqlCYpC5ox2UYt81ejDuawytMrYDDKe11pljIiICIiCqIiAnRE6IKLZ/
Z7oA4g4hihmYXUsP4s9tiBs35n6XWshd19j2jtoeHmVr2fi1jjJkfCMN+5+asHQ6WMRsAItYWDQMALLs621vuq0sRIyC49z0WW2NoNxe/
dKkYoiJGQnuC/
Dcedln8oG4uFVx8PgaFysdNRr6cMBv+qw5Yh3UjUeJp3UdNIGkAqfI1GJMywNlGVIJGFLSeIXGywpmeSGIKoj3UTVRXWxVMQF8qJqW2urErV9Qhu1
wIWm61S/
mNlv1Y3mvdaxq8N2nC6RitHIsbKiv1jOSYqwiCIiCqIiAnRE6IPUTDJKyNv5nEAfNfUvDtGKSipqWMAMgibGOgwAPsvmnhqP3vEWmRkXDquIH05gvpyj
cSzmOBvturETkJjYBu5x/dZ8dy27W56lxUZRENBf8Audys11S97PBYd0txZKuuBGXEA+SxnvLhysFrFWXteXgOcT6I5wAw443XC9Osi3O8saSTnqouZ/
PILAuPZSEh5iQ7JGfkvEMDS0m26423q5HaSSfUc/ncd/
krTwWtJd9FLGBoOwWDUtvcNHzK6881y6sQdVclRdQwuvvsp6WDra6wKhrWDuV0kYta3Vw8oNwtb1SMcpW11+b3Ws6mLgrbDQ9VZyvuO6j1Ma
wzdQ6AiIgqiIgJ0REEnwvJ7riTS39BVxf9gvpWklHKAThfLdLMaepimbvG8PHyN19HUdT75jHtPhkYHA+qW5CTa2aJ0ZLQSTfbyWUyQBgA6FQkErm8vK
SSN/JSUcnP63Xlv9HpnDMc+
+QfVUcBzDlyR1XhjbkYsCrnLa9lPtKNj5jd1yr1g1ptsMqjRkDdXGxki79rLpzyx10xJhzNtnOysSxtib+Jl3ZZ08gGGBRtY4Mbd5yV18c/
UTWy5IbgKFq3WuFn1s1zYKLmaCN0PEXVgvuoOvjFjdT9SMWvZQteMHqtRmtI11oax2FrxWwcRPsCO5steQEREFUREBETogBdt9nepNruG6XmdeSnB
hfnII2/42XEVuHs21saZrH9NO/lp6vwXOzX/CfnkfNB3SnIIwpOE4ChaGUEi/6KUjdz/lXn6/
m9E7SkcoAs0C5+iujFskuIusanADg+98WV9rw65J6Kzlm1lU8Qy99yALBeJpOfY4GwCsuqHOGDZvfurElQAMLowrNIGf5Efooitl5rgG56nsr1TM54PKM
d1hujMm+yer4jZmFxOL+aw3xdypWctYCNrbqIq6gHDB810nOOdusCr5W3UBqcga0qVrH4JJWqa3VtjYTfCI1LXp/
eVNh0UUrk8nvZXPPUq2ooiIgqiIgJ0REFFUGyKiDs3AHFA1eibT1L/wD7oGgPv/qN6O/lb9S1FyMr5k0+tqKCrjqaWR0c0Zu1w/
Y+S7PwlxbTazEM+7qmf3YSc+o7hSzVldFZNhrQcdVc9/4LKFgqwS511d/
qhZT8rqUfUANDQcdVae8HxONxbZYIm5tze2V7p+aplsPyg5Pmk501lRxmbIGB+gWJWTthG+FJVM0dPTcrem57rWamf3kpe7IGwK6YxurVRI6XL8BRd
RIG3V+qqbmwOFCV9WIwblBjanUgNdcrn3EFf72QxtPXKkuINZteOM3cey1N7i5xcTcndZV5REQEREFUREBERBRFVUQFdpqiSmmZNA90crDdr2GxBV
pEHR+HPaCDywax4H7Cdg8J/
wAh09VvNLq0NRGHxTMkjcLtcw3BXz+sqi1CroX89JUSRHqGuwfUbFB9AsrWlgAdupOmrWQxANIvbJXC6TjjUYbf1Ecco7jwn+PopNntAHLZ0EovvYg/
dalTHVtT1MOZytfhQdRXtHxLQJ+OGvHhjlPqB/KiqviuqlxCwN8ybppje6/
V4omEue0W81pGtcRGZzmU7r3+LoFAVNbUVTrzyud5XwrCmqq97nuLnEkncleURQEREBERBVERAREQCqIiAiIgIiICqERAVERAREQEREBERAREQf/Z">

x8fLT0tMTU3Ojo6Iys/
AABEIAJAArgMBIgACEQEDEQH/xAAbAAEAAwEBAQEAAAAAAAAAAAAABAUGAwcCAf/
EADUQAAEDAwICCAUDBAMAAAAAAAEAAgMEERIFITFBBhMiMlFhcYEUFZGh4VLB8DNicrEjktH/
xAAZAQEAAwEBAAAAAAAAAAAAAAAAAQIDBAX/xAAiEQEBAQACAgMAAgMAAAAAAAAAAQIDERJBEyExcYEEIlH/2gAMAwEAAhEDEQA/
APD0REBERAREQEREBERAREQET3RAREQEREBERAREQEREBERAREQERSaOjfUvFgQ3xTscGsc44htyfBT6bSZprFxxHpur3TtIawDFm6v6bTLAbLK8k9L
TLL0+hQgDJpcfNWMeiwgW6loHotNFQgbEFSW0dmXO9+AG6r8lT4Mv8ohI3jb9Fwl0Omd3oW+wWy+F3AuL+AIXz8I5zdgL+BCj5KeDz6p6OR3Jic5v
3Cp6vTKimN3Nyb4tXqny+/
HYqHVaWNwbFTOU8HlSLXav0dD7viAZJ4jgVlaiCSnkMcrS1wW01KrZ05oiKUCIiAiIgIiICIvuGIyyBg58UEigo3VUgFjhzWy0zTgxgAbYLlotAxjG9jZayihjDR
dreHgs930viONHR4juXKsoqVwb/TO/gL2UyOCF4YHxDFpy2vY+6toGw3uIGnfmVj1Gv2qGUmWJbsDuLs/
2pUNEGDttJcf09kBXUToS7FlM0uBtYjZd+pyNzTw390+jqs8ae98Iy5oHZHIlfBp34hgDRbljxK04hF74RjLbYcPuvsQsYTaBhPjfio+kshLSvczIBoA4tFyVEdT
ML7OjmBJtfFbbqRc3pm7c8hv6KPNC69hAwN5dsXUf2T+GIqaAm9gCFmte0BlTTuNiHDuutwK9Nlpdt6dp8w4bqqraMbnqbe91pidKa/
h4RUwSU0zopRZzfuuS3vTDRDJCZ4Y7Sx3NhzHNYJdDEREQEREBFNFTS/
KHUvwTfizP1gq+sNwzG2GPDjvdQkBXWg0+T+scL3O3oqXibLWaPGGRsHkpiK1GmMYGt7GS0NNJTNaMmPuR48FnqFzGjtg4nmFawTtHajaADxJF1lr
XVbZ4+/1pKOenB7MMhA3ByCt211GI2QinjY4kFztsjZY+nqI7Yk2ANzk3YqdA6KaT/jgDnO/Tk0fhUvJrppOHMaptbStNsL2HaF7/
AGQ6xQRsDuqeWk2BsqXARlr+o6l17B97m/qu785C5jIXyhpvvGA63rzWd5K1nBmrL57S97qZPS4Xwdfp3btppHeWyqZxFBIx8lJUR82yAgG/
+ivyXUYZH4lskwPFxjb+6r56v5V/
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">

x8fLT0tMTU3Ojo6Iys/
AABEIAH4AfgMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAAFBgMEAAECB//
EADcQAAIBAwIDBQcDBAEFAAAAAAECAwAEERIhBTFBBhMiUWFxgZGxwdHwMkKhFCNS4XIHFSQzU//
EABgBAAMBAQAAAAAAAAAAAAAAAAABAgME/8QAHREBAQEBAAIDAQAAAAAAAAAAAAECESExAxJBUf/
aAAwDAQACEQMRAD8A8QrYFZWVRMrKysoDK6ArFUscKMnyFXIbJmwZCFHkBkmg1ZVzUyRE9KaeB9lv62QB1cJndm93l7ac7XstwaCMCSzSRsBslm
+9HZDkteVJaMf212LRv8a9ih7Ndn5cZse6JO2iVht7yamk7AcOuI9VneGNjyWZQRn2j7UTWaLnUeKm2YftrgxEdK9K4z2IvbAapIA0fSRDqU+8UqXfCmj
J8J2500l/R6VyVq/
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">
<hr>
<h1>Visit Our Youtube </h1><center>
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/CHiljMMzy2E">
</iframe>
OUTPUT:
JAVASCRIPT
Q1:Design a webpage using JavaScript that print factorial number.
CODE:
<html>
<head>
<title>JavaScript program to find the Factorial of a given number</title>
</head>
<body>
<table>
<tr>
<td> <input type="text" name="a" id="first" placeholder="Enter a number"> </td>
</tr>
<tr>
<td> <button onclick="factorial ()" >Submit</button> </td>
</tr>
</table>
<div id="num"></div>
</body>
<script type="text/javascript">
function factorial()
var n,i,fact = 1;
n = parseInt(document.getElementById ("first").value);
for(i = 1; i <= n; i++ )
fact = fact*i;
document.getElementById ("num").innerHTML = "Factorial of "+n+" is : "+ fact;
</script>
</html>
OUTPUT:
Q2:Design a webpage using JavaScript comparison operator.
CODE:
<html>
<body>
<h3>DataFlair: Comparison Operators</h3>
<script>
document.write("<b>Equal:</b></br>")
var var1 = '3';
document.write("var1 == 3 is " + (var1 == 3) + ", ");
document.write("3 == '3' is " + (3 == '3') + "</br>");
document.write("<b>Not Equal:</b></br>")
document.write("var1 != 3 is " + (var1 != 3) + "</br>");
document.write("<b>Strict Equal:</b></br>")
document.write("3 === '3' is " + (3 === '3') + "</br>");
document.write("<b>Strict Not Equal:</b></br>")
document.write("3 !== '3' is " + (3 !== '3') + "</br>");
document.write("<b>Greater than:</b></br>")
document.write("12 > 3 is " + (12 > 3) + ", ");
document.write("12 > '3' is " + (12 > '3') + "</br>");
document.write("<b>Greater than or Equal:</b></br>")
document.write("12 >= 3 is " + (12 >= 3) + ", ");
document.write("12 >= '12' is " + (12 >= '12') + "</br>");
document.write("<b>Less than:</b></br>")
document.write("3 < 12 is " + (3 < 12) + ", ");
document.write("3 < '12' is " + (3 < '12') + "</br>");
document.write("<b>Less than or Equal:</b></br>")
document.write("3 <= 12 is " + (3 <= 12) + ", ");

document.write("12 <= '12' is " + (12 <= '12') + "</br>");
</script>
</body>
</html>
OUTPUT:
Q3:Design a webpage using JavaScript increment and decrement operator.
CODE:
html:
<html>
<head>
<link rel="stylesheet" href="counter.css">
</head>
<body>
<div id="main">
<div id="displayCounter"></div><br>
<button id="increment"> + </button>
<button id="decrement"> - </button>
<button id="reset">Reset</button><br><br>
</div>
<script src="counter.js"></script>
</body>
</html>
CSS:
#increment, #decrement, #reset{
padding:10px 15px;
font-size:18px;
background: #56ccf2;
background: -webkit-linear-gradient(to right, #56ccf2, #2f80ed);
background: linear-gradient(to right, #56ccf2, #2f80ed);
color:#f1f1f1;
border:none;
margin:5px;
#main{
margin : 0 auto;
text-align:center;
padding:5% 10%;
#displayCounter{
font-size:100px;
font-family: impact;
JAVASCRIPT:
var productCounter={
count:0,
incrementCounter:function(){
if(this.count<10){
return this.count = this.count + 1;
}else{
alert("maximum limit reached, you can buy only 10 items");
return this.count;
},
decrementCounter:function(){
if (this.count>0){
return this.count = this.count - 1;
} else {
return this.count=0;
},
resetCounter:function(){
return this.count=0;
};
var displayCout = document.getElementById('displayCounter');
displayCout.innerHTML=0;
document.getElementById('increment').onclick=function(){
displayCout.innerHTML=productCounter.incrementCounter();
document.getElementById('decrement').onclick=function(){
displayCout.innerHTML = productCounter.decrementCounter();
document.getElementById('reset').onclick=function(){
displayCout.innerHTML = productCounter.resetCounter();
OUTPUT:
Q 4: Design a webpage using JavaScript Assignment operator.
CODE: <!DOCTYPE html>

<html>
<body>
<h1>JavaScript Assignments</h1>
<h2> Assignment Operator</h2>
<h3>The += Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
x += 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
<h3>The -= Operator</h3>
<p id="sub"></p>
<script>
let y= 20;
y -= 5;
document.getElementById("sub").innerHTML = "Value of y is: " + y;
</script>
<h3>The *= Operator</h3>
<p id="mul"></p>
<script>
let z = 150;
z *= 5;
document.getElementById("mul").innerHTML = "Value of z is: " + z;
</script>
<h3>The /= Operator</h3>
<p id="div"></p>
<script>
let a = 350;
a /= 10;
document.getElementById("div").innerHTML = "Value of a is: " + a;
</script>
<h3>The %= Operator</h3>
<p id="mod"></p>
<script>
let b = 60;
b %= 10;
document.getElementById("mod").innerHTML = "Value of b is: " + b;
</script>
<h3>The **= Operator</h3>
<p id="exp"></p>
<script>
let c = 25;
c **= 3;
document.getElementById("exp").innerHTML = "Value of c is: " + c;
</script>
</body>
</html>
OUTPUT:
Q5: Design a webpage using JavaScript Conditional operator
<head>
<form>
<body style="background-color: skyblue">
<h1><center>Check Your Result</center></h1>
<center><form >
<label for="name">Name</label>
<input type="name" name="name" placeholder="Enter Name" /><br><br>

<label for="name">Year</label>
<input type="name" name="name" placeholder="Year" /><br><br>
<label for="name">Collage</label>
<input type="name" name="name" placeholder="Collage Name" /><br><br>
</form>
</center>
<center><script src="conditional.js"></script>
<meta charset="utf-8">
<title>Conditional</title>
<meta name="description" content="This document contains an example of JavaScript conditional operator with DOM" />
<form name="example" onsubmit="ViewOutput()">
<input type="text" id="marks" placeholder="Enter Marks" /><br><br>
<input type="submit" value="Submit" /></center>
</body>
</html>
OUTPUT:
Q6:Design a webpage using JavaScript bitwise
<html>
<body>
<h1>JavaScript Bitwise AND</h1>
<h2>The & Operator</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 & 1;
</script>
<h2>The | Operator</h2>
<p id="or"></p>
<script>
document.getElementById("or").innerHTML = 5 | 1;
</script>
<h2>The ^ Operator</h2>
<p id="XOR"></p>
<script>
document.getElementById("XOR").innerHTML = 5 ^1;
</script>
<h2>The << Operator</h2>
<p id="left"></p>
<script>
document.getElementById("left").innerHTML = 5 <<1;
</script>
<h2>The >> Operator</h2>
<p id="right"></p>
<script>
document.getElementById("right").innerHTML = 5 >> 1;
</script>
<h2>The >>> Operator</h2>
<p id="three"></p>
<script>
document.getElementById("three").innerHTML = 5 & 1;
</script>
</body>
</html>
OUTPUT:
Q7: Design a webpage using JavaScript TypeOf operator.
<html>
<body style="text-align:center; ">
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p id="typeof"></p>
<script>
document.getElementById("typeof").innerHTML =
"Saloni=" + typeof "Saloni" + "<br>" +

"2.00 = " + typeof 2.00 + "<br>" +
"NaN =" + typeof NaN + "<br>" +
"false = " + typeof false + "<br>" +
"[1, 2, 3, 4] =" + typeof [1, 2, 3, 4] + "<br>" +
"{name:'saloni', age:18} = " + typeof {name:'saloni', age:18} + "<br>" +
"new Date() =" + typeof new Date() + "<br>" +
"function () {} ==" + typeof function () {} + "<br>" +
"mySchool == " + typeof mySchool + "<br>" +
"null ==" + typeof null;
</script>
</body>
</html>
OUTPUT:
Q8:Design a webpage using JavaScript short circuit evaluation.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Short Circuit</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
background-color: grey;
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
</style>
</head>
<body>
<h1>Short-circuit evaluation</h1>
<div class="result"></div>
<br />
<button class="Btn">&& short circuit evaluation</button>
<button class="Btn">|| short circuit evaluation</button>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelectorAll(".Btn");
function retTrue() {
resEle.innerHTML += "True <br>";
return true;
}
function retFalse() {
resEle.innerHTML += "False <br>";
return false;
BtnEle[0].addEventListener("click", () => {
resEle.innerHTML = "&& evaluation<br>";
retFalse() && retTrue();
});
BtnEle[1].addEventListener("click", () => {
resEle.innerHTML = "|| evaluation <br>";
retTrue() || retFalse();
});
</script>
</body>
</html>
OUTPUT:
Q9:Design a webpage using JavaScript using comma.
CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
text-align: center;
</style>
<body >
<h1>The Comma Operator</h1>
<h2>Print My Full Name</h2>
function x() {
document.write('Saloni');
return 'Saloni';
function y() {
document.write('Sitaram');
return 'Sitaram';
function z() {
document.write('Pawar');
return 'Pawar';
var x = (x(),y(), z());
document.write(x);
</script>
</body>
</head>
</html>
OUTPUT:
Q10:Design a webpage using JavaScript delete.
CODE:
<!DOCTYPE html>
<html>
<head>
body{
background-color: skyblue;
text-align: center;
</style>
<body>
<h1>Delete Operator</h1>
<h2>Delete habbit </h2>
<p id="delete"></p>
<center><script>
const person = {
name:"Saloni Pawar",
age:18,
Habbit:"Playing"
};
delete person.Habbit;
document.getElementById("delete").innerHTML =
person.name + " is " + person.Habbit + "is her habbit.";

</script>
</center>
</body>
</head>
</html>
OUTPUT:
Q11: Design a webpage using JavaScript using this keyword.
CODE:
<!DOCTYPE html>
<html>
<head>
body{
background-color: hotpink;
text-align: center;
</style>
<body>
<h1>This in Javascript</h1>
<button onclick="this.style.display='none'">Button</button>
</body>
</html>
OUTPUT:
Q12:Design a webpage using JavaScript using unary.
CODE:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
const x = 350;
const y = -350;
document.write(+x);
document.write("<br>");
document.write(+y);
document.write(+'');
document.write(+true);
document.write(+false);
document.write(+'saloni');
</script>
</body>
OUTPUT:
Q12:Design a webpage using JavaScript while
CODE:
<!DOCTYPE html>
<html>
<head>
<body>
<script>
"use strict";
let i = 0;
while (i < 3) {
alert( i );
i++;
</script>
</body>
</head>
</html>
OUTPUT:
Q13:Design a webpage using JavaScript do while
CODE:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>do while</title>
</head>
<body>
<script>
"use strict";
let i = 0;
do {
alert( i );
i++;
} while (i < 3);
</script>
</body>
</html>
OUTPUT:
Q14: Design a web page using JavaScript for loop statement .
CODE:
<!DOCTYPE html>
<html>
<head>
<body>
<script type="text/javascript" charset="utf-8">
var x;
for (x = 2; x <= 4; x++)
document.write("Value of x:" + x);
</script>
</body>
</head>
</html>
OUTPUT:
Q15. Design a webpage using JavaScript if conditional statement.

CODE:
<!DOCTYPE html>
<head>
<form>
<body style="background-color: skyblue">
<h1><center>Check Your Result</center></h1>
<center><form >
<label for="name">Name</label>
<input type="name" name="name" placeholder="Enter Name" /><br><br>
<label for="name">Year</label>
<input type="name" name="name" placeholder="Year" /><br><br>
<label for="name">Collage</label>
<input type="name" name="name" placeholder="Collage Name" /><br><br>
</form>
</center>
<center><script src="conditional.js"></script>
<title>Conditional</title>
<meta name="description" content="This document contains an example of JavaScript conditional operator with DOM" />
<form name="example" onsubmit="ViewOutput()">
<input type="text" id="marks" placeholder="Enter Marks" /><br><br>
<input type="submit" value="Submit" /></center>
</body>
</html>
OUTPUT:
Q16. Design a webpage using JavaScript if else conditional statement.
<html>
<body style="text-align:center; ">
<p id="typeof"></p>
<script type = "text/javaScript">
const number = prompt("Enter a number: ");
if (number > 0) {
document.write("The number is positive");
else {
document.write("The number is either a negative number or 0");
document.write("The if...else statement is easy");
</script>
</body>
</html>
OUTPUT:
17. Design a webpage using JavaScript switch statement.
CODE:
OUTPUT:
18. Design a webpage using JavaScript program to display all the prime number from 1 to
100.
<html>
<head>
</head>
<style>
body
text-align: center;
background-image:url(math.jpg);
background-repeat: no-repeat;
padding: 5px;
height: 450px;
}
</style>
let startNum = prompt("Enter Start Number");
let endNum =prompt("Enter End Number");
function isPrime( n)
if(n == 1 || n == 0) return false;
for(var i = 2; i < n; i++)
if(n % i == 0) return false;
return true;
var N = 100;
for(var i = 1; i <= N; i++)
if(isPrime(i)) {
document.write( i +"<br>");
</script>
</head>
<style>
body
text-align: center;
background-image:url(math.jpg);
padding: 5px;
height: 450px;
</style>
</html>
OUTPUT:
19. Design a webpage using JavaScript to accept the number from user and display sum of
its digit.
CODE:
<!Doctype html>
<html>
<head>
<script>
function sumOfDigits()
{
var n, remainder, sum = 0;
n = parseInt(document.getElementById("number").value);
while(n)
remainder = n % 10;
sum = sum + remainder;
n = Math.floor(n/10);
document.getElementById("sum").value = sum;
</script>
</head>
<style>
body
text-align: center;
background-image:url("1.jpg");
padding: 5px;
height: 450px;
</style>
<h1>The Sum Of Numbers </h1><br />
<p>Enter the Number: <input id="number"></p>
<button onClick= "sumOfDigits()">Sum of digits</button>
<p>Sum = <input id="sum"></p>
</body>
</html>
OUTPUT:
Q20. Design a webpage using JavaScript Break.
<html>
<head>
</head>
<body>
const food = "sushi";
switch (food) {
case "Saloni":
document.write("Sushi is originally from INDIA.");
break;
case "pizza":
document.write("Pizza is originally from Italy.");
break;
default:
document.write("I have never heard of that dish.");
break;
}
</script>
</body>
OUTPUT:
Q21. Design a webpage using JavaScript Continue.
<!DOCTYPE html>
<html>
<head>
<title>Continue</title>
</head>
<body>
<script>
"use strict";
for (let i = 0; i < 10; i++) {
if (i % 2 == 0) continue;
alert(i);
</script>
</body>
</html>
OUTPUT:
Q22.Design a webpage using JavaScript to accept sentence from user and display the number
of words.
CODE:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>word</title>
</head>
<body style="text-align: center;" "background-color: blue">
<h1 style="color: green">

Word Count Return
</h1>
<p>
Type in the textbox and click on
the button to count the words
</p>
<textarea id=+prompt ("inputField") rows=10 cols="60">
</textarea>
<br><br>
<button onclick="countWords()">
Count Words
</button>
<br><br>
<p> Word Count:
<span id="show">0</span>
</p>
<script>
function countWords() {
var text = document
.getElementById("inputField").value;
var numWords = 0;
for (var i = 0; i < text.length; i++) {
var currentCharacter = text[i];
if (currentCharacter == " ") {
numWords += 1;
numWords += 1;
document.getElementById("show")
.innerHTML = numWords;
}
</script>
</body>
</html>
OUTPUT:
Q23 Design a webpage using JavaScript to find the square root.
CODE:
<!DOCTYPE html>
<html>
<head>
function doMath(){
var inputNum1=document.form1.input1.value;
var result = Math.sqrt(inputNum1);
document.form1.answer.value = result;
</script>
</head>
body
text-align: center;
background-image:url('square.jpg');
padding: 5px;
height: 450px;
background-color: #DEB887;
</style>
<h1>Find Square Root</h1>
<form name=form1>
Enter Number:
<input type="text" name="input1" size=10>
<input type="button" value="Calculate" onClick='doMath()'>
<br />
<br />
The square root is:
<input type="text" name="answer" size=20>
</form>
</body>
</html>
OUTPUT:
Q24. Design a webpage using JavaScript to convert Celsius to Fahrenheit.
CODE:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>celcious </title>
</head>
body
text-align: center;
background-image:url();
padding: 5px;
height: 450px;
</style>
<h1 style="color: red">Convert Celcious to Fara</h1>
<p>JavaScript is a powerful and versatile programming language that can be used to create a wide range of applications and
websites. In this tutorial, we will learn how to write a JavaScript program to convert Celsius to Fahrenheit. We will use a simple
formula to perform the conversion, and the program will prompt the user to input a value in Celsius and then display the
equivalent temperature in Fahrenheit.
This program can be useful for anyone who needs to quickly and easily convert temperatures from one unit of measurement to
another. We also have an interactive JavaScript course where you can learn JavaScript from basics to advanced and get certified.
Check out the course and learn more from here.
</p>
<hr>
<h2 style="color: red">Try It Yourself</h2>
<div class="container">
<div class="row my-5 py-5">
<div class="col-4 offset-4">
<div class="form-group">
<label for="">Enter the temperature below</label><br /><br />
<input type="text" id="temp" class="form-control">
</div><br /><br />
<input type="submit" id="submit" class="btn btn-success">
</div><br /><br />
</div>
<div class="row my-3 py-3">
<div class="col-4 offset-4">
<div class="form-group">
<label for="">Temperature in Fahrenheit</label><br /><br />
<input type="text" id="Faht" class="form-control" readonly>
</div><br /><br />
</div>
</div>
<hr>
<script>
let Fahrenheit = document.getElementById('Faht')

let submit = document.getElementById('submit')
submit.addEventListener('click', (e)=>{
let Celsius = document.getElementById('temp').value
e.preventDefault()
result(Celsius)
})
const result = (cel) =>{
Fahrenheit.value = (9 * cel + 160 ) / 5
</script>
</body>
</html>
OUTPUT:
Q25. Design a webpage using JavaScript to reverse the string.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>
Reverse a String in JavaScript

</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
</style>
</head>
<body>
<div class = "results">
<h2> Enter the Text </h2>
Input: <input type = "text" name = "inputText" id = "inputText" required>
<button type = "button" onclick = "reverseString()" > Submit </button>
<div class = "resultText">
<p id = "reveserStringResult"> </p>
<p id = "result"> </p>
</div>
</div>
</div>
<script type = "text/javascript">
function reverseString() {
input = document.getElementById("inputText").value;
if(input == '') {
document.getElementById("reveserStringResult").innerHTML = '';
document.getElementById("result").style.color = "red";
document.getElementById("result").innerHTML = "Please Enter a Valid Text ";
return;
let reverseResult = "";
document.getElementById("result").innerHTML = '';
for ( var i = input.length -1; i >= 0; i--) {
reverseResult = reverseResult + input[i];
document.getElementById("result").style.color = "blue";
document.getElementById("reveserStringResult").innerHTML = "Reversed String: " + reverseResult;
</script>
OUTPUT:
Q26 Design a webpage using JavaScript to display current date and time.
CODE:
<!DOCTYPE html>
<html>
<head></head>
body
{
text-align: center;
background-image:url(https://images.pexels.com/photos/359989/pexels-photo-359989.jpeg?
cs=srgb&dl=pexels-aphiwat-chuangchoem-359989.jpg&fm=jpg);
padding: 5px;
height: 450px;
</style>
<h1 style="color: red">Display Current Date And Time</h1>
<h1> Current Date</h1>
<p id="p1"></p>
<script>
var date = new Date();
var current_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
var current_time = date.getHours()+":"+date.getMinutes()+":"+ date.getSeconds();
var date_time = current_date+"<br /> "+current_time;
document.getElementById("p1").innerHTML = date_time;
</script>
</body>
</html>
OUTPUT:
Q27: Design a webpage using JavaScript using composite data types.
CODE:
<html>
<head>
<title>Javascript objects</title>
</head>
<body style="background-color:powderblue">
<script>
let person=new Object();
person.firstname="SALONI";
person.lastname="PAWAR";
person.age=18;
person.haircolour="Black";
for (i in person){
document.write(i + ": " + person[i] + "<br />");
</script>
</body>
</html>
OUTPUT:
Q28: Design a webpage using JavaScript to escape sequence character and string method
invoked in.
CODE:
<!DOCTYPE html>
<html>
<body style="background-color:green">
<p>The escape sequence \\ inserts a backslash in a string.</p>
<p id="demo"></p>
<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
OUTPUT:
Q 29:. Design a webpage using JavaScript to demonstrate Boolean data types.
CODE:
OUTPUT:
Q.30:. Design a webpage using JavaScript data object method.
CODE:
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<body style="background-color:purple">
<h1 style="color: green">
SALONI PAWAR
</h1>
<p id="GFG_UP">
</p>
<button onclick="gfg_Run()">
Click Here
</button>
<p id="GFG_DOWN">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to get "
+ "the all methods of any Object.";
function Obj() {
this.m1 = function M1() {
return "From M1";

}
this.m2 = function M2() {
return "From M2";
function getAllMethods(obj = this) {
return Object.keys(obj)
.filter((key) => typeof obj[key] === 'function')
.map((key) => obj[key]);
function gfg_Run() {
el_down.innerHTML = getAllMethods(new Obj());
</script>
</body>
OUTPUT:
Q.31. Design a webpage using JavaScript math object.
CODE:
<html>
<head>
<title>Lottery Game</title>
<style>
body {
text-align: center;
div {
border: 2px dotted black;
background: wheat;
height: 500px;
width: 600px;
display: inline-block;
h2 {
padding: 10px;
text-align: center;
font-family: 'Courier New', Courier, monospace
</style>
</head>
<body>
<div class="main">
<h2>Welcome to lottery</h2>
<p>Enter your lottery number</p>
<input type="text" name="Maximum lottery" id="lottery">
<button class="btn">Check!</button>
</div>
</body>
<script>
var lotteryNo = document.querySelector('#lottery');

var btn = document.querySelector('.btn');
var range = 10;
var winningTicket = Math.floor(Math.random() * 10);
btn.addEventListener('click', () => {
console.log(lotteryNo.value, winningTicket);
if (winningTicket == lotteryNo.value)
alert('Congrats! You win the lottery');
else
alert('Sorry you lost. Better luck next time!')
})
</script>
</html>
OUTPUT:
Q32. Design a webpage using JavaScript array.
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Array </title>
body{
background-color: transparent;
background-color: pink;
</style>
</head>
<body>
<center><table id="table" border="5" style="width: 100%" ></center>
<tr style="background-color: white">
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr style="background-color: red" >
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color: green">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color: grey">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color: olive">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color: pink">
<td></td>
<td></td>
<td></td>
</tr>
ARRAY<br />
</table>
<script>
var array = [["Saloni","Pawar","18"],
["Sitaram","Pawar","42"],
["Aditi","Pawar","22"],
["Amey ","Pawar","15"],
["Surekha","pawar","40"],
["priya","morajkar","18"],
["A2","B2","C2"],
["A3","B3","C3"],
["A4","B4","C4"],
["A5","B5","C5"]],
table = document.getElementById("table");
for(var i = 1; i < table.rows.length; i++)
for(var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].innerHTML = array[i - 1][j];
</script>
</body>
</html>
OUTPUT:
Q33. Design a webpage using JavaScript regular expression (regExp).
CODE:
<!DOCTYPE html>
<html>
<head>
function ValidateEmail(inputText)
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(inputText.value.match(mailformat))
alert("Valid email address!");
return true;
else
alert("Invalid email address!");
return false;
</script>
body{
background-image:url("");
</style>
</head>
<body>
<center><h1>Check For Email</h1></center>
<center><form name="form1" action="#">
<input type='text' name='text1'/>
<input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)"/>
</form></center>
</body>
</html>
OUTPUT:
Q34. Design a webpage using JavaScript Document and associated object(Method).
CODE:
<!DOCTYPE html>
<html>
<body style="background-color:pink">
<h2>Saloni Pawar</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
OUTPUT:
Q35. Design a webpage using JavaScript Document and associated object(properties).
CODE:
<!doctype html>
<head>
<style>
body{
background-color:brown;
</style>
<title>Document Properties</title>
</head>
<body>
<h3>Document Properties Example</h3>
<script>
document.write(document.domain +"<br>")
document.write(document.lastModified +"<br>")
document.write(document.documentMode +"<br>")
document.write(document.title +"<br>")
document.write(document.url +"<br>")
</script>
</body>
</html>
OUTPUT:
Q36. Design a webpage using JavaScriptonafterprint.
CODE:
<html>
<head>
function print_webpage()
var printContent = document.getElementsByTagName('body')[0];
var WinPrint = window.open('', '', 'width=700,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
function print_div()
var printContent = document.getElementById('print_div');

var WinPrint = window.open('', '', 'width=700,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
</script>
</head>
<body>
<div id="wrapper">
<h1>Print Webpage Using JavaScript</h1>
<input type="button" class="print_button" value="Print Webpage" onclick="print_webpage();">
<input type="button" class="print_button" value="Print Div Only" onclick="print_div();">
<div id="print_div">
<p>
Some sample content and this is a demo to print webpage using javascript
</p>
</div>
</div>
</body>
</html>
OUTPUT:
Q37. Design a webpage using JavaScriptonbeforprint.
CODE:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
SALONI PAWAR
</h1>
<p>Try to print this page you will see a alert</p>
<script>
document.getElementsByTagName("BODY")[0].onbeforeprint = function() {
myFunction()
};
function myFunction() {
alert("You are going to print this page");
</script>
</center>
</body>
</html>
OUTPUT:
Q38. Design a webpage using JavaScript onload.
CODE:
<html>
<head>
var img = null;
function init(){
img = document.getElementById('myimg');
img.style.position = 'relative';
img.style.left = '50px';
function moveRight(){
img.style.left = parseInt(
img.style.left) + 100 + 'px';
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myimg" src = "train1.png" />
<center>
<p>Click the below button to move the image right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</center>
</form>
</body>
</html>
OUTPUT:
Q39. Design a webpage using JavaScriptonerror.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>onerror event attribute</title>
<style>
body {
text-align:center;
background-color:grey;
h1 {
color:green;
</style>
</head>
<body>
<img src="image.gif" onerror="myFunction()">
<h2>onerror event attribute</h2>
<script>
function myFunction() {
alert("The image could not be loaded.");
</script>
</body>
</html>
OUTPUT:
Q40. Design a webpage using JavaScriptonhaschange.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Onchange</title>
</head>
<body style="background-color: grey">
<h1>Select any fruits from this: </h1>
<img src="watermelon.jpg" height="300" width="200">
<img src="apple.jpg" height="300" width="200">
<img src="guava.jpg" height="300" width="200">
<img src="pine.jpg" height="300" width="200"><br/>
<br><select id="Choose" onchange="Func_a()">
<option value="watermelon">Watermelon
<option value="Apple">Apple
<option value="Guava">Guava
<option value="Pineapple">Pineapple
</select>
<p>Get one of the fruits to consume and then digest it.</p>
<p id="demo1"></p>
<script>
function Func_a() {
varx_ip = document.getElementById("Choose").value;
document.getElementById("demo1").innerHTML = "Select from the given fruit list " + x_ip;
</script>
</body>
</html>
OUTPUT:
Q42. Design a webpage using JavaScriptonofffline and ononline.
CODE:
Offline.options = {
checkOnLoad: false, interceptRequests: true,
reconnect: { initialDelay: 3,
delay: 10
},
requests: true
};
</script>
OUTPUT:
Q43. Design a webpage using JavaScriptonbort.
CODE:
<!DOCTYPE html>
<html>
<body>
<script>
function abortFunc() {
alert('Error- Loading of the image aborted');
</script>
<img src="/videotutorials/images/tutor_connect_home.jpg" onabort = "abortFunc()">
</body>
</html>
OUTPUT:
Q44. Design a webpage using JavaScriptonblur.
CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript onblur Event
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
padding-bottom: 20px;
height : auto;
width : auto;
.resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript onblur Event </h2>
<span> Click in the textbox then click outside to trigger the event </span>
</div>
<div class = "resultText" >
</br>
<p> Using HTML: attaching event on element directly </p>

<input type = "text" id = "myText" onblur = "fireEvent()" >
<p id = "result1" > Default Text </p>
</div>
</div>
// This function will be called whenever onblur event occurs
function fireEvent( ) {
document.getElementById( "myText" ).style.backgroundColor = '#81D4FA';
document.getElementById("result1").innerHTML = " Input field lost focus ";
</script>
</body>
</html>
OUTPUT:
Q45. Design a webpage using JavaScriptondragdrop.
CODE:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML DOM ondrop Event</title>
<style>
.droptarget {
float: center;
width: 300px;
height: 50px;
margin: 20px;
padding: 5px;
border: 6px solid black;

}
body{
background-color: red;
</style>
</head>
<body>
<center>
<h1 style="color:black">
Drag the first element .......
</h1>
<h2></h2>
<div class="droptarget"
ondrop="dropEle(event)"
ondragover="allowDropEle(event)">
<p ondragstart="dragStartEle(event)"
draggable="true"
id="dragtarget">
Draggable element
</p>
</div>
<div class="droptarget"
ondrop="dropEle(event)"
ondragover="allowDropEle(event)">
</div>
<p id="demo"></p>
<script>
function dragStartEle(event) {
event.dataTransfer.setData(
"Text", event.target.id);
document.getElementById(
"demo").innerHTML = "Dragging starts";
function allowDropEle(event) {
event.preventDefault();
function dropEle(event) {
event.preventDefault();
var data =
event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById("demo").innerHTML =
"Element dropped";
</script>
</center>
</body>
</html>
OUTPUT
Q46. Design a webpage using JavaScriptonfocus.
CODE:
<!DOCTYPE html>
<html>
<body>
<p>Sample for onfocus event handler</p>
User Name: <input type="text" id="fname" onfocus="func(this.id)"><br>
Confirm user name: <input type="text" id="lname" onfocus="func(this.id)">
<script>
function func(x) {
document.getElementById(x).style.background = "red";
</script>
</body>
</html>
OUTPUT:
Q47. Design a webpage using JavaScriptonkeydown.
CODE:
<!doctype html>
<html>
<head><title>onkeydown event demo</title>
</head>
<body>
<h3>Sample onkeydown event handler</h3>
<p>A message will popup when any key is pressed. . .</p>
<input onkeydown="javascript:alert('You have pressed a key! ! !');"/>

</body>
</html>
OUTPUT:
Q49. Design a webpage using JavaScriptonkeypress.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>
DOM onkeypress event
</title>
</head>
<body style="background-color:pink">
<center>
<h1 style="color:green">
SALONI PAWAR
</h1>
<p>Press any key inside
the input field</p>
<input type="text"
id="inputField"
style="background-color:green">
<script>
"inputField").addEventListener("keypress", GFGFun);
function GFGFun() {
"inputField").style.backgroundColor =
"yellow";
</script>
</center>
</body>
</html>
OUTPUT:
Q50. Design a webpage using JavaScriptonmousedown and onmouseup.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Onmouse over and out</title>
<style>
.parent{
width: 100%;
height: 200px;
display: flex;
justify-content: space-between;
.chlid1{
width: 45%;
height: 200px;
}
.chlid2{
width: 45%;
height: 200px;
</style>
</head>
<body style="background-color: black;">
<div class="parent">
<div class="chlid1">
<img src="pic1.webp" id="img1" onmouseover="change1()" onmouseout="change2()" width="100%">
</div>
<div class="chlid2">
<img src="pic3.webp" id="img2" onmouseover="change3()" onmouseout="change4()" width="100%">
</div>
</div>
<script>
// Boy pic
function change1()
document.getElementById("img1").src = "pic2.webp"
function change2()
// girl pic
function change3()
function change4()
}
</script>
</body>
</html>
OUTPUT:
Q51. Design a webpage using JavaScriptonmousemove&onmouseout.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>
Difference between mouseover,
mouseenter and mousemove events
</title>
<style>
body {
text-align: center;
h1 {
color: green;
div {
margin: 15px 50px 0px 50px;
border: 2px solid black;
padding: 10px;
text-align: center;
background-color: #2ec96c;
p{
color: white;
h3 {
background-color: white;
border-radius: 10px;
</style>
<script>
function over(e) {
document.getElementById("sover").innerHTML++;
function enter(e) {
document.getElementById("senter").innerHTML++;
function move(e) {
document.getElementById("smove").innerHTML++;
</script>
</head>
<body>
<h1>Created by Saloni</h1>
<h4>Mouseover, Mouseenter and Mousemove Example</h4>
<div class="over" onmouseover="over(this)">
<h3>Mouseover event triggered:
<span id="sover">0</span>
times
</h3>
<p>
This event occurs every time when the mouse pointer
enters the div element or its child elements
(here <h3> or <p>).
</p>
</div>
<div class="enter" onmouseenter="enter(this)">
<h3>Mouseenter event triggered:
<span id="senter">0</span>
times
</h3>
<p>
This event occurs only when the mouse pointer enters
the div element.
</p>
</div>
<div class="move" onmousemove="move(this)">
<h3>Mousemove event triggered:
<span id="smove">0</span>
times
</h3>
<p>
This event occurs every time the mouse pointer is
moved over the div element.
</p>
</div>
</body>
</html>
OUTPUT:
Q53. Design a webpage using JavaScriptonresize.
CODE:
<!DOCTYPE html>
<html>
<head>
<script>
var i = 0;
function fun() {
var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;
document.getElementById("para").innerHTML = res;
var res1 = i += 1;
document.getElementById("s1").innerHTML = res1;
</script>
</head>
<body onresize = "fun()">
<h3> This is an example of using onresize attribute. </h3>
<p> Try to resize the browser's window to see the effect. </p>
<p id = "para"> </p>
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>
</body>
</html>
OUTPUT:
Q54. Design a webpage using JavaScriptonreset.
CODE:
<!DOCTYPE HTML>
<html>
<head>
<title>onreset Event</title>
body{
background-color: pink;
text-align: center;
</style>
</head>
<body>
<h3>Information of student</h3>
<form onreset="alert('Are yoy sure you wants to reset')">
<br>Name: <input type="text" name="name" value=" "><br />
<br>Branch: <input type="text" name="branch" value=" "><br />
<br>College: <input type="text" name="clg" value=" "><br />
<br>Address: <input type="text" name="adr" value=" "><br />
<br>Email Id: <input type="text" name="eid" value=" "><br />
<br><input type="reset" value="RESET">
</form>
</body>
</html>
OUTPUT:
Q55. Design a webpage using JavaScriptonsumbit.
CODE:
<!DOCTYPE html >
<html>
<head>
<title>onsubmit event attribute</title>
<style>
body {
text-align:center;
background-color: lightblue;
h1 {
color:green;
}
</style>
<script>
function Geeks() {
alert("Form submitted successfully.") ;
</script >
</head>
<body>
<h1></h1>
<h2>onsubmit</h2>
<form onsubmit = "Geeks()">
<br>First Name:<input type = "text" value = "" /><br/>
<br>Last Name:<input type = "text" value = "" /><br/>
<br><input type = "submit" value = "Submit" />
</form>
</body>
</html>
OUTPUT:
Q56. Design a webpage using JavaScriptonselect.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>onselect event</title>
</head>
<body>
<h2>Onselect Event in JavaScript</h2>
<form>
<label>Enter User Name:</label>
<input type="text" name="fname" onselect="textselect()"><br>
<label>Enter Password:</label>
<input type="password" name="pwd">
</form>
function textselect() {
alert("Some text must not be selected");
</script>
</body>
</html>
OUTPUT:
Q57.Design a webpage using JavaScript cookies
CODE:
OUTPUT:
Q58. Design a webpage demonstrating diffrent core java script refrence (array , boolean ,
date , function ,math ,number ,object, string ,regexp ).
Q59. Write a javscript program to design a simple calulater.
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link rel="shortcut icon" href="calculator-icon.png" type="image/x-icon">
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="utils.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<script defer src="script.js"></script>

</head>
<body onkeydown="myFunction(event)">
<div class="flex flex-col items-left">
<button id="dark" class="light_icon" onclick="dark(),darkiocn()"></button>


</div>

<div class="container calc flex flex-col items-center ">
<h1 class="text-center">Calculator</h1>
<div class="row">
<input class="input" type="text" placeholder="0" readonly />

</div>
<div class="row">
<button class="button top-btn" onclick="clr()">AC</button>
<button class="button top-btn" onclick="back()">⬅️</button>
<button class="button top-btn" onclick="dis('%')">%</button>
<button class="button right-btn" onclick="dis('/')">÷</button>
</div>
<div class="row">
<button class="button" onclick="dis('7')">7</button>
<button class="button right-btn" onclick="dis('*')">X</button>
</div>
<div class="row">
<button class="button right-btn" onclick="dis('-')">-</button>
</div>
<div class="row">
<button class="button right-btn" onclick="dis('+')">+</button>
</div>
<div class="row">
<button class="button" onclick="dis('.')">.</button>
<button class="button right-btn" onclick="solve()">=</button>
</div>
</div>
</body>
</html>
OUTPUT:
Q60. Design a form and validate all the controls places on the forms using javascript.
CODE:
OUTPUT:

HTML and Css Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and Css Manual

Uploaded by

Copyright:

Available Formats

HTML

Q1 . Write first html code using hedings and paragraph.

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Q 2. Write a html program to connect a link

<p>HTML links are defined with the a tag:</p>

<a href="https://www.w3schools.com">Go to w3 school</a>

Q3. write a html prgram to display an image

<p>HTML images are defined with the img tag:</p>

<h2>image of saloni pawar</h2>

<img src="C:\Users\DELL\Desktop\sakhi.jpeg" alt="W3Schools.com" width="104"

<h2>The style Attribute</h2>

<p>The style attribute is used to add styles to an element, such as color:</p>

<p style="color:red;">SALONI SITARAM PAWAR.</p>

<h2>HTML title </h2>

<h2>image of saloni pawar</h2>

<h1 style="background-color:powderblue;">Introduction to Animals</h1>

<p style="background-color:tomato;">Animals play an essential role in human life and planet

Q8. Write a program to move the complete webpage to center.

<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>

<h2>How to Center Align Text in CSS</h2>

Q9.Write a program to chnage the font of the text

<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">

This is demo text

<p>Here is a quote from WWF's website:</p>

Q11. Write a program to use external CSS

<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>

<li><a href="#about"><i class="fa fa-book"> about</i></a></li>

<li><a href="#portfolio"><i class="fa fa-cog"> portfolio</i></a></li>

<li><a href="#services"><i class="fa fa-folder"> services</i></a></li>

<li><a href="#contact"><i class="fa fa-envelope"> contact</i></a></li>

#about .content h1,

#portfolio .content h1,

#services .content h1,

#contact .content h1{

background-position: center center;

style="color: darkmagenta; font-size: 2rem; text-align: center"

<a href="freecodecamp.org" style="text-decoration: none; color: crimson"

is one of the best platforms to learn how to code

Learning to code is free on freeCodeCamp, that's why they call it

freeCodeCamp generates money through donations inorder to pay employees

and maintain servers.

If you're generous enough, consider joining others who have been

At freeCodeCamp, it's not all about typing on a code editor alone,

your coding problems and get answers from campers alike.

Q13. Write a program to use internal css

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

font-family:Verdana, Geneva, sans-serif;

border:5px double #903;

a:hover{ /*---------------This is formate of Pseudo-element---------------*/

<h1>Example for Internal CSS</h1>

<h2>Image Affected with styles</h2>

<img src="/images/p9.png"><br /><br />

<a href="/../../../Documents/Unnamed Site 2/p9.png" target="_blank">Download Image</a>

<title> Text Formatting </title>

<h1 align = center> Kancheepuram </h1>

<u> It is the administrative headquarters of Kancheepuram District. </u>

<b><i> Kanchipuram is well-connected by road and rail. </i> </b>

box-shadow: 0 0 25px 0 black;

<a href="#"> Home </a>

<a href="#"> About </a>

<a href="#"> Contact </a>

<li> <a href="#"> Terms of use </a>

a:hover{ /---------------This is formate of Pseudo-element---------------/