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:contact@example.com">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 contact@example.com.
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
