Scribd
Upload
40 views21 pages

Aman Web F

cuacbabciabcb

Uploaded by

Aman Parmar
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
40 views21 pages

Aman Web F

cuacbabciabcb

Uploaded by

Aman Parmar
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/ 21

Web Designing Lab (BCA-307) 1323180

Practical – 5
Q.) Create a Menu or Table of Contents webpage.
Each menu item should load a different webpage
Solution –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table of Contents</title>
</head>
<body>
<h1>Table of Contents</h1>
<p>Click on the links below to navigate to different pages:</p>
<ul>
<li><a href="page1.html">Page 1 - Introduction</a></li>
<li><a href="page2.html">Page 2 - About Us</a></li>
<li><a href="page3.html">Page 3 - Services</a></li>
<li><a href="page4.html">Page 4 - Contact</a></li>
</ul>
</body>
</html>
Output –
Web Designing Lab (BCA-307) 1323180

Practical – 6

Q.) Create a form for student registration which have all field required for student
registration.

Solution –
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Registration Form</title>

</head>

<body>

<h2>Student Registration</h2>

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

<!-- Full Name -->

<label for="name">Full Name:</label><br>

<input type="text" id="name" name="name" required><br><br>

<!-- Email -->

<label for="email">Email:</label><br>

<input type="email" id="email" name="email" required><br><br>


Web Designing Lab (BCA-307) 1323180

<!-- Date of Birth -->

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

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

<!-- Gender -->

<label>Gender:</label><br>

<input type="radio" id="male" name="gender" value="Male" required>

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="Female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="Other">

<label for="other">Other</label><br><br>

<!-- Phone Number -->

<label for="phone">Phone Number:</label><br>

<input type="tel" id="phone" name="phone" required><br><br>

<!-- Program of Study -->

<label for="program">Program of Study:</label><br>

<select id="program" name="program" required>

<option value="" disabled selected>Select your program</option>

<option value="BSc">B.Sc.</option>

<option value="BCA">BCA</option>
Web Designing Lab (BCA-307) 1323180

<option value="BBA">BBA</option>

<option value="MBA">MBA</option>

</select><br><br>

<!-- Year of Study -->

<label for="year">Year of Study:</label><br>

<select id="year" name="year" required>

<option value="" disabled selected>Select your year</option>

<option value="1">1st Year</option>

<option value="2">2nd Year</option>

<option value="3">3rd Year</option>

<option value="4">4th Year</option>

</select><br><br>

<!-- Submit Button -->

<input type="submit" value="Register">

</form>

</body>

</html>

Output –
Web Designing Lab (BCA-307) 1323180
Web Designing Lab (BCA-307) 1323180

Practical – 7

Q.) Design a single-page website for a university containing a description of the


courses offered, it should also contain some general information about the
university such as its history, the campus and its unique features the page should be
colored and each section should have a different Color/ Background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maharishi Markandeshwar University</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}

/* Overall Layout */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

/* Header */
header {
background-color: #00274d; /* Dark blue */
color: white;
padding: 1em 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}

header nav a {
color: white;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
}

header nav a:hover {


text-decoration: underline;
}
Web Designing Lab (BCA-307) 1323180

/* Section Styles */
section {
padding: 3em 10%;
}

#about {
background-color: #f9f9f9; /* Light beige */
}

#history {
background-color: #fff7e6; /* Pastel yellow */
}

#campus {
background-color: #e0f7ea; /* Light green */
}

#courses {
background-color: #eef3fc; /* Light blue */
}

#features {
background-color: #fff4e6; /* Light orange */
}

#contact {
background-color: #f2f2f2; /* Light grey */
}

/* Footer */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}

/* Contact Form */
#contact form {
display: flex;
flex-direction: column;
width: 100%;
max-width: 400px;
margin: 0 auto;
}

#contact form input,


#contact form textarea,
#contact form button {
padding: 0.8em;
margin: 0.5em 0;
border-radius: 5px;
Web Designing Lab (BCA-307) 1323180

border: 1px solid #ccc;


}

#contact form button {


background-color: #00274d;
color: white;
border: none;
cursor: pointer;
}

#contact form button:hover {


background-color: #0056b3;
}
</style>
</head>
<body>

<!-- Header -->


<header>
<h1>Maharishi Markandeshwar University</h1>
<nav>
<a href="#about">About</a>
<a href="#history">History</a>
<a href="#campus">Campus</a>
<a href="#courses">Courses</a>
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
</header>

<!-- About Section -->


<section id="about">
<h2>About the University</h2>
<p>Maharishi Markandeshwar University is committed to providing high-quality education that empowers
students for successful careers. Our mission is to foster academic excellence and cultivate responsible global
citizens.</p>
</section>

<!-- History Section -->


<section id="history">
<h2>History</h2>
<p>Founded with a vision to offer top-tier education, Maharishi Markandeshwar University has a rich history
of academic and cultural achievements. Over the years, it has expanded its programs and built a legacy of
excellence.</p>
</section>

<!-- Campus Section -->


<section id="campus">
<h2>Campus Overview</h2>
<p>Our campus spans several acres and offers state-of-the-art facilities including a central library, modern
classrooms, and vibrant student activity centers. We take pride in our eco-friendly campus initiatives.</p>
</section>
Web Designing Lab (BCA-307) 1323180

<!-- Courses Section -->


<section id="courses">
<h2>Courses Offered</h2>
<p>We offer a diverse range of programs in Engineering, Business, Medicine, and more. Explore our
departments and discover a path that aligns with your ambitions and interests.</p>
<ul>
<li>Bachelor of Technology (B.Tech)</li>
<li>Master of Business Administration (MBA)</li>
<li>Bachelor of Medicine, Bachelor of Surgery (MBBS)</li>
<li>Bachelor of Science (B.Sc.)</li>
<!-- Add more courses as needed -->
</ul>
</section>

<!-- Unique Features Section -->


<section id="features">
<h2>Unique Features</h2>
<p>Our university is known for its international collaborations, research opportunities, and vibrant campus
life. We offer a range of support services to help students succeed academically and personally.</p>
</section>

<!-- Contact Section -->


<section id="contact">
<h2>Contact Information</h2>
<p>Address: Maharishi Markandeshwar University, Mullana, Haryana</p>
<p>Phone: +91-1234567890</p>
<p>Email: [email protected]</p>

<form>
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>

<!-- Footer -->


<footer>
<p>&copy; 2024 Maharishi Markandeshwar University. All rights reserved.</p>
</footer>

</body>
</html>
Web Designing Lab (BCA-307) 1323180

Output -
Web Designing Lab (BCA-307) 1323180

Practical – 8
Q.) Demonstrate use of multimedia tags (Video & Audio) in HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multimedia Example - Video & Audio</title>
</head>
<body>

<h1>Multimedia in HTML</h1>

<!-- Video Section -->


<section>
<h2>Video Example</h2>
<video width="600" controls>
<source src="sample-video.mp4" type="video/mp4">
<source src="sample-video.ogg" type="video/ogg">
<!-- Fallback text if video format is not supported -->
Your browser does not support the video tag.
</video>
<p>This is an example of a video embedded using the <code>&lt;video&gt;</code> tag.</p>
</section>

<!-- Audio Section -->


<section>
<h2>Audio Example</h2>
<audio controls>
<source src="sample-audio.mp3" type="audio/mpeg">
<source src="sample-audio.ogg" type="audio/ogg">
<!-- Fallback text if audio format is not supported -->
Your browser does not support the audio tag.
</audio>
<p>This is an example of audio embedded using the <code>&lt;audio&gt;</code> tag.</p>
</section>

</body>
</html>
Web Designing Lab (BCA-307) 1323180

Output -
Web Designing Lab (BCA-307) 1323180

Practical – 9
Q.) Write HTML documents using Style Sheet for Inline, Internal and External
types.

Solution :

Inline CSS –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>

<h1 style="color: blue; text-align: center;">Inline CSS Example</h1>


<p style="color: green; font-size: 18px;">This paragraph is styled using inline CSS.</p>
<p style="background-color: yellow; padding: 10px;">Another example of inline styling
with a background color.</p>

</body>
</html>

Internal CSS –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
/* Internal CSS Styles */
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
}
h1 {
color: blue;
text-align: center;
Web Designing Lab (BCA-307) 1323180

}
p{
color: green;
font-size: 18px;
}
.highlight {
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>

<h1>Internal CSS Example</h1>


<p>This paragraph is styled using internal CSS.</p>
<p class="highlight">This paragraph has additional styles applied using a class selector.</p>

</body>
</html>

external CSS –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS -->
</head>
<body>

<h1>External CSS Example</h1>


<p>This paragraph is styled using external CSS.</p>
<p class="highlight">This paragraph has additional styles applied using a class selector from
the external CSS file.</p>

</body>
</html>
Web Designing Lab (BCA-307) 1323180

Practical – 10

Q.) Create a Calculator using JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Calculator</title>
<style>
body, html {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
#calc {
width: 320px;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
#display {
width: 100%;
padding: 15px;
font-size: 2em;
text-align: right;
background: #333;
color: #fff;
box-sizing: border-box;
}
#buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
button {
padding: 20px;
Web Designing Lab (BCA-307) 1323180

font-size: 1.5em;
border: none;
cursor: pointer;
}
button:nth-child(4n+4) {
background: #ff9800;
color: #fff;
}
button:nth-child(-n+3) {
background: #f44336;
color: #fff;
}
button:hover {
filter: brightness(0.9);
}
</style>
</head>
<body>
<div id="calc">
<div id="display"></div>
<div id="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendDisplay('%')">%</button>
<button onclick="appendDisplay('/')">/</button>
<button onclick="appendDisplay('*')">*</button>

<button onclick="appendDisplay('7')">7</button>
<button onclick="appendDisplay('8')">8</button>
<button onclick="appendDisplay('9')">9</button>
<button onclick="appendDisplay('-')">-</button>

<button onclick="appendDisplay('4')">4</button>
<button onclick="appendDisplay('5')">5</button>
<button onclick="appendDisplay('6')">6</button>
<button onclick="appendDisplay('+')">+</button>

<button onclick="appendDisplay('1')">1</button>
<button onclick="appendDisplay('2')">2</button>
<button onclick="appendDisplay('3')">3</button>
<button onclick="calculate()">=</button>

<button onclick="appendDisplay('0')">0</button>
<button onclick="appendDisplay('.')">.</button>
</div>
</div>
Web Designing Lab (BCA-307) 1323180

<script>
const display = document.getElementById("display");

function clearDisplay() {
display.innerText = "";
}

function appendDisplay(val) {
display.innerText += val;
}

function calculate() {
try {
display.innerText = eval(display.innerText);
} catch {
display.innerText = "Error";
}
}
</script>
</body>
</html>
Web Designing Lab (BCA-307) 1323180

Practical – 11

Q.) WAP to display date and time using different JS date formats.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Date and Time Viewer</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
color: #333;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #4a90e2;
font-size: 1.8em;
}
.date-format {
background-color: #e6f7ff;
Web Designing Lab (BCA-307) 1323180

padding: 10px;
margin: 8px 0;
border-radius: 5px;
font-size: 1.1em;
display: flex;
justify-content: space-between;
color: #333;
}
.label {
font-weight: bold;
color: #4a90e2;
}
.refresh-btn {
background-color: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
font-size: 1em;
transition: background-color 0.3s ease;
}
.refresh-btn:hover {
background-color: #4285d4;
}
</style>
</head>
<body>
<div class="container">
<h1>Date and Time Viewer</h1>
<div id="formattedDates">
<!-- Date and time formats will be shown here -->
</div>
<button class="refresh-btn" onclick="displayDateFormats()">Refresh
Date & Time</button>
</div>

<script>
function displayDateFormats() {
Web Designing Lab (BCA-307) 1323180

const now = new Date();


const dateContainer = document.getElementById('formattedDates');
dateContainer.innerHTML = ''; // Clear previous contents

const formats = [
{ label: 'Full Date (toString)', value: now.toString() },
{ label: 'Date (toDateString)', value: now.toDateString() },
{ label: 'Time (toTimeString)', value: now.toTimeString() },
{ label: 'ISO String (toISOString)', value: now.toISOString() },
{ label: 'Local Date & Time (toLocalString)', value:
now.toLocaleString() },
{ label: 'Local Date (toLocalDateString)', value:
now.toLocaleDateString() },
{ label: 'Local Time (toLocalTimeString)', value:
now.toLocaleTimeString() },
{ label: 'UTC String (toUTCString)', value: now.toUTCString() },
{ label: 'Custom Date (YYYY-MM-DD)', value:
`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-
${String(now.getDate()).padStart(2, '0')}` },
{ label: 'Custom Time (HH:MM:SS)', value:
`${String(now.getHours()).padStart(2,
'0')}:${String(now.getMinutes()).padStart(2,
'0')}:${String(now.getSeconds()).padStart(2, '0')}` }
];

formats.forEach(format => {
const div = document.createElement('div');
div.classList.add('date-format');
div.innerHTML = `<span class="label">${format.label}:</span>
<span>${format.value}</span>`;
dateContainer.appendChild(div);
});
}

// Initial display on page load


displayDateFormats();
</script>
</body>
</html>
Web Designing Lab (BCA-307) 1323180

Output—

You might also like