Chapter No.

4 HTML (Images, Links and Tables)

1. inserting images:

• concept: the <img> tag is used to insert images into a webpage. key attributes
include src (source of the image) and alt (alternate text if the image doesn't load).
• example:

<img src="https://example.com/image.jpg" alt="a beautiful landscape">

explanation: this code displays an image from the speci ed url. if the image doesn't load, the
text "a beautiful landscape" will be shown.

o m
2. linking web pages:

m .c
alo
• concept: use the <a> tag to link one webpage to another. the href attribute
speci es the url of the page you want to link to.
• example:

a n
a s
<a href="https://example.com">visit our homepage</a>

// h
:
explanation: clicking on "visit our homepage" will take the user to the speci ed url.

p s
h t t
3. external linking and the anchor tag <a>:

• concept: the anchor (<a>) tag is also used to create links to external websites. the
target="_blank" attribute opens the link in a new tab.
• example:

<a href="https://google.com" target="_blank">search on google</a>

explanation: this link opens google's homepage in a new tab when clicked.

4. internal linking:

• concept: internal links connect different sections within the same website or
webpage.
• example:

<a href="about.html">about us</a>

explanation: this code links to a page named about.html within the same website.

1
fi
fi
fi
5. linking to a speci c section of another webpage:

• concept: anchor links can direct users to a speci c section within a page using the id
attribute.
• example:

<a href="#section2">go to section 2</a>

<h2 id="section2">section 2</h2>

explanation: clicking "go to section 2" will scroll the page to the header with
id=“section2”.

6. creating an e-mail link:

•
m
concept: use the mailto: protocol within the <a> tag to create email links.
o
.c
• example:

<a href="mailto:[email protected]">send us an email</a>

o m
al
explanation: clicking "send us an email" will open the user's default email client with a new

n
a
message to [email protected].

a s
7. image as a link:
// h
s :
p
• concept: combine the <img> and <a> tags to create clickable images.
• example:

h t t
<a href="https://example.com">
<img src="https://example.com/button.jpg" alt="click me">
</a>

explanation: the image acts as a button that takes the user to the speci ed url when clicked.

8. audio and video:

• concept: the <audio> and <video> tags are used to embed multimedia content
into a webpage.
• example:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>

<source src="video.mp4" type="video/mp4">

2
fi
fi
fi
 your browser does not support the video tag.
</video>

explanation: these tags embed an audio le with playback controls and a video le with
playback controls and dimensions.

9. tables:

• concept: tables are created using the <table> tag, with rows (<tr>) and columns
(<td>).
• example:

<table border="1">
<tr>
<th>name</th>
o m
.c
<th>age</th>
</tr>
<tr>

o m
al
<td>john doe</td>
<td>30</td>
</tr>
a n
s
<tr>
<td>jane doe</td>

h a
//
<td>25</td>
</tr>
</table>
s :
t t p
h
explanation: this table lists names and ages with borders. <th> tags are used for table
headers.

10. creating a table in html:

• concept: tables can be structured with headers, footers, and body sections.
• example:

<table>
<thead>
<tr>
<th>product</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr>
<td>apple</td>
<td>$1</td>
</tr>

3
fi
fi
 <tr>
<td>banana</td>
<td>$0.5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">total: $1.5</td>
</tr>
</tfoot>
</table>

explanation: this table has a header row, body rows, and a footer row with a total value.

11. attributes of the <table> tag:

o m
•
.c
concept: the <table> tag has attributes like border, cellpadding, and
cellspacing to control its appearance.
m
• example:

alo
a n
<table border="1" cellpadding="10" cellspacing="0">
<!-- table rows here -->

a s
h
</table>

: //
explanation: this table has a 1-pixel border, 10 pixels of padding inside each cell, and no

s
p
spacing between cells.

h t t
12. attributes of the <tr>, <td>, and <th> tags:

• concept: these tags can be customized using attributes like align, valign,
colspan, and rowspan.
• example:

<tr align="center">
<td colspan="2">combined cell</td>
</tr>

explanation: this row contains a single cell that spans two columns and has centered content.

13. <thead> tag:

• concept: the <thead> tag groups header content, making the table more readable
and organized.
• example:

4
<table>
<thead>
<tr>
<th>month</th>
<th>sales</th>
</tr>
</thead>
<!-- table body here -->
</table>

explanation: this table has a separate header section, clearly de ning the table's structure.

14. <tfoot> tag:

•
m
concept: the <tfoot> tag is used for footer content, which often contains summary
o
.c
information.
• example:

o m
al
<tfoot>
<tr>
<td colspan="2">grand total</td>
a n
s
</tr>
</tfoot>

h a
: //
explanation: the footer section of this table spans two columns and contains a "grand total"
row.
s
t t p
h
15. <tbody> tag:

• concept: the <tbody> tag is used to group the main content of the table, separating
it from the header and footer.
• example:

<tbody>
<tr>
<td>jan</td>
<td>$100</td>
</tr>
<tr>
<td>feb</td>
<td>$150</td>
</tr>
</tbody>

explanation: the body section of this table contains data for each month, organized into rows.

5
fi