Scribd
Upload
25 views21 pages

BWD Manual (1) - Removed

bwd removwd

Uploaded by

jatingarg1008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views21 pages

BWD Manual (1) - Removed

bwd removwd

Uploaded by

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

IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

EXPERIMENT - 7

OBJECTIVE :- Implement basic layout techniques (floats, positioning, flexbox) to


structure your webpage.

Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Layout Techniques</title>
<style>
/* Internal CSS */

/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
}

/* Floats for Navigation */


.float-nav {
background-color: #333;
overflow: hidden;
}

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

.float-nav ul li {
float: left;
width: 25%;
}

.float-nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}

.float-nav ul li {
background-color: #111;
}

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

/* Flexbox for Main Content */


.flex-container {
display: flex;
justify-content: space-between;
padding: 20px;
}

.content {
flex: 2;
background-color: #f4f4f4;
padding: 20px;
margin-right: 10px;
}

.sidebar {
flex: 1;
background-color: #e0e0e0;
padding: 20px;
}

/* Positioning for Footer */


.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Header Section -->
<header style="background-color: #4CAF50; color: white; text-align: center; padding: 20px 0;">
<h1>Basic Layout Techniques</h1>
</header>

<!-- Navigation using Floats with Internal and Inline CSS -->
<nav class="float-nav" style="background-color: #444; overflow: hidden;">
<ul style="padding: 0;">
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">Home</a></li>
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">About</a></li>
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">Services</a></li>
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">Contact</a></li>
</ul>
</nav>

<!-- Main Content Section with Flexbox and Inline Styles -->
<main class="flex-container">
<section class="content" style="background-color: #f9f9f9; padding: 25px;">
<h2 style="color: #333;">Welcome to the my world</h2>
<p style="color: #555;">This section my world .</p>
</section>

<aside class="sidebar" style="background-color: #d0d0d0; padding: 25px;">


5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

<h3 style="color: #333;">content here</h3>


<p style="color: #555;">This is content box.</p>
</aside>
</main>

<!-- Footer with Absolute Positioning and Inline Styles -->


<footer class="footer" style="background-color: #555; padding: 15px 0;">
<p style="color: white;">Created by Jatin Garg</p>
</footer>
</body>
</html>

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

OUTPUT:

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

EXPERIMENT - 8

OBJECTIVE :- Create a simple "Hello, World!" script and Use JavaScript to manipulate
HTML elements (change text, styles, attributes)..

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Element Manipulation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f0f8ff;
}

#hello-text {
font-size: 24px;
color: #0000ff;
transition: all 0.5s ease;
}

.styled {
color: #ff0000;
background-color: #ffff00;
padding: 10px;
border-radius: 10px;
}

button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #45a049;
}

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

</style>
</head>
<body>

<h1 id="hello-text">Hello, world this is me jatin </h1>

<button onclick="changeText()">Change Text</button>


<button onclick="changeStyle()">Change Style</button>
<button onclick="changeAttribute()">Change Attribute</button>

<script>
function changeText() {
document.getElementById("hello-text").innerHTML = "Here this is my world!";
}

function changeStyle() {
const helloText = document.getElementById("hello-text");
helloText.classList.toggle('styled');
}

function changeAttribute() {
const helloText = document.getElementById("hello-text");
helloText.setAttribute("title", "You changed the attribute!");
}
</script>

</body>
</html>

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

OUTPUT-

Manipulated output-

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

EXPERIMENT - 9

OBJECTIVE :- Create interactive elements like buttons with event listeners.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Elements Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f7f7f7;
}

h1 {
color: black; /* Set title color to black */
}

#message {
font-size: 24px;
color: #333;
margin: 20px;
transition: all 0.3s ease;
}

.styled {
background-color: #ffeb3b;
color: #ff5722;
padding: 15px;
border-radius: 10px;
}

.hidden {
display: none;
}

button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

background-color: #45a049;
}
</style>
</head>
<body>

<h1>Interactive Elements Example</h1>


<p id="message">Hello, this is ips acadmy world!</p>

<button id="changeTextButton">Change Text</button>


<button id="changeStyleButton">Change Style</button>
<button id="toggleVisibilityButton">Toggle Visibility</button>
<button id="increaseFontSizeButton">Increase Font Size</button>

<script>
const messageElement = document.getElementById('message');

document.getElementById('changeTextButton').addEventListener('click', function() {
messageElement.textContent = 'Here this is my world!';
});

document.getElementById('changeStyleButton').addEventListener('click', function() {
messageElement.classList.toggle('styled');
});

document.getElementById('toggleVisibilityButton').addEventListener('click', function() {
messageElement.classList.toggle('hidden');
});

document.getElementById('increaseFontSizeButton').addEventListener('click', function() {
const currentFontSize = parseInt(window.getComputedStyle(messageElement).fontSize);
messageElement.style.fontSize = (currentFontSize + 2) + 'px';
});
</script>

</body>
</html>

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

OUTPUT

WITH CHANGE STYLE-

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

WITH TOGGLE VISIBILITY-

WITH INCREASED FONT SIZE-

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

EXPERIMENT - 10
OBJECTIVE :- Implement basic form validation using JavaScript.

Solutiuon:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Form Validation Example</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e9ecef;
color: #343a40;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

form {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}

h1 {
text-align: center;
margin-bottom: 20px;
color: #007bff;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 5px;
transition: border-color 0.3s;
}

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

.form-group input:focus,
.form-group textarea:focus {
border-color: #007bff;
outline: none;
}

.form-group .error {
color: #d9534f;
font-size: 0.9em;
margin-top: 5px;
}

.btn-submit {
width: 100%;
padding: 10px;
font-size: 1em;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}

.btn-submit:hover {
background-color: #0056b3;
}

@media (max-width: 480px) {


form {
padding: 20px;
}
}
</style>
</head>
<body>
<form id="contactForm">
<h1>Contact Us (ips academy)</h1>

<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<div class="error" id="nameError"></div>
</div>

<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<div class="error" id="emailError"></div>
</div>

<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120" required>
<div class="error" id="ageError"></div>
</div>

<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

<div class="error" id="messageError"></div>


</div>

<button type="submit" class="btn-submit">Submit</button>


</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission

// Clear previous errors


let errors = document.querySelectorAll('.error');
errors.forEach(error => error.textContent = '');

// Get form values


const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const age = document.getElementById('age').value.trim();
const message = document.getElementById('message').value.trim();

let isValid = true;

// Validate name
if (name === '') {
document.getElementById('nameError').textContent = 'Name is required.';
isValid = false;
}

// Validate email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === '' || !emailPattern.test(email)) {
document.getElementById('emailError').textContent = 'Enter a valid email address.';
isValid = false;
}

// Validate age
if (age === '' || age < 1 || age > 120) {
document.getElementById('ageError').textContent = 'Enter a valid age between 1 and 120.';
isValid = false;
}

// Validate message
if (message === '') {
document.getElementById('messageError').textContent = 'Message is required.';
isValid = false;
}

// If valid, submit form


if (isValid) {
alert('Form submitted successfully!');
// Optionally, you could submit the form data via AJAX or perform other actions
}
});
</script>
</body>
</html>

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25


IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE

OUTPUT

5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25

You might also like