Chapter 2: Enriching Content
1. Creating Links
Links allow navigation from one web page to another or to external
resources.
1.1 The <a> Tag (Anchor Tag)
Used to create hyperlinks.
Syntax:
<a href="URL">Link Text</a>
1.2 Types of Links
a) External Links
Navigate to websites outside your domain.
<a href="[Link] Google</a>
b) Internal Links
Navigate within the same website (one page to another).
<a href="[Link]">About Us</a>
c) Section Links (Jump Links)
Navigate to a specific section within the same page.
<a href="#contact">Go to Contact Section</a>
<h2 id="contact">Contact</h2>
2. Hyperlinks, Email Links & Phone Links
2.1 Hyperlinks
Any normal link created using href.
2.2 Email Link
Opens the user's email application with a preset email address.
<a href="[Link] Email</a>
2.3 Phone Link
Used mostly on mobile-friendly websites.
<a href="[Link] Us</a>
<!DOCTYPE html>
<html>
<head>
<title>Links Example</title>
</head>
<body>
<h2>Different Types of Links</h2>
<p><a href="[Link] Google</a></p>
<p><a href="[Link]">Go to About Page</a></p>
<p><a href="#section1">Jump to Section 1</a></p>
<p><a href="[Link] Email</a></p>
<p><a href="[Link] Us</a></p>
<h3 id="section1">Section 1</h3>
</body>
</html>
3. Embedding Images
3.1 The <img> Tag
Used to display images.
Self-closing tag.
Syntax:
<img src="[Link]" alt="Description of image"
width="300" height="200">
3.2 Important Attributes
src → path to the image
alt → text shown if image fails to load (important for
accessibility)
width / height → resize image
title → tooltip text
4. Adding Multimedia
4.1 Audio (<audio> Tag)
Used to embed sound files like MP3, WAV, OGG.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Attributes:
controls → shows play/pause buttons
autoplay → plays automatically
loop → repeats
muted → starts muted
4.2 Video (<video> Tag)
Used to embed MP4, WebM, OGG videos.
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Useful Attributes:
controls
autoplay
poster="[Link]" → image shown before play
loop
muted
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2>Image Example</h2>
<img src="[Link]" alt="Beautiful Nature" width="300">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Multimedia Example</title>
</head>
<body>
<h2>Audio</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<h2>Video</h2>
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
5. Creating Tables
5.1 Basic Table Structure
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Tags used:
<table>→ table container
<tr> → table row
<th> → header cell (bold & centered by default)
<td> → normal data cell
6. Structuring Tables
Tables can be divided into:
o <thead> → table header section
o <tbody> → table body section
o <tfoot> → footer section
Example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>20</td>
</tr>
</tbody>
</table>
7. Table Formatting
7.1 Border
<table border="1">
7.2 Cell Padding & Spacing
<table cellpadding="10" cellspacing="5">
7.3 Width & Alignment
<table width="80%" align="center">
7.4 Background Color
<td bgcolor="lightblue">Data</td>
8. Merging Cells
8.1 Merging Columns → colspan
<td colspan="2">Merged Column</td>
8.2 Merging Rows → rowspan
<td rowspan="3">Merged Row</td>
9. Adding Captions to a Table
A caption gives a title to the table.
<table border="1">
<caption>Student Data Table</caption>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Riya</td>
<td>85</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<title>Merged Table Example</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<th colspan="3">Employee Details</th>
</tr>
<tr>
<td rowspan="2">A101</td>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Department</td>
<td>Sales</td>
</tr>
</table>
</body>
</html>