Scribd
Upload
21 views

Web Tech File

Uploaded by

Ishika Bhatnagar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Web Tech File

Uploaded by

Ishika Bhatnagar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types Demo</title>

<!-- Internal CSS -->


<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Click Coordinates</title>
<style>
body {
font-family: Arial, sans-serif;
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CV</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Example</title>
<style>
body {
font-family: Arial, sans-serif;
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General Store</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
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: 1px solid #ccc;
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>
<div class="product">
<h3>Stool</h3>
<p>Comfartable for Engineers.</p>
<p>Price: 150.00</p>
</div>
<div class="product">
<h3>Rope</h3>
<p>Helpfull for Engineers.</p>
<p>Price: 35.00</p>
</div>
<div class="product">
<h3>Red-Bull</h3>
<p>Water of Engineers</p>
<p>Price: 1oo.00</p>
</div>
<div class="product">
<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>&copy; 2024 General Store. All rights reserved.</p>
</footer>

</body>
</html>

OUTPUT
Practical No. 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hot Spot Information</title>
<style>
body {
font-family: Arial, sans-serif;
}
.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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Record Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
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: 1px solid #ccc;
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

You might also like