Web Tech File

Practical No.
<!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: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #ccc;
}
th {
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Your Name</h1>
<p>Email: [email protected] | Phone: (123) 456-7890</p>
<p>Location: Lucknow, U.P.</p>
<h2>Objective</h2>
<p>Dedicated professional seeking a position in [Artificial Intelligence] to leverage skills in [Python].</p>
<h2>Education</h2>
<table>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>Bachelor of Science in Computer Science (Artificial Intelligence) </td>
<td>University of Lucknow</td>
<td>2022</td>
</tr>
<tr>
<td>High School Diploma</td>
<td>Cathedral School</td>
<td>2020</td>
</tr>
</table>
<h2>Experience</h2>
<table>
<tr>
<th>Software Engineer</th>
<th>google</th>
<th>Year</th>
</tr>
<tr>
<td>Software Developer</td>
<td>Flipcarts</td>
<td>2024 - Present</td>
</tr>
</table>
<h2>Skills</h2>
<table>
<tr>
<th>Technical Skills</th>
</tr>
<tr>
<td>HTML, CSS, JavaScript, Python</td>
</tr>
<tr>
<td>Project Management, Team Leadership</td>
</tr>
</table>
<h2>Certifications</h2>
<table>
<tr>
<th>Certification</th>
<th>Year</th>
</tr>
<tr>
<td>Certified Java Programmer</td>
<td>2022</td>
</tr>
<tr>
<td>Project Management Professional (PMP)</td>
<td>2023</td>
</tr>
</table>
<h2>References</h2>
<p>Available upon request. </p>
</body>
</html>
Output
Practical No. 7
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Types Demo</title>


<style>
body {
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
.box {
border: 2px solid #008cba;
padding: 20px;
margin-top: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.highlight {
color: red;
font-weight: bold;
}
</style>
<! -- Link to External CSS -->

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Different Types of CSS</h1>
<! -- Inline CSS -->

<p style="color: green; font-size: 18px;">This paragraph uses inline CSS for styling. </p>
<div class="box">
<h2>Internal CSS Box</h2>
<p>This box uses internal CSS for its styles.</p>
</div>
<div class="box">
<h2>External CSS Box</h2>
<p class="highlight">This box uses external CSS for its highlight class.</p>
</div>
</body>
</html>
styles.css
/* External CSS */
.box {
border: 2px dashed #ffa500;
padding: 20px;
margin-top: 20px;
background-color: #e0e0e0;
}
h2 {
color: #555;
}
Practical No. 6
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Click Coordinates</title>
<style>
body {
text-align: center;
margin-top: 20px;
}
img {
max-width: 100%;
height: auto;
cursor: pointer;
}
#coordinates {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Click on the Image to Get Coordinates</h1>

<img id="myImage" src="https://cdn.pixabay.com/photo/2024/05/26/10/15/bird-8788491_1280.jpg"
alt="Clickable Image" />
<div id="coordinates"></div>
<script>
const image = document.getElementById('myImage');
const coordinatesDiv = document.getElementById('coordinates');
image.addEventListener('click', function(event) {
const rect = image.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
coordinatesDiv.innerHTML = `Coordinates: (${x.toFixed(2)}, ${y.toFixed(2)})`;
});
</script>
</body>
</html>
OUTPUT
Practical No. 8
<!DOCTYPE html>
<html lang="en">
<head>
<title>My CV</title>
<style>
body {
margin: 20px;
}
h1, h2, h3 {
color: #333;
}
.cv {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.links {
margin-top: 20px;
}
.link {
display: block;
margin: 5px 0;
color: #007BFF;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="cv">
<h1>Curriculum Vitae</h1>
<h2>Personal Information</h2>
<p>Name: Your Name </p>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
<h2>Education</h2>
<p>Bachelor of Science in Computer Science(Artificial Intalligence)</p>
<p>University of Lucknow, 2020</p>
<h2>Experience</h2>
<p>Software Engineer at google, 2021 - Present</p>
<p>Intern at Flipcarts, Summer 2020</p>
<h2>Skills</h2>
<ul>
<li>JavaScript</li>
<li>HTML & CSS</li>
<li>React</li>
<li>Node.js</li>
</ul>
<div class="links">
<h3>Useful Links</h3>
<a class="link" href="https://www.lkouniv.ac.in/" target="_blank">Institute Website</a>
<a class="link" href="https://udrc.lkouniv.ac.in/Department/DepartmentDetail/History?dept=34"
target="_blank">Department Website</a>
<a class="link" href="https://www.lkouniv.ac.in/en/page/e-content" target="_blank">Tutorial Website for
Subject</a>
</div>
</div>
<script>
// You can add any additional JavaScript functionality here if needed
console.log("CV Page Loaded");
</script>
</body>
</html>
OUTPUT
Practical No. 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Map Example</title>
<style>
body {
text-align: center;
margin-top: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Interactive Image Map Example</h1>
<img src="https://www.aaronreedphotography.com/images/xl/Sweet-Dreams-2022.jpg" alt="Sample Image"

usemap="#image-map" />
<map name="image-map">
<area shape="rect" coords="34,44,270,350" href="https://example.com/area1" alt="Area 1" title="Area 1">
<area shape="circle" coords="337,300,44" href="https://example.com/area2" alt="Area 2" title="Area 2">
<area shape="poly" coords="400,200,450,250,350,250" href="https://example.com/area3" alt="Area 3"
title="Area 3">
</map>
</body>
</html> OUTPUT
Practical No. 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>General Store</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
}
nav {
margin: 10px 0;
}
nav a {
margin: 0 15px;
color: white;
text-decoration: none;
}
.container {
padding: 20px;
}
h2 {
color: #4CAF50;
}
.product {
border-radius: 5px;
padding: 10px;
margin: 10px 0;
background-color: white;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Our General Store</h1>
<nav>
<a href="#products">Products</a>
<a href="#about">About Us</a>
<a href="#contact">Contact</a>
</nav>
</header>
<div class="container">
<section id="products">
<h2>Featured Products</h2>
<div class="product">
<h3>Kurkure</h3>
<p>Very Taste</p>
<p>Price: 10.00</p>
</div>
<h3>Stool</h3>
<p>Comfartable for Engineers.</p>
<p>Price: 150.00</p>
</div>
<h3>Rope</h3>
<p>Helpfull for Engineers.</p>
<p>Price: 35.00</p>
</div>
<h3>Red-Bull</h3>
<p>Water of Engineers</p>
<p>Price: 1oo.00</p>
</div>
<h3>Mentos</h3>
<p>Mind your own business</p>
<p>Price: 12.00</p>
</div>
</section>
<section id="about">
<h2>About Us</h2>
<p>We are a local general store offering a wide range of products to meet your everyday needs. Our goal is
to provide quality products at affordable prices.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</section>
</div>
<footer>
<p>© 2024 General Store. All rights reserved.</p>
</footer>
</body>
</html>
OUTPUT
Practical No. 5
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot Spot Information</title>
<style>
body {
}
.image-container {
position: relative;
max-width: 600px;
}
.hot-spot {
position: absolute;
background: rgba(255, 255, 0, 0.5);
border: 1px solid #000;
cursor: pointer;
}
.info {
display: none;
border: 1px solid #000;
background: #fff;
padding: 10px;
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<h1>Hot Spot Information</h1>

<div class="image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1wEE-
NKXUzX3JGS5WEVX4pJNMDQMYLcBUuQ&s" alt="Image with Hot Spots" style="width:100%;">
<div class="hot-spot" style="top: 20%; left: 30%; width: 50px; height: 50px;" onclick="showInfo('info1')"></div>
<div class="hot-spot" style="top: 60%; left: 50%; width: 50px; height: 50px;" onclick="showInfo('info2')"></div>
<div id="info1" class="info" style="top: 20%; left: 35%;">This is information about hot spot 1.</div>
<div id="info2" class="info" style="top: 60%; left: 55%;">This is information about hot spot 2.</div>
</div>
<script>
function showInfo(infoId) {
// Hide all info elements
const infos = document.querySelectorAll('.info');
infos.forEach(info => info.style.display = 'none');
// Show the clicked info element

const infoElement = document.getElementById(infoId);
infoElement.style.display = 'block';
}
// Optional: Hide info when clicking outside

window.onclick = function(event) {
if (!event.target.matches('.hot-spot')) {
const infos = document.querySelectorAll('.info');
infos.forEach(info => info.style.display = 'none');
}
};
</script>
</body>
</html>
OUTPUT
Practical No. 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Record Form</title>
<style>
body {
margin: 0;
padding: 20px;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
max-width: 400px;
margin: auto;
}
label {
display: block;
margin: 10px 0 5px;
}
input, select {
width: 100%;
padding: 10px;
margin: 5px 0 15px;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<h2>Student Record Form</h2>
<form id="studentForm" onsubmit="return validateForm()">
<label for="name">Student Name:</label>
<input type="text" id="name" name="name" placeholder="Enter student name">
<span id="nameError" class="error"></span>
<label for="age">Age:</label>
<input type="number" id="age" name="age" placeholder="Enter age" min="10" max="100">
<span id="ageError" class="error"></span>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email">
<span id="emailError" class="error"></span>
<label for="course">Course:</label>
<select id="course" name="course">
<option value="">Select course</option>
<option value="CSE">Computer Science</option>
<option value="ECE">Electronics & Communication</option>
<option value="ME">Mechanical Engineering</option>
</select>
<span id="courseError" class="error"></span>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
let valid = true;
// Name Validation
let name = document.getElementById("name").value;
if (name === "") {
document.getElementById("nameError").textContent = "Name is required";
valid = false;
} else {
document.getElementById("nameError").textContent = "";
}
// Age Validation
let age = document.getElementById("age").value;
if (age === "" || age < 10 || age > 100) {
document.getElementById("ageError").textContent = "Please enter a valid age between 10 and 100";
valid = false;
} else {
document.getElementById("ageError").textContent = "";
}
// Email Validation
let email = document.getElementById("email").value;
let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (email === "" || !email.match(emailPattern)) {
document.getElementById("emailError").textContent = "Please enter a valid email";
valid = false;
} else {
document.getElementById("emailError").textContent = "";
}
// Course Validation
let course = document.getElementById("course").value;
if (course === "") {
document.getElementById("courseError").textContent = "Please select a course";
valid = false;
} else {
document.getElementById("courseError").textContent = "";
}
return valid;
}
</script>
</body>
</html>
OUTPUT

Web Tech File

Uploaded by

Copyright:

Available Formats

Web Tech File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech File

Uploaded by

Copyright:

Available Formats

Practical No.

<! -- Link to External CSS -->

<h1>Different Types of CSS</h1>

<! -- Inline CSS -->

<h1>Click on the Image to Get Coordinates</h1>

<h1>Interactive Image Map Example</h1>

<img src="https://www.aaronreedphotography.com/images/xl/Sweet-Dreams-2022.jpg" alt="Sample Image"

<h1>Hot Spot Information</h1>

// Show the clicked info element

// Optional: Hide info when clicking outside

You might also like