<html>
<head>
<script>
function swap1()
{
var txt1 = document.getElementById("img1");
var txt2 = document.getElementById("img2");
var txt = txt1.src;
txt1.src = txt2.src;
txt2.src = txt;
}
</script>
</head>
<body>
<img src="DennisRitchie.jpg" id="img1" height="255" />
<img src="BrendanEich.jpg" id="img2" height="255" />
<br /><input type="button" value="Swap images" onclick="swap1()" />
</body>
</html>
for more http://makeitsimple.co.in/js_swapimages.php
<html>
<head>
<title>Digital Clock</title>
<style>
#clock{
color:#F0F;
}
</style>
</head>
<body>
<script>
function digclock()
{
var d = new Date()
var t = d.toLocaleTimeString()
document.getElementById("clock").innerHTML = t
}
setInterval(function(){digclock()},1000)
</script> Digital Clock <div id="clock"> </div> </body> </html>
for more http://makeitsimple.co.in/js_programs.php
<html>
<head>
<script>
function swap()
{
var txt = document.getElementById('t1').value;
document.getElementById('t1').value = document.getElementById('t2').value;
document.getElementById('t2').value = txt;
}
</script>
</head>
<body>
<input type="text" id="t1">
<input type="text" id="t2">
<br>
<input type="button" value="Swap" onclick="swap()">
</body>
</html>
for more http://makeitsimple.co.in/js_programs.php
style.css
#menubar{
width:680px;
height:40px;
background-color:#333;
}
#menubar ul{
list-style-type:none;
padding-left:0;
}
#menubar ul li{
display:inline;
}
#menubar ul li a{
width:136px;
color:#FFF;
text-decoration:none;
float:left;
text-align:center;
line-height:40px;
}
#menubar ul li a:hover{
color:#39F;
background-color:#000;
}
css_menu.html
<html>
<head></head>
<body>
<div id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
for more http://www.makeitsimple.co.in/CSS_menu1.php
<html> <head> <title>Simple Form</title> </head> <body> <form> Personal Details<br> Name :<input type="text" /><br> Sex : M<input type="checkbox" />F<input type="checkbox" /><br> Date of Birth:<input type="date" /><br> Ph.No:<input type="tel" /><br> <input type="submit" value="submit" /> </form> </body> </html>
for more http://www.makeitsimple.co.in/HTML_form.php
<html> <head> <title>Table</title> </head> <body> <table border="1"> <caption>Invoice</caption> <tr> <th>Sno</th> <th>Item</th> <th>Price</th> </tr> <tr> <td>1</td> <td>Apple</td> <td>Rs. 20</td> </tr> <tr> <td>2</td> <td>Mango</td> <td>Rs. 15</td> </tr> <tr> <td>3</td> <td>Banana</td> <td>Rs. 3</td> </tr> </table> </body> </html>
for more http://www.makeitsimple.co.in/HTML_table.php
<html> <head> <title>Ordered list</title> </head> <body> Ordered list <ol> <li>Car</li> <li>Bicycle</li> <li>Aeroplane</li> <li>Bus</li> </ol> </body> </html>
for more examples http://makeitsimple.co.in/HTML_programs.php
<html> <head> <title>Unordered List</title> </head> <body> Unordered list <ul> <li>Peacock</li> <li>Parrot</li> <li>Sparrow</li> <li>Swan</li> <li>Pigeon</li> </ul> </body> </html>
for more examples http://makeitsimple.co.in/HTML_programs.php
<html> <head> <title>Text formatting tags</title> </head> <body> <b>Bold text</b> <i>Italic text</i> <u>Underlined text</u> <strong>Strong text</strong> <sup>Super script</sup> <sub>Sub script</sub> </body> </html>
for more examples http://makeitsimple.co.in/HTML_programs.php