HTML File

Program:01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frist Program</title>
</head>
<body>
<h1>Example heading 1 </h1>
<h2>Example heading 2</h2>
</body>
</html>
Output
Program:02
<!DOCTYPE html>
<html lang="en">
<head>
<title>image</title>
</head>
<body>
<div>
<img src="https://bbdu.ac.in/wp-content/uploads/2018/10/temple.jpg" alt="image2" widt
h="500">
</div>
</body>
</html>
Output:
Program:03
<!DOCTYPE html>
<html lang="en">
<head>
<title>background-color</title>
</head>
<body style="background-color: bisque;">
<h1>This is a heading</h1>
<p>This is my new paragraph </p>
</body>
</html>
Output:
Program:04
<!DOCTYPE html>
<html lang="en">
<head>
<title>Link</title>
</head>
<body>
<h1>This is a link</h1>
<p><a href="https://www.w3schools.com/js/default.asp">click link</a></p>
</body>
</html>
Output:
Program:05
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe</title>
<style>
iframe{
background-color: lightslategrey;
}
</style>
</head>
<body>
<h2>This is Iframes</h2>
<p> use the height and width attributes to specify the size of the iframe:</p>
<iframe src="iframe.html" frameborder="height=200px width= 100px" title="Iframe"></iframe>
</body>
</html>
Output:
Program:06
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marquee</title>
</head>
<body>
<marquee width="80%" direction="up" higeth="60%">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quam ad alias excepturi
quis veniam ullam animi,
qui, deleniti, nulla ratione sunt numquam ea fuga ducimus optio sapiente sint consecte
tur
</marquee>
.
</body>
</html>
Output:
Program:07
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<style>
table, th, td{
border:1px solid black
}
</style>
</head>
<body>
<h1>Create new table </h1>
<table style="width: 30%">

<tr>
<th>Name </th>
<th>Email</th>
<th>Contact</th>
</tr>
<tr>
<td>Vishnu</td>
<td>Vishnutiwari350@gmail.com</td>
<td>5464575747</td>
</tr>
<tr>
<td>Nicks</td>
<td>Nicks340@gmail.com</td>
<td>3456778834</td>
</tr>
<tr>
<td>Deshraj</td>
<td>Deshraj450@gmail.com</td>
<td>3435456763</td>
</tr>
</table>
</body>
</html>
Output:
Program:08
<!DOCTYPE html>
<html lang="en">
<head>
<title>List</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Python </li>
<li>Java</li>
<li>C</li>
<li>Sql</li>
<li>Android</li>
</ul>
<h2>Ordered List </h2>
<ol>
<li>Python</li>
<li>Java</li>
<li>c</li>
<li>Sql</li>
<li>Android</li>
</ol>
<h2>Discription List</h2>
<dl>
<dt>Java</dt>
<dd>Java is a high levle language</dd>
<dt>Sql</dt>
<dd>Sql is a Structured query lqnguage</dd>
</dl>
</body>
</html>
Output:
Program:09
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class</title>
<style>
.city{
background-color: burlywood;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>Lucknow</h2>
<p>Lucknow is the Nice City.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Output:
Program:10
<!DOCTYPE html>
<html lang="en">
<head>
<title>id</title>
<style>
h1{
background-color: darkseagreen;
padding: 4%;
text-align: center;
width: 30%;
}
</style>
</head>
<body>
<h2>Thi is a Attribute</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur placeat sunt
cupiditate at velit nisi consequatur et? .</p>
<h1 id="MyHeading"> myHeader</h1>
</body>
</html>
Output:
Program:11
<!DOCTYPE html>
<html lang="en">
<head>
<title>form</title>
<style>
body{
margin: 3%;
}
label,input{
margin: 1%;
}
</style>
</head>
<body>
<h2>Text input field</h2>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Akash"><br>
<label for="lname">Last name</label><br>
<input type="text" id="lname" name="lname" value="Tripathi"><br>
<label for="E-id">Email-id:</label><br>
<input type="text" id="E-id" name="E-id" value="Akashtripathi7991@gmail.com"><br>
<input type="submit" value="Submit">
</body>
</html>
Output:
Program:12:
<!DOCTYPE html>
<html lang="en">
<head>
<title>div element</title>
<style>
div{
background-color: cadetblue;
border:2px solid black;
text-align: center;
width: 50%;
}
</style>
</head>
<body>
<h1>This is a nuw Heading</h1>
<div>
<h1>This is a new div element </h1>
<p>This is a new paragraph in html </p>
</div>
<p>my new paragraph in html</p>
</body>
</html>
Output:
Program:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=, initial-scale=1.0">
<title>style tsg</title>
<style>
body{
background-color: burlywood;
width: 50%;
text-align: center;
}
h1{
color: palevioletred;
}
</style>
</head>
<body>
<h1>This is a style tag element</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tenetur,
deserunt porro rem officia expedita autem minima repellat deleniti esse
ex libero cumque veritatis optio. Quaerat soluta dolorem deleniti nulla
et iusto necessitatibus fuga. Aperiam asperiores hic id consequatur officia </p>
</body>
</html>
Output:
Program14:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box model</title>
<style>
div{
background-color: gray;
width: 40%;
}
img{
border:2px solid black;
height: 5%;
width: 30%;
}
h1{
background-color: darksalmon;
width: 30%;
}
</style>
</head>
<body>
<h1>This is a box model</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQsgiyE4_O_DaYRTG_HinjjxChtixye5PBBiQ&usqp=CAU" alt="click">
<div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro quaerat, saepe, c
onsequatur earum <br>
nam temporibus iusto magnam excepturi non obcaecati pariatur fugiat doloremque ap
eriam incidunt illum, <br>
facere reprehenderit harum. Quod!<br> </p>
</div>
</body>
</html>
Output:
Program:15
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position</title>
<style>
div.fixed{
position: fixed;
bottom: 40%;
left: 0%;
width: 10%;
background-color: wheat;
margin: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>position fixed</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoZTUhkg46xhwseK0GTmq-
ORPxkLQbTGyNjQ&usqp=CAU" alt="blank">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum esse voluptatem tenetu
r consectetur asperiores.<br>
Ex esse, corporis veritatis omnis libero molestiae exercitationem nihil excepturi dolo
rem,<br>
ipsam doloremque sint enim dolor?</p>
<div class="fixed">
<p>position fioxed</p>
</div>
</body>
</html>
Output:

HTML File

Uploaded by

Copyright:

Available Formats

HTML File

Uploaded by

Document Information

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 File

Uploaded by

Copyright:

Available Formats

Program:01

<table style="width: 30%">

You might also like