HTML PROGRAMING CODING
1. <html>
<body bgcolor="orange"> </body> </html>
SAVE A.HTML
2. <html>
<body><center><marquee>
<img src ="ashok chakra.jpg"></marquee>
</center></body></html>
SAVE B.HTML
3. <html>
<body bgcolor="green"></body></html>
SAVE C.HTML
FRAME IN TIRANGA
<html>
<frameset rows ="30%,40%,30%">
<frame src = "a.html">
<frame src = "b.html">
<frame src = "c.html">
</frameset>
</html>
SAVE TIRANGA.HTML
CREATE TABLE
<html>
<head>
<title> use rowspan or colspan </title>
<body>
<table border ="2" cellpadding="4" cellspacing="4">
<caption> <h3> mahi raj iti infotech </h3> </caption>
<tr>
<th colspan ="4" align="center">
<H2><b> Main Header </b> </H2></th> </tr>
<tr> <th colspan ="4" align = "center">
<b><H3> Details of Students </H3></b> </th> </tr>
<th> BRANCH </th> <th> SECTION </th> <th> NAME </th> <th> ADDRESS </th> </tr>
<tr> <td rowspan ="5"> computer science </td>
<td rowspan ="3"> section 1 </td> <td> ajay </td>
<td> ahmedabad </td>
</tr>
<td> virat </td> <td> noida </td> </tr>
1|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<tr> <td> suraj </td> <td> allahabad </td> </tr>
<tr> <td> section 2 </td> <td> rashi </td> <td> varanasi </td> </tr>
<tr> <td> sectin 3 </td> <td> ankita </td> <td> bhopal </td> </tr>
</table>
</body>
</html>
DEFINATION LIST
<html>
<head>
<title> defination list </title>
</head>
<body>
<dl>
<dt> iti
<dd> this is skill oriented course
<dt>cti
<dd> this is skill instructor course
</dl>
</body>
</html>
DIFFRENT LIST
<html>
<head>
<title> different lsit presentation </title>
</head>
<body>
<p> list 1
<ol type="1">
<li> part 1
<li> part 2
<li> part 3
</ol></p>
<p> list 2
<ul type="disc">
<li> section 1
<li> section 2
<li> section 3
</ul>
</p>
</body>
</html>
NESTING LIST
<html>
<head><title> nesting list </title></head>
2|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<body>
<ul type="square">
<li> software
<ol type="1">
<li> ms word
<li> ms excel
<li> ms powerpoint
</ol>
</ul>
</body>
</html>
ORDER LIST
<html>
<head><title> order list </title></head>
<body>
<ol type="1">
<li> copa
<li> steno
<li>fitter
<li>electrician
</ol>
<ol type="A">
<li> theory
<li> practical
<li> employability skill
</ol>
</body>
</html>
ORDER LIST DIFFERENT TYPE
<html>
<head><title> order list different type </title></head>
<body>
<p> ORDERED LIST IN DIFFERENT FORMAT
<ol type="A">
<li>computer
<li>hard disc
<li>cd
<li>floppy
</ol>
<ol type="1">
<li>computer
<li>hard disc
<li>cd
<li>floppy
</ol>
<ol type="i">
<li>computer
3|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<li>hard disc
<li>cd
<li>floppy
</ol>
<ol type="a">
<li>computer
<li>hard disc
<li>cd
<li>floppy
</ol>
</p>
</body>
</html>
UNORDER LIST TYPE
<html>
<head><title> unorder list </title></head>
<body>
<ul type="square">
<li> copa
<li> steno
<li>fitter
</ul>
<ul type="disc">
<li> theory
<li> practical
<li> employability skill
</ul>
</body>
</html>
UNORDERLIST DIFFERENT TYPE
<html>
<head><title> Different type of unorderlist </title></head>
<body>
<p> UNORDERED LIST IN DIFFERENT FORMAT
<ul type="square">
<li> computer
<li> hard disc
<li> cd
<li> floppy
</ul>
<ul type="circle">
<li> computer
<li> hard disc
<li> cd
<li> floppy
</ul>
4|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<ul type="disc">
<li> computer
<li> hard disc
<li> cd
<li> floppy
</ul>
</p>
</body>
</html>
TABLE OF CALCULATOR
<html>
<head>
<title> table cellpadding </title>
</head>
<body>
<table border="5" bgcolor="lightblue" cellpadding="25" cellspacing="10">
<caption> <h3> simple calculator design </h3> </caption>
<tr>
<td> c </td>
</tr>
<tr>
<th> 1 </th>
<th> 2 </th>
<th> 3 </th>
<td> + </td>
</tr>
<tr>
<th> 4 </th>
<th> 5 </th>
<th> 6 </th>
<td> - </td>
</tr>
<tr>
<th> 7 </th>
<th> 8 </th>
<th> 9 </th>
<td> * </td>
</tr>
<tr>
<th> 0 </th>
<th> . </th>
<th> = </th>
<td> / </td>
</table>
</body>
</html>
5|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
TABLE ALL SET 1
<html>
<head>
<title> table all set </title>
</head>
<body>
<table border = "3">
<tr> <td colspan ="5" align="center">
<font color="blue"> <b> personal information </b>
</td> </tr>
<tr>
<td rowspan="5" align="center">
<b> iti pamgarh </b>
</tr>
<tr>
<th> name </th>
<th> post </th>
<th> institute </th>
<th> trade </th></tr>
<tr>
<td> dipak </td>
<td> instructor </td>
<td> iti pamgarh </td>
<td> copa </td>
</tr>
<tr>
<td> shweta </td>
<td> teacher </td>
<td> govt primary school </td>
<td> science </td>
</tr>
</table>
</body>
</html>
TABLE 2
<html>
<head>
<title> create table in html </title>
</head>
<body>
<table bgcolor="pink" border="5" width="75" cellpadding="5">
<caption><h1> <marquee>student information table </marquee></h1></caption>
<tr>
<th> ROLL NO </th>
<th> NAME </th>
<th> TRADE </th>
<th> EMAIL ID </th>
6|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<th> ADDRESS </th>
</tr>
<tr>
<td> 01 </td>
<td> DIPAK </td>
<td> COPA </td>
<td> [email protected] </td>
<td> DHANGAON </td>
</tr>
<tr>
<td> 02 </td>
<td> SHWETA </td>
<td> CSA </td>
<td> [email protected] </td>
<td> HASUWA </td>
</tr>
</table>
</body>
</html>
TABLE 3
<html>
<head>
<title> add border and change cell color example </title>
</head>
<body>
<center>
<table border="4">
<tr> <th bgcolor="lightpink"></th>
<th bgcolor="lightblue"> theory </th>
<th bgcolor="red"> practical </th>
</tr>
<tr>
<th bgcolor="blue"> test1</th>
<td> 86</td>
<td> 88</td>
</tr>
<tr>
<th bgcolor="lightpink"> test2</th>
<td> 92</td>
<td> 89 </td>
</center>
</table>
</body>
</html>
7|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
TABLE 4
<html.
<head>
<title> table 5 </title>
</head>
<body>
<table width="550" border ="5" cellspacing="7" cellpadding="10">
<td align ="center" valign="top"> cell at top</td>
<td align="center" valign="middle"> cell in middle </td>
<td align ="center" vlign="bottom"> cell at bottom </td>
</table>
</body>
</html>
TABLE 5
<html>
<head>
<title> html 7 </title>
</head>
<table border ="5" bordercolor="red"
<tr> <td> border="4" </td>
<td> border color="red" </td> </tr>
<tr> <td> row 2 column 1 </td>
<td> row 2 column2 </td> </tr>
</table?
</body>
</html>
LOGIN USER
<html>
<head>
<title> login user </title>
</head>
<body>
<form>
<fieldset> <legend>
user id : <input type = "text"placeholder="enter your id">
password : <input type = "password" placeholder="******">
</legend> </fieldset>
</form>
<a href = "itiRegistrationForm.html">
click online form </a>
</body>
</html>
8|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
ITI REGISTRAION FORM
<html>
<head>
<title> ITI STUDENT REGISTRATION FORM </title>
</head>
<body background="templet.jpg">
<form action =submit.php" method="get"> <fieldset>
<legend><h3> iti student registration form </h3></legend>
Name of trainee : <input type = "text" name ="name" placeholder="mahi raj"><br><br>
Father's name : <input type = "text" name "father "> <br><br>
Mother's name : <input type = "text" name " mother "><BR> <BR>
Contact no : <input type ="text" name ="contact" value="7974118465"><br> <br>
Email id : <input type ="email" name = "email" placeholder="[email protected]"><br>
<br>
Gender : <input type = "radio" name="radio"> Male
<input type = "radio" name="radio"> female
<input type = "radio" name="radio"> other <br> <br>
Date Of Birth : <input type ="date" name="date"><br><br>
Address : <textarea> </textarea> <br> <br>
division : <select> <option> bilaspur </option> <option> raipur </option> <option> durg
</option> <option> baster </option> <option> sarguja >/option></select><br> <br>
Blood Group : <select> <option> A+ </option> <option> A- </option> <option> B+ </option>
<option> O+ </option> </select><br> <br>
Trade : <input type = "checkbox" name = "checkbox"> 10th
<input type = "checkbox" name = "checkbox"> 12th
<input type = "checkbox" name = "checkbox"> iti
<input type = "checkbox" name = "checkbox"> cti <br> <br>
Photo : <input type = "file" name="photo"><br> <br>
Submit : <input type = "submit">
Reset : <input type = "reset">
</fieldset>
</body>
</html>
HEADING TAGS
<html>
<head>
<title> different lsit presentation </title>
</head>
<body>
<h1> heading one </h1>
<h2> heading two </h2>
<h3> heading three </h3>
<h4> heading four </h4>
<h5> heading five </h5>
<h6> heading six </h6>
</body>
</html>
9|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
GOOGLE SEARCH ENGINE
<html>
<head>
<title> google search engine </title>
</head>
<body>
<br> <br>
<center>
<h1>
<font color="skyblue"> G
<font color="red"> O
<font color="orange"> O
<font color="skyblue"> G
<font color="green"> L
<font color="red"> E
</h1></center>
<center>
<input type="text" name="name" placeholder="search">
<input type="button" olclick=button" value="search">
</center>
</body>
</html>
FORM 1
<html>
<head>
<title> form 1 </title>
</head>
<body bgcolor="lightpink">
<form method ="post" action "mailto:[email protected]">
<b> user information </b> <br><br>
first name : <input type = "text"placeholder = "FIRST NAME" size="20" maxlength = "30" name =
"firstname"> <br><br>
last name : <input type = "text"placeholder = "LAST NAME" size = "20" maxlength = "30" name =
"last name "><br><br>
password : <input type = "password" placeholder = "PASSWORD" size = "20" maxlenght = "20"
name = "password"><br> <br>
gender : <input type = "radio" name="sex" value="male"> male
<input type = "radio" name="sex" value="female"> female <br> <br>
qualification : <input type = "checkbox"> 10th
<input type = "checkbox"> 12th
<input type = "checkbox"> iti
<input type = "checkbox"> cti <br> <br>
<select name = "address">
<option> pamgarh </option>
<option> champa </option>
<option> akaltara </option>
10 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<option> nawagarh </option>
<option> baloda </option>
</select> <br> <br>
form submit : <input type = "submit"> submit
<input type = "reset"> reset
</form>
</body>
</html>
WEBSITE HOME PAGE
<html>
<head>
<style>
#e
{
border-style:solid;
border-color:green;
background-color:grey;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:blue;
}
li{
float:left;
border-right:1px solid #bbb;
}
li:last-child{
boarder-right:none;
}
li a{
display:block;
color:skyblue;
text-align:center;
padding:10px 14px;
}
li a:hover:not(.active){
background-color:#111;
}
.active{
background-color:#4CAF250;
}
</style>
</head>
<body>
11 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<p><h2><marquee behavior= alternate><font color="purple">GOVT INDUSTRIAL TRAINING
INSTITUTE PAMGARH </h2></marquee></p>
<ul>
<li><a href="itiregistrationform.html">HOME</a></li>
<li><a href="ABOUT US.HTML">ABOUT US</a></li>
<li><a href="GALLERY.HTML">GALLERY</a></li>
<li><a href="CONTACT.HTML">CONTACT</a></li>
<li><a href="TRADE.HTML">TRADE</a></li>
<li><a href="std.html">CSA TRAINEE</a></li>
<li><a href="MOUSMI.html">LIBRARY</a></li>
<li><a href="">WORKSHOP</a></li>
<li><a href="">FEEDBACK</a></li>
</ul><body bgcolor="pink">
<BR><BR><CENTER>
<img src="13.jpg"width="1340"lentgh="400">
<br><br></CENTER>
<div id="footer">
<div id="e"><p> Devloped by Dipak Burman Sir Training Officer Copa , GOVT ITI PAMGARH Dist-
janjgir-champa (c.g) 495554
</p>
<center><p> copyright@2023mahirajITIinfotech</p></div></center>
</div>
</body>
</html>
TABLE 6
<html>
<head>
<title>home</title>
<table width=100% border=2>
<th bgcolor="blue" colspan=3>
detales of course fees</th>
<tr bgcolor="pink">
<th>course</th>
<th>duration</th>
<th>fees</th>
<th></th>
</tr>
<tr bgcolor="green">
<td>bca</td>
<td>3 year</td>
<td>50,000</td>
</tr>
<tr bgcolor="yellow">
<td>mca</td>
<td>2 year</td>
<td>40,000</td>
</tr></head></html>
12 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
TABLE 7
<table border ="2" align=center>
<tr>
<td>
<table border="2" width="100%">
<tr>
<th width=40%>tic</th>
<th width=35%>tac</th>
<th width=25%>toe</th>
</tr>
<tr>
<td align=right>r</td>
<td align=left>o</td>
<td align=center>r</td>
</tr>
<tr>
<td align=right>o</td>
<td align=left>r</td>
<td align=center>o</td>
</tr>
<tr>
<td align=right>r</td>
<td align=left>o</td>
<td align=center>r</td>
</tr>
</table>
</td>
<td>
<table border="2">
<tr>
<th>tic</th>
<th>tac</th>
<th>toe</th>
</tr>
<tr>
<td>r</td>
<td>o</td>
<td>r</td>
</tr>
<tr>
<td>o</td>
<td>r</td>
<td>o</td>
</tr>
<tr>
<td>r</td>
<td>o</td>
13 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<td>r</td>
</tr>
</table>
</td>
</tr>
</table>
MARQUEE WITH FORM
<html>
<head>
<title> csa</title>
</head>
<body>
<marquee bgcolor="orange" text="red">
<h4> Advance traning institute kolkata</h4>
</marquee> <br>
<p><h2> <center> CSA Student</center></p><br>
<form method ="post"></form>
<p> NAME:
<input name ="type"="text"size="80"><br>
<p> ADDRESS:
<input name="address="type"="text"size="120"><br>
<p>QUALIFICATION:
<input name="qualification="type"="text"size="80">
<br>
</body>
</html>
ALL LIST BULLET AND NUMBERING
<html>
<title> Exercise 5</title>
<body>
<h2> <u> An Ordered HTML List</u></h2>
<ol>
<li> Rahul Singh</li>
<li>Vishal Singh</li>
<li>Saurabh Singh</li>
<li>Deepak</li>
<li>Suraj</li>
</ol>
<h2> <u>A Nested List of Prerequisites</u></h2>
<ul>
<li> Before proceeding with this tutorial you should have a basic working knowladge with familiar
with </li>
<ul>
<li>Experiance with any text editor like notepad notepad++,or Edit plus etc,</li>
<li>How to create directories and files on your computer.</li>
<li>How to navigate through diffrent directories.<li>
14 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<li>How to type content in a file and save them on a computer.</li>
</ul>
<li>An ordered list starts with the ol tag.Each list item starts with the li tag.</li>
</ul>
<h2> <u>An unordered HTML List </u></h2>
<li> Rahul Singh</li>
<li>Vishal Singh</li>
<li>Saurabh Singh</li>
<li>Deepak</li>
<li>Suraj</li>
</ul>
</body>
</html>
ALL TAG USING
<html>
<head>
<title> all tags use </title>
</head>
<body bgcolor="powderblue">
<marquee direction="right" bgcolor="orange" loop="3" >
<h1> mahi raj iti infotech </h1></marquee>
<b> this text is bold </b><br>
<i> this text is italic </i><br>
<u> this text is underline </u><br>
<s> this text is strirk through </s><br>
H <sub> 2 </sub> O <br>
10 <sup> th </sup><br>
<p align="center"> this is paragraph
next line paragaraph </p><br>
<pre> these 2 lines are tabbed:
2009 this line uses a tab space.
this line aksi yses a tab space
this line does not use a tab space </pre><br>
<hr>
<marquee behavior="alternate">
<img src="logo.png">
</marquee>
<a href="mailto:
[email protected]">
email </a>
<hr>
<a href="table design.html">
click table </a>
<! this is comment tage><br><br>
<div align="center">
hello everyone
hi i am mahi raj iti infotech
15 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
</div>
<font size="24" color="blue">
mahi raj iti infotech </font>
</body>
</html>
EVENT HANDLING
<html>
<head>
<title> event handling </title>
</head>
<body>
<a href="table design.html"><button onmouseover="document.bgColor='pink'"> pink </button>
<button onmouseover="document.bgColor='yellow'"> yellow </button>
<button onmouseover="document.bgColor='blue'"> blue </button>
<button onmouseover="document.bgColor='white'"> white </button>
<button onmouseover="document.bgColor='green'"> green </button>
<button onmouseover="document.bgColor='purple'"> purple</button>
<button onmouseover="document.bgColor='red'"> red </button>
<button onmouseover="document.bgColor='black'"> black</button></a>
<button onclick="document.bgColor='orange'"> orange </button>
</body>
</html>
FRAME
<html>
<head>
<title> frame </title>
</head>
<frameset cols="40%, 30%, 30%">
<frame src="defination list .html">
<frame src="unorder list .html">
<frameset rows="30%, 40%,*">
<frame src="defination list .html">
<frame src="order list .html">
<frameset rows="30%, 40%,*">
<frame src="defination list .html">
<frame src="order list .html">
<frame src="unorder list .html">
</frameset>
</html>
16 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
