0% found this document useful (0 votes)
20 views27 pages

WT File

The document contains multiple HTML experiments demonstrating web page design using various techniques including external, internal, and inline CSS. It covers the creation of college web pages, a hometown page, and a simple odd/even number checker using JavaScript. Each experiment includes code snippets showcasing different styling and layout approaches.
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
0% found this document useful (0 votes)
20 views27 pages

WT File

The document contains multiple HTML experiments demonstrating web page design using various techniques including external, internal, and inline CSS. It covers the creation of college web pages, a hometown page, and a simple odd/even number checker using JavaScript. Each experiment includes code snippets showcasing different styling and layout approaches.
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/ 27

Experiment 1: Design web pages for your college containing a description of

the courses, departments, faculties, library etc, use href, list tags.
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Official Website of MSIT College">
<title>MSIT College</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
header {
background-color: lightcoral;
color: white;
text-align: center;
padding: 30px 20px;
display: flex;
}
header img{
height: 100px;
width: 100px;
}
header h1{
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #92d4b1;
}
nav a {
padding: 15px 25px;
color: white;
text-decoration: none;
font-weight: bold;
text-align: center;
}
nav a:hover {
background-color: #555;
}
.content {
padding: 40px 20px;
margin: 0 20px;
}
.section-title {
color: #333;
font-size: 28px;
margin-top: 20px;
text-align: center;
}
.section-description {
text-align: center;
color: #777;
margin-top: 10px;
}
.department, .faculty, .course {
margin: 20px 0;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.department h3, .faculty h3, .course h3 {
color: #333;
}
footer {
background-color: #81b89a;
color: white;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
footer a {
color: #fff;
text-decoration: none;
}
footer a:hover {
color: #ccc;
}
</style>
</head>
<body>
<header>
<img src="https://msit.in/static/img/msit.png" alt="">
<h1>Welcome to MSIT College</h1>
</header>
<nav>
<a href="#courses">Courses</a>
<a href="#departments">Departments</a>
<a href="#faculties">Faculties</a>
<a href="#library">Library</a>
</nav>
<div class="content">
<section id="courses">
<h2 class="section-title">Courses Offered</h2>
<p class="section-description">Explore the diverse range of courses offered by MSIT
College to build a solid foundation in Information Technology.</p>
<div class="course">
<h3>Master of Science in Information Technology (MSc IT)</h3>
<p>This 2-year postgraduate program covers a wide range of IT concepts including
software engineering, cybersecurity, data science, and AI.</p>
</div>
<div class="course">
<h3>Diploma in Software Development</h3>
<p>A 1-year program designed to equip students with practical knowledge in
software development, coding practices, and application deployment.</p>
</div>
</section>
<section id="departments">
<h2 class="section-title">Departments</h2>
<p class="section-description">Our departments offer specialized knowledge in
cutting-edge areas of Information Technology.</p>
<div class="department">
<h3>Department of Computer Science</h3>
<p>Dedicated to providing comprehensive education in programming, software
development, and systems management.</p>
</div>
<div class="department">
<h3>Department of Information Systems</h3>
<p>Focusing on the management and operational aspects of information systems
and technology infrastructure.</p>
</div>
<div class="department">
<h3>Department of Data Science</h3>
<p>Providing students with expertise in data analytics, machine learning, and
artificial intelligence.</p>
</div>
</section>
<section id="faculties">
<h2 class="section-title">Faculties</h2>
<p class="section-description">Our faculty members are distinguished professionals
in their fields, committed to providing a rich learning experience.</p>
<div class="faculty">
<h3>Dr. John Smith</h3>
<p>Head of Computer Science Department. Expert in Cloud Computing and Big
Data Analytics.</p>
</div>
<div class="faculty">
<h3>Prof. Jane Doe</h3>
<p>Assistant Professor in Data Science, specializing in AI and Deep Learning.</p>
</div>
<div class="faculty">
<h3>Dr. Robert Brown</h3>
<p>Professor of Information Systems, focusing on Cybersecurity and Network
Management.</p>
</div>
</section>
<section id="library">
<h2 class="section-title">Library</h2>
<p class="section-description">Our library is equipped with a vast collection of
textbooks, research journals, and digital resources to support student learning.</p>
<div class="department">
<h3>Resources Available</h3>
<p>The library features a range of academic books, journals, online databases, and
study rooms, providing an excellent environment for learning and research.</p>
</div>
</section>
</div>
<footer>
<p>&copy; 2025 MSIT College. All rights reserved. | <a href="https://www.msit.edu"
target="_blank">www.msit.edu</a></p>
</footer>
</body>
</html>
Experiment 2: Write html code to develop a webpage having two frames that
divide the webpage into two equal rows and then divide the row into equal
columns fill each frame with a different background color.
Code:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>

index.css
.container{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
height: 100vh;
}
.one{
background-color: yellowgreen;
}
.two{
background-color: fuchsia;
}
.three{
background-color: blueviolet;
}
.four{
background-color: orange;
}
Experiment 3: Design a web page of your home town with an attractive
background color, text color, an Image, font etc. (use internal CSS).
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to My Hometown</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to right, #ffecd2, #fcb69f);
color: #333;
}
header {
background-color: #ff6f61;
color: white;
text-align: center;
padding: 40px 20px;
}
header h1 {
font-size: 3em;
margin: 0;
}
.hero-image {
width: 80%;
max-height: 500px;
object-fit: cover;
display: block;
margin: 30px auto;
}
.content {
padding: 40px;
text-align: center;
}
.content h2 {
font-size: 2.5em;
color: #444;
margin-bottom: 20px;
}
.content p {
font-size: 1.2em;
line-height: 1.7;
max-width: 800px;
margin: 0 auto;
}
footer {
background-color: #ff6f61;
color: #f1f1f1;
text-align: center;
padding: 20px;
font-size: 0.9em;
}
</style>
</head>
<body>

<header>
<h1>Welcome to Uttar Pradesh</h1>
<p>The place where heart belongs 💖</p>
</header>
<img class="hero-image"
src="https://www.alightindia.com/cdn/uploads/postimages/ORIGINAL/Uttar-
Pradesh%20%20ohfact--f438d1.jpg" alt="Beautiful view of the hometown">
<div class="content">
<h2>About My Hometown</h2>
<p>
My hometown is a beautiful and peaceful place filled with greenery, history, and culture.
The people here are warm and welcoming. It is known for its vibrant festivals, scenic
views,
and delicious local cuisine. Whether it's the calm mornings or the colorful evenings,
every moment here feels like magic.
</p>
</div>
<footer>
&copy; 2025 Made with ❤️
</footer>
</body>
</html>
Experiment 4: WAP to use external, internal and inline CSS to format college
webpage that you created.

Code:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maharaja Surajmal Institute of Technology</title>
<!-- External CSS Link -->
<link rel="stylesheet" href="styles.css">
<!-- Internal CSS -->
<style>
/* Internal CSS Styles */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('/api/placeholder/1200/500');
background-size: cover;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.btn {
display: inline-block;
background-color: #ffcc00;
color: #003366;
padding: 12px 30px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
}

.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
overflow: hidden;
}

.card-content {
padding: 20px;
}

.card h3 {
color: #003366;
margin-bottom: 15px;
}

.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;

}
</style>
</head>

<body>
<header>
<div class="container">
<!-- Inline CSS used here -->
<h1 style="margin: 0; font-size: 24px; text-align: center;">Maharaja Surajmal Institute
of Technology</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#departments">Departments</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#library">Library</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero" id="home">
<!-- Inline CSS used here -->
<h2 style="font-size: 42px; margin-bottom: 20px; text-shadow: 2px 2px 4px
rgba(0,0,0,0.5);">Welcome to MSIT</h2>
<p style="font-size: 20px; max-width: 700px;">Excellence in Engineering Education and
Research</p>
<a href="#courses" class="btn">Explore Programs</a>
</section>
<section id="courses" class="container">
<h2 style="color: #003366; text-align: center; margin-bottom: 30px;">Our Courses</h2>
<div class="card-container">
<div class="card">
<div class="card-content">
<h3>B.Tech Programs</h3>
<p style="color: #666; margin-bottom: 15px;">Four-year undergraduate
engineering programs accredited
by AICTE.</p>
<ul>
<li>Computer Science Engineering</li>
<li>Information Technology</li>
<li>Electronics & Communication</li>
</ul>
<a href="#" class="btn">Learn More</a>
</div>
</div>

<div class="card">
<div class="card-content">
<h3>M.Tech Programs</h3>
<p style="color: #666; margin-bottom: 15px;">Two-year postgraduate programs
for specialized
knowledge.</p>
<ul>
<li>Computer Science Engineering</li>
<li>VLSI Design</li>
<li>Digital Communication</li>
</ul>
<a href="#" class="btn">Learn More</a>

</div>
</div>
</div>
</section>
<footer id="contact">
<div class="container">
<!-- Inline CSS used here -->
<p style="text-align: center; margin: 0;">© 2025 Maharaja Surajmal Institute of
Technology. All Rights
Reserved.</p>
</div>
</footer>
</body>

</html>
styles.css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

header {
background-color: #003366;
color: white;
padding: 20px 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

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

nav ul li {
margin-left: 20px;
}

nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
}

section {
padding: 40px 0;
}

footer {
background-color: #222;
color: white;
padding: 30px 0;
}
Experiment 5: Create HTML Page with JavaScript which takes Integer number
as input and tells whether the number is ODD or EVEN.
Code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd or Even Checker</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: center;
color: #333;
}

.container {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 500px;
text-align: center;
transition: all 0.3s ease;
}

.container:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
h1 {
margin-bottom: 30px;
color: #333;
font-size: 2.2rem;
font-weight: 600;
position: relative;
padding-bottom: 10px;

h1::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
}

.input-group {
margin-bottom: 25px;
position: relative;
}

input {
width: 100%;
padding: 15px 20px;
border: 2px solid #ddd;
border-radius: 10px;
font-size: 1.1rem;
transition: all 0.3s ease;
outline: none;
}

input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

label {
position: absolute;
top: -10px;
left: 15px;
background-color: white;
padding: 0 5px;
font-size: 0.9rem;
color: #666;
}

button {
background: linear-gradient(90deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 25px;
border-radius: 10px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

button:hover {

transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
}

button:active {
transform: translateY(0);
}

.result {
margin-top: 30px;
padding: 20px;
border-radius: 10px;
font-size: 1.2rem;
font-weight: 500;
opacity: 0;
transition: all 0.5s ease;
height: 0;
overflow: hidden;
}

.result.show {
opacity: 1;
height: auto;
margin-bottom: 10px;
}

.even {
background-color: rgba(72, 187, 120, 0.2);
color: #2f855a;
border: 2px solid rgba(72, 187, 120, 0.3);
}

.odd {
background-color: rgba(237, 100, 166, 0.2);
color: #b83280;
border: 2px solid rgba(237, 100, 166, 0.3);
}

.error {
background-color: rgba(245, 101, 101, 0.2);
color: #c53030;
border: 2px solid rgba(245, 101, 101, 0.3);
}

.animation {
animation: pulse 1s;
}

@keyframes pulse {
0% {
transform: scale(1);
}

50% {
transform: scale(1.05);
}

100% {
transform: scale(1);
}
}

@media (max-width: 500px) {


.container {

padding: 30px 20px;


}

h1 {
font-size: 1.8rem;
}

input,
button {
font-size: 1rem;
}
}
</style>
</head>

<body>
<div class="container">
<h1>Odd or Even Checker</h1>
<div class="input-group">
<label for="numberInput">Enter a number</label>
<input type="number" id="numberInput" placeholder="Enter an integer number"
autocomplete="off">
</div>
<button onclick="checkNumber()">Check</button>
<div id="result" class="result"></div>
</div>

<script>
function checkNumber() {
// Get the input value
const inputElement = document.getElementById('numberInput'); const resultElement
= document.getElementById('result');
const number = inputElement.value.trim();

// Remove previous classes resultElement.className = 'result';

// Validate input
if (number === '') {
resultElement.innerHTML = 'Please enter a number';
resultElement.classList.add('error', 'show');
return;
}

// Parse as integer
const parsedNumber = parseInt(number);
// Check if it's a valid number if (isNaN(parsedNumber)) {
resultElement.innerHTML = 'Please enter a valid integer';
resultElement.classList.add('error', 'show');
return;
}

// Determine if odd or even


if (parsedNumber % 2 === 0) {
resultElement.innerHTML = `<strong>${parsedNumber}</strong> is an
<strong>EVEN</strong>
number`;

resultElement.classList.add('even', 'show', 'animation');


} else {
resultElement.innerHTML = `<strong>${parsedNumber}</strong> is an
<strong>ODD</strong>

number`;

resultElement.classList.add('odd', 'show', 'animation');

// Add animation document.querySelector('.container').classList.add('animation');


setTimeout(() => {
document.querySelector('.container').classList.remove('animation');
}, 1000);
}
// Allow pressing Enter key to submit
document.getElementById('numberInput').addEventListener('keypress', function(event) {
if (event.key === 'Enter') { checkNumber();
}
});
</script>
</body>
</html>
Experiment 6: Create HTML Page that contains form with fields Name, Email,
Mobile No, Gender , Favourite Colour and a button now write a JavaScript code
to combine and display the information in textbox when the button is clicked
and implement validation.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
body {
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; display: flex;
justify-content: center; align-items: center; margin-top: 90px;
background-color: rgb(209, 249, 249);
}
.container {
max-width: 400px; width: 600px; margin: auto; padding: 20px;
border: 1px solid #0e0d0d; border-radius: 10px; background-color: white;
box-shadow: 2px 2px 10px rgba(39, 30, 30, 0.473);
}
input{
background-color: rgb(255, 255, 255); width: 250px;
}
label, input, select { display: block; margin-top: 10px;
}
.button{
padding-top: 4px;

}
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<h2>Fill the Form</h2>

<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<span class="error" id="nameError"></span>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span class="error" id="emailError"></span>
<label for="mobile">Mobile No:</label>
<input type="text" id="mobile" name="mobile">
<span class="error" id="mobileError"></span>
<label>Gender:</label>
<select id="gender">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<span class="error" id="genderError"></span>

<label for="color">Favourite Color:</label>


<input type="text" id="color" name="color">
<span class="error" id="colorError"></span>
<br/>

<button type="button" onclick="displayInfo()">Submit</button>


</form>

<h3>Collected Information:</h3>
<textarea id="output" rows="5" cols="40" readonly></textarea>
</div>

<script>
function displayInfo() {
let name = document.getElementById("name").value.trim(); let email =
document.getElementById("email").value.trim(); let mobile =
document.getElementById("mobile").value.trim(); let gender =
document.getElementById("gender").value;
let color = document.getElementById("color").value.trim();
let valid = true; document.getElementById("nameError").textContent = "";
document.getElementById("emailError").textContent = "";
document.getElementById("mobileError").textContent = "";
document.getElementById("genderError").textContent = "";
document.getElementById("colorError").textContent = "";

if (name === "") {


document.getElementById("nameError").textContent = "Name is required"; valid = false;
}
if (email === "" || !email.includes("@")) {
document.getElementById("emailError").textContent = "Valid email is required"; valid =
false;

}
if (mobile === "" || !/^[0-9]{10}$/.test(mobile)) {
document.getElementById("mobileError").textContent = "Enter a valid 10-digit mobile
number"; valid = false;
}
if (gender === "") {
document.getElementById("genderError").textContent = "Please select gender"; valid =
false;
}
if (color === "") {
document.getElementById("colorError").textContent = "Favourite color is required"; valid =
false;
}
if (valid) {
let outputText = `Name: ${name}\nEmail: ${email}\nMobile: ${mobile}\nGender:
${gender}\nFavourite Color: ${color}`; document.getElementById("output").value =
outputText;
}
}
</script>
</body>
</html>
Experiment 7: Create XML file to store student information like Enrolment
Number, Name Mobile Number , Email Id.

Code:

<?xml version="1.0" encoding="UTF-8"?>


<students>
<student>
<enrollment>2025001</enrollment>
<name>John Doe</name>
<mobile>9876543210</mobile>
<email>[email protected]</email>
</student>

<student>
<enrollment>2025002</enrollment>
<name>Jane Smith</name>
<mobile>9123456789</mobile>
<email>[email protected]</email>
</student>

<student>
<enrollment>2025003</enrollment>
<name>Mike Johnson</name>
<mobile>9988776655</mobile>
<email>[email protected]</email>
</student>
</students>

You might also like