Web Design Concept - Detailed Notes
1. Lists in HTML
Lists help in organizing content in a structured way. There are three types of lists in HTML:
a. Ordered List (<ol>)
Displays items in a sequential manner, usually numbered.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
b. Unordered List (<ul>)
Displays items with bullet points.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
c. Definition List (<dl>)
Used for definitions with terms and descriptions.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
2. Tables in HTML
Tables are used to present data in a structured format using rows and columns.
<table border='1'>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
3. Images in HTML
Web Design Concept - Detailed Notes
Images enhance the visual appeal of a webpage. The <img> tag is used to embed images.
<img src="[Link]" alt="Description" width="200" height="100">
4. Frames in HTML
Frames divide a webpage into multiple sections, allowing different content in each section.
<iframe src="[Link] width="500" height="300"></iframe>
5. Forms in HTML
Forms are used for user input. Various input elements are available, such as text fields, radio buttons, and
checkboxes.
<form action="[Link]" method="post">
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Submit">
</form>
Common Form Elements
1. Text Input:
<input type="text" name="username">
2. Password Input:
<input type="password" name="password">
3. Radio Buttons:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
4. Checkboxes:
<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter
5. Dropdown Menu:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="bmw">BMW</option>
</select>
6. CSS (Cascading Style Sheets)
CSS is used to style HTML elements, making them more visually appealing.
Types of CSS
Web Design Concept - Detailed Notes
1. Inline CSS:
<p style="color: red;">This is red text.</p>
2. Internal CSS:
<style>
p { color: blue; }
</style>
3. External CSS:
/* [Link] */
p {
color: green;
}
<link rel="stylesheet" href="[Link]">
CSS Selectors
CSS selectors define how specific HTML elements are styled.
1. Element Selector:
p { color: red; }
2. Class Selector:
.class-name { font-size: 20px; }
3. ID Selector:
#id-name { background-color: yellow; }
CSS Properties
Some commonly used CSS properties include:
1. Color:
color: blue;
2. Background Color:
background-color: lightgray;
3. Font Size:
font-size: 16px;
4. Padding and Margin:
padding: 10px;
margin: 20px;
5. Border:
Web Design Concept - Detailed Notes
border: 1px solid black;
CSS Box Model
The CSS Box Model consists of the following components:
1. Content - The content inside the element.
2. Padding - Space around the content.
3. Border - Surrounds the padding and content.
4. Margin - Space outside the border.
div {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}