Lab Program

1.
create any three layouts (fixed,fluid and responisve)
1.1 Fixed Layout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
}
.header {
text-align: center;
background-color: red;
padding: 20px;
color: white;
}
.main {
padding: 20px;
background-color: lightcoral;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>My Website</h1>
</div>
<div class="main">
<h2>Fixed Layout</h2>
<p>This is a fixed layout example.</p>
</div>
</div>
</body>
</html>
1. 2fluid Layout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
}
.wrapper {
margin-left:10%;
margin-right: 10%;
}
.header {
text-align: center;
background-color: red; /* Updated background color to red as per your requirement */
padding: 20px;
color: white; /* Adding text color for better visibility */
}
.main {
padding: 20px;
background-color: lightcoral; /* Changed to a reddish color as requested */
color: white; /* Adding text color for better visibility */
}
</style>
</head>
<body>
<h1>My Website</h1>
</div>
<div class="main">
</div>
</div>
</body>
</html>
1.3 responsive Layout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
}
.wrapper {
width:100%;
margin:auto;
}
.header {
text-align: center;
padding: 20px;
color: black;
}
.main {
color: Balck;
}
</style>
</head>
<body>
<h1>My Website</h1>
</div>
<div class="main">
<a href="Demo.html">Welcome</a>
</div>
</div>
</body>
</html>
3. create a sample css file to show different sector models.(linking of css).
3.1 Inline Style.
<!DOCTYPE HTML>
<html>
<head>
<title>Internal CSS</title>
</head>
<body style="background-color: blue;">
<h1 style="color: gold; text-align: center;">This is my heading</h1>
<p style="color: black; text-align: left;">This is my paragraph.</p>
</body>
</html>
3.2 Internal Style
<!DOCTYPE HTML>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
}
h1 {
color: navy;
margin-left: 20px;
}
p{
color: black;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<h1>This is my heading</h1>
<p>This is my paragraph.</p>
</body>
</html>
3.3External Style
<!DOCTYPE html>
<html>
<head>
<title>Sample style</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> this is a heading<h1>
<p>This a paragragh</p>
</body>
</html>
// mystyle.css
body{
background-color: lightblue;
}
h1{
color: navy;
margin-left: 20px;
}
p{
color: black;
margin: auto;
}
4.modift any html website using an external css file(using selectors).

<!DOCTYPE html>
<html>
<head>
<title>documents</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is my website</h1>
<p class="para">this is my paragraph with class.</p>
<p> this is my paragraph without class.</p>
<div id="mydiv">
<p>this my paragraph inside a div container with id.
</div>
</body>
</html>
*{
font-family: Arial;
margin:0px;
padding:10px;
}
h1 {
color: blue;
}
.para {
color: green;
text-align: left;
font-size:18px;
}
#mydiv {
padding: 5px;
color: yellow;
background-color:black;
}
6.Create a responsive from using HTML & CSS only.
<DOCTYPE html>
<html>
<head>
<title>documents</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1> Contact Us</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="enter your
name here" required>
<label for="email">email:</label>
<input type="text" id="email" name="email" placeholder="enter your
email here" required>
<label for="Message">Message:</label>
<input type="text" id="Message" name="Message" placeholder="enter
your Message here" required>
<input type="submit" value="submit">

</form>
</div>
</body>
</html>
// style.css
body{
padding: 0px;
background-color: lightblue;
margin:0px;
}
.container{
padding: 20px;
width:400px;
margin: auto;
}
h1 {
color: blue;
text-align:center;
}
form{
display:flex;
flex-direction:column;
}
label{
margin-bottom:10px;
input
{
padding: 10px;
margin-bottom: 10px;
border:1 px solid black;
border-radius: 20px;
}
input[type="submit"]{
background-color: blue;
color: yellow;
cursor: pointor;
transition: background-color: blue;
}
input[type="submit"]: hover{
background-color: balck;
}
7.Create a form using html which takes in details for the college festival of
students from different departments for sport events only.
<!DOCTYPE HTML>
<html>
<head>
<title>College Festival Sports Event Registration</title>

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.mi
n.css" rel="stylesheet">
<style>
/* Custom CSS */
.container {
margin-top: 50px;
}
h2 {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<h2>College Festival and Sports Events Registration</h2>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name"
placeholder="Enter your full name" required>
</div>
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email" required>
</div>
<label for="department">Department:</label>
<select class="form-control" id="department" required>
<option value="Computer Science">Computer Science</option>
<option value="Commerce">Commerce</option>
<option value="Arts">Arts</option>
</select>
</div>
<label for="sport-event">Sports Event:</label>
<select class="form-control" id="sport-event" required>
<option value="Football">Football</option>
<option value="Basketball">Basketball</option>
<option value="Volleyball">Volleyball</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.
min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.j
s"></script>
</body>
</html>
1. Document Type Declaration and HTML Structure

html
Copy code
<!DOCTYPE HTML> <html>
 <!DOCTYPE HTML>: Declares the document type and version of
HTML being used, which is HTML5 in this case.
 <html> : The root element of an HTML document.
2. Head Section
html
Copy code
<head> <title> College Festival Sports Event Registration </title>  <script src="https://code.jquery.com/jquery-
3.5.1.slim.min.js"></script> <script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></
script> <script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body> </html>
 <script src="..."> : Includes external JavaScript files for jQuery,
Popper.js, and Bootstrap JS for enabling Bootstrap’s interactive
components.
Conclusion
This HTML form allows students to register for sports events at a college
festival, capturing their name, email, department, and the sports event
they want to participate in, utilizing Bootstrap for styling and layout

Lab Program

Uploaded by

Copyright:

Available Formats

Lab Program

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Program

Uploaded by

Copyright:

Available Formats

1.

create any three layouts (fixed,fluid and responisve)

1.1 Fixed Layout

3.1 Inline Style.

3.2 Internal Style

4.modift any html website using an external css file(using selectors).

6.Create a responsive from using HTML & CSS only.

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

1. Document Type Declaration and HTML Structure

7. Sports Event Dropdown

 Same structure as the department dropdown but for selecting a

9. Including Bootstrap JS and Dependencies

You might also like