HTML Programing Coding

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
<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>
1|Page
<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>
<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
2|Page
<li> section 2
<li> section 3
</ul>
</p>
</body>
</html>
NESTING LIST
<html>
<head>
<title> nesting list </title>
</head>
<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>
3|Page
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
<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">
4|Page
<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>
<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>
5|Page
<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>
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>
6|Page
<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>
<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>
7|Page
</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>
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>
8|Page
</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>
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>
9|Page
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>
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">
10 | P a g e
</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>
<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{
11 | P a g e
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>
<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>
12 | P a g e
</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>
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>
13 | P a g e
<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>
<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>
14 | P a g e
<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>
<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>
15 | P a g e

HTML Programing Coding

Uploaded by

Copyright:

Available Formats

HTML Programing Coding

Uploaded by

Document Information

Original Title

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 Programing Coding

Uploaded by

Copyright:

Available Formats

HTML PROGRAMING CODING

UNORDER LIST TYPE

UNORDERLIST DIFFERENT TYPE

TABLE ALL SET 1

<th> name </th>

ITI REGISTRAION FORM

GOOGLE SEARCH ENGINE

WEBSITE HOME PAGE

<table border ="2" align=center>

MARQUEE WITH FORM

ALL LIST BULLET AND NUMBERING

You might also like