The document contains 9 programs demonstrating various HTML and JavaScript concepts. Program 1 creates a table with rowspan and columnspan. Program 2 implements unordered, ordered, and definition lists. Program 3 creates a college registration form. Program 4 creates 4 frames to display images. Program 5 creates a login page with form validation. Program 6 loads an image uploaded by the user. Program 7 demonstrates the onload event. Program 8 inserts a node and attribute to the DOM. Program 9 uses regular expressions to replace text in a paragraph.
1. 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.
4. 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>
5. (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>
6.
7. 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>
11. 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>
12.
13. 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>
14.
15. 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>
16.
17. 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>
18.
19. 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>