Scribd
Upload
7 views

Lab File Web Tech-1

Uploaded by

Aditya pratap singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Lab File Web Tech-1

Uploaded by

Aditya pratap singh
Copyright
© © All Rights Reserved
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