Web technology

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>Baloon
</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 definiton 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
           &nbs
p;   *:<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
           &nbs
p;*:<input type="address" name="add" /><br><br>
Post Code          *:<input
type="postcode" name="ptc" /><br><br>
Email
           &nbs
p;    *:<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>

Web technology

More Related Content

Viewers also liked

Similar to Web technology

Recently uploaded

Web technology