Scribd
Upload
2 views7 pages

Web Lecture 1

The document explains the use of HTML elements for grouping content, specifically <div> for block-level grouping and <span> for inline grouping, along with their typical uses and examples. It also covers the structure of lists, tables, and their components such as <ul>, <ol>, <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>, and <caption>. Each element is described with its purpose, syntax, and examples to illustrate their usage.

Uploaded by

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

Web Lecture 1

The document explains the use of HTML elements for grouping content, specifically <div> for block-level grouping and <span> for inline grouping, along with their typical uses and examples. It also covers the structure of lists, tables, and their components such as <ul>, <ol>, <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>, and <caption>. Each element is described with its purpose, syntax, and examples to illustrate their usage.

Uploaded by

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

Grouping Content

The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.

1. <div> (Block-Level Element)


Purpose: Used to group block-level elements or content and apply styling or layout changes.
It creates a new block or section in the document flow, meaning it starts on a new line and
takes up the full width available.
Typical Use: Used for larger sections of a webpage, such as grouping together headers,
paragraphs, and other block elements for styling or layout purposes.

Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.header {
font-size: 24px;
font-weight: bold;
}
.content {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header Section</div>
<div class="content">
This is the content area within the div container.
</div>
</div>
</body>
</html>

Explanation: The <div> with the class container groups the header and content sections. The
container has a border and padding applied, while the header and content classes have their
own styles.

2. <span> (Inline Element)


Purpose: Used to group inline elements or content for styling or manipulation. It does not
create a new line or break the flow of text; it only applies styles to a portion of text or inline
elements.
Typical Use: Used for styling or applying changes to a small section of text within a block-
level element.

Example
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is an example of using the <span class="highlight">span</span> element
to highlight a portion of text.</p>
</body>
</html>

Explanation: The <span> element with the class highlight is used to apply a background color
and bold text to just a portion of the text within the paragraph.

1. Unordered Lists (<ul>)


Purpose: Used for lists where the order of items does not matter. Each list item is typically
marked with a bullet point.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2. Ordered Lists (<ol>)
Purpose: Used for lists where the order of items is important. Each list item is typically
numbered.
Syntax:

<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>

6.
7. HTML
HTML––LISTS
TABLES

1. <table>
Description: Defines the table structure.
Example:

<table border="1">
<!-- Table content goes here -->
</table>
2. <tr> (Table Row)
Description: Defines a row within a table.
Example:

<table border="1">
<tr>
<!-- Row content goes here -->
</tr>
</table>

3. <th> (Table Header)


Description: Defines a header cell in a table. Header cells are bold and centered by default.
Example
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>

4. <td> (Table Data)


Description: Defines a standard cell (data) in a table.
Example

<table border="1">
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Sarah</td>
<td>25</td>
</tr>
</table>

5. <thead> (Table Head)


Description: Defines a group of header rows. Typically used for grouping headers together.
Example:

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
6. <tbody> (Table Body)
Description: Defines the body content of the table. Typically contains the main data rows.
Example:

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Sarah</td>
<td>25</td>
</tr>
</tbody>
</table>

7. <tfoot> (Table Footer)


Description: Defines the footer rows for the table, often used for summaries or totals.
Example:
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Sarah</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2 People</td>
</tr>
</tfoot>
</table>

8. <caption>
Description: Defines a title or caption for the table, displayed above the table by default.
Example:

<table border="1">
<caption>Person Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>

Explore colspan and rowspan!

You might also like