1|Page
1)HEADING TAGS:
<html>
<head>
<title> Demonstration of heading tag and its attribute </title>
</head>
<body>
<!--html tags using text align attribute -->
<h1 style="text-align:center;">Demonstration Of Heading Tag h1 </h1>
<h2 style="text-align:justify;">Demonstration Of Heading Tag h2 </h2>
<h3>This is h3 </h3>
<h4 style="background:gray">THIS IS H4 </h4>
<h5>THis is h5 </h5>
<h6>This is h6 </h6>
</body>
</html>
OUTPUT:
2)FORMATTING TEXT:
<html>
<head>
<title> Formatting text and its attribute </title> <style> *{margin:0px;}</style>
</head>
<body bgcolor="gray">
<b> This is bold text without any extra importance </b> <br />
<strong>" Strong" element defines bold text with importance ! </strong><br />
<i>The HTML "i" element defines a part of text in an alternate voice or mood. The
content
inside is typically displayed in italic.</i> <br />
<em> This is emphasized text </em>
<del> This is deleted text </del>
<small> This is smaller text </small>
<p> Use<mark> strong Passwords</mark> for account safety </p>
<p> This text <ins> text </ins> has been inserted into browser </p>
<br /> <u> This is underlined text </u>
<h2> 2H<sub>2</sub> + O<sub>2</sub>------->2H<sub>2</sub>O</h2>
<h2> log<sub>10</sub>10<sup>2</sup>=2 </h2>
<q> If you don't have problem , your mind will create one </q>
</body>
</html>
2|Page
OUTPUT:
3)FONT TAG AND ATTRIBUTE
<html>
<head>
<style>
*{
margin:0px;
}
</style>
</head>
<body>
<font> This is a font having default size 3 </font>
<br />
<font size="7" color="green" background-color="gray"face="consolas" >Font tag
has size 1 to 7 only</font> <br />
<font size="5" face="comic sans MS"> Apart from Global attributes , it has only 3
attributes </font>
<font
</body>
</html>
OUTPUT
4)HTML TABLE
<html>
<head>
<title>List </title>
<style>
*{
3|Page
margin:0px;
}
</style>
</head>
<body>
<p style="font-weight:bold;"> Ordered list </p>
<ol type="a" start="2">
<li> Dalton's law of partial pressure </li>
<li> Avogadro's law </li>
</ol>
<ol type="A">
<li>Kinetic theory of gases </li>
<li> Mole concept </li>
</ol>
<ol type="I" start="1">
<li> Kinematics </li>
<li> Definite Integral </li>
</ol>
<ol type="i">
<li>Physics</li>
<li>Just do it </li>
<ol>
<li> Mind is a good servant but bad master </li>
<li> Cloud Computing </li>
</ol>
<h4> <strong> Unordered list </strong> </h4>
<ul>
<li> Arduino Uno </li>
<li> Raspberry pi </li>
</ul>
<ul type="disc">
<li> PNG:Portable Network Graphics </li>
<li>JPEG:Joint Photogarpic Expert groups </li>
</ul>
<ul type="square">
<li>Windows use hybrid kernel </li>
<li> Linux has monolithic kernel </li>
</ul>
<ul type="cirlce">
<li> Kernel is a heart of os </li>
</ul>
</body>
</html>
OUTPUT:
4|Page
5)SIMPLE BILL USING HTML:
<html>
<head>
<title> Simple bill using table </title>
</head>
<body>
<font size="5"><u>AL KARMI GENERAL STORE </u></font><br />
<font size="4">DEALS IN ALL KIND OF GROCERY & GENERAL ITEMS </font>
<br />
<table border="1" bgcolor="gray">
<tr><th> CUSTOMER NAME </th>
<td> Prachandra Ram Shrestha </td></tr>
</table>
<table align="right" bgcolor="gray" cellpadding="40px">
<tr style="text-align:left;"><th> Ref No: </th>
<td>xxxxxxxxxxxxx</td>
</tr>
</table>
<br />
<table border="1" bordercolor="green">
<caption align="center"> BILL SLIP </caption>
<tr style="background:gray;"><th>SN</th><th>PARTICULAR</th> <th>QUANTITY
</th> <th>UNIT</th> <th>RATE</th> <th> AMOUNT </th>
</tr>
<tr> <td>1</td>
<td>APPLE</td><td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
5|Page
<tr> <td>2</td><td>CREAM</td><td>100</td><td>4</td>
<td>44</td><td>RS.1xx</td> </tr>
<tr> <td>3</td>
<td>BLADE</td><td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
<tr> <td>4</td>
<td>WAX</td><td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
<tr> <td>5</td><td>WAX</td>
<td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
<tr> <td>6</td><td>WAX</td>
<td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
<tr> <td>7</td>
<td>WAX</td><td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
<tr> <td>8</td>
<td>WAX</td><td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
<tr> <td>9</td>
<td>WAX</td><td>100</td><td>4</td><td>44</td><td>RS.1xx</td> </tr>
<tr> <td>10</td><td>WAX</td><td>100</td><td>4</td><td>44</td>
<td>RS.1xx</td> </tr>
</table>
<table border="1" >
<tr> <th colspan="2">GRAND TOTAL </th> </tr>
<tr><td> Signature</td> <td> xss </td>
</table>
OUTPUT:
6)Registration Using HTML
<html>
<head>
<title> Registration Form </title>
</head>
<body bgcolor="violet">
<h1 style="text-align:center">Registration Form </h1>
6|Page
<form>
<label>Full Name:
</label> <br /><input type="text" placeholder="Enter your name" size="20"
/><br />
<label>
Email:
</label>
<br />
<input type="text" placeholder="Enter your email" /><br />
<label>Password</label>
<br />
<input type="password" placeholder="Enter your password"/>
<br />
<label> Gender </label>
<input type="radio" name="sex"/>Male
<input type="radio" name="sex"/>Female
<input type="radio" name="sex"/>Prefer not to say
<label>Select Your Course </label><br />
<select name="Option"size="3"multiple>
<option value="1">Frontend </option>
<option>Backend </option>
<option>Full Stack</option>
</select><br />
<input type="hidden" value="anything" />
<textarea name="message" cols="15" rows="3">Why you choose this ?
</textarea>
<br />
<input type="checkbox" value="allfile" >I agree with policy
<br />
<input type="checkbox" value="allfile" checked >Filled everydata
<br />
<input type="submit" value="submit" />
</form>
</body>
</html>
OUTPUT:
7|Page
7)Image gallery :
<html>
<head>
<title> Image Gallery </title>
<style>
[Link] {
margin: 5px;
border: 1px solid black;
float: left;
height: 160px;
width: 140px; /* Added width to ensure consistent sizing */
}
[Link] {
margin: 5px;
border: 1px solid black;
float: center;
height: 160px;
width: 140px; /* Added width to ensure consistent sizing */
}
[Link] {
text-align: center;
}
</style>
</head>
<body>
<h4>Nature</h4>
<br />
<div class="nature">
<a target="_blank" href="[Link]
q=tbn:ANd9GcSJoYtNmTjwAMLYDxLtW8O57WQ78wIFN1XtjGu5SjWl8w&s">
<img src="[Link]
q=tbn:ANd9GcSJoYtNmTjwAMLYDxLtW8O57WQ78wIFN1XtjGu5SjWl8w&s"
alt="flower"
height="120" width="140" />
</a>
8|Page
<div class="text">
<p>Kinda heart </p>
</div>
</div>
<div class="nature">
<a target="_blank"
href="[Link]
%C3%B5gi_Lahemaal.jpg/1200px-Altja_j
%C3%B5gi_Lahemaal.jpg">
<img src="[Link]
%C3%B5gi_Lahemaal.jpg/1200px-Altja_j
%C3%B5gi_Lahemaal.jpg" alt="forest" height="120" width="140" />
</a>
<div class="text">
<p>Lovely Forest</p>
</div>
</div>
<div class="nature">
<a target="_blank" href="[Link]
q=tbn:ANd9GcSiKn1fKQnwfZ1KnoybJqg8pfXVM58UL2PGTTlfGu_obw&s">
<img src="[Link]
q=tbn:ANd9GcSiKn1fKQnwfZ1KnoybJqg8pfXVM58UL2PGTTlfGu_obw&s"
alt="forest"
height="120" width="140" />
</a>
<div class="text">
<p>Kindle Garden</p>
</div>
</div>
<br />
<br />
<br />
<br />
<br /><br /><br /><br /><br />
<h4> City </h4>
<br />
<div class="city">
<a target="_blank" href="[Link]
q=tbn:ANd9GcQbGpg1ewCVoO4yDERcD9lavcgncV5JXOtqI9-CQVcolw&s">
<img src="[Link]
q=tbn:ANd9GcQbGpg1ewCVoO4yDERcD9lavcgncV5JXOtqI9-CQVcolw&s"
alt="forest"
height="120" width="140" />
</a>
<div class="text">
<p>Kindle Garden</p>
9|Page
</div>
</div>
</body>
</html>
OUTPUT:
8)Navigation Bar:
HTML
<!DOCTYPE html> <!--To use html 5 -->
<head>
<link rel="stylesheet" href="[Link]">
<title>Navigation bar </title>
</head>
<body>
<header class="header">
<a href="....." class="active">Home </a>
<a href="....." >Author </a>
<a href="....." >Gallery </a>
<a href="....." >Signup </a>
</header>
<aside class="sidebar">
<nav>
<h2>Articles </h2>
<ul>
<li> <a href="....." >How to live before you die </a></li>
<li> <a href="....." >A selfish giant</a></li>
<li> <a href="....." >Two little soldiers</a></li>
</ul>
</nav>
<section>
<h2> About us </h2>
<p>Microsoft 2012 launching plan </p>
</section>
</aside>
10 | P a g e
</body>
</html>
CSS:
[Link]{
/*Moves downward */
top: 179px;
left: 0px;
padding: 5px 15px 0px 15px; /* spacing */
width: 203px;
min-height: 1500px;
background-color:#eee;
font-size: small;
}
.header{
background-color: #eee;
border:thin #336699 solid;
padding:16px 10px 10px 10px;
margin:10px;
overflow:hidden;
}
.header a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background-color:green;
}
.header a:hover{
background-color:violet;
}
.header [Link]{
background-color:brown;
}
OUTPUT:
11 | P a g e
9)Audio and video
<html>
<head>
<title>Audio and Video </title>
</head>
<body>
<h2> Listen our new Song: <cite>Fearless</cite></h2><audio src="[Link]"
controls> </audio><h2> Listen our new Song: <cite>Jindupe</cite></h2>
<audio src="cal.mp3" controls preload> </audio>
<h2> Our new video :<cite> Python </cite> </h2>
<video src="Python.mp4" controls width="400" height="300"> </video>
<h2> Our new video :<cite> Tedtalk</cite> </h2>
<videosrc="Python.mp4"controlsposter="[Link]
q=tbn:ANd9GcSbbhbeYXLLjKp3HIKcvE1zc_VqVm0fbIqV5x6iNRd6ZiJpojvN06vmfgXy
dmjTjqSuoMFblA"></video><iframe width="400"
height="300"src="[Link] title="The thrilling
potential of SixthSense technology | Pranav Mistry" frameborder="0"
allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body></html>
OUTPUT
<html>
<head>
<title> [Link] </title>
<style>
12 | P a g e
body{
font-family: Arial, sans-serif; margin: 0; padding: 0;background-color: #f2f2f2;}
table, th, td {border: 1px solid #ddd; }
hgroup{background:#333;text-align:center;color:#fff;padding:20px 0;}
th, td {padding: 8px; text-align: left; }
th {background-color: #f2f2f2; }
table {width: 100%;border-collapse: collapse;/*Make one border */ margin-
bottom: 20px;}</style>
</head><body><hgroup> <h1> Welcome to GGIC </h1></hgroup><br /><table>
<caption> <strong> Student Information </strong> </caption><tr><th> Name
</th><th> Class </th>
<th> Roll No </th>
<th> Address </th>
</tr>
<tr>
<td>John Doe</td>
<td>12th Grade</td>
<td>001</td>
<td>123 Main Street, Cityville</td>
</tr>
<tr> <td>Jane Smith</td>
<td>11th Grade</td>
<td>002</td>
<td>456 Elm Street, Townsville</td>
</tr>
<tr> <td>Sachin kumar Sah</td><td>11th Grade</td> <td>003</td> <td>789 Oak
Street, Villageton</td> </tr>
</table>
</body>
</html>
OUTPUT:
