Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
22 views

Lab Program

gcfc

Uploaded by

Murali Vijay
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views

Lab Program

gcfc

Uploaded by

Murali Vijay
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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>
*{
box-sizing: border-box;
}
.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>
<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.3 responsive Layout

<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
width:100%;
margin:auto;
}
.header {
text-align: center;
background-color: red;
padding: 20px;
color: black;
}
.main {
color: Balck;
}
</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>
<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 {
background-color: red;
}
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>
<!-- Bootstrap CSS -->
<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>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email" required>
</div>
<div class="form-group">
<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>
<div class="form-group">
<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>
<!-- Bootstrap JS and dependencies -->
<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> <!-- Bootstrap CSS --
> <link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet"> <style> /* Custom CSS */ .container { margin-top: 50px; } h2 {
margin-bottom: 30px; } </style> </head>
 <head> : Contains meta-information about the document.
 <title>: Sets the title of the webpage, which appears in the browser
tab.
 <link href="..."> : Links to the Bootstrap CSS file for styling the
webpage using Bootstrap classes.
 <style>: Contains custom CSS styles.
 .container { margin-top: 50px; } : Adds a top margin of 50
pixels to elements with the class container.
 h2 { margin-bottom: 30px; } : Adds a bottom margin of 30
pixels to h2 elements.

3. Body Section
html
Copy code
<body> <div class="container"> <h2> College Festival and Sports Events
Registration </h2> <form>
 <body> : The main content area of the HTML document.
 <div class="container"> : A Bootstrap class that provides responsive
fixed-width container.
 <h2>: A heading element with text "College Festival and Sports
Events Registration".
 <form>: Starts a form for user input.

4. Form Fields
html
Copy code
<div class="form-group"> <label for="name"> Name: </label> <input type="text"
class="form-control" id="name" placeholder="Enter your full name" required> </div>
 <div class="form-group"> : A Bootstrap class for form group,
ensuring proper spacing.
 <label for="name">Name:</label> : A label for the name input field.
 <input type="text" class="form-control" id="name"
placeholder="Enter your full name" required> : A text input field with
Bootstrap styling. It includes:
 type="text": Specifies the type of input.
 class="form-control" : Bootstrap class for styling.
 id="name" : Unique identifier for the input field.
 placeholder="Enter your full name" : Placeholder text shown
inside the input field.
 required: Ensures the field must be filled out before form
submission.

5. Email Field
html
Copy code
<div class="form-group"> <label for="email"> Email: </label> <input type="email"
class="form-control" id="email" placeholder="Enter your email" required> </div>
 Similar structure to the name field but with type="email" for email
input validation.

6. Department Dropdown
html
Copy code
<div class="form-group"> <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>
 <select> : Creates a dropdown menu.
 <option> : Defines each selectable option within the dropdown.

7. Sports Event Dropdown


html
Copy code
<div class="form-group"> <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>

 Same structure as the department dropdown but for selecting a


sports event.

8. Submit Button
html
Copy code
<button type="submit" class="btn btn-primary"> Submit </button> </form> </div>
 <button type="submit" class="btn btn-primary">Submit</button> : A
submit button with Bootstrap styling ( btn and btn-primary classes).

9. Including Bootstrap JS and Dependencies


html
Copy code
<!-- Bootstrap JS and dependencies --> <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

You might also like