1. HTML program to create resume preparation using tables.
Code:
<!DOCTYPE html>
<html>
<head><title>Resume</title></head>
<body>
<table border="1">
<tr><th colspan="2">Resume</th></tr>
<tr><td>Name</td><td>John Doe</td></tr>
<tr><td>Email</td><td>john@example.com</td></tr>
<tr><td>Education</td><td>B.Sc. in Computer Science</td></tr>
</table>
</body>
</html>
Output: A table displaying a simple resume layout with name, email, and education.
2. HTML program for home page creation using frames.
Code:
<!DOCTYPE html>
<html>
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Output: A webpage split into two vertical frames for menu and content.
3. HTML program for form creation.
Code:
<!DOCTYPE html>
<html>
<body>
<form>
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output: A simple form with input fields for name and email.
4. Create a web page to embed an image map in a web page using HTML.
Code:
<!DOCTYPE html>
<html>
<body>
<img src="planets.jpg" usemap="#planetmap" alt="Planets">
<map name="planetmap">
<area shape="rect" coords="34,44,270,350" alt="Sun" href="sun.html">
<area shape="circle" coords="337,300,44" alt="Mercury" href="mercury.html">
</map>
</body>
</html>
Output: An image with clickable areas linked to different HTML pages.
5. Create a web page to fix the hot spots and to show all the related information when the hot
spots are clicked using HTML.
Code:
<!DOCTYPE html>
<html>
<body>
<img src="map.jpg" usemap="#mymap" alt="Map">
<map name="mymap">
<area shape="rect" coords="50,50,150,150" href="info1.html" alt="Info1">
<area shape="circle" coords="300,300,75" href="info2.html" alt="Info2">
</map>
</body>
</html>
Output: Clickable hot spots on an image linking to detailed information pages.
6. Create a web page to get the coordinates from an image using JavaScript.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Click on the image to get coordinates:</p>
<img src="click.jpg" onclick="getCoords(event)" alt="Clickable Image">
<p id="output"></p>
<script>
function getCoords(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById("output").innerHTML = "X: " + x + ", Y: " + y;
}
</script>
</body>
</html>
Output: Displays the X and Y coordinates where the image is clicked.
7. Create a web page with all types of cascading style sheets.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;}
h1 {color: navy;}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="font-size: 24px;">CSS Types</h1>
</body>
</html>
Output: Demonstrates inline, internal, and external CSS.
8. Write HTML/Java scripts to display your CV in navigator, your institute website,
Department website and tutorial website for specific subject.
Code:
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="cv.html">My CV</a></li>
<li><a href="https://www.institute.edu">Institute Website</a></li>
<li><a href="department.html">Department Website</a></li>
<li><a href="tutorial.html">Tutorial Website</a></li>
</ul>
</body>
</html>
Output: Navigation list linking to various websites.
9. Design HTML form for keeping student record and validate it using JavaScript.
Code:
<!DOCTYPE html>
<html>
<body>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name"><br>
Age: <input type="number" id="age"><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
if (name == "" || age == "") {
alert("All fields must be filled out");
return false;
}
return true;
}
</script>
</body>
</html>
Output: Form with validation that checks if fields are filled before submitting.
10. Writing program in XML for creation of DTD, which specifies set of rules.
Code:
<?xml version="1.0"?>
<!DOCTYPE student [
<!ELEMENT student (name, roll, course)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT roll (#PCDATA)>
<!ELEMENT course (#PCDATA)>
]>
<student>
<name>John</name>
<roll>101</roll>
<course>BCA</course>
</student>
Output: XML document with inline DTD defining the structure of student data.
11. Create a style sheet in CSS/XSL & display the document in internet explorer.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: Arial; background-color: #f0f0f0;}
h1 {color: green;}
</style>
</head>
<body>
<h1>Styled Document</h1>
<p>This is styled using CSS.</p>
</body>
</html>
Output: A basic HTML document styled with CSS, viewable in any browser.
