Scribd
Upload
24 views16 pages

Lab File Web Tech-1

Uploaded by

Aditya pratap singh
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
24 views16 pages

Lab File Web Tech-1

Uploaded by

Aditya pratap singh
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/ 16

1. Write HTML program for designing your institute website.

Display departmental
information of your institute on the website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Institute Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: white;
padding: 20px 0;
text-align: center;
}
nav {
background: #e8491d;
padding: 10px;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
padding: 20px;
}
section {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 10px 0;
background: #35424a;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<header>
<h1>Welcome to Our Institute</h1>
<p>Empowering the Future through Education</p>
</header>

<nav>
<div class="container">
<a href="#home">Home</a>
<a href="#departments">Departments</a>
<a href="#about">About Us</a>
<a href="#contact">Contact</a>
</div>
</nav>

<div class="container">
<section id="departments">
<h2>Departments</h2>

<article>
<h3>Department of Computer Science</h3>
<p>The Computer Science department offers cutting-edge education in
programming, algorithms, and software development. Our faculty consists of
experienced professionals who are dedicated to student success.</p>
</article>

<article>
<h3>Department of Mechanical Engineering</h3>
<p>Focusing on design, analysis, and manufacturing, the Mechanical
Engineering department provides hands-on learning experiences. Students gain
practical skills through labs and workshops.</p>
</article>

<article>
<h3>Department of Electrical Engineering</h3>
<p>Our Electrical Engineering department emphasizes innovation in power
systems, electronics, and communication technologies. We prepare students for
careers in a rapidly evolving field.</p>
</article>
<article>
<h3>Department of Business Administration</h3>
<p>The Business Administration department prepares students for
leadership roles in various industries, covering topics from management to
finance and marketing.</p>
</article>

<article>
<h3>Department of Arts and Humanities</h3>
<p>Our Arts and Humanities department encourages creativity and critical
thinking through diverse courses in literature, history, and philosophy.</p>
</article>
</section>

<section id="about">
<h2>About Us</h2>
<p>Our institute has a rich history of academic excellence, fostering a
learning environment that promotes innovation and personal growth.</p>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out via email at
[email protected] or call us at (123) 456-7890.</p>
</section>
</div>

<footer>
<p>&copy; 2024 Institute Name. All Rights Reserved.</p>
</footer>

</body>
</html>
2. Write HTML program to design an entry form for student details/employee
information/faculty details.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
h2 {
text-align: center;
}
form {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 5px;
}
input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background: #35424a;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background: #e8491d;
}
</style>
</head>
<body>

<h2>Student Entry Form</h2>

<form action="/submit" method="POST">


<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="" disabled selected>Select your gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>

<label for="course">Course:</label>
<input type="text" id="course" name="course" required>

<button type="submit">Submit</button>
</form>

</body>
</html>

3. Develop a responsive website using CSS and HTML. Website may be for
tutorial/blogs/commercial website.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
<h1>My Blog</h1>
<p>Your daily dose of tutorials and insights</p>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<div class="container">
<main>
<article>
<h2>Welcome to My Blog</h2>
<p>This is a space where I share tutorials and insights on various topics.
Stay tuned for regular updates!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<h2>Latest Tutorial: Responsive Web Design</h2>
<p>In this tutorial, we will cover the basics of responsive web design and
how to make your websites mobile-friendly.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit
amet accumsan arcu.</p>
</article>
</main>

<aside>
<h3>About Me</h3>
<p>I am a web developer and blogger passionate about teaching others.</p>
</aside>
</div>

<footer>
<p>&copy; 2024 My Blog. All Rights Reserved.</p>
</footer>

</body>
</html>

style.css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: white;
padding: 20px 0;
text-align: center;
}

nav {
background: #e8491d;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav a {
color: white;
text-decoration: none;
padding: 10px;
}

.container {
display: flex;
flex-wrap: wrap;
margin: 20px;
}

main {
flex: 2;
margin-right: 20px;
}

aside {
flex: 1;
background: #e2e2e2;
padding: 20px;
border-radius: 5px;
}

article {
background: white;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
text-align: center;
padding: 10px 0;
background: #35424a;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
/* Responsive Styles */
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 10px 0;
}

.container {
flex-direction: column;
}

main {
margin-right: 0;
}
}

4. Write programs using HTML and Java Script for validation of input data.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<h2>Input Validation Form</h2>

<form id="myForm" onsubmit="return validateForm()">


<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required min="1">

<button type="submit">Submit</button>
</form>

<div id="error-message" style="color: red;"></div>

</body>
</html>

Script.js

function validateForm() {
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const age = document.getElementById("age").value.trim();
const errorMessageDiv = document.getElementById("error-message");

errorMessageDiv.textContent = ''; // Clear previous error messages


// Name validation
if (name === "") {
errorMessageDiv.textContent += "Name is required.\n";
return false;
}

// Email validation
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
errorMessageDiv.textContent += "Please enter a valid email address.\n";
return false;
}

// Age validation
if (age < 1) {
errorMessageDiv.textContent += "Age must be a positive number.\n";
return false;
}

alert("Form submitted successfully!");


return true; // Form is valid
}

Style.css

body {
font-family: Arial, sans-serif;
margin: 20px;
}

form {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}

label {
display: block;
margin-bottom: 5px;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
background-color: #35424a;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #e8491d;
}

You might also like