HTML DOM Manipulation

Index
S. No. Name Of Program Remarks/
Sign.
1. Create a table to implement with rowspan and
columnspan.
2. Implement all types of list.
3. Create a college registration form.
4. Create 4 frames in a page & display 4 images in those
frames.
5. Create login page with validation.
6. Implement and load image in an html page.
7. Implement onload event in an html page.
8. Insert a node & attribute in html page to DOM.
9. Implement a JAVASCRIPT to file with regular
expression.
10.

Program 1
Create a table to implement with rowspan and columnspan.
<HTML>
<BODY>
<Table border="4" bordercolor="Black" bgcolor="lavender" width="45%" align="center">
<tr>
<TH align="center" rowspan="2">Roll No.</th>
<TH align="center" rowspan="2">Name</th>
<TH align="center" colspan="2">Marks</th>
<TH align="center" rowspan="2">Date of Birth</th>
</tr>
<tr>
<th>Max. Marks</th>
<th>Obtained Marks</th>
</tr>
<tr>
<Td align="center" rowspan="2">1101</td>
<Td align="center" rowspan="2">K</td>
<td>500</td>
<td>431</td>
<Td align="center" rowspan="2">22-Mar-1995</td>
</tr>
<tr>
<tr>
<Td align="center" rowspan="2">A</td>
<td>500</td>
<td>323</td>
<Td align="center" rowspan="2">23-Mar-1996</td>
</tr>
</tr>
<tr>
<tr>
<Td align="center" rowspan="2">N</td>
<td>500</td>
<td>398</td>
<Td align="center" rowspan="2">21-Nov-1996</td>
</tr>
</tr>
</table>
</body>
</html>

Program 2
Implement all types of list.
<HTML>
<HEAD>
<TITLE>Lists</TITLE>
</head>
<body>
<H2 align="center"><U>Lists in HTML</U></h2>
<b>
Three Types of Lists:-
<ul>
<LI>Unordered List
<LI>Ordered list
<LI>Definition List
</ul>
<H3 align="center"><U>Unordered List</U></H3>
The Unordered List elements enables to include an unordered list in the webpage.
<br>
There Are Three Types of Unordered List:-
<UL>
<li type="disc">Disc
<li type="square">Square
<li type="Circle">Circle
</UL>
<H3 align="center"><U>Ordered List</U></H3>
The Ordered List element enables to include an ordered list in a web page.
<br>This includes:-
<br><br>
(1) Ordered List in Arabic numbers like 1,2,3,4 and so on
<OL>
<LI>One
<LI>Two
</Ol>
(I) Ordered List in Uppercase Roman numbers like I, II, III, IV and so on
<OL type="I" Start="3">
<LI>Three
<LI>Four
</OL>
(I) Ordered List in lowercase Roman numbers like i, ii, iii, iv and so on
<OL type="i" Start="5">
<LI>Five
<LI>Six
</OL>

(A) Ordered List in Uppercase Alphabetical Letters A, B, C, D and so on
<OL type="A">
<LI>Apple
<LI>Balloon
</OL>
Ordered List in lowercase Alphabetical Letters a, b, c, d and so on
<OL type="a" Start="3">
<LI>Cat
<LI>Dog
</OL>
<H3 align="center"><U>Definition List</U></H3>
<DL>
<DT><B>Definition Term :< /B>
<DD>This Defines a term in The Definition List
<DT><B>Definition Description :< /B>
<DD>This Defines the definition in the definition list
</DL>
</b>
</body>
</html>

Program 3
Create a college registration form.
<html>
<head><title>College Registration Form</title>
</head>
<body>
<h1 align="center"><u><i>Registration Form</i></u></h1>
<br>
<form action="" method="post" enctype="multipart/form-data">
<div align="right">
<input type="image" height="140" width="130" alt="Upload Your Image"
align="center">
</div>
</form>
<form tag="Create Logon">
<div align="center">
<br>
</b>
Name
            &n
bsp;  *:<input type="username" name="username" /><br><br>
Father's Name   *:< input type="username" name="username" /><br><br>
Mother's Name *:<input type="username" name="username" /><br><br>
Date of Birth     *:<input type="date" name="dob" /><br><br>
Address
            *:<i
nput type="address" name="add" /><br><br>
Post Code          *:<input
type="postcode" name="ptc" /><br><br>
Email
            &n
bsp;   *:<input type="email" name="email" /><br><br>
Telephone          *:<input
type="tel" name="telephone" /><br><br>
<input type="submit" value="Submit" /><br>
</div>
</b>
</form>
<p>Note: Please make sure your details are correct before submitting form and that all
fields marked with * are completed! </p>
</body>
</html>

Program 4
Create 4 frames in a page & display 4 images in those frames.
<HTML>
<Head>
<Title>Framed Images</Title>
<Frameset rows="25%, 75%">
<Frame src="IEC 1.jpg" Scrolling="Auto">
<Frameset cols="100%,100%">
<Frameset rows="100%,100%">
<Frameset cols="100%,">
</Frameset>
</Frameset>
</Frameset>
</Frameset>
</head>
</HTML>

Program 5
Create login page with validation.
<html>
<head>
<title>Form Login Validation
</title>
</head>
<body>
<h2>Login</h2>
<form method="post">
<label for="username">
Username:
<input type="text" name="Username" placeholder="Username must contain 8 to 20
characters"
pattern="^[a-zA-Z][a-zA-Z0-9-_.]{7,19}$" required="REQUIRED" />
</label>
<label for="password">
Password:
<input type="password" name="password" id="password" placeholder="Password must
contain 1 uppercase, lowercase and number and more than 8 characters"
pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$"
required="required" />
</label>
<br><br>
<Button type="submit">Sign in</button>
<br>
<br>
<sup>*</sup>Username must contain 8 to 20 characters
<br>
<sup>*</sup>Password must contain more than 8 characters, 1 uppercase, lowercase and
number
</form>
</body>
</html>

Program 6
Implement and load image in an html page.
<html>
<body>
<form action="" method="post" enctype="multipart/form-data">
Select image to upload:
<div class="info">
<input type="file" id="files" />
<output id="list"></output>
<script>
function handleFileSelect(evt)
{
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile)
{
return function(e)
{
document.getElementById('list').innerHTML = ['<img src="', e.target.result,'" title="',
theFile.name, '" width="200" />'].join('');
};
})(f);
reader.readAsDataURL(f);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</div>
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>

Program 7
Implement onload event in an html page.
<HTML>
<HEAD>
<Title>Onload Event</Title>
<script type="text/javascript">
function message()
{
alert("This alert box is called with onload event");
}
</script>
</head>
<body onload=message()>
<script type="text/javascript">
document.write("This message is written by JAVASCRIPT");
</script>
</body>
</HTML>

Program 8
Insert a node & attribute in html page to DOM.
<html>
<head>
<style>.democlass{color:red;}</style>
</head>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to insert an item to the list.</p>
<button onclick="myFunction()">Click</button>
<script>
function myFunction()
{
document.getElementsByTagName("li")[0].setAttribute("class", "democlass");
var newItem = document.createElement("li");
var textnode = document.createTextNode("Water");
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);
}
</script>
</body>
</html>

Program 9
Implement a JAVASCRIPT to file with regular expression.
<html>
<head><title>Javascript With Regular Expressions</title></head>
<body>
<p>Replace "One" with "All" in the paragraph below:</p>
<button onclick="myFunction()">Click</button>
<p id="demo">Pick One Book!</p>
<script>
function myFunction()
{
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/One/i,"All");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

HTML DOM Manipulation

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to HTML DOM Manipulation

Similar to HTML DOM Manipulation (20)

More from Kandarp Tiwari

More from Kandarp Tiwari (12)

Recently uploaded

Recently uploaded (20)

HTML DOM Manipulation