Resume:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 10px;
line-height: 1.5;
}
.container {
width: 100%;
max-width: 800px;
margin: auto;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
margin: 5px 0;
}
.heading {
text-align: center;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #f4f4f4;
}
.section {
margin-top: 20px;
}
.personal-info {
width: 100%;
margin-bottom: 10px;
}
.personal-info td {
border: none;
padding: 3px;
}
</style>
</head>
<body>
<div class="container">
<!-- Resume Heading -->
<div class="heading">Resume</div>
<!-- Header Section -->
<h1>Your Name</h1>
<table class="personal-info">
<tr>
<td><strong>Email:</strong>
[email protected]</td>
<td><strong>Phone:</strong> +91-1234567890</td>
</tr>
<tr>
<td><strong>Address:</strong> Your Address, City</td>
<td><strong>LinkedIn:</strong> linkedin.com/in/yourname</td>
</tr>
</table>
<!-- Education Section -->
<div class="section">
<h2>Education</h2>
<table>
<thead>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bachelor of Science</td>
<td>XYZ University</td>
<td>2022</td>
<td>85%</td>
</tr>
<tr>
<td>Higher Secondary</td>
<td>ABC School</td>
<td>2018</td>
<td>90%</td>
</tr>
</tbody>
</table>
</div>
<!-- Skills Section -->
<div class="section">
<h2>Skills</h2>
<table>
<tr>
<td>HTML, CSS, JavaScript</td>
<td>Bootstrap, JSP, Servlets</td>
<td>SQL, Java</td>
</tr>
</table>
</div>
<!-- Work Experience Section -->
<div class="section">
<h2>Work Experience</h2>
<table>
<thead>
<tr>
<th>Company</th>
<th>Role</th>
<th>Duration</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>XYZ Pvt. Ltd.</td>
<td>Web Developer</td>
<td>2022-2023</td>
<td>Worked on front-end and back-end development</td>
</tr>
</tbody>
</table>
</div>
<!-- Projects Section -->
<div class="section">
<h2>Projects</h2>
<table>
<thead>
<tr>
<th>Title</th>
<th>Technologies</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Library Management System</td>
<td>JSP, Servlets, SQL</td>
<td>Developed a web app to manage library operations</td>
</tr>
<tr>
<td>Portfolio Website</td>
<td>HTML, CSS, JavaScript</td>
<td>Created a personal portfolio showcasing projects</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Time table train and fair :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Train Time and Fare Table</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
text-align: center;
padding: 8px;
}
th {
background-color: #f4f4f4;
}
caption {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>Train Time and Fare Table</caption>
<tr>
<th rowspan="2">Train Name</th>
<th rowspan="2">Source</th>
<th rowspan="2">Destination</th>
<th colspan="3">Schedule</th>
<th rowspan="2">Fare</th>
</tr>
<tr>
<th>Arrival Time</th>
<th>Departure Time</th>
<th>Duration</th>
</tr>
<tr>
<td>Express 101</td>
<td>Delhi</td>
<td>Mumbai</td>
<td>06:00 AM</td>
<td>06:30 AM</td>
<td>12 hrs</td>
<td>₹1500</td>
</tr>
<tr>
<td>Fast Express 202</td>
<td>Chennai</td>
<td>Bangalore</td>
<td>08:00 AM</td>
<td>08:45 AM</td>
<td>5 hrs</td>
<td>₹800</td>
</tr>
<tr>
<td>Superfast 303</td>
<td rowspan="2">Kolkata</td>
<td>Patna</td>
<td>09:00 AM</td>
<td>09:30 AM</td>
<td>6 hrs</td>
<td>₹1200</td>
</tr>
<tr>
<td>Intercity 404</td>
<td>Ranchi</td>
<td>10:00 AM</td>
<td>10:45 AM</td>
<td>8 hrs</td>
<td>₹1000</td>
</tr>
</table>
</body>
</html>
Registraion form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-container {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 350px;
border: 1px solid #ccc;
}
.form-container h2 {
text-align: center;
color: #333;
margin-bottom: 15px;
font-size: 20px;
}
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"],
.form-container input[type="tel"],
.form-container input[type="date"],
.form-container select,
.form-container textarea {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
.form-container input[type="submit"] {
background-color: #4caf50;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
width: 100%;
}
.form-container p {
text-align: center;
margin-top: 10px;
font-size: 14px;
}
.form-container p a {
color: #4caf50;
text-decoration: none;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Register</h2>
<form action="#" method="post">
<input type="text" name="name" placeholder="Full Name"
required>
<input type="email" name="email" placeholder="Email
Address" required>
<input type="tel" name="mobile" placeholder="Mobile
Number" required>
<input type="date" name="dob" required>
<select name="gender" required>
<option value="" disabled selected>Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<textarea name="address" rows="2" placeholder="Address"
required></textarea>
<input type="password" name="password"
placeholder="Password" required>
<input type="submit" value="Register">
</form>
<p>Already have an account? <a href="#">Login here</a></p>
</div>
</body>
</html>
Html Program to use background image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-image: url('aa.jpg'); /* Replace with your image URL */
background-size: cover; /* Ensures the image covers the entire page */
background-position: center; /* Centers the image */
background-attachment: fixed; /* Makes the background image fixed */
background-repeat: no-repeat; /* Prevents the image from repeating */
}
h1 {
text-align: center;
color: white;
margin-top: 20%;
font-size: 48px;
text-shadow: 2px 2px 5px black;
}
p{
text-align: center;
color: white;
font-size: 18px;
text-shadow: 1px 1px 3px black;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page uses a full-screen background image.</p>
</body>
</html>
Create a website with all type of css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types Demo</title>
<!-- Linking External CSS -->
<link rel="stylesheet" href="style.css">
<style>
/* Internal CSS */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
header {
background-color: #4caf50;
color: white;
text-align: center;
padding: 10px 0;
}
.main-section {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.btn {
display: inline-block;
background-color: #4caf50;
color: white;
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<header>
<h1>CSS Types and Properties</h1>
</header>
<div class="main-section">
<h2>Types of CSS</h2>
<p>This page demonstrates the use of all three types of CSS:</p>
<ol>
<li>Inline CSS</li>
<li>Internal CSS</li>
<li>External CSS</li>
</ol>
<h2>Examples</h2>
<p style="color: blue; font-weight: bold;">This is an example of
<strong>Inline CSS</strong>.</p>
<a href="#" class="btn">Learn More</a>
</div>
<footer>
<p style="text-align: center; margin: 20px 0; color: gray;">© 2024 CSS
Demo Page</p>
</footer>
</body>
</html>
(style.css)
/* External CSS */
h2 {
color: #4caf50;
text-transform: uppercase;
font-size: 24px;
margin-bottom: 15px;
}
ol {
padding-left: 20px;
line-height: 1.6;
}
a{
font-size: 16px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
Span tage create web page:=>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage with Span Tag</title>
<style>
/* General Page Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #333;
}
header {
background-color: #4caf50;
color: white;
text-align: center;
padding: 15px 0;
}
.content {
padding: 20px;
}
.highlight {
color: #ff5722; /* Highlighted text color */
font-weight: bold;
background-color: #fff8e1; /* Light yellow background */
padding: 2px 5px;
border-radius: 3px;
}
.important {
color: #2196f3; /* Blue text color */
text-decoration: underline;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Using the Span Tag in HTML</h1>
</header>
<div class="content">
<p>
The <span class="highlight">span</span> tag is used to apply styles or
manipulate specific parts of text within a paragraph or sentence.
For example, we can highlight words, add colors, or emphasize parts of
text without breaking the flow of the paragraph.
</p>
<p>
Here is an example sentence:
<span class="important">This text is marked as important</span>, while
this text is <span class="highlight">highlighted</span>.
</p>
<p>
You can use the <span style="color: green; font-weight:
bold;">inline</span> `style` attribute or apply CSS classes for styling.
</p>
</div>
<footer>
<p>© 2024 Demo on Span Tag</p>
</footer>
</body>
</html>
create a web page to get the coordinates from an image using javascript:=>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Coordinates from Image</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
img {
max-width: 100%;
height: auto;
cursor: crosshair;
#coordinates {
margin-top: 20px;
font-size: 18px;
</style>
</head>
<body>
<h1>Click on the Image to Get Coordinates</h1>
<p>Click anywhere on the image below, and the coordinates will be displayed.</p>
<img id="targetImage" src="aa.jpg" alt="Sample Image">
<div id="coordinates">
<strong>Coordinates:</strong> X: <span id="xCoord">0</span>, Y: <span
id="yCoord">0</span>
</div>
<script>
// Get references to the image and coordinate elements
const image = document.getElementById('targetImage');
const xCoord = document.getElementById('xCoord');
const yCoord = document.getElementById('yCoord');
// Add a click event listener to the image
image.addEventListener('click', function(event) {
// Get the bounding rectangle of the image
const rect = image.getBoundingClientRect();
// Calculate the coordinates relative to the image
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// Update the coordinates display
xCoord.textContent = Math.round(x);
yCoord.textContent = Math.round(y);
});
</script>
</body>
</html>
Create a webpage to enter user information and validate it using
javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Information Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7fc;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
.form-container {
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
h1 {
text-align: center;
color: #4CAF50;
margin-bottom: 20px;
font-size: 28px;
label {
margin-bottom: 8px;
font-weight: bold;
font-size: 16px;
}
input {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
background-color: #f9f9f9;
box-sizing: border-box;
input:focus {
outline: none;
border-color: #4CAF50;
background-color: #eaf7e6;
button {
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
button:hover {
background-color: #45a049;
.error {
color: #f44336;
font-size: 14px;
margin-top: 10px;
.success {
color: #4CAF50;
font-size: 14px;
margin-top: 10px;
}
.message {
text-align: center;
font-size: 14px;
.message p {
margin: 0;
</style>
</head>
<body>
<div class="form-container">
<h1>User Information</h1>
<form id="userForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your
name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your
email">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password">
<button type="submit">Submit</button>
</form>
<div id="message" class="message"></div>
</div>
<script>
function validateForm() {
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let messageDiv = document.getElementById('message');
messageDiv.innerHTML = ""; // Clear previous messages
// Validate name
if (name.trim() === "") {
messageDiv.innerHTML = "<p class='error'>Name is required.</p>";
return false;
}
// Validate email format
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
messageDiv.innerHTML = "<p class='error'>Please enter a valid
email address.</p>";
return false;
// Validate password length
if (password.length < 6) {
messageDiv.innerHTML = "<p class='error'>Password must be at
least 6 characters long.</p>";
return false;
// If all validations pass
messageDiv.innerHTML = "<p class='success'>Form submitted
successfully!</p>";
return true;
</script>
</body>
</html>
Create a web page to display cube of numbers in table using
javascript:=>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube of Numbers</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f7fc;
margin: 0;
padding: 20px;
h1 {
text-align: center;
color: #4CAF50;
.container {
display: flex;
flex-direction: column;
align-items: center;
input, button {
padding: 10px;
font-size: 16px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
table {
width: 80%;
margin-top: 20px;
border-collapse: collapse;
text-align: center;
th, td {
padding: 12px;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
tr:nth-child(even) {
background-color: #f2f2f2;
button:hover {
background-color: #45a049;
cursor: pointer;
</style>
</head>
<body>
<h1>Cube of Numbers</h1>
<div class="container">
<label for="number">Enter a number:</label>
<input type="number" id="number" placeholder="Enter a number"
required>
<button onclick="generateTable()">Generate Cube Table</button>
</div>
<div id="table-container"></div>
<script>
function generateTable() {
const number = document.getElementById("number").value;
const tableContainer = document.getElementById("table-container");
// Check if input is valid
if (!number || number <= 0) {
alert("Please enter a valid positive number.");
return;
let tableHTML = "<table>";
tableHTML +=
"<thead><tr><th>Number</th><th>Cube</th></tr></thead><tbody>";
for (let i = 1; i <= number; i++) {
let cube = Math.pow(i, 3);
tableHTML += `<tr><td>${i}</td><td>${cube}</td></tr>`;
}
tableHTML += "</tbody></table>";
tableContainer.innerHTML = tableHTML;
</script>
</body>
</html>
Write an xml program for creation of dtd:=>
(students.xml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE students SYSTEM "students.dtd">
<students>
<student>
<name>Laraib</name>
<roll_number>123</roll_number>
<department>Computer Science</department>
</student>
<student>
<name>Laraib</name>
<roll_number>124</roll_number>
<department>Mathematics</department>
</student>
</students>
(students.dtd)
<!ELEMENT students (student+)>
<!ELEMENT student (name, roll_number, department)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT roll_number (#PCDATA)>
<!ELEMENT department (#PCDATA)>
Create a web page and generate an alert on onload event and on
onsubmit event using javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert on Load and Submit</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f7fc;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #4CAF50;
.container {
display: flex;
flex-direction: column;
align-items: center;
input, button {
padding: 10px;
font-size: 16px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
button:hover {
background-color: #45a049;
cursor: pointer;
}
</style>
</head>
<body onload="showPageAlert()">
<h1>Form Submission Example</h1>
<div class="container">
<form onsubmit="showFormAlert(event)">
<label for="name">Enter Your Name:</label>
<input type="text" id="name" placeholder="Your name" required>
<button type="submit">Submit</button>
</form>
</div>
<script>
// Function for the onload event
function showPageAlert() {
alert("Welcome! The page has loaded successfully.");
// Function for the onsubmit event
function showFormAlert(event) {
event.preventDefault(); // Prevents form submission for demonstration
purposes
alert("Form submitted! Name: " +
document.getElementById('name').value);
</script>
</body>
</html>
Create a stylesheet in css and display the document in browser:
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<!-- Link to the external CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Stylish Web Page!</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>This is a simple example of a web page with an external CSS
stylesheet.</p>
</section>
<section>
<h2>Contact Information</h2>
<p>If you'd like to reach me, feel free to send a message!</p>
</section>
</main>
<footer>
<p>© 2024 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
(styles.css)
/* styles.css */
/* Reset some default styles */
body, h1, h2, p {
margin: 0;
padding: 0;
/* Set a background color for the page */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
/* Style the header */
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
margin-bottom: 20px;
}
/* Style the main content sections */
main {
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* Style the section headings */
h2 {
color: #4CAF50;
margin-bottom: 10px;
/* Style the paragraphs */
p{
margin-bottom: 20px;
/* Style the footer */
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
margin-top: 20px;
6. Html program for homepage creation using iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page with iFrame</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
header {
background-color: #333;
color: white;
padding: 10px 20px;
text-align: center;
nav {
background-color: #444;
padding: 10px 0;
text-align: center;
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 16px;
nav a:hover {
text-decoration: underline;
main {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
iframe {
border: 2px solid #444;
width: 80%;
height: 400px;
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to My Homepage</h1>
</header>
<!-- Navigation Menu -->
<nav>
<a href="https://www.wikipedia.org" target="iframe-
content">Wikipedia</a>
<a href="https://www.youtube.com" target="iframe-
content">YouTube</a>
<a href="https://www.google.com" target="iframe-content">Google</a>
</nav>
<!-- Main Content Section -->
<main>
<h2>Embedded Content:</h2>
<!-- iFrame Section -->
<iframe name="iframe-content" src="https://www.wikipedia.org"
title="Content Viewer"></iframe>
</main>
<!-- Footer Section -->
<footer>
© 2024 My Homepage. All rights reserved.
</footer>
</body>
</html>
4. create a webpage to embed an image map in it using html
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
</body>
</html>
