WEB PROGRAMMING (CSC2248)

Unit 1: Client-side technologies (Part 1: HTML)

Combinations: MCsE & PCsE

Year 2, Semester 2
2024-2025 academic year
Module Facilitation Team:
1. Dr Mathias NDUWINGOMA
2. Albert NGIRUWONSANGA

MARCH 6, 2025
UNIVERSITY OF RWANDA-COLLEGE OF EDUCATION
Introduction

Web development is an essential skill in today’s digital era, with a rapidly growing demand for
dynamic, interactive, and user-friendly websites. The web development process is typically
divided into two main parts: client-side and server-side technologies. Understanding how these
technologies work together to build and maintain websites is crucial for anyone looking to pursue
a career in web development. This module of Web Programming (CSC2248) covers key concepts
and tools that define modern web development, such as HTML, CSS, JavaScript, PHP, MySQL,
jQuery, Laravel, Bootstrap, Joomla, and WordPress.

Client-side technologies are responsible for how a website looks and behaves in a user's browser.
HTML (HyperText Markup Language) forms the skeleton of a website, defining its structure,
while CSS (Cascading Style Sheets) ensures that the website is visually appealing by controlling
the layout, fonts, colors, and design. JavaScript, on the other hand, adds interactivity to the site,
enabling actions like form submissions, animations, and dynamic content updates without
refreshing the page. Together, these three technologies are the backbone of every website and are
essential for creating a responsive and engaging user experience.

Server-side technologies handle the logic and data storage of a website, processing requests from
users and interacting with databases. PHP is a widely-used server-side scripting language that
allows developers to create dynamic content and interact with databases. MySQL, a popular
relational database management system, stores and manages data in an organized way, ensuring
fast access and retrieval of information. By combining PHP with MySQL, developers can build
powerful and data-driven websites, such as e-commerce platforms and content management
systems, which require regular updates and secure data handling.

Web development frameworks are pre-built libraries and tools that simplify and speed up the
development process. jQuery, a JavaScript library, makes it easier to write and manage JavaScript
code by providing a set of pre-written functions. It also ensures cross-browser compatibility and
simplifies tasks like DOM manipulation and event handling. Laravel is a PHP framework designed
to streamline the development of complex web applications, providing features like routing,
authentication, and database management out-of-the-box. Bootstrap, a front-end framework, helps

Page 1 of 43
developers create responsive and mobile-first web designs quickly, with a variety of pre-designed
templates, components, and layouts. These frameworks allow developers to focus on building
features rather than reinventing the wheel for common tasks.

Content Management Systems (CMS) like Joomla and WordPress enable users to create and
manage websites without requiring extensive programming knowledge. Joomla is a flexible CMS
with a strong emphasis on content organization, making it suitable for complex websites with
multiple content types. It offers a variety of extensions and templates to customize the site’s
functionality and appearance. WordPress, on the other hand, is the most popular CMS worldwide,
known for its user-friendly interface, extensive plugin ecosystem, and vast community support.
WordPress allows developers to create blogs, portfolios, e-commerce sites, and more with ease.
These CMS platforms make web design accessible and scalable, empowering individuals and
businesses to maintain their online presence effectively.

This module is composed of four units, namely:

• Unit 1: Client-Side Technologies (HTML, CSS, JavaScript)

• Unit 2: Server-Side Technologies (PHP, MySQL)
• Unit 3: Web Development Frameworks(jQuery, Laravel, Bootstrap)
• Unit 4: Web Design with Content Management Systems (Joomla, Wordpress)

Page 2 of 43
Table of Contents
Unit 1: Client-side technologies (Part 1: HTML) ..............................................................................4
1. 1. Basic Structure of an HTML Document ...............................................................................4
1.1.1. Explanation of the HTML main parts .............................................................................5
1.2. Categories of HTML tags .....................................................................................................6
1.2.1. Empty tags ..................................................................................................................6
1.2.2. Structural Tags.............................................................................................................9
1.2.3. Text Formatting Tags ....................................................................................................9
1.2.4. List Tags .................................................................................................................... 11
1.2.5. Link and Media Tags ................................................................................................... 12
1.2.6. Table Tags.................................................................................................................. 17
1.2.7. Form Tags .................................................................................................................. 21
1.2.8. Embedded Content Tags ............................................................................................ 23
1.2.9. Semantic Tags ........................................................................................................... 25
1.2.10. Metadata Tags ......................................................................................................... 28
1.2.11. Style and Script Tags ................................................................................................ 30
1.3. HTML colors, background Color and Image Usage in Web Design....................................... 36
1.3.1. HTML Colors ............................................................................................................. 36
1.3.2. HTML background color and background image .......................................................... 39
1.4. HTML webpage with more than one form .......................................................................... 39
1.5. HTML Comments ............................................................................................................. 40
1.6. Using Mailto:.................................................................................................................... 40
1.6.1. Basic Usage .............................................................................................................. 42
1.6.2. Advanced Usage (Pre-filling Subject & Body) ............................................................... 42
References .................................................................................................................................. 43

Page 3 of 43
 Unit 1: Client-side technologies (Part 1: HTML)
HTML stands for HyperText Markup Language. It is the standard language used to create and
design web pages and web applications. HTML structures the content on the web using a system
of elements and tags, which tell the browser how to display text, images, videos, links, and other
content.

➢ HyperText refers to the text that is linked to other text. In web pages, hyperlinks allow
users to navigate between different pages or sections of a page.
➢ Markup refers to the tags and instructions used to structure content. HTML uses tags to
markup text, images, tables, and other elements.

HTML is essential for building websites, and it is often used in combination with CSS (Cascading
Style Sheets) for styling and JavaScript for functionality.

1. 1. Basic Structure of an HTML Document

Example of a basic HTML document:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>My Web Page</title>
7 </head>
8 <body>
9 <h1>Welcome to My Web Page</h1>
10 <p>This is a paragraph of text on my page.</p>
11 <a href="https://www.google.com">Visit Example</a>
12 </body>
13 </html>
14

Page 4 of 43
1.1.1. Explanation of the HTML main parts

1) <!DOCTYPE html>
Declares the document type and version of HTML (HTML5 in this case).

2) <html lang="en">
The root element of the document that wraps all the content, with lang="en" indicating the
language is English.

3) <head>
It contains metadata about the document like the character set, viewport settings, and the title of
the page.

4) <meta charset="UTF-8">
Defines the character encoding for the page (UTF-8 is common and supports most characters).

5) <meta name="viewport" content="width=device-width, initial-scale=1.0">

It makes the page responsive, scaling it for different devices (such as smartphones). This <meta>
tag ensures that the webpage is displayed correctly on mobile devices, where the page’s layout
adapts to the screen width, and the zoom level is set to 1 (i.e., no zoom). It’s particularly
important for creating responsive web designs that work well on all screen sizes.

The code <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML

is used to control the layout and scaling of a webpage on mobile devices. The following briefly
explain what each part of it means:
• <meta> tag: This defines metadata about the webpage (data about the page that isn’t
displayed directly on the page).
• name="viewport": This specifies that the meta tag is providing instructions to the
viewport (the visible area of the web page on a device’s screen).
• content="width=device-width": This sets the width of the viewport to be the same as the
device's screen width, which ensures that the page scales properly and looks good on
different screen sizes (like phones, tablets, and desktops).

Page 5 of 43
 • initial-scale=1: This sets the initial zoom level of the page to 1 (100% of the original size).
It prevents the page from being zoomed in or out by default when loaded on mobile devices.

6) <title>
Specifies the title of the web page, which appears in the browser's title bar or tab.

7) <body>
Contains the visible content of the web page, such as text, images, and links.

8) <h1>: Represents a heading (largest in size).

9) <p>: Represents a paragraph.
10) <a href="https://www.google.com">: Creates a hyperlink to another web page or URL.

1.2. Categories of HTML tags

HTML tags are used to structure and display content on web pages. These tags can be categorized
based on their purpose and how they function within the document. The following pages highlight
the main types of HTML tags:

1.2.1. Empty tags

HTML tags can be empty or containers tags:

• Empty or opening container tags can include other HTML elements known as attributes,
which are special codes that modify the tags.
Example: <HR SIZE=2 ALIGN=LEFT WIDTH="50%">
• Containers are tag types that consist of both a beginning tag and an ending tag.

Empty tags are elements in HTML that do not contain any content between an opening and closing
tag. These tags are typically self-closing and don't require a closing tag. They also serve specific
purposes such as creating line breaks, embedding images, or linking external resources. In modern
HTML (HTML5), these tags are typically written without a closing slash.

The following are a few examples of empty tags in HTML:

a) <img> (Image Tag)

Page 6 of 43
The <img> tag is used to embed images in a webpage. It does not have a closing tag, and instead,
it includes attributes such as src (source) and alt (alternative text).
Example:
<img src="image.jpg" alt="Description of Image" height= width=>

b) <br> (Line Break)

The <br> tag is used to insert a line break, creating a new line in the text. It does not require a
closing tag.

Example:
<p>This is a paragraph.<br>And this text appears on a new line.</p>

c) <hr> (Horizontal Rule)

The <hr> tag creates a horizontal line (or rule) across the page. It is often used to separate content.

Example:
<hr>

d) <meta> (Metadata Tag)

The <meta> tag is used to provide metadata (data about data) about the document, such as the
character set, author, or description. It does not have content and is self-closing.

Example:
<meta charset="UTF-8">

e) <link> (Link Tag)

The <link> tag is used to link external resources like stylesheets (CSS) to the document. It does
not contain content and is self-closing.

Example: <link rel="stylesheet" href="styles.css">

f) <input> (Input Field)

Page 7 of 43
The <input> tag is used to create various types of interactive controls in a form (like text boxes,
checkboxes, radio buttons). It does not have a closing tag and is self-contained.

Example:
<input type="text" name="username">

g) <area> (Image Map Area)

The <area> tag defines clickable areas in an image map. It is self-closing.
Example:
<img src="Email-1.jpg" usemap="#imageMap" alt="Image Map Example">
<map name="imageMap">
<area shape="rect" coords="34,44,270,350" href="https://www.google.com/" alt="Example"
target="_blank">
</map>

Meaning of used tags and attributes in the above example:

• <img> tag: You need an image with the usemap attribute that references the <map>
element by its name attribute.
• The usemap="#imageMap" links the image to the image map defined by the <map> tag.
• <map> tag: This tag is a container for the clickable areas that define regions of the image.
Each <area> element inside the <map> tag defines a specific clickable area.
• The <area> tag: This defines a clickable area inside the image map. The shape="rect"
specifies that the area is rectangular, and coords="34,44,270,350" defines the coordinates
of the rectangle on the image. The href attribute provides the URL to navigate to, and
target="_blank" makes the link open in a new tab.

h) <source> (Media Source)

The <source> tag is used inside <audio> and <video> elements to specify multiple media
resources. It is self-closing.

Example:
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>

Page 8 of 43
 1.2.2. Structural Tags

These tags define the overall structure and layout of an HTML document.

• <html>: The root element of an HTML document. All other HTML elements are nested
inside it.
• <head>: Contains metadata, links to external resources like stylesheets, and other settings
for the document.
• <body>: Contains the content of the document that is visible to users (such as text, images,
and links).
• <header>: Represents introductory content or a navigational section of a document.
• <footer>: Defines a footer for a section or page, often containing copyright or contact
information.
• <main>: Specifies the main content of the document, unique to the document and relevant
to the specific page.
• <section>: Represents a generic section of content within the document.
• <article>: Represents a self-contained piece of content (e.g., blog post, news article).
• <nav>: Defines a section of navigation links.

1.2.3. Text Formatting Tags

These tags are used to format text and control its appearance.

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings, where <h1> is the most important and
largest, and <h6> is the least important and smallest.
• <p>: Paragraph, used to group text into blocks.
• <b>: Bold text (for styling, <strong> is preferred for emphasizing text).
• <i>: Italic text (for styling, <em> is preferred for emphasis).
• <strong>: Represents strong emphasis (usually rendered as bold).
• <em>: Represents emphasized text (usually rendered as italic).
• <u>: Underlined text.
• <br>: Line break (inserts a line break between text).
• <blockquote>: A section of text quoted from another source.
• <code>: Represents computer code or commands.
• <mark>: Used to highlight parts of text.

Example of HTML <blockquote> tag:

1 <!DOCTYPE html>

Page 9 of 43
 2 <html>
3 <head>
4 <title>Using Script tag</title>
5 </head>
6 <body>
7 <p>
8 A computer is main made of:
9 <blockquote>Hardware: Which refers to the physical components of a computer
10 or electronic system, such as the CPU, memory, and input/output devices. It is the tangible part
11 that enables the functioning of software and performs computational tasks.</blockquote>
12 <blockquote>Software: Which refers to the programs and applications that run on
13 a computer, enabling it to perform specific tasks. It is the intangible set of instructions that
14 directs hardware to execute operations.</blockquote></p>
15 <p>
16 Examples of computer hardware:
17 <blockquote>Keyboard</blockquote>
18 <blockquote>Mouse</blockquote>
19 <blockquote>Screen</blockquote>
20 <blockquote>System unit</blockquote>
21 </p>
22 </body>
23 </html>

Example of HTML <code> tag:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <p>To display a message in JavaScript, you can use the following code:</p>
8 <pre><code>document.write('Hello, World!');</code></pre>
9 </body>
10 </html>
11

Page 10 of 43
 In this example:

• The <code> tag is used to display the JavaScript code, indicating it's a piece of code.
• The <pre> tag is used around the <code> tag to preserve formatting (like spaces or line
breaks) when displaying the code.

Example of HTML <mark> tag:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
6 </head>
7 <body>
8 <p>
9 Click Insert and then choose the elements you want from the different galleries.
10 <mark>Themes and styles also help keep your document coordinated. When you click Design
11 and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new
12 theme.</mark> When you apply styles, your headings change to match the new theme. Save
13 time in Word with new buttons that show up where you need them. To change the way a picture
14 fits in your document, click it and a button for layout options appears next to it.
15 </body>
16 </html>

1.2.4. List Tags

These tags are used for creating ordered (numbered) or unordered (bulleted) lists.
• <ul>: Unordered list (bulleted list).
• <ol>: Ordered list (numbered list).
• <li>: List item, used inside <ul> or <ol>.

Example of HTML list tags:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Lists in HTML</title>
5 </head>

Page 11 of 43
 6 <body>
7 <ul>
8 <li>Year 1</li>
9 <ol>
10 <li>CSE</li>
11 <li>MPE</li>
12 <li>PCE</li>
13 </ol>
14 <li>Year 2</li>
15 <ol start="4" type="i">
16 <li>MCsE</li>
17 <li>PCsE</li>
18 <li>BCE</li>
19 <li>EBS</li>
20 </ol>
21 </ul>
22 </body>
23 </html>

For more details on using Start and Type attributes as in this example <OL type=a start=10> ,
refer to Table 1:

Table 1: Start and Type attributes in HTML list tags

Type Generated Style Examples

A Uppercase Letters A.B.C.D
a Lowercase Letters a.b.c.d.e
I Uppercase Romans numbers I.II.III.IV.
i Lowercase Romans numerals i.ii.iii.iv.
1 Arabic numerals 1.2.3.4.

1.2.5. Link and Media Tags

These tags are used to add links and media content (like images, audio, and video).

• <a>: Anchor tag used to create hyperlinks.

• <img>: Embeds an image in the document.
• <audio>: Embeds audio files (with a <source> element for different formats).
• <video>: Embeds video files (with <source> elements for different formats).

Page 12 of 43
 • <iframe>: Embeds another HTML page within the current page (like embedding a YouTube
video).
• <source>: Defines multiple media resources (used with <video> and <audio> tags).

Example of media tags:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Multimedia tags</title>
5 </head>
6 <body>
7 <h1>Video Example</h1>
8 <video width="600" controls autoplay muted>
9 <source src="Bayi Bayi Ingona.mp4" type="video/mp4">
10 </video>
11 <p>
12 <h1>Audio Example</h1>
13 <audio width="400" controls>
14 <source src="3 Doors Down- Here Without You.mp3" type="audio/mp3">
15 </audio>
16 </p>
17 <p>
18 <h1>Image Example</h1>
19 <img src="Email-1.jpg" width="400" height="250">
20 </p>
21 <p>
22 <h1>iframe Example</h1>
23 <iframe width="560" height="315"
24 src="https://www.youtube.com/embed/xemRQ6JgJW0?si=AiKmuKCwcqyuok4f"
25 title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
26 encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-
27 cross-origin" allowfullscreen></iframe>
28 </p>
29 </body>
30 </html>

Page 13 of 43
Figure 1: The <video> attributes

How to embed a YouTube video to your web page?

1) On a computer, go to the YouTube video or playlist you want to embed.

2) Click SHARE .
3) From the list of Share options, click Embed.
4) From the box that appears, copy the HTML code.
5) Paste the code into your HTML web page.

Example of link tags:

<a href="https://www.example.com" target="_blank">Open in new tab</a>

<a href="https://www.example.com" target="_self">Open in same tab</a>
<a href="https://www.example.com" target="_parent">Open in parent frame</a>
<a href="https://www.example.com" target="_top">Open in full window</a>

The target attribute in the <a> (anchor) tag specifies where the linked document will open. The
most common values used with target="_blank" are:

• _blank: Opens the linked document in a new window or tab.

• _self: Opens the link in the same window or tab (this is the default behavior).
• _parent: Opens the link in the parent frame (if the link is within an iframe).
• _top: Opens the link in the full body of the window, replacing any frames.

Page 14 of 43
 • framename: You can also specify the name of a particular frame (if your page is divided
into frames). The link will open in the specified frame.

The index.html webpage shown in Figure 2 uses <frameset> and <frame> tags to display 4
webpages at the same time. The topframe.html is shown in the header of the page, the
menuframe.html serves as the navigation menu on the left, the mainframe.html displays the main
content, and finally, the bottomframe.html is used to show the copyright information in the footer
of the index.html page.

Figure 2: index.html webpage which uses <frameset> and <frame> tags

The following are sample codes for all webpages associated with <frameset> and <frame> html4
tags.

Codes for index.html webpage

<html>
<head>
<title>Using frames</title>
<frameset rows="17%,75%,8%" border="0">
<frame name="top" src="topframe.html" scrolling="no">
</frame>
<frameset cols="12%,*">
<frame name="menu" src="menuframe.html">

Page 15 of 43
 </frame>
<frame name="main" src="mainframe.html">
</frame>
</frameset>
<frame name="bottom" src="bottomframe.html" scrolling="no">
</frame>
</frameset>
</head>
<body>
</body>
</html>
Codes for topframe.html webpage
<html>
<head>
<title>Top frame</title>
</head>
<body>
<TABLE scrolling="true" style="background-color:white;font-family: Arial,sans
seriff;color:blue;">
<tr><td>
<img src="UR-Logo.jpg" WIDTH=200 height=80></td>
<td width="1100"><B><font size=6><center>WEB PROGRAMMING (CSC2248)
MODULE</center></font></b></td>
<td align=topright><B>UNIVERSITY OF RWANDA</B><br><B>COLLEGE OF
EDUCATION</B><br><B>EASTERN PROVINCE</B><BR><B>KAYONZA
DISTRICT</B><BR><B>GAHINI SECTOR</B></td></tr></table>
</body>
</html>
Codes for mainframe.html webpage
<html>
<head>
<title>Main frame</title>
</head>
<body background="images.png">
</body>
</html>
Codes for menuframe.html webpage
<html>
<body bgcolor=silver>
<table style="padding:40px;line-height: 2;">
<tr><td><a href="mainframe.html" target="main">Home</a></td></tr>
<tr><td><a href="iframe.html" target="main">iFrame</a></td></tr>
<tr><td><a href="Form.html" target="main">Form</a></td></tr>
<tr><td><a href="blockquote.html" target="main">Blockquote</a></td></tr>
</table>
</html>

Page 16 of 43
 Codes for bottomframe.html webpage
<html>
<head>
<title>Bottom</title>
</head>
<body bgcolor="black">
<center style="padding:8px;color:white;font-family: Arial,sans seriff;">
UR-CE &copy; 2025 All rights reserved
</center>
</body>
</html>

Attention:

1. The <frameset> tag defines a layout for displaying multiple frames in a browser window,
replacing the <body> tag. The <frame> tag is used within a <frameset> to display
individual web pages inside each frame. Both tags are removed in HTML5 in favor of using
<iframe> with modern layout techniques.
2. To display various webpages in a browser window in HTML5, we use <iframe> tag.

Example of using <iframe> tag:

<!DOCTYPE html>
<html>
<head>
<title>Main frame</title>
</head>
<body>
<iframe src="https://ur.ac.rw/" width="600" height="400"></iframe>
<iframe src="https://ce.ur.ac.rw/" width="600" height="400"></iframe>
</body>
</html>

1.2.6. Table Tags

These tags are used to create tables and organize data in rows and columns.

• <table>: Defines the table.

• <tr>: Defines a table row.
• <th>: Defines a table header cell.

Page 17 of 43
 • <td>: Defines a table data cell.
• <thead>: Groups the header content in a table.
• <tbody>: Groups the body content in a table.
• <tfoot>: Groups the footer content in a table.
• <caption>: Defines a caption for the table.

The following example highlights use of table tags:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML Table Example</title>
7 <style>
8 table {
9 width: 50%;
10 border-collapse: collapse;
11 margin: 20px 0;
12 }
13 th, td {
14 padding: 10px;
15 text-align: left;
16 border: 1px solid #ddd;
17 }
18 th {
19 background-color: #f2f2f2;
20 }
21 caption {
22 font-size: 1.5em;
23 margin-bottom: 10px;
24 }
25 </style>
26 </head>
27 <body>
28
29 <table>
30 <caption>Students Information</caption>
31 <thead>
32 <tr>

Page 18 of 43
33 <th>ID</th>
34 <th>Name</th>
35 <th>Combination</th>
36 <th>Year of Study</th>
37 </tr>
38 </thead>
39 <tbody>
40 <tr>
41 <td>1</td>
42 <td>Jean AKIMANA NIYONGIRA</td>
43 <td>MCsE</td>
44 <td>2</td>
45 </tr>
46 <tr>
47 <td>2</td>
48 <td>Gerard CYUBAHIRO</td>
49 <td>PCsE</td>
50 <td>2</td>
51 </tr>
52 <tr>
53 <td>3</td>
54 <td>Brigite NIYOMUHOZA</td>
55 <td>MCsE</td>
56 <td>2</td>
57 </tr>
58 </tbody>
59 <tfoot>
60 <tr>
61 <td colspan="3"><strong>Module title: Web programming</strong></td>
62 <td>10 CU</td>
63 </tr>
64 </tfoot>
65 </table>
66
67 </body>
68 </html>

Example of <table> tag without using CSS codes, <thead>, <tbody> and <tfoot> tags:

1 <!DOCTYPE html>

Page 19 of 43
 2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML Table Example</title>
7 </head>
8 <body>
9 <table border="2" cellspacing="3" cellpadding="4">
10 <caption>Students Information</caption>
11 <tr>
12 <td>ID</td>
13 <td>Name</td>
14 <td>Combination</td>
15 <td>Year of Study</td>
16 </tr>
17 <tr>
18 <td>1</td>
19 <td>Jean AKIMANA NIYONGIRA</td>
20 <td>MCsE</td>
21 <td>2</td>
22 </tr>
23 <tr>
24 <td>2</td>
25 <td>Gerard CYUBAHIRO</td>
26 <td>PCsE</td>
27 <td>2</td>
28 </tr>
29 <tr>
30 <td>3</td>
31 <td>Brigite NIYOMUHOZA</td>
32 <td>MCsE</td>
33 <td>2</td>
34 </tr>
35 <tr>
36 <td colspan="3"><strong>Module title: Web programming</strong></td>
37 <td>10 CU</td>
38 </tr>
39 </table>
40 </body>
41 </html>

Page 20 of 43
 Note: The above example uses <table> tag with cellpadding and cellspacing attributes:
1) cellspacing="": Specifies the space between table cells. It controls the distance between
the borders of adjacent cells.
2) cellpadding="": Specifies the space between the content of a table cell and its border. It
adds padding inside each cell.

1.2.7. Form Tags

These tags are used to create forms for user input and interaction.

• <form>: Defines an HTML form for user input.

• <input>: Creates various types of input fields (text, checkbox, radio, date, file, password,
etc.).
• <textarea>: Defines a multi-line input field for text.
• <select>: Creates a dropdown list.
• <option>: Defines an option in a dropdown list or select menu.
• <button>: Defines a clickable button.
• <label>: Defines a label for an input element.
• <fieldset>: Groups related elements in a form.
• <legend>: Defines a caption for a <fieldset> element.

Example of HTML <form> tag and its related tags:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Form</title>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
8 </head>
9 <body>
10 <form action="" method="post">
11 <h1>Form information</h1>
12 <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="8"
13 width="100%">Welcome to our webpage</MARQUEE>
14 <fieldset>
15 <legend>Fill this information</legend>

Page 21 of 43
16 <label for="fname">First name</label>
17 <input type="text" name="fname" required>
18 <label for="lname">Last name</label>
19 <input type="text" name="lname" required>
20 <label for="comb">Combination</label>
21 <input type="text" name="comb" placeholder="Enter Combination">
22 </fieldset>
23 <fieldset>
24 <legend>Choose Sex</legend>
25 <input type="radio" name="sex" checked>Male
26 <input type="radio" name="sex">Female
27 </fieldset>
28 <fieldset>
29 <legend>Hobbies</legend>
30 <input type="checkbox" name="hobby">Reading
31 <input type="checkbox" name="hobby">Painting
32 <input type="checkbox" name="hobby" checked>Gardening
33 <input type="checkbox" name="hobby">Gaming
34 </fieldset>
35 <fieldset>
36 <legend>Other form tags</legend>
37 Choose your Department<select name="dpt">
38 <option >MSPE</option>
39 <option selected>HLE</option>
40 <option>SNE</option>
41 <option>ECE</option>
42 </select>
43 <input type="date" name="tdate">
44 <input type="time" name="">
45 <input type="file" name="file">
46 <input type="password" name="pw" placeholder="Enter password">
47 </fieldset>
48 <fieldset>
49 <legend>Leave comments</legend>
50 <textarea wrap="virtual" name="Comments" rows=4 cols=80
51 MAXLENGTH=120></textarea>
52 </fieldset>
53 <p>
54 For more information
55 <a href="mailto:[email protected]">E-mail me</a>

Page 22 of 43
56 </p>
57 <button>Submit</button>
58 </form>
59 </body>
60 </html>

Note:
1. You can refer to highlighted tags for different form elements.
2. You can change the value of direction attribute to right, left, up, down and observe the
change.

1.2.8. Embedded Content Tags

These tags are used to embed content from external sources.

• <object>: Embeds external resources like Flash, PDF, or Java applets.

• <embed>: Embeds external media (such as audio, video, or interactive content).
• <picture>: Defines a container for different image sources, used for responsive images.
• <canvas>: Provides a space to draw graphics via JavaScript.

Example using <object> HTML tag:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Using Object Tag Example</title>
7 </head>
8 <body>
9 <h1>Embedded PDF Document</h1>
10
11 <object data="samplePDF.pdf" type="application/pdf" width="800" height="400">
12 <p>Your browser does not support PDF viewing. You can <a
13 href="samplePDF.pdf">download the PDF file</a> instead.</p>
14 </object>
15
16 </body>
17 </html>
Page 23 of 43
 Example using <canvas> tag:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Canvas</title>
5 </head>
6 <body>
7 <h1>The canvas element</h1>
8 <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
9 <script>
10 var c = document.getElementById("myCanvas");
11 var ctx = c.getContext("2d");
12 ctx.fillStyle = "#FFFF00";
13 ctx.fillRect(0, 0, 80, 100);
14 </script>
15 </body>
16 </html>

Example using <embed> tag:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Using Embed Tag Example</title>
7 </head>
8 <body>
9 <h1>Embedded Video</h1>
10 <embed src="Bayi Bayi Ingona.mp4" type="video/mp4" width="600" height="400">
11 </body>
12 </html>

Page 24 of 43
 1.2.9. Semantic Tags

These tags add meaning to the content they wrap, improving accessibility and SEO (Search Engine
Optimization).

• <header>: Represents introductory content or navigation links. It contains the website title
(<h1>) and a navigation menu (<nav>).
• <nav>: Defines a section of navigation links. It is semantically used to group navigational
links together.
• <footer>: Represents the footer content of a document or section. It defines the footer
section of the page, often containing copyright information or links to legal pages.
• <main>: Specifies the main content of the document, which is central to the page. It ensures
that search engines and screen readers can identify the primary content of the page.
• <section>: Represents a section of related content. It is used to group related content.
Each section covers a topic, and another section covers another topic and so on.
• <article>: Represents an independent piece of content (like a blog post). Each article in the
section talks about different aspects of semantic.
• <aside>: Defines content that is indirectly related to the surrounding content (e.g., sidebar).
It provides links to related articles.
• <figure>: Used for self-contained content like images, charts, or diagrams. The
<figcaption> element is used to provide a caption or description for the image.

Example:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Semantic HTML Example</title>
7 </head>
8 <body>
9 <!-- Header section -->
10 <header>
11 <h1>My Amazing Blog</h1>
12 <nav>
13 <a href="#home">Home</a>
14 <a href="#about">About</a>
15 <a href="#contact">Contact</a>

Page 25 of 43
16 </nav>
17 </header>
18 <!-- Main content -->
19 <main>
20 <!-- First section with article -->
21 <section>
22 <h2>Introduction to Semantic HTML</h2>
23 <article>
24 <h3>What is Semantic HTML?</h3>
25 <p>Semantic HTML refers to the use of HTML tags that provide meaning to the content
26 they enclose, improving accessibility and SEO.</p>
27 </article>
28 <article>
29 <h3>Why is it Important?</h3>
30 <p>Using semantic tags helps search engines understand the content structure of the
31 page, which enhances the page's visibility in search results.</p>
32 </article>
33 </section>
34
35 <!-- Another section with article -->
36 <section>
37 <h2>Benefits of Using Semantic HTML</h2>
38 <article>
39 <h3>Improved Accessibility</h3>
40 <p>Semantic tags make it easier for screen readers to interpret and read the content aloud
41 to users with disabilities.</p>
42 </article>
43 <article>
44 <h3>Better SEO</h3>
45 <p>Using correct semantic elements improves the chances of your webpage ranking
46 better on search engines.</p>
47 </article>
48 </section>
49
50 <!-- Aside section (sidebar) -->
51 <aside>
52 <h3>Related Articles</h3>
53 <ul>
54 <li><a href="#article1">Understanding HTML5</a></li>
55 <li><a href="#article2">Advanced CSS Styling</a></li>

Page 26 of 43
56 <li><a href="#article3">JavaScript Basics</a></li>
57 </ul>
58 </aside>
59
60 <!-- Figure and figcaption for image -->
61 <figure>
62 <img src="image.jpg" alt="An image representing semantic HTML">
63 <figcaption>Semantic HTML tags help structure content for better accessibility
64 </figcaption>
65 </figure>
66 </main>
67 <!-- Footer section -->
68 <footer>
69 <p>&copy; 2025 Albert. All rights reserved.</p>
70 </footer>
71 </body>
72 </html>

Page 27 of 43
 Why Use Semantic Tags?

• Accessibility: Screen readers and other assistive technologies can interpret the structure of
a page better when semantic tags are used. This improves the user experience for
individuals with disabilities.
• SEO (Search Engine Optimization): Semantic HTML helps search engines understand the
content and its structure, which can improve the page’s ranking in search results.
• Readability: Using semantic tags improves the readability and maintainability of the code
by clearly defining the purpose of different parts of the page.

1.2.10. Metadata Tags

These tags provide metadata about the document, such as character encoding, author, and
keywords.

• <meta>: Provides metadata about the document (like charset or viewport settings).
• <title>: Defines the title of the document (appears in the browser tab).
• <base>: Specifies a base URL for relative URLs in the document.

Example using <base> tag:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Base Tag Example</title>
7 <!-- Base URL specified for all relative URLs in the document -->
8 <base href="C:\xampp\htdocs\Project\">
9 </head>
10 <body>
11 <h1>Welcome to My Website</h1>
12 <p>Click on the link below to go to the About page:</p>
13 <!-- Relative URL, resolved relative to the base URL -->
14 <a href="about.html">About Us</a>
15
16 <p>View the image from the following link:</p>

Page 28 of 43
17 <!-- Relative URL, resolved relative to the base URL -->
18 <img src="images/sample.jpg" alt="Sample Image">
19 <p>Link to an external CSS file:</p>
20 <!-- Relative URL, resolved relative to the base URL -->
21 <link rel="stylesheet" href="styles/main.css">
22 </body>
23 </html>

Explanation of the above example:

<base href="C:\xampp\htdocs\Project\">: This tag specifies that all relative URLs in the
document will be considered relative to C:\xampp\htdocs\Project\. This means:

• The link <a href="about.html"> will point to C:\xampp\htdocs\Project\about.html.

• The image <img src="images/sample.jpg"> will point to
C:\xampp\htdocs\Project\images\sample.jpg.
• The stylesheet <link href="styles/main.css"> will point to
C:\xampp\htdocs\Project\styles\main.css.
• Relative URLs: Without the <base> tag, relative URLs are resolved based on the current
document’s URL. But with the <base> tag, all relative URLs are resolved relative to the
URL provided in the href attribute of the <base> tag.

Notes:

1) Placement: The <base> tag must be placed inside the <head> section of the document,
before any relative URLs are used.
2) One <base> tag per document: Only one <base> tag should be used in a document. If
multiple <base> tags are defined, only the last one will take effect.
3) Targeting links: You can also use the target attribute in the <base> tag to specify a default
target for all links in the document. For example:
<base href=" C:\xampp\htdocs\Project\" target="_blank">

Page 29 of 43
 1.2.11. Style and Script Tags

These tags are used to define styles and functionality in the document.

• <style>: Used to define CSS styles within the HTML document.

• <link>: Links to an external CSS stylesheet.
• <script>: Defines or links to JavaScript code.

Example using <style> tag:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Using Script tag</title>
5 <style type="text/css">
6 body{
7 margin:110px 120px 110px 110px;
8 color: blue;
9 line-height: 1.5;
10 font-size: 20px;
11 }
12 </style>
13 </head>
14 <body>
15 Video provides a powerful way to help you prove your point. When you click Online
16 Video, you can paste in the embed code for the video you want to add. You can also type a
17 keyword to search online for the video that best fits your document.
18 </body>
19 </html>

Page 30 of 43
 Example using <link> tag:

In this example, you will need two separate files: file.html and styles.css. First, write your CSS
code and save it as styles.css. Then, create the HTML structure and save it as file.html. In the
HTML file, link the external CSS file using the <link> tag.

Sample codes for a CSS file:

1 body{
2 margin:110px 120px 110px 110px;
3 color: blue;
4 line-height: 1.5;
5 font-size: 20px;
6 }
7 body div{
8 background-color: silver;
9 }

Sample codes for file.html file:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Using link tag</title>
5 <link rel="stylesheet" type="text/css" href="styles.css">
6 </head>
7 <body>
8 <div>
9 Video provides a powerful way to help you prove your point. When you click
10 Online Video, you can paste in the embed code for the video you want to add. You can also type
11 a keyword to search online for the video that best fits your document.
12 </div>
13 </body>
14 </html>

Page 31 of 43
 Example using <script> tag:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Using Script tag</title>
5 <script type="text/javascript">
6 var a="Hello javascript";
7 document.write(a);
8 </script>
9 </head>
10 <body>
11 </body>
12 </html>

Example of semantic tags using CSS

1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Semantic HTML Example</title>
8 <style>
9 body {
10 font-family: Arial, sans-serif;
11 margin: 20px;
12 line-height: 1.6;
13 }
14 header, footer {
15 background-color: #f4f4f4;
16 padding: 10px;
17 }
18 header h1 {
19 margin: 0;
20 }
21 nav a {
22 margin: 0 10px;
23 }
24 section {
25 margin: 20px 0;
26 }
27 article {

Page 32 of 43
28 background-color: #e9e9e9;
29 padding: 15px;
30 margin-bottom: 10px;
31 }
32 aside {
33 background-color: #f9f9f9;
34 padding: 10px;
35 margin-top: 20px;
36 }
37 footer {
38 text-align: center;
39 margin-top: 20px;
40 }
41 figure {
42 margin: 10px 0;
43 }
44 figcaption {
45 text-align: center;
46 font-style: italic;
47 }
48 </style>
49 </head>
50
51 <body>
52
53 <!-- Header section -->
54 <header>
55 <h1>My Amazing Blog</h1>
56 <nav>
57 <a href="#home">Home</a>
58 <a href="#about">About</a>
59 <a href="#contact">Contact</a>
60 </nav>
61 </header>
62
63 <!-- Main content -->
64 <main>
65 <!-- First section with article -->
66 <section>
67 <h2>Introduction to Semantic HTML</h2>
68 <article>
69 <h3>What is Semantic HTML?</h3>
70 <p>Semantic HTML refers to the use of HTML tags that provide meaning to the
71 content they enclose, improving accessibility and SEO.</p>
72 </article>
73 <article>

Page 33 of 43
 74 <h3>Why is it Important?</h3>
75 <p>Using semantic tags helps search engines understand the content structure of the
76 page, which enhances the page's visibility in search results.</p>
77 </article>
78 </section>
79
80 <!-- Another section with article -->
81 <section>
82 <h2>Benefits of Using Semantic HTML</h2>
83 <article>
84 <h3>Improved Accessibility</h3>
85 <p>Semantic tags make it easier for screen readers to interpret and read the content
86 aloud to users with disabilities.</p>
87 </article>
88 <article>
89 <h3>Better SEO</h3>
90 <p>Using correct semantic elements improves the chances of your webpage ranking
91 better on search engines.</p>
92 </article>
93 </section>
94
95 <!-- Aside section (sidebar) -->
96 <aside>
97 <h3>Related Articles</h3>
98 <ul>
99 <li><a href="#article1">Understanding HTML5</a></li>
100 <li><a href="#article2">Advanced CSS Styling</a></li>
101 <li><a href="#article3">JavaScript Basics</a></li>
102 </ul>
103 </aside>
104
105 <!-- Figure and figcaption for image -->
106 <figure>
107 <img src="image.jpg" alt="An image representing semantic HTML">
108 <figcaption>Semantic HTML tags help structure content for better accessibility
109 </figcaption>
110 </figure>
111 </main>
112
113 <!-- Footer section -->
114 <footer>
115 <p>&copy; 2025 My Amazing Blog. All rights reserved.</p>
116 </footer>
117
118 </body>
119 </html>

Page 34 of 43
Attributes used with <label> tag

The <label> tag in HTML is used to define a label for an <input> element or other form controls.
There are a number of attributes that allow you to associate labels with form elements, apply styles,
and improve accessibility, particularly for screen readers. The following highlights some common
attributes that can be used with the <label> tag:

1. for (Global Attribute)

Specifies which form element the label is associated with. The value of the for attribute should
match the id of the form control.

Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username">
2. form (Global Attribute)
Specifies the form the label belongs to, if there are multiple forms on the page.

Example:
<form id="myForm">
<label for="email" form="anotherForm">Email:</label>
</form>
3. id (Global Attribute)
Defines a unique identifier for the label element. This is often used for styling or JavaScript
purposes.

Example:
<label id="emailLabel" for="email">Email:</label>
4. accesskey (Global Attribute)
Specifies a shortcut key to activate or focus the label. The shortcut to access the input box is
Alt+P.

Example:
<label for="password" accesskey="p">Password:</label>
<input type="text" name="password" id="password">
5. class (Global Attribute)
Specifies one or more class names for the label, which can be used to apply styles or
JavaScript functionality.

Example:
<label for="username" class="form-label">Username:</label>
6. style (Global Attribute)
Used to apply inline CSS styles directly to the label.
Example:
<label for="email" style="color: red;">Email:</label>

Page 35 of 43
 7. title (Global Attribute)
Specifies extra information about the label, often shown as a tooltip when the user hovers over
it.

Example:
<label for="email" title="Enter your email address">Email:</label>
8. lang (Global Attribute)
Specifies the language of the label's content.

Example:
<label for="username" lang="en">Username:</label>
9. dir (Global Attribute)
Specifies the text direction for the label (left-to-right or right-to-left).

Example:
<label for="username" dir="rtl">‫اسم المستخدم‬:</label>

1.3. HTML colors, background Color and Image Usage in Web Design

1.3.1. HTML Colors

HTML colors are a vital part of web design and allow you to add color to your web pages. HTML
colors can be defined in multiple ways:

1. Basic Color Names

HTML supports a list of basic color names, such as red, green, blue, black, white, and more. These
colors are predefined, so you can simply use their names in your CSS or HTML code.

Example:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML Colors Example</title>
7 </head>
8 <body style="background-color: lightblue;">
9 <h1 style="color: red;">Hello, World!</h1>
10 <p style="color: green;">This is a green text.</p>

Page 36 of 43
11 </body>
12 </html>

2. Hexadecimal Color Codes

Hexadecimal (or hex) colors are a way to specify colors using a six-digit code. The code starts
with #, followed by six characters representing the RGB (Red, Green, Blue) values.

Example:
#FF0000 represents red.
#00FF00 represents green.
#0000FF represents blue.

Each pair of characters represents a color component in hexadecimal form (from 00 to FF).

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Hexadecimal Colors Example</title>
7 </head>
8 <body style="background-color: #f0f8ff;">
9 <h1 style="color: #ff6347;">Tomato Red Header</h1>
10 <p style="color: #32cd32;">Lime Green Text</p>
11 </body>
12 </html>

Page 37 of 43
 3. RGB (Red, Green, Blue) Colors

You can define colors using the RGB color model by specifying the values of red, green, and blue
components. Each value can range from 0 to 255.

Example:
rgb(255, 0, 0) represents red.
rgb(0, 255, 0) represents green.
rgb(0, 0, 255) represents blue.

Example:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>RGB Colors Example</title>
7 </head>
8 <body style="background-color: rgb(240, 248, 255);">
9 <h1 style="color: rgb(255, 99, 71);">Tomato Red Header</h1>
10 <p style="color: rgb(50, 205, 50);">Lime Green Text</p>
11 </body>
12 </html>
13

Page 38 of 43
 1.3.2. HTML background color and background image

<body bgcolor="silver">
<body background="rock.gif">

1.4. HTML webpage with more than one form

It is possible to have more than one form in a single webpage. In the following example, the
webpage contains two forms: a Login Form and a Sign-Up Form. The Login Form includes fields
for the user's Email and Password, along with a submit button. The Sign-Up Form, on the other
hand, includes fields for Name, Email, Password, and Confirm Password, also featuring a submit
button. Both forms use the POST method for submission, with the option to adjust the action
attribute to handle the form submissions. To visually separate the forms, a horizontal line (<hr>)
is used, ensuring a clear distinction between them.

Example of a webpage with more than one form:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Multiple Forms Example</title>
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
8 </head>
9 <body>
10 <h1>Welcome to Our Website</h1>
11 <!-- Login Form -->
12 <section>
13 <h2>Login</h2>
14 <form action="/login" method="POST">
15 <label for="login-email">Email:</label>
16 <input type="email" id="login-email" name="email" required><br><br>
17 <label for="login-password">Password:</label>
18 <input type="password" id="login-password" name="password" required><br><br>
19
20 <button type="submit">Login</button>
21 </form>

Page 39 of 43
22 </section>
23
24 <hr>
25
26 <!-- Sign-Up Form -->
27 <section>
28 <h2>Sign Up</h2>
29 <form action="/signup" method="POST">
30 <label for="signup-name">Name:</label>
31 <input type="text" id="signup-name" name="name" required><br><br>
32 <label for="signup-email">Email:</label>
33 <input type="email" id="signup-email" name="email" required><br><br>
34 <label for="signup-password">Password:</label>
35 <input type="password" id="signup-password" name="password" required><br><br>
36 <label for="signup-confirm-password">Confirm Password:</label>
37 <input type="password" id="signup-confirm-password" name="confirm-password"
38 required><br><br>
39 <button type="submit">Sign Up</button>
40 </form>
41 </section>
42 </body>
43 </html>

1.5. HTML Comments

HTML comments are written as:

<!- - comments are put here -->

1.6. Using Mailto:

mailto: is widely used in HTML5. It allows users to open their default email client and compose
an email with a single click.

Example using mailto:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
Page 40 of 43
 7 <p>
8 <a href="mailto:[email protected]">Send Email</a>
9 </p>
10 <p>
11 <a href="mailto:[email protected]?subject=Hello&body=This is a test
12 email.">Send Email</a>
13 </p>
14 <p>
15 <a
16 href="mailto:[email protected]?subject=Hello%20World&body=Line%201%0ALi
17 ne%202">
18 Send Email
19 </a>
20 </p>
21 </body>
22 </html>

Page 41 of 43
1.6.1. Basic Usage

<a href="mailto:[email protected]">Send Email</a>

When clicked, this will open the user's default email app with [email protected] as the
recipient.

1.6.2. Advanced Usage (Pre-filling Subject & Body)

You can pre-fill fields like subject, cc, bcc, and body:
<a href="mailto:[email protected]?subject=Hello&body=This is a test email.">Send
Email</a>

• subject=Hello → Fills the subject line.

• body=This is a test email. → Adds text in the email body.

Tip: Use %20 for spaces and %0A for new lines.

Example with spaces and line breaks:

<a
href="mailto:[email protected]?subject=Hello%20World&body=Line%201%0ALin
e%202">
Send Email
</a>

Note:

1. Check if an email client is installed. mailto: only works if you have a default email client
(like Outlook, Thunderbird, or Apple Mail) installed.
✓ On Windows: Open Settings → Apps → Default Apps.
✓ Look for Mail and set it to your preferred email app (Outlook, Thunderbird,
etc.).
2. Set a Default Email Client in Your Browser. Some browsers don’t automatically open email
clients. You may need to allow mailto: links manually.
✓ For Chrome: Open Gmail in Chrome.
Click the handler icon in the address bar.

Page 42 of 43
 Select "Allow Gmail to open all email links".

✓ If the icon is missing:

Go to chrome://settings/handlers
Enable "Allow sites to ask to become default handlers for protocols".

References
Haverbeke, M. (2018). Eloquent JavaScript (3rd Edition ed.). No Starch Press.
Lemay, L., & Colburn, R. (2011). Web Publishing with HTML and CSS. Sams Publishing.
West, W., & Prettyman, S. (2018). Practical PHP 7, MySQL 8, and MariaDB Website
Databases: A Simplified Approach to Developing Database-Driven Websites (2nd Edition
ed.). Apress.

Page 43 of 43