Scribd
Upload
14 views9 pages

Web Technology

The document explains Bootstrap tables and forms, detailing their structure, key classes, and customization options. It also covers CSS box creation, color grading, and methods for inserting CSS into HTML documents, including internal and external stylesheets. The document emphasizes the importance of organization and maintainability in web design.

Uploaded by

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

Web Technology

The document explains Bootstrap tables and forms, detailing their structure, key classes, and customization options. It also covers CSS box creation, color grading, and methods for inserting CSS into HTML documents, including internal and external stylesheets. The document emphasizes the importance of organization and maintainability in web design.

Uploaded by

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

Web technology

Unit-2
8-Marks

1.Explain bootstrap table and forms ?

Tables in Bootstrap:
Bootstrap provides a simple and responsive approach to creating tables. It offers various styles and classes to
customize their appearance and behavior.
Basic Table Structure:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>john</td>
</tr>
</tbody>
</table>

Key Classes:
table: The base class for creating tables.
thead: Defines the table header.
tbody: Defines the table body.
tr: Represents a table row.
th: Represents a table header cell.
td: Represents a table data cell.

Customization:
Striped rows: Add the table-striped class.
Bordered table: Add the table-bordered class.
Hoverable rows: Add the table-hover class.
Small table: Add the table-sm class.
Large table: Add the table-lg class.

Forms in Bootstrap
Bootstrap offers a comprehensive set of form elements and styles to create various types of forms.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Key Classes:
form: The base class for creating forms.
form-group: Groups form elements together.
form-control: Applies styling to form elements like inputs and selects.
label: Creates labels for form elements.
input: Creates input fields of various types (text, email, password, etc.).
textarea: Creates multi-line text areas.
select: Creates dropdown lists.
button: Creates buttons.

Customization:
Form layout: Use the form-inline class for horizontal forms and the form-horizontal class for vertical forms.
Form validation: Utilize Bootstrap's built-in validation features to provide feedback to users.
Custom styles: Apply custom CSS to further customize the appearance of forms.

2.Create box and colors in css ?

HTML Structure:
<div class="box">
</div>
CSS Styling:
.box {
width: 200px;
height: 100px;
border: 2px solid black;
background-color: lightblue;
}
Explanation:
The <div> element creates a container for your box.The class="box" attribute assigns a unique identifier to the container, allowing
you to style it with CSS.

CSS:
.box: Targets the element with the class "box".
width: 200px;: Sets the width of the box to 200 pixels.
height: 100px;: Sets the height of the box to 100 pixels.
border: 2px solid black;: Creates a 2-pixel-wide solid black border around the box.
background-color: lightblue;: Fills the box with a light blue background color.

Colors:
Colors are added by css to decorate our web site.
We can set a color to the text as we want.
There are 145 colors in css (Black,White,Red,..,ect)

Color: Set the background color using the background-color property.


For example:
.element {
background-color: #f0f0f0;
/* Light gray */
}
Color Grading:
Hue, Saturation, and Lightness (HSL): Adjust the color's hue, saturation, and lightness using the hsl().
function:
.element {
background-color: hsl(240, 50%, 70%);
/* Blue hue, 50% saturation, 70% lightness */
}
Hue, Saturation, and Value (HSV): Adjust the color's hue, saturation, and value using the hsv().
function:
.element {
background-color: hsv(240, 50%, 70%);
/* Blue hue, 50% saturation, 70% value */
}

5-Marks

1.Background and color greading in css ?

Color: Set the background color using the background-color property.


For example:
.element {
background-color: #f0f0f0;
/* Light gray */
}
Image: Apply a background image using the background-image property. Specify the image path:
For example:
.element {
background-image: url('path/to/your/image.jpg’);
}
Image Position: Control the image's placement within the element using background-position. Options include top, bottom, left,
right, center, and percentages.
For example:
.element {
background-position: center top;
}
Image Repeat: Determine whether the image should repeat horizontally, vertically, or both using background-repeat.
For example:
.element {
background-repeat: no-repeat;
/* Prevent repetition */
}
Image Size: Adjust the image's size relative to the element using background-size.
.element {
background-size: cover;
/* Scale to cover the entire element */
}

Color Grading:
Hue, Saturation, and Lightness (HSL): Adjust the color's hue, saturation, and lightness using the hsl().
function:
.element {
background-color: hsl(240, 50%, 70%);
/* Blue hue, 50% saturation, 70% lightness */
}
Hue, Saturation, and Value (HSV): Adjust the color's hue, saturation, and value using the hsv().
function:
.element {
background-color: hsv(240, 50%, 70%);
/* Blue hue, 50% saturation, 70% value */
}
Opacity: Control the transparency of the background using the opacity property.
.element {
background-color: rgba(0, 0, 0, 0.5);
/* Black with 50% opacity */
}
Gradients: Create smooth color transitions using linear or radial gradients.
.element {
background-image: linear-gradient(to right, red, blue);
}

2.Insert css in HTML document?

To insert CSS into HTML, you have two main methods.


1. Internal Style Sheet:
Place the CSS code directly within the <head> section of your HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightblue;}
h1 { color: red;}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
2. External Style Sheet:
Create a separate CSS file (e.g., styles.css) and link it to your HTML document using the <link> tag.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Contents of styles.css:
body {
background-color: lightblue;}
h1 { color: red;}
Choosing the Right Method:
Internal Style Sheet: Suitable for small-scale projects or when you want to keep the CSS code within the HTML document for
convenience.
External Style Sheet: Ideal for larger projects or when you want to separate the HTML and CSS for better organization and
maintainability.

You might also like