Scribd
Upload
73 views23 pages

WP Inter-1

The document contains code for designing several web pages using HTML and CSS. It includes code samples for: 1) Creating a home page with navigation bar using Bootstrap 2) Demonstrating different CSS selectors (ID, class, tag) 3) Creating a responsive table with Bootstrap to display student records 4) Designing horizontal and vertical menus with CSS 5) Creating a basic home page structure with semantic HTML5 elements 6) Building a web form with different input fields and form validation with JavaScript

Uploaded by

patilbhushan6411
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
73 views23 pages

WP Inter-1

The document contains code for designing several web pages using HTML and CSS. It includes code samples for: 1) Creating a home page with navigation bar using Bootstrap 2) Demonstrating different CSS selectors (ID, class, tag) 3) Creating a responsive table with Bootstrap to display student records 4) Designing horizontal and vertical menus with CSS 5) Creating a basic home page structure with semantic HTML5 elements 6) Building a web form with different input fields and form validation with JavaScript

Uploaded by

patilbhushan6411
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/ 23

1] <!

--Design a home web page using Bootstrap and css -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Home Page</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
>
<style>
/* Custom CSS */
body {
background-color: #f4f4f4;
}
.jumbotron {
background-color: #3498db;
color: #fff;
padding: 100px 0;
text-align: center;
}
.feature-box {
text-align: center;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

<!-- Hero Section -->


<div class="jumbotron">
<h1>Welcome to My Website</h1>
<p>A simple and stylish home page.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn More</a>
</div>

<!-- Features Section -->


<div class="container mt-5">
<div class="row">
<div class="col-md-4 feature-box">
<h2>Feature 1</h2>
<p>Example 1 </p>
</div>
<div class="col-md-4 feature-box">
<h2>Feature 2</h2>
<p>Example 2</p>
</div>
<div class="col-md-4 feature-box">
<h2>Feature 3</h2>
<p>Example 3</p>
</div>
</div>
</div>

<!-- Add Bootstrap JS and jQuery -->


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js
"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></s
cript>
</body>
</html>

2] <!--Demonstrate the use of CSS Selector implement CSS using ID, Class
and tag selector-->

<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Example</title>
<style>
/* ID Selector */
#heading {
color: blue;
font-size: 24px;
}

/* Class Selector */
.highlight {
background-color: yellow;
}

/* Tag Selector */
p{
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 id="heading">This is a Heading with ID Selector</h1>
<p class="highlight">This is a paragraph with Class Selector that adds a
background color.</p>
<p>This is a regular paragraph with no additional styles applied.</p>
</body>
</html>

3]<!--Design a web page which shows a bootstrap responsive table-->


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Responsive Table</title>

<!-- Add Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
>
</head>
<body>
<div class="container">
<h1>Student Records</h1>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sarika Chaudhari</td>
<td>20</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>Arpita Patil</td>
<td>22</td>
<td>B</td>
</tr>
<tr>
<td>3</td>
<td>Divya Alahit</td>
<td>19</td>
<td>A</td>
</tr>
<tr>
<td>4</td>
<td>Vaishavi Chaudhari</td>
<td>21</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
</div>

<!-- Add Bootstrap JS and jQuery -->


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js
"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></s
cript>
</body>
</html>

4] <!--Design a web page to demonstrate the use of CSS Menu Design


(Horizontal and Vertical)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Menu Design</title>
<style>
/* Common styles for both menus */
ul {
list-style: none;
padding: 0;
}

li {
margin: 0;
padding: 0;
}

a{
text-decoration: none;
color: #333;
}

/* Horizontal Menu */
#horizontal-menu {
display: flex;
justify-content: center;
}
#horizontal-menu li {
margin: 0 10px;
}

/* Vertical Menu */
#vertical-menu {
width: 200px;
}

#vertical-menu li {
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Menu Design</h1>

<!-- Horizontal Menu -->


<ul id="horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

<!-- Vertical Menu -->


<ul id="vertical-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

5] <!—Design a web page(Home using HTML5-->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main Content Section -->


<main>
<section id="about">
<h2>About Us</h2>
<p>Welcome to our website. We are dedicated to providing the best
solutions for our customers.</p>
</section>

<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
</ul>
</section>
</main>

<!-- Footer Section -->


<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>

6] <!—Design a web from using main 6 types of controls and apply


validation using JavaScript-->
<!DOCTYPE html>
<html>
<head>
<title>Web Form with Validation</title>
</head>
<body>
<h1>Web Form Example</h1>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>

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

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female"
required>
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other" required>
<label for="other">Other</label>
<br><br>

<label>Interests:</label>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
<br><br>

<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select</option>
<option value="us">United States</option>
<option value="ind">India</option>
<option value="uk">United Kingdom</option>
</select>
<br><br>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"
required></textarea>
<br><br>

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


</form>
<script>
// Form submission and validation
const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
let isValid = true;

// Validation for the name field


const name = document.getElementById("name");
if (name.value.trim() === "") {
alert("Name is required");
isValid = false;
}

// Validation for the email field


const email = document.getElementById("email");
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]{2,4}$/;
if (!emailPattern.test(email.value)) {
alert("Invalid email address");
isValid = false;
}

// Validation for the country dropdown


const country = document.getElementById("country");
if (country.value === "") {
alert("Please select a country");
isValid = false;
}
if (!isValid) {
event.preventDefault();
}
});
</script>
</body>
</html>

8] <!—Design a ‘web form’ using Bootstrap and CSS-->


<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Web Form</title>
<!-- Add Bootstrap CSS link -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/* Custom CSS for additional styling */
.custom-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto custom-form">
<h2 class="text-center">Web Form</h2>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name"
placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" id="message" rows="3"
placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!-- Add Bootstrap JS and jQuery (required for some Bootstrap features) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.j
s"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></s
cript>
</body>
</html>
9] <!--Demonstrate the use of bootstrap grid system on web page-->
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid System Demo</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- Header -->
<div class="row">
<div class="col">
<header>
<h1>Header</h1>
</header>
</div>
</div>
<!-- Main Content Section -->
<div class="row">
<div class="col-md-8">
<main>
<h2>Main Content</h2>
<p>Hello Everyone</p>
</main>
</div>
<div class="col-md-4">
<aside>
<h3>Sidebar</h3>
<p>This is a sidebar with additional content.</p>
</aside>
</div>
</div>

<!-- Footer -->


<div class="row">
<div class="col">
<footer>
<p>&copy; 2023 Bootstrap Grid Demo</p>
</footer>
</div>
</div>
</div>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></sc
ript>
</body>
</html>

10] <!-- Design a web page which shows a Bootstrap pagination-->


<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h1>Pagination Example</h1>
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
<li class="list-group-item">Item 5</li>
<li class="list-group-item">Item 6</li>
<li class="list-group-item">Item 7</li>
<li class="list-group-item">Item 8</li>
<li class="list-group-item">Item 9</li>
<li class="list-group-item">Item 10</li>
</ul>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center mt-4">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item active">
<span class="page-link">1</span>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></sc
ript>
</body>
</html>

11] <!--Demonstrate the use of Animation effects using CSS-->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
/* Define the button style */
.animated-button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease; /* Add a smooth color transition
*/
}

/* Define the hover animation */


.animated-button:hover {
background-color: #e74c3c;
}
</style>
</head>
<body>
<button class="animated-button">Hover Me</button>
</body>
</html>

12] <!--Demonstrate the use of Looping statement in Javascript.-->


<!DOCTYPE html>
<html>
<head>
<title>For...Of Loop Statement in JavaScript</title>
</head>
<body>
<h2>For...Of Loop Statement in JavaScript</h2>
<script type="text/javascript">
const Names = ['Mahesh', 'Chris', 'Deepak', 'Praveen'];
for(const name of Names)
{
document.write("This is :" +name +"<br/>");
}
</script>
</body>
</html>

You might also like