Html Table
HTML tables allow web developers to arrange data into rows and columns.
Basics Tags
used
Table tags
Td
Tr tags
tags
<table border="">
Example
<thead>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</thead>
<tbody><tr>
<td rowspan="2">row1cell1</td>
<td>row1cell2</td>
<td>row1cell3</td></tr>
</tbody>
<tfoot><tr>
<td colspan="3">row3cell1</td>
</tr></tfoot>
</table>
HTML Form
Forms in HTML are used to collect
user input, which is then sent to a
server for processing. Forms can
contain different types of input
elements such as text fields, submit
checkboxes, radio buttons, buttons,
etc.
Basic tags used
<form>tags < label >tags < input >tags
Example
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br>
<label for="interests">Choose your interests:</label>
<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music"> Music<br>
<input type="submit" value="Submit">
</form>
REPLACE WITH
CSS YOUR PHOTO
CSS
1: CSS (Cascading Style Sheets) is a stylesheet
language used for describing the presentation and
layout of a document written in HTML or XML.
2: CSS Extention is (.css)
Selector
1. Element Selector
2. Class Selector (.)
3. ID Selector (#)
4. Attribute Selector
5. Universal Selector (*)
Types of
CSS
1. Inline CSS: 2. Internal CSS 3.External CSS
CSS Color
1.Name:
2. RGB Value: Each parameter (red, green, and blue) defines the intensity of the color between 0 and
255.
3. HEX Value: Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same
as decimal 0-255).
4. HSL Value(hue, saturation, lightness):
Hue is a degree on the color wheel from 0 to 360.
Saturation is a percentage value.
Lightness is also a percentage.
Font
Font-size- Size of text
Font-family- The way every alphabet look
font-weigth- Degree of darkness
Font-height- Gap between two succussive line
Border
1.Border style: solid, dashed, ridge, dotted
2.Border color:
3.Border radius:
4.border top:
Background Image
->The background-image property specifies an image to
use as the background of an element.
->By default, the image is repeated so it covers the
entire element.
Example
<style>
body{
background-image: url('./image/blueflower.jpeg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Box model
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Hover
Select and style a link when you mouse over it:
Example
a:hover {
background-color: yellow;
font-size: 18px;
}
Thank You
!
