Web Design and Development

Student Module
Grade 11

FEDERAL DEMOCRATIC REPUBLIC OF ETHIOPIA

MINISTRY OF EDUCATION
GDear Students! How do you think we can leverage digital tools to enhance communication
and teamwork in our projects? In the upcoming section, we will uncover the essential tools
and techniques for effective online communication and collaboration, crucial for successful
web development and professional interactions.

UNIT 4

ONLINE COMMUNICATION AND COLLABORATION

Unit Coverage_

This unit is designed to provide you the necessary information andpractice regarding the follow-
ing content coverage:
4.1. Online communication
4.2. Online collaboration

Unit Learning Outcomes

This unit will also assist you to attain the following learning outcomes. Specifically, upon comple-
tion of this unit, you will be able to:
S Enhance online communication and collaboration Unit Overview
In this unit, we delve into the dynamic realm of online communication and collaboration, recogniz-
ing its pivotal role in the landscape of web development. We begin by examining the profound sig-
nificance of effective communication and collaboration, laying the foundation for understanding
their impact on successful web projects.

Key Terms: communication, Collaboration, Email, etiquette, Email Signature, Autoreply, G Suite
Microsoft 365, cloud computing
4.1. Online communication

Effective communication stand as fundamental pillars in the realm of seamless web development,
playing pivotal roles in fostering innovation and productivity. These cornerstones form the basis

MINISTRY OF 180
Grade 11 Web Design and Student

for successful collaboration among web development teams, ensuring that projects progress
smoothly and efficiently. Here's how they contribute to the overall process:
- Shared Understanding:
Effective communication ensures that all team members share a common understanding of project
goals, objectives, and requirements. Collaboration facilitates the exchange of ideas, aligning the
team's vision and reducing the likelihood of misunderstandings.
- Efficient Problem Solving:
Rapid and open communication allows for quick identification and resolution of issues, prevent-
ing potential roadblocks. Collaborative efforts bring together diverse perspectives, enabling cre-
ative problem-solving and innovative solutions.
- Streamlined Workflows:
Well-established communication channels and collaboration tools streamline workflows, reducing
delays and optimizing the development process. Clear communication of tasks and responsibili-
ties ensures that everyone is on the same page, enhancing overall efficiency.
- Innovation through Diversity:
Collaboration brings together individuals with diverse skill sets and perspectives. Effective com-
munication in this environment sparks creativity and innovation, leading to the development of
unique and groundbreaking solutions.
- Optimized Resource Utilization:
Collaboration helps in the effective distribution and utilization of resources, preventing redun-
dancy and optimizing productivity. Communication about resource availability and needs ensures
that the right tools and talents are applied where they are most needed.
- Adaptability to Changes:
Open communication channels allow teams to adapt swiftly to changes in project requirements or
scope. Collaboration ensures that adjustments can be made collectively, leveraging the strengths
of the entire team.
- Continuous Improvement:

Feedback loops established through communication channels enable continuous improvement.

Collaborative efforts in refining processes and methodologies contribute to the evolution of best
practices within the development team.

MINISTRY OF 181
Grade 11 VVWU I-^V^JLgJLI OIJLU.
Qa Outlook yahoo/mail
OLUUClll

In essence, effective communication and collaboration not only enable the seamless execution of
web development projects but also create an environment conducive to innovation, adaptabil-
ity, and continuous improvement. By recognizing these aspects as cornerstones, teams can un-
lock their full potential and deliver high-quality, cutting-edge solutions in the ever-evolving
landscape of web development.
4.1.1. Functions and features of communication tools
4.1.1.1. Effective communication

Effective communication is crucial for personal and professional success. In today's digital age,
various tools facilitate seamless communication, enabling individuals and teams to stay con-
nected, share information, and collaborate efficiently. Effective communication is essential
for web developers to collaborate with team members, clients, and stakeholders. Various digi-
tal tools facilitate seamless communication, ensuring that projects run smoothly and effi-
ciently. This section explores key communication tools that are crucial for web developers,
including email, messaging apps, video conferencing, and social media platforms.

4.1.1.2. Communication tools

A. Email:
Email is a fundamental communication tool that allows users to send and receive messages elec-
tronically. It is widely used for personal and professional communication, providing a reliable
way to exchange information, documents, and media. Email is a vital tool for web developers
to communicate formally with clients and colleagues, send project updates, share documents,
and manage project correspondence.
Applications:
• Sharing detailed project updates.
• Sending official documentation and reports.
• Facilitating one-on-one or group discussions.

Example Platforms: Gmail, Outlook, Yahoo Mail

MINISTRY OF 182
Grade 11 Web Design and Student

Search Field Toolbar More Actions button

© ::: f
= I''1'! Gmail Q. s sarch mail

Com- m.
+ Compose
B- 0 O B ia HAS
oa»; Im A ^
<>I
pose
Q Primary Social ^ Promotions 0 Upd
Category
button □ Inbox 1
tabs
★ Starred Pepe Roni Breakfast? • Weren't you sup 10:03 AM

0 Snoozed Erika Araujo Updated Absence Policy • Gooc 945 AM

Naviga- > Sent

Robin Banks Sample Research Report Hi 9:37 AM
tion b Drafts
Q Bees and Honey...

panel • IT

• Library Me, Reed. Erika 4 Testing schedule -1 think we ha 9:15 AM

m IT

rau i u J*I out Today Je las a *'

otx..
Newsletters Thread list
More
v Reed Stephens IT Software Updates • We're go. 8:23 AM

Nena Moran Parking Restrictions Good mor 8:15 AM

1.64 G8 (10%) ofLucas.

15 GBErika.
used Terms
Me 3 Privacy Program Policies i Q V, Manage Conference Week Thanks for le 8:15 AM

Erika. Me 2 IT Library Projector Cables M 8:10 AM

Educator's Weekly Newsletter* Modern Nonfiction 2:00 AM

Figure 4 Gmail interface

B. Messaging Apps:
Messaging apps provide real-time text communication, often with additional features such as
voice and video calls, file sharing, and group chats. Instant messaging platforms enable real-time,
informal communication. Messaging apps enable real-time communication, making it easier for
web developers to discuss project details, solve issues quickly, and share resources. Examples in-
clude Telegram, which allows for organized conversations in channels, and WhatsApp, which
supports group chats and multimedia sharing.
Applications:
• Quick exchanges for urgent matters.
• Group chats for team-wide discussions.
• Sharing files, links, and multimedia content.

Example Platforms: WhatsApp and Telegram

MINISTRY OF 183
Grade 11 Web Design and Student

C. Video Conferencing:

Video conferencing tools enable face-to-face communication over the internet, facilitating virtual
meetings, webinars, and online classes. Video conferencing tools are essential for remote web de-
velopers to conduct virtual meetings, collaborate with teams, and present work to clients. Tools
like Zoom, which offers features like screen sharing and breakout rooms, and Microsoft Teams,
which integrates with other Microsoft 365 applications, are widely used in the industry.
Applications:
• Conducting virtual meetings and brainstorming sessions.
• Hosting project presentations.
• Facilitating remote collaboration with a personal touch.
Example Platforms: Zoom, Microsoft Teams, Google Meet

O^ ^
ZOOITI Microsoft Teams Google Meet
D. Social Media Platforms:
Social media platforms allow users to connect, share content, and engage with others online.
These platforms are used for networking, marketing, and staying informed about current events.
Platforms for both professional and casual communication. Social media platforms help web de-
velopers stay updated on industry trends, network with other professionals, and showcase their
work. LinkedIn is particularly useful for professional networking and finding job opportunities,
while platforms like Twitter and Facebook are great for engaging with the developer community
and sharing projects.
Applications:
• Engaging with a broader audience.
• Sharing industry updates and insights.
• Connecting with peers and professionals.
Example Platforms: LinkedIn, Twitter, Facebook and Instagram

Linked
Understanding the nuances of each communication tool empowers web development teams to
choose the most suitable channels for different scenarios. Whether it's the formality of email, the
immediacy of messaging apps, or the richness of video conferencing, leveraging these tools
strategically enhances collaboration and contributes to the overall success of web development
projects.

MINISTRY OF 184
Discussion
Student
Grade 11 Web Design
and
Are there specific purp ; or objectives for which you rely on em
• Are there any specific email etiquette
OnO guidelines or best practices you follo w regularly?

4.1.2. Using Email for Communication

Email is a fundamental tool for web developers, facilitating efficient and formal communication
with clients, team members, and stakeholders. It provides a reliable platform for sharing project
updates, discussing requirements, sending documents, and maintaining a written record of com-
munications. Utilizing email effectively ensures clear and professional interactions, which is cru-
cial for successful project management and client relations. Here are some key ways leaders can
use email in their roles:
Key Ways Web Developers Can Use Email

1. Project Updates:
• Keep clients and team members informed about the progress of ongoing projects.
• Send regular status reports and milestones achieved.
2. Client Communication:
• Discuss project requirements, timelines, and deliverables.
• Address client queries and feedback promptly.
3. Team Collaboration:
• Coordinate tasks and share important information with team members.
• Use email to schedule meetings and set deadlines.
4. Document Sharing:
• Send design mockups, code snippets, and other project-related documents.
• Utilize attachments and links for easy access to shared files.
5. Networking:
• Connect with other professionals in the industry.
• Share your portfolio and seek collaboration opportunities.
4.1.2.1. Email etiquette
Email etiquette in a professional setting refers to the set of guidelines and principles that individu-
als should follow when using email for business or work-related communication. Adhering to
proper email etiquette is crucial for maintaining a positive, respectful, and effective

MINISTRY OF 185
Grade 11 Web Design and Student

M Gmail

Secure, smart,
and easy to use
email
Get more done with Gmed Now integrated wrth Google
Chat, Google Meet, and more, al in one place.

Step 2: Fill in your information

You'll need to input your first and last name and the username you'd like for your email ad-
dress. The username is what comes before "@gmail.com" in your email address (for instance,
in "[email protected],” the username is “example”).
You'll also need to set a strong password. Once you've done all of that, click on "Next."

Step 3: Verify your phone number

MINISTRY OF 189
 Web design Using HTML
Grade 11 Web Design and Development
Student Module

MARKUP LANGUAGE
Introduction to markup language
Markup languages can be defined as a set of instructions or codes used to annotate and format text in a document.
These languages provide a structured way to add meaning and structure to content, allowing for easier interpretation
and presentation on various platforms and devices. The term "markup languages" refers to a collection of codes and
instructions that are utilized to annotate and format text within a document. These languages enable the addition of
structure and meaning to content, facilitating its interpretation and presentatioacross different platforms and de -
vices.

A markup language is a set of rules that defines how the layout and presentation of text and images should appear in
a digital document. It allows structuring documents, adding formatting, and specifying how different elements
should be displayed (or “rendered”) on webpages. This structuring helps search engines like Google understand the
information on websites better. If search engines know more about what a page is about, they are more likely to
show it to people who are looking for its content. Which, in result, can bring more people to websites with the right
markup.

Features of Markup Language

When we think, “what is a markup language,” we consider some common features. If you’re wondering whether a
language is a markup language, compare the language to these hallmarks:
• A markup language uses tags to annotate texts. Tags are special words or characters that indicate when formatting
should be applied.

• The text that goes between the opening and closing tags will be affected by
the formatting. In the case of the bold tag, the document would show the text in bold font.
• Markup languages are easy to read. For the most part, anyone should be able to read and understand a markup
language, even if they can’t write it.
• Markup languages also have a syntax, or set of rules, that define how to use the tags. This syntax allows for con -
sistent and structured documents.

315
 Reasons to Learn a Markup Language

Millions of people worldwide use markup languages for a wide variety of purposes. Learning a markup language,
such as HTML (Hypertext Markup Language) or XML (Extensible Markup Language), can be beneficial for various
reasons:
• Web Development: Markup languages are fundamental to web development. HTML, in particular, is the backbone
of web pages, defining the structure and content of a webpage. By learning HTML, you gain the ability to create
and modify web pages, which is a valuable skill in today's digital age.
• Content Creation: Markup languages are used not only for web development but also for creating structured doc -
uments in various domains such as documentation , publishing, and data interchange. XML, for instance, is widely
used for storing and exchanging structured data in fields like finance, healthcare, and e-commerce.
• Understanding Web Technologies: Learning a markup language provides a solid foundation for understanding
other web technologies like CSS (Cascading Style Sheets) and JavaScript. HTML, CSS, and JavaScript form the
core technologies of the web, and having a grasp of HTML is essential for effectively working with these other
technologies.
• Career Opportunities: Proficiency in markup languages can open up numerous career opportunities in web devel -
opment, content creation, technical writing, digital marketing, and more. Many companies seek candidates with
HTML and XML skills, making it a valuable addition to your resume.
• Customization and Personalization: Knowing how to work with markup languages allows you to customize and
personalize your online presence. Whether you want to create your own website, blog, or online portfolio, HTML
gives you the power to design and structure your content according to your preferences.
• Enhanced Communication: Markup languages are a universal way of structuring and sharing information. Learn-
ing HTML or XML enables you to effectively communicate and collaborate with other developers, designers, and
content creators, whether you're discussing web projects or exchanging data in a standardized format.
• Adaptability and Future-Proofing: Markup languages have been around for decades and continue to evolve with
the changing landscape of technology. By learning a markup language, you equip yourself with a timeless skill that
can adapt to new developments and trends in the digital world.
1.2. Types of markup languages
Markup languages can be classified into various categories based on their purpose and functionality. These cate-
gories include:
• Presentation Markup Languages: These markup languages are primarily used to define the visual presentation of
a document or webpage. Examples of presentation markup languages include HTML (Hypertext
Markup Language) and CSS (Cascading Style Sheets).
• Data Markup Languages: Data markup languages are designed to structure and organize data within a document
or database. XML (eXtensible Markup Language)
is a widely used data markup language that allows for the representation and exchange of structured data.
• Mathematical Markup Languages: These markup languages are specifically designed for representing mathemat-
ical equations and formulas. MathML (Mathematical Markup Language) is an example of a
markup language used for mathematical notation.
• Document Markup Languages: Document markup languages are used to structure and annotate textual content
within a document. Examples of document markup languages include SGML (Standard General-
ized Markup Language) and LaTeX.
• Domain-Specific Markup Languages: These markup languages are tailored to specific industries or domains. For
example, MusicXML is a markup language used for representing sheet music, while SVG (Scal-
able Vector Graphics) is a markup language for describing two-dimensional graphics.
• eXtensible Business Reporting Language (XBRL): XBRL is a specialized markup language used for financial
reporting and analysis. It standardizes the representation of financial data, making it easier to
compare and analyze information across different organizations and industries.

319
 1.3. Introduction to HTML
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language and
creates a complete website structure of web pages. HTML is a combination of Hypertext and Markup language.
Hypertext defines the link between web pages. A markup language is used to define the text document within the
tag which defines the structure of web pages. This language is used to annotate (make notes for the computer)
text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML)
are human-readable. The language uses tags to define what manipulation has to be done on the text.
HTML is the basic language for web content creation. It is used to create a structure or blueprint of the web doc-
uments. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.
1.3.2. Characteristics of HTML
The characteristics of HTML are as follows:
• HTML is not a programming language. It's a markup language.
• HTML is a widely used language on the web.
• HTML is used to create web pages and web applications. We can create a static website by HTML only.
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• All the HTML elements/tags are incase-insensitive.
• HTML supports a wide range of media types, including text, images, audio, and video, which makes web pages
more engaging and interactive
• HTML is a flexible language that can be used with other technologies, such as CSS and JavaScript, to add addi-
tional features and functionality to a web page
• Since HTML is compatible with all browsers, web pages created in HTML are displayed across a variety of plat-
forms and devices.
1.3.3. Features of HTML
• Easy to Learn and Use: HTML has a simple and straightforward syntax, making it relatively easy for beginners to
learn. Its tag-based structure is intuitive, and there are plenty of resources available online for learning HTML.
• Platform-Independent: HTML is platform-independent, meaning it can be viewed on any device or operating sys-
tem that has a web browser. Whether you're using a computer, tablet, or smartphone, HTML content will render con-
sistently across different platforms.
• Support for Multimedia: HTML allows the embedding of multimedia content such as images, videos, and audio
files directly into web pages using tags like <img>, <video>, <audio>, etc. This enables the creation of visually en-
gaging and interactive web experiences.

Ministry of Education 325

• Hypertext Capabilities: HTML is designed to support hypertext, which allows for the creation of hyperlinks within
text. Hyperlinks enable users to navigate between different web pages or sections within the same page, en-
hancing the interconnectedness of web content.
• Markup Language: HTML stands for Hypertext Markup Language. As a markup language, HTML uses tags to de-
fine the structure and content of web pages. Tags are enclosed in angle brackets (< >) and are used to specify
elements such as headings, paragraphs, lists, tables, forms, etc.
These features collectively contribute to HTML's popularity and widespread use as the foundation of the World Wide
Web. They make it an accessible, versatile, and powerful tool for creating and presenting content on the inter-
net

. The Importance of Learning HTML

• Simple Markup Language: HTML is indeed a simple markup language. Its syntax consists of tags that are easy to
understand and use. Tags are enclosed in angle brackets (< >) and provide a straightforward way to structure
content on a web page.
• Easy Implementation: HTML's simplicity makes it easy to implement. With just a basic understanding of its syn -
tax, users can start creating web pages. Additionally, there are numerous online resources, tutorials, and doc-
umentation available to help beginners learn HTML quickly.
• Website Creation: HTML is the backbone of web development. It serves as the foundation for creating websites by
defining the structure and content of web pages. While HTML alone can create static web pages, it is often
combined with other technologies such as CSS for styling and JavaScript for interactivity to create dynamic
and engaging websites.
• Fundamentals of Web Programming: Learning HTML provides a solid foundation for understanding web pro-
gramming concepts. It introduces beginners to essential concepts like markup languages, document structure,
elements, attributes, and the basics of client-side web development. Mastering HTML lays the groundwork for
delving into more advanced web technologies and programming languages.
 Tools Required in web design
The necessary tools for establishing an HTML development environment. Setting up an HTML development envi-
ronment is crucial for efficient web development. Here are the essential tools you’ll need: Code editors and
Browsers.
I. Code Editor tools
First, you'll need a good code editor is the foundation of your development environment. It provides syntax high -
lighting, auto-completion, and other features to enhance your coding experience. it is a program that allows you to
write and edit code. These tools enhance productivity, reduce manual tasks, and provide a comfortable environ-
ment for web developers. Each has its own features and benefits, so it's important to choose one that suits your
needs and preferences.
Some commune popular IDEs for HTML web development include notepad++, Visual Studio Code (VS Code),
Adobe Dreamweaver CC, Atom, WebStorm, and Sublime Text. There are broadly two types of HTML Editors:
1. Textual HTML Editor
These are text-based editors where the developers can write their codes and compile them. The code appears in the
same manner we write it, thus it requires basic knowledge of HTML. Some of these editors also provide features
of making a project, managing all the files related to the web, etc. Examples of HTML Text editors include-
Notepad++, VSCode,Sublime Text.
2. WYSIWYG HTML Editor
What you see is what you get’ is its full form. WYSIWYG are editors that provide the preview of the output of the
source code i.e. as it would appear on a browser. There is a drag and drop feature available in most of them that
eases the handling. It does not require any hardcore knowledge of HTML, thus enabling non-technicals to easily
develop websites. Examples include-Adobe Dreamweaver, Amaya, BlueGriffon, etc.
3. Browser Tools
Next, you'll need a web browser. A web browser is the program that you use to view web pages. It's also essential
for testing HTML code. Popular browsers include Google Chrome, Mozilla Firefox, and Apple Safari. Like text
editors, each browser has its own unique
 2.2. Basic HTML document structure
HTML document structure
1
An HTML document contains the text of the page itself and HTML tags, which define the
structure and appearance of the document. It also contains hyperlinks to other pages or to in-
clude multimedia elements such as audio, video, animations etc. Entire HTML document is
bound within a pair of <html> and </html> tags.

HTML depicts each element as shown below Table 2-2: Example 1:Basic
HTML structure

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
 Grade 11 Web Design and Development Student Module

No HTML element Description

1 <!DOCTYPE html>
This declaration specifies the version of HTML that the document is written
in. It is usually the first line of an HTML file

2 <html> element: This is the root element of the document and en-
closes all other elements

3 <head> element
This element contains metadata about the document, such as the title, author,
and character set. It does not contain any visible content on the page

4 <Mata> element:
This element is HTML elements that provide information about a webpage to
search engines and website visitors. It is are used to provide metadata about a
webpage, such as its title, description, and keywords, which can improve its
visibility in search engine results

5 <title> element:
This element is nested within the head element and specifies the title of the
web page, which appears in the browser's title bar

6 <body> element
This element contains all visible content on the page, such as text, images,
links, and other HTML elements.

HTML Hierarchy
HTML elements are hierarchical, which means that they can be nested inside each other to
create a tree-like structure of the content on the web page.This hierarchical structure is called
the DOM (Document Object Model), and it is used by the web browser to render the web
page.

Ministry of Education 346

 Figure 2.1: Document Object Model

Every web document has two sections. Heading Section and Body Section. The heading sec-
tion is used to show the title of a webpage in the title bar or tab heading in the browser. The
head section should begins with <head> tag and end with </head> tag. The tag <title> is used
to specify the title of the webpage.
The body section is used to display the main content on the browser window. The body sec-
tion should defined within <body> and </body> tags. Whatever the text you specify between
these tags will display on the browser window.
Example:- Comprehensive of HTML documents
Code Description: HTML code to create the first file <html>
<head>
<title> My First Web Page </title>
</head>
<body>
This is my First Web Page
</body>
<html >

347
2.2.1. Create a HTML file
An HTML file is simply a text file saved with an .html or .htm extension. A file that contains
Hyper Text Markup Language is called an HTML file. This file is stored in a standard text
format with the .html extension and contains tags that define a web page layout and content
like text, tables, images, videos, and hyperlinks.
.html is the extension of an HTML file. Like any other file that is on your device, HTML files
also have an extension (we'll know more about it later in the article), and that is .html at the
end of the HTML file name, for example: index.html
In the late 90s, when HTML was introduced, .htm was used as the extension of an HTML file.
However, nowadays, .html is preferred and used commonly. We will discuss this in detail later
in this article.

2.2.2. Saving and opening html documents

In this lesson you will learn how easy it is to create an HTML document or a web page. To
begin coding HTML you need only two things: a simple-text editor(NOTEPAD) and a web
Metadata is data that provides information about other data. In the context of an HTML page, metadata is information
about the content of the page that is not visible to the user, but that can be used by web browsers, search engines, and
other systems to understand and interpret the content of the page.
Metadata in an HTML page is typically contained in the head section of the page and is made up of tags and attributes that
provide information about the page. Some examples of metadata that can be included in an HTML page are:
• The page's title: This appears in the title bar of the browser and is used to identify the page and to generate search re-
sults.
• Keywords: These are words or phrases that describe the content of the page and can be used by search engines to index
the page.
• Description: This is a short summary of the page's content that can be used by search engines to provide context for
the page in search results.
• Author: This is the name of the person or organization that created the page.

• Copyright information: This is used to protect the intellectual property rights of the page's creator.
Metadata is used in an HTML page to provide additional context and information about the page's content. This can be
helpful for search engines, which use metadata to understand the content of a page and to rank it in search results, and for
users, who can use metadata to get a better sense of what a page is about before deciding whether or not to visit it. Meta -
data can also be used by web browsers and other systems to understand and interpret the content of a page and to display
it correctly.
What are HTML tags in SEO?
HTML tags are short pieces of code on the web page that provide technical information about its content.
The purpose of these tags is to tell search engines how to “interact” with the page, how it should be displayed in Google
Search as well as to visually adjust the page’s content in web browsers (for better user experience).
Why are HTML tags important in SEO?
HTML and meta tags (+ their attributes) indicate to Google what the page is about, how the

web crawler should interact with its content, and whether or not (or how) it should be displayed in Google Search.
Whenever a crawler like Googlebot visits a page, it scans its content along with the provided tags to get a better understanding
the page and decides:
• Whether or not (or how) the page should be crawled and indexed.
• How relevant (and optimized) the page is for certain search queries.
• How it should be displayed in Google SERPs
 Student Module

CREATE WEB CONTENT USING HTML

Key Terms: Tags, Element, attribute, paragraph, heading, anchor, link, hyperlink, list, table, form and multimedia
Unit Overview
The emphasis of this unit was on HTML elements, which include forms, frames, lists, tables, links, text formatting
elements, and multimedia elements. Links enable users to move between sites, and text formatting components
style and format content. Lists classify and present data; tables show tabular information; frames divide pages into
sections; and forms gather user input via text fields, checkboxes, radio buttons, and submit buttons. The user expe -
rience is improved with multimedia features that incorporate photos, movies, and audio files. In general, HTML el -
ements are essential for building dynamic, aesthetically pleasing webpages.

Ministry of Education 349

 CREATE WEB CONTENT USING HTML

HTML Elements
HTML uses predefined tags and elements which tell the browser how to properly display the
content. HTML Tags and Elements are sometimes perceived as the same. However, they are
not. There is a subtle difference between HTML elements and tags that many people aren't
aware of.

An HTML element is defined by a start tag, some content, and an end tag. The Element can
be articulated in the following form or syntax.
Syntax: <element> content </element>

Element Content Element

ttt
,<hl^, Hello, World, f/hlj>
H f T
Opening Tag Plain Text Closing Tag

Figure 3.1: HTML element

First, we acquire knowledge about the tag and attribute adjacent to the next HTML element in order to gain a com -
prehensive understanding.
3.1.1 HTML Tags
HTML Tags are special words wrapped in angle brackets (< >) which are used to define different types of content
on a webpage. Every tag in HTML performs different tasks. If you have used an open tag
<tag>, then you must use a close tag </tag> .
There are two types of most common tags:
• Paired Tags: These tags come in pairs. That is they have both opening(< >) and
closing(</ >) tags
Example 1:
<p> content </p>
<h2> content </h2>
• Empty/ unpaired / Self-Closing:These tags do not require to be closed Example 2:
<br/>
<hr/>
<img/>

For a more detailed analysis, it is recommended to sort HTML tags into distinct categories
based on Utility, function and purpose. Now, tags can be categorized into three distinct types:
Paired tags, unpaired tags, and Utility-Based tags.
Utility-Based Tags
The HTML tags can be widely differentiated on the basis of their utility, that is, on the basis
of the purpose they serve. We can divide them basically into three categories as discussed be-
low:
1. Formatting Tags
The HTML tags that help us in the formatting of the texts like the size of the text, font styles,
making a text bold, etc. This is done using tags like <font>, <b>, <u>, etc. Tables, divisions,
and span tags are also those tags that help format a web page or document and set the layout
of the page.

Ministry of Education 357

 Grade 11 Web Design and Development Student Module

2. Structure Tags
The HTML tags that help in structuring the HTML document are called Structure Tags. De-
scription, head, html, title, body, etc., form the group of the page structure tags. The struc-
ture tags only assist in creating or forming the basic html page from the root; that is, they
do not affect or has any hand in the formatting of texts.
3. Control Tags
Another category of tags that can be created is ‘Control Tags’. The Script tags, radio buttons
or checkboxes, the Form tags, etc., forms the control tags. These are the tags that are used
in managing content or managing scripts or libraries that are external. All the form tags,
dropdown lists, input text boxes, etc., are used in interacting with the visitor or the user.
The above distinction of the HTML tags is based on the type of tags and their utility. The
HTML tags can also be simply divided based on basic categories like :

Figure 3.2: Categories of basic HTML tags categories

Table 3-2: HTML tags and Groups

HTML Groups Tags
HTML Meta Tags DOCTYPE, title, link, meta and style

Basic Root Tags html, head, and body

HTML Text formatting <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>,
Tags <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>,

Ministry of Education 358

 Grade 11 Web Design and Development Student Module
HTML Groups Tags
<ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>
HTML Link Tags <a> and <base>

HTML Image and Object <img>, <area>, <map>, <param> and <object>
Tags
HTML List Tags <ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags form, input, textarea, select, option, optgroup, button, label, fieldset
and legend
HTML media Tags Audio, Video, SVG (Scalable Vector Graphics),and Canvas Tags

HTML script or pro- Canvas, Script and nonscript

gramming tags

Characteristics of HTML Elements:-

• The HTML element is everything from the start tag to the end tag:
• HTML Elements are components that are used in HTML Page.

• HTML Elements contain a starting tag, content, and an ending tag. If there is no content
in an HTML Element, it is called an Empty HTML Element.
• HTML Elements can be nested. There can be an HTML element with another HTML El-
ement as its content.
3.1.2 Types of HTML element
There are two types of elements. Inline and block level elements.
1. Inline elements
As the name is describing, it does not start on a new line and takes the space as small as pos-
sible. It means it takes the least space.
2. Block elements
Block elements are those elements that occupy their own space and always start on a new
line. They make big structures.

359
HTML Comments are used to insert comments in the HTML code. It is a good practice of
coding so that the coder and the reader can get help to understand the code. It is a simple
piece of code that is wiped off (ignored) by web browsers i.e., not displayed by the browser.
Types of Comment
There are three types of comments in HTML which are:
• Single-line Comment
• Multi-line Comment
The single-line comment is given inside the ( <!- - comment - -> ) tag.
Syntax:
<!-- elements or comments -->

Example 3: : Single-line Comment

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- add more content here later! -->

Multi-line Comment
To create a multi-line comment , you can enclose your comments between <!-- and -->

Syntax:
<!--
HTML elements comments -->
Example 4: Multi-line Comment <!--

Ministry of Education 360

 Grade 11 Web Design and Development Student Module

<p>This part of my website isn't working right now...I'll fix it later.</p> <p>This is a para-
graph.</p>
-->

3.1.3 HTML attributes

In HTML, attributes are used to modify the behavior or appearance of an element or to pro-
vide additional information about an HTML element that cannot be conveyed
through the element's content alone. Attributes are specified within the open-
ing tag of an element and take the form of name/value pairs, separated by an
equals sign.
In HTML, global attributes are attributes that can be used with all HTML elements. These at-
tributes provide common functionality and can be applied universally. they
can be used on all elements, though they may have no effect on some ele-
ments. Global attributes specified on both standard and non-standard ele-
ments. Let’s explore some common of these global attributes:
• class: Refers to one or more class names for an element, allowing CSS and JavaScript to
select and access specific elements via class selectors or DOM methods like
document.getElementsByClassName
• data-*: Used to store custom data private to the page or application.
• dir: Specifies the text direction for the content within an element.
• hidden: Marks an element as not yet relevant or no longer relevant.
• id: Assigns a unique identifier to an element.
• lang: Specifies the language of the element’s content.
• spellcheck: Controls whether the element’s spelling and grammar should be checked.
• style: Allows inline CSS styling for an element.
• tabindex: Defines the tabbing order of an element.
• title: Provides extra information about an element.
• translate: Determines whether the content of an element should be translated or not. Let's
take a look at the characteristics of HTML attributes:
• Each element or tag can have attributes, which defines the behaviour of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and value pair.

Ministry of Education 361

• The Attributes name and values are case sensitive, and it is recommended by W3C that it
should be written in Lowercase only.
• You can add multiple attributes in one HTML element, but need to give space between two
attributes.
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
Syntax:
<Tag_name attribute_name="value"> contents </ Tag_name>

3.1.4 Attributes for HTML document structure Tags

Let’s explore the attributes related to HTML document structure tags. These attributes play a
crucial role in shaping the structure and behavior of your web page. Here are some fundamen-
tal HTML structural tags for documents, including HTML, Head, and Body tags, along with
their attributes
I. Attributes of < html > tag
The <html> tag has two common attributes, such as dir and lang.The dir attribute in HTML
plays a crucial role in specifying the text direction of an element’s content.

Ministry of Education 362

 For Example:Attributes of HTML tag

<html dir="rtl" lang="fr">

Every attributes has name and value. We define like name="value".dir
is name, rtl is value
Table 3-3: Attributes of html tag
Values Description
Name of At-
tribute
dir " ltr" (align left-to-right) dir="ltr": This is the default value. It indicates left-to-right text
direction, suitable for languages written from left to right (like
English) .
" rtl" (algin right-to-left) dir="rtl": This value signifies right-to-left text direction, com-
monly used for languages written from right to left (such as
Arabic)
" Atuo" dir="auto": When set to “auto,” the browser dynamically de-
termines the text direction based on the content. This option is
recommended when the text direction is unknown

lang " en" for English, The lang attribute indicates the language of the element’s con-
"es" for Spanish, tent.The value of the lang attribute is an ISO language code.
"fr" for French, and so on Typically, this is a two-letter code (e.g., "en" for English), but it
can also be an extended code (e.g., "en-gb" for British English)

Ministry of Education 363

II. Attributes of <body> tag Student Module
The <body> tag defines the document’s body. The contents of an HTML page reside within the <body> tag. <body>
tag contains several attributes.There are many attributes in the <body> tag that are depreciated from HTML5 are
listed below:
Table 3-4: Attributes of body tag

Attribute Value Description

name
background image It contains the URL of the background image. It is used to set the background
image.
bgcolor color It is used to specify the background color of an image. All modern browsers
support the following 140 color names
alink color It is used to specify the color of the active link.
link color It is used to specify the color of visited links.
text color It specifies the color of the text in a document.
vlink color It specifies the color of visited links.

The <body> tag defines the document’s body. The contents of an HTML page reside within the <body> tag. <body>
tag contains several attributes.
A. Background Colour: bgcolor = color
By default all the browsers display the text on white background. However, the background color of the browser can
be changed by using bgcolor tag.
Attribute Values of bgcolor: HTML colors are specified with predefined color names, hex and RGB (Red, Green, Blue)
values.
• Color name: It sets the text color by using the color name. It specify the name of the color for the text in the Docu-
ment
For example “red”.

• hex_number: It sets the text color by using the color hex code. It specify the hex code of the color of the Text in the
Document
For example “#0000ff”.

• rgb_number: It sets the text color by using the rgb code. It specify the rgb value of the Text in the Document
For example: “RGB(0, 153, 0)” .
 Student Module

Table 3-5: Some Basic colors

HTML / CSS Name Hex Code #RRGGBB Decimal Code

No Color
(R,G,B)
1 Black #000000 (0,0,0)
2 White #FFFFFF (255,255,255)
3 Red #FF0000 (255,0,0)
4 Lime #00FF00 (0,255,0)
5 Blue #0000FF (0,0,255)

6 Yellow #FFFF00 (255,255,0)

7 Cyan / Aqua #00FFFF (0,255,255)

Example 5: To change body background color <body bgcolor = yellow> </body>

<body bgcolor = #FFFF00> </body>

<body bgcolor ="RGB(100, 153, 0)"> </body>

B. Body text Color: text = color

The default text color of the body section is “black”, it is often called as automatic color.

Example 6: To change body text color

<body text="green"> </body>
C. Background image: background=image
An image or picture can be applied as background to a webpage. When you insert an image as
background, the text will be displayed on top of the image. Background images can be a tex-
ture or bitmap or even a photo.When you insert a small image, the browser takes the image and
repeats it across and down to fill the browser window. Inserting animated images (GIF images)
creates more interest.
Example 7: To Insert images as background
<body background = “flower01.gif’> </body>
<body background = “E:\Images\ flower01.gif'>

Ministry of Education 365

D. Setting Margins: margin = value
The margin refers the blank area from left or top edge of the browser window. Generally there
is no default margin setting in any browser. If you want to leave some space as margin to left
or top; leftmargin or topmargin attributes will be used respectively.
The tag to specify the left and top margin: <body leftmargin = value topmargin = value> Ex-
ample 8: To Insert margin in body
<body leftmargin = 50 topmargin = 50> </body>

Self-check 3-1:
Instruction: Create a web page (HTML document) to the following specification.

• Title: My First Web Page

• Text to be display: Welcome to Computer Applications
• Background color: Lim• Body text color: Blue
• Margin: from left and top 72 inch
3.2 HTML Formatting tags
HTML Formatting basically refers to the enhancement of text in order to increase the visual appeal. HTML pro-
vides a range of formatting tags that can be used to make the text attractive to the users. There are many
options available that can be used for formatting, just like any other text editor.
3.2.1 Paragraph format
The HTML <p> element defines a paragraph. Alternatively, it is used to create paragraphs. A paragraph always
starts on a new line.
Syntax:
<p> Content </p>
Example 9: To add paragraph in HTML
Code Description: HTML code to create paragraphs <!DOCTYPE html>
<html>
<head>
<title>Paragraph </title>
</head>
<body>
<p>Paragraph 1. </p>
<p>Paragraph 2. </p>
</body>
</html>
Output Description: How the HTML code above looks in a browser

Paragraph 1.

Paragraph 2.

369
 1 tags
Beak and Line
The HTML <br/> or <br> tag element creates a line break, giving you a new line without start-
ing a new paragraph. The <hr/> or <hr> tag defines a thematic break in an HTML page, and is
most often displayed as a horizontal rule.
Example 10: To Add Line Breaks and horizontal rule in Paragraphs
Code Description: HTML code to create paragraphs with breaks and horizontal <!DOCTYPE
html>
<html>
<p>This is <br> a paragraph <br> with line breaks.</p>
<p>This is some text.</p>
<hr/>
<p>This is some other text.</p>
<hr>
</html>
Output Description: How the HTML code above looks in a browser

Ministry of Education 370

 1

Example 11: To add Extra Space Inside Paragraphs

Code Description: HTML code to create paragraphs with breaks and horizontal <!DOCTYPE
html>
<html>
<head>
<title>Paragraph </title>
</head>
<body>
<p> Extra space &nbsp;&nbsp; inside a paragraph </p>
</body>
</html>
Output Description: How the HTML code above looks in a browser Extra space inside a para-
graph

3.2.2 Heading format Tags

HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.It is displayed on the browser in the bold format and size of the text depends
on the number of headings. h1 is the largest heading tag and h6 is the smallest one. So h1 is
used for most important heading and h6 is used for least important.

Ministry of Education 372

 Grade 11 Web Design and Development Student Module

Example 12: To add all heading format

Code Description: HTML code to define headings <!DOC-
TYPE html>
<html>
<head>
<title>Paragraph </title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Output Description: How the HTML code above looks in a

browser

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5 Heading 6

Ministry of Education 373

 Grade 11 Web Design and Development Student Module

Table 3-6: Attributes for paragraph, heading and horizontal tags

Attribute name Value Description
align
left, center and right. It indicates the alignment of paragraph on the page left,
center and right. Horizontally aligned
valign Vertically aligns tags within an HTML element.
top, middle, bottom

id User Defined
The id attribute of an HTML tag can be used to uniquely
identify any element within an HTML page. Names an el-
ement for use with Cascading Style Sheets.
class User Defined
The class attribute is used to associate an element with a
style sheet, and specifies the class of element. Classifies an
element for use with Cascading Style Sheets.
Style
color: blue; text- The style attribute in HTML allows you to define inline
align: cente; back- styles sheet for an element. When you use the style at-
ground-color: tribute, you can specify various visual properties directly
DodgerBlue; font- within the HTML tag. These properties include things like
size:40px; color, font size, alignment, and more.

title User Defined

The title attribute defines some extra information about an
element.The value of the title attribute will be displayed as
a tooltip when you mouse over the element:

Ministry of Education 374

Example 13: To apply the Attribute of Paragraph, horizontal and heading tags

Code Description: Comprehensive HTML code that added Attribute of Paragraph, horizon-
tal and heading
<p align = "center">This is center aligned</p>
<h2 align=right> Welcome to Computer Application </h2>
<p style="color:green;font-size:40px; text-align: center "> This is a paragraph.</p>
<h1 style="color: blue">This is a header</h1>
<p title="I'm a tooltip">This is a paragraph.</p>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
<hr style="border-color:orange" >
<hr size="12" width=30% noshade, color="red">
Output Description: How the HTML code above looks in a browser
This is center aligned

Welcome to Computer Application

This is a paragraph.
This is a header
This is a paragraph.

Some text...
Titled Heading Tag Example

3.2.3 Text format tags

In Html, there are many tags that are useful to highlight text with special meaning. These tags
are known as formatting tags. There are a total of 11 text formatting tags in Html. Formatting
tags are designed to highlight special types of text.

Ministry of Education 376

 Grade 11 Web Design and Development Student Module

The following specific types of text can be displayed using these formatting elements:

• <b>.............................Defines bold text.

• <strong>.....................Defines important text.
• <i> Defines a part of the text in an alternate voice or mood.
• <u>...............................Specifies underlined text.
• <em>.......................... Defines emphasized text.
• <mark>.......................Defines marked/highlighted text.
• <small>.......................Defines smaller text.
• <del>...........................Defines deleted text.
• <ins>...........................Defines inserted text.
• <sub>..........................Defines subscripted text.
• <sup>..........................Defines superscripted text.
Example 14: Illustration of some text Formatting
Code Description: HTML code that show the effect of text
format <!DOCTYPE html>
<html>
<b>This text is bold</b><br>
<strong>This text is important!</strong><br>
<i>This text is italic</i><br>
<em>This text is emphasized</em><br> <mark>milk</
mark><br>
<del>blue</del><br>
<del>blue</del> <ins>red</ins><br>
Water is H₂O <br> y=x³- 9 </
html>

377
 3.2.4 Font Formatting tag
HTML <font> tag is used to define the font style for the text contained within it. It defines the
font size, color, and face or the text in an HTML document.
Table 3-7: Attributes of font tags

Attribute Value Description

name
Size Number The size attribute is used to set size of the text.
Color The color attribute is used to set the color to the text.
Color name, hexadec-
imal and RGB

Face Font names The face is an attribute to set different font style.

Example 15: Illustration of some text Formatting

Code Description: HTML code that show the effect of font <!DOCTYPE html>
<html>
<font size="12 " color="red " face-' Arial"> Font....</font> </br>
<font face = "Bookman old stylel, Broadwayl, Forte, Arial">Welcome to HTML</font>
<br>
<font style="color:orange"> Content ... </font>
</html>

Output Description: How the HTML code above looks in a browser

378
 d
GradeAl Web Design and Development Student Module
LUPsU in Font tag Multiple attribute, you can assign more than one
£_

HTML Nested Element

HTML elements can be nested, meaning that one element can be placed inside another ele-
ment. Nesting allows you to apply multiple HTML tags to a single piece of content. The ele-
ment can be nested by other elements. The inner element is called child or nested element and
the outer element is called parent or nesting element.
Example 18: Illustration of Nesting HTMl tags

Code Description: HTML code that show who to apply nest

tags <!DOCTYPE html>
<html>
<body>
<h1><u>My First Heading</u></h1>
<p><b><u><font size="12">Nesting element...
</font></u></b></P>
</body>
</html>
Output Description: How the HTML code above looks in a
browser

Ministry of Education 379

 Grade 11 Web Design and Development Student Module

Mv First Heading

Nesting element
Text may be both bold and italicized. This is done by using both the <B>and<I> tags. When
doing so, it is important to remember not to overlap HTML tags. In other words:
<B><I> Hello!!</I></B> is correct, but <B><I> Hello!! ></B></I> is wrong.
Note that it is recommended to always close nested tags in the reverse order that they were
opened. This means that the last tag that was opened should be closed first, followed by the
second-to-last tag, and so on, until the first tag that was opened is closed. This is important
because it helps maintain the structure and hierarchy of the HTML elements, ensuring that
they are properly nested within each other. By following this practice, you can avoid any po-
tential errors or rendering issues that may occur if the tags are not closed in the correct order.

Self-check 3-2:
1. Write code that can provide the output shown below?

Ministry of Education 380

2. What output is produced by the HTML document code below?
Code Description: HTML code that show the effect of font <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Formatting Example</title>
</head>
<body>
<h1>Main Heading</h1>
<p>This is a basic paragraph of text.
<h2>Subheading</h2>
<p>You can also use <i>italic text</i> with the <code>&lt;i&gt;</code> tag and <em>emphasized text</em> with the
<code>&lt;em&gt;</code> tag.</p>

<h3>Monospaced Text</h3>
<p>Inline <code>monospaced text</code> is useful for code snippets.</p> <pre>This is a preformatted text block.</pre>
<p>You can <b><i>combine</i></b> <u>multiple</u> <strong><em>formatting</em></strong> <s>options</s> in one
paragraph.</p> </body>
</html>

3.2.5 Image tag

Images are an essential element to make an HTML presentation in a more attractive manner Moreover images
are used to depict many complex concepts in a simple way. To make more attractive and communicative
web pages, images should be added in the appropriate places. Images displayed on the web page should
be converted to universally supported format. Most of the browsers support GIF(Graphical Interchange
Format), JPEG (Joint Photographic
 Grade 11 Web Design and Development Student Module

Experts Group) and PNG (Portable Network Graphics)images formats. HTML-5 introduces
SVG images. One format of image can be converted to another format by using Image editing
applications such as Photoshop, Picasa, GIMP etc.

Inserting Images with HTML document

The <img> tag along with the attribute src (Source) is used to add images in HTML docu-
ment.
Syntax:
<img src = image_name_with_extension> OR

<img src = URL>

Table 3-8: Attributes of image tags
Attribute Value Description
name
src Image file
Src attribute is the main attribute used to specify the file name of
the image to be inserted.
alt Text
The alt attribute is used to describe the image, so that some text
is conveyed even when the image cannot be displayed.
Percentage
Width and Height Width and Height attributes are used to set the width and height
number
of an image. The values of these attributes should be either pix-
els or percentage of its actual size.
Integer
Vspace and Vspace (Vertical Space) and Hspace (Horizontal Space) at-
number
Hspace tributes are used to set Vertical and Horizontal space between the
images.
Align
Bottom , Mid- The align attribute used to aligns the image with respect to the
dle , Top , Left base line of the text. Using these values with align attribute, dis-
and Right played the image on the bottom ,middle ,top ,
bottom ,middle ,left and right side of the text.

Ministry of Education 382

 Grade 11 Web Design and Development Student Module

Example 19: Illustration of how to insert image

Code Description: HTML code that show who to insert image tags <!DOC-
TYPE html>
<html>
<body>
<h2>HTML Inserting Image</h2>

<img src="pic.jpg" alt="culture house" width="500" height="333" vpace = 20

Hspace = 20 align="left" >
</body>
</html>
Output Description: How the HTML code above looks in a browser

HTML Inserting Image

3.2.6 Marquee tag

The <marquee> tag in HTML is used to create scrolling text or images on a webpage. It can
scroll horizontally from left to right or right to left, and vertically from top to bottom
or bottom to top. It includes attributes like direction to specify whether the content
moves left, right, up, or down.
Syntax:
<marquee> contents </marquee>

Ministry of Education 383

 Grade 11 Web Design and Development Student Module

Table 3-9: Attributes of image tags

Attributes Values Description

bgcolor Color Name Define the background color of the marquee.

direction Top, Down, Left, Right Define the direction of scrolling the content

loop Number
Specifies how many times content moves. The de-
fault value is infinite.

height px or % Define the height of marquee

width px or % Define the width of marquee

hspace px Specify horizontal space around marquee

vspace px Specify vertical space around marquee

Example 20: Illustration of how to apply the attributes of marquee

<marquee behavior="scroll" direction-left" scrollamount-'1">Slow scroll speed </marquee>

<marquee behavior="scroll" direction-left" scrollamount="10"> Medium scroll speed </marquee>
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here </marquee>
<img src="/pix/smile.gif width="100" height="100" alt="smile"> </marquee>

3.3 HTML Links

Link is an important feature of HTML to connect web resources. Link in HTML is used to create hyperlinks to web content.
Web content may be an HTML document or an external webpage or any multimedia content such as an image, video, audio,
animation etc., or even a

Ministry of Education 384

 Grade 11 Web Design and Development Student Module

3
A picture or any other HTML element can be used as a link in addition to
text!

part of the current document. When you move the mouse over a link, the mouse arrow will turn
into a little hand. Hyperlinks, also known as anchor tags, allow users to navigate from one web
page to another. They are found in nearly all web pages.

Anchor tags

The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. The <a>
HTML element (or anchor element), with its href (Hypertext Reference) attribute, creates a hy-
perlink to web pages, files, email addresses, locations in the same page, or anything else a
URL can address.

HTML offers several types of links, each serving a specific purpose. Let's see some of them in
action in the following sections.
• Anatomy /Text links or clickable text
• Image links or clickable image
• email links
• mailto links

Table 3-10: Attributes of the anchor tag

Attribute
Values Description
name

hreflang Specifies the language of the linked resource.

Ministry of Education 385

 Grade 11 Web Design and Development Student Module

Directs the browser to download the linked resource

download
rather than opening it.

blank Specifies the context in which the linked resource will

target
_parent open.

Ministry of Education 386

 Grade 11 Web Design and Development Student Module

_self
_top
frame name

Defines the title of a link, which appears to the user as a

title text
tooltip.

href url or File Specifies the linked document, resource, or location.

Text links
Text links are the most common type of links. They are created by wrapping text with an an-
chor (<a>) element. When users click on the linked text, they are directed to the URL specified
in the link's href attribute:
<a href="https://www.example.com">Visit Example.com</a>
Text links are versatile and can be used for various purposes, such as linking to other web
pages, external websites, or even specific sections within a page using anchor tags.
Image links
You can turn images into clickable links by wrapping them in an anchor element. This is useful
for creating an image-based navigation or linking to larger versions of images:
<a href="https://www.example.com"> <img src="image.jpg" alt="Example Image"> </a>
Image links are visually engaging and are often used for elements like logos, banners, or
thumbnail images that, when clicked, lead users to a related web page or resource.
Email links
To create links that open an email client with a pre-filled recipient address, use the mailto
scheme:
<a href="mailto:[email protected]">Send an Email</a>
Email links are convenient for enabling users to initiate email communication with a simple
click. They are commonly used for contact information on websites.

Ministry of Education 387

 Grade 11 Web Design and Development Student Module

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.The target attribute specifies where to open the
linked document. The target attribute can have one of the following values:
Table 3-11: Value of target
Value Description
_self It’s Default. Opens the document in the same window/tab as it was clicked
blank Opens the document in a new window or tab
_parent Opens the document in the parent frame
_top Opens the document in the full body of the window
Framename Opens the linked document in the named iframe

Syntax:
<a target="_blank / _self /_parent/ _top/ framename">
For example:
<a href="https://www.google.com" target="_blank">click here to open google in a new
tab </a>

Operation Sheet : 3-1

Title: Internal / relative and external /absolute Link

Objective: To demonstrate an Internal / relative and external /absolute Links among pages:
Instructions:Let us create two files “page1.html” & “page2.html” in same folder. We will
create a link between these two files using relative URL. We will also test a link using
absolute url as well.
Task 1. Create a HTML file “page1.html” and write following code:
Type this code and Save by named “ page.html” file <!DOCTYPE html>
<html>
<body>
<a href="page2.html" >Example of Relative Link to page 2 </a>
<br/>

Ministry of Education 388

 Grade 11 Web Design and Development Student Module

Ministry of Education 389

 Grade 11 Web Design and Development Student Module

<br/>
<a href="https://www.w3schools.com/html/" target="_blank">Example of Absolute Link
to w3schools</a>
</body>
</html>
Task 2. Create a HTML file “page2.html” and write following code:
Type this code and Save by named “ page.html” file <!DOCTYPE html>
<html>
<body>
<p>Make Anatomy / text link</p>
<a href="page1.html">Example of Relative Link to page1</a>
<br/>
<hr/>
<a href="http://google.com" target="_blank" >Example of Absolute Link to google</a>
</br/>
<p>click on the below Image</p>
<a href="https://www.youtube.com/" target="_blank">
<img src="youtube.png" alt="youtube" border = "0"/></a>
<br/>
<hr/>
</body>
</html>

Self-check 3-3:

How would you make a relative link to a page located in a subfolder?

1. How can you use an image as a hyperlink in HTML?
2. How do you create a mailto link in HTML?
3. How would you link to a downloadable file, such as a PDF, in HTML?
4. How can you create a link that scrolls to the top of the current page?

Ministry of Education 390

 HTML Lists
HTML Lists are used to specify lists of informa-
tion.

All lists may contain one or more list elements.

There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

391
HTML Ordered List or Numbered
List
There can be different types of numbered list:
1. Numeric Number (1, 2, 3)
2. Capital Roman Number (I II III)
3. Small Romal Number (i ii iii)
4. Capital Alphabet (A B C)
5. Small Alphabet (a b c)
Basic Syntax of the <ol> tag
The <ol> tag defines ordered lists in HTML. And
the list items are defined by the <li> tag.
The <ol> tag is not an empty element, so it has a
closing tag in </ol>
Syntax:
<ol>
<li>...</li>
<li>...</li>
<li>...</li>

<TYPE html>
<html>
<body>
<OL>
<h3>types of Fruit</h3>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>others</li>
</OL>
</body>
 Attributes of the <ol> Tag
Therart and Reversed.e are two attributes can be used to customize ordered list,
they are Type, St
 Grade 11 Web Design and Development Student Module

Table 3-12: Attributes of the order list

Let's see the example of an HTML ordered list that displays a numbered list. Here we are not
defining type="1" because it is the default type.
Example 20: Demonstrate Provide an example of the type attribute with four different values
such as roman number, and letter
Code Description: HTML code that shows who to apply the four different values of <ol> tag. im-
age tags
<ol type="I"> <ol type="i"> <ol type="A">
<li>HTML</li> <li>HTML</li> <li>HTML</li>
<li>CSS</li> <li>CSS</li> <li>CSS</li>
<li>JS</li> <li>JS</li> <li>JS</li>

</ol> </ol> </ol>

Attribute
Values Description
name

Type
The type attribute is used to specify which type of
numbering you want to use for the list. It is
Arabic numerals, upper or lower Changing numbering style.
case roman numbers and upper or
lower case letters.Example:
Type=1 Type=I or i Type= A or a

Start
Arabic numerals Example: The start attribute is used with ol tag to specify
Start=3 from where to start the list items. It is changing
numbering order.

Reversed
Arabic numerals, upper or lower When you use the reversed attribute on an ordered
case roman numbers and list, the list items are rendered in
Ministry of E
duppe® nor lower case letter- reverse order. That is, from the highest num 3er to
s.Example: the lowest.
Grade 11 Web Design and Development Student Module
 Grade 11 Web Design and Development Student Module

Output will be: upper roman list Output will be:Lower case ro- Output will be:Upper case letters
man

I. HTML j. HTML A. HTML

II. CSS jj. CSS B. CSS
III. JS iii. JS C. JS

The start attribute can be brought in to specify which number to start the list from. So, it accepts
an integer as a value. The default is 1. If you specify a number like 22, the next list item takes
the next number 23, on and on...
Example 21: Demonstrate type and start attribute Code Description: HTML code that show
who to use type and start form any number <Ol type=" 1" start="6">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</Ol>
Output Description: How the HTML code above looks in a browser

6. HTML
7. CSS
8. JS

The start attribute is used with the <ol> tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
<ol type="A" start="5"> : It will show capital alphabets starting with "E".
<ol type="a" start="5"> : It will show lower case alphabets starting with "e".
<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

Ministry of Education 389

 Grade 11 Web Design and Development Student Module

3.4.2 HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format .We can use un-
ordered list where we do not need to display items in any particular order. The HTML ul tag is
used for the unordered list. Unordered lists are often referred as bulleted lists. Instead of num-
bers, each element in the list has prefixed with a special bullet symbol. Unordered list is
surrounded within <UL>.........</UL> tags. As discussed above, each list element is defined
by <LI> tag. Like ordered list, type attribute is used to customize bullet style for the list of el-
ements.There can be 4 types of bulleted list:
• Disc : A solid circle
• Square : A solid square
• Circle : An unfilled circle
To represent different ordered lists, there are 4 types of attributes in <ul> tag. By default, a
solid circle is used as bullets.
Table 3-13: Attributes of the Unorder list

ype
T
Description

Type "disc"
This is the default style. In this style, the list items are marked with bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

Example 22: An HTML code illustrating the four different attributes of the ele-
ment.
Code Description: HTML code that show who to use all possible types of un-
ordered list <UL>
<li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li>
</UL>

Ministry of Education 390

 Grade 11 Web Design and Development Student Module

Definition list is different from other two types of list. No bullet or number is provided for the
list items. In this list type, the list element has two parts.
1. A definition term
2. The definition description HTML Description Lists Tags
• <dl> tag: This tag defines the description list.
• <dt> tag: This tag defines the data terms inside the list.
• <dd> tag: This tag defines the description of data.

Ministry of Education 391

 Grade 11 Web Design and Development Student Module

Example 22: An HTML code illustrating the Definition list element.

Code Description: HTML code that show who to use all possible types of unordered list <DL>
<DT> HTML: </DT>
<DD> Hyper Text Markup Language </DD>
<DT> Webpage:
<DD> A web page is a document that is suitable for the World Wide Web and web browsers.
</DD>
</DL>

Output Description: How the HTML code above looks in a browser HTML:
Hyper Text Markup Language Webpage:
A web page is a document that is suitable for the World Wide Web and web
browsers.

3.4.4 HTML Nested List

A list block can be defined inside another list is called nested list.
An example of a nested list in HTML
Code Description: HTML code that show who to use all possible types of un-
ordered list <OL>
<LI> Regional state of Ethiopia <UL type="square">
<LI> Afar Region</li>
<LI> Amhara Region</li>
<LI> Oromia</li>
<LI> Others</li>
</UL>

Ministry of Education 392

 HTML table
HTML Table is an arrangement of data in rows and columns in tabular format.
Tables are useful for various tasks such as presenting text information and numerical
data.
A table is a useful tool for quickly and easily finding connections between different
types of data. Tables are also used to create databases.
HTML Table tags
The HTML tables are created using the <table> tag.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and ta-
ble data is defined by <td> tags.
<table>
Defines the structure for organizing data in rows
and columns within a web page.

n <tr>
 Table 3-14: Common HTML Table Tags

HTML Tags Descriptions

<table>
Defines the structure for organizing data in rows and columns within a web page.

<tr> Represents a row within an HTML table, containing individual cells.

<th> Shows a table header cell that typically holds titles or headings.

<td> Represents a standard data cell, holding content or data.

<caption> Provides a title or description for the entire table.

<thead> Defines the header section of a table, often containing column labels.

<tbody>
Represents the main content area of a table, separating it from the header or footer.

<tfoot>
Specifies the footer section of a table, typically holding summaries or totals.

<col>
Defines attributes for table columns that can be applied to multiple columns at once.

<colgroup>
Groups together a set of columns in a table to which you can apply formatting or
properties collectively.
 Grade 11 Web Design and Development Student Module

Example 23: An HTML code illustrating the Table tags element.

Code Description: HTML code that show who to create table without bor-
der <table>
<caption> A summary of the UK's most famous punk bands </caption> <t-
head>
<tr>
<th scope="col">Band</th>
<th scope="col">Year formed</th>
<th scope="col">No. of Albums</th>
<th scope="col">Most famous song</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Buzzcocks</th>
<td>1976</td>
<td>9</td>
<td>Ever fallen in love (with someone you shouldn't've)</td>
</tr>
<tr>
<th scope="row">The Clash</th>
<td>1976</td>
<td>6</td>
<td>London Calling</td>
</tr>
<!-- several other great bands -->
<tr>
<th scope="row">The Stranglers</th>
<td>1974</td>

Ministry of Education 395

<td>17</td>
<td>No More Heroes</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Total albums</th> <td colspan="2">77</td>
</tr>
</tfoot>
</table>

Output Description: How the HTML code above looks in a browser

A summary of the UK's most famous punk bands

Ever fallen in love (With someone you
shouldn't've)

, „ Most famous song

No, of ™
Albums
No More Heroes

London Calling

Year
Band formed
Buzzcocks 1976 9
The Clash 1976 6
The 1974 17
Stranglers
Total albums
Attributes of Table Tag 77
The following table shows the attributes that are specific to the <table> tag.

Attribute Value Description

align left This attribute provides content alignment inside an element.It

center Specifies the alignment of the table with respect to the document
right
Ministry of Education 396
This attribute specifies the background color for the table.It Sets
bgcolor color the
background color of the table.
 Grade 11 Web Design and Development Student Module

Ministry of Education 397

 rendering, and very difficult to maintain. It should be used only to display
tabular data.

Attribute Value Description

border This attribute specifies the border for the table cells. It Specifies
1
whether the table cells should have borders or not.
0
in Numbers
cellpadding Length in
This attribute displays the padding between table cells and table
Number/percentage
content .It Specifies the space between the edge of a cell and its
content
cellspacing
Length in This attribute indicates the space between table cells.It Specifies
Number/percentage the amount of space between individual cells.
height This attribute specifies the height of the table
Length in
Number/percentage
width
Length in This attribute tells the width of the table .It Specifies the width of
Number/percentage the entire table.
Style CSS Value
A attribute on a <table> tag assigns a unique style to the table. Its
value is CSS that defines the appearance of the table.

Operation Sheet: 3-6

Ministry of Education 398

 Grade 11 Web Design and Development Student Module

Title: Table attribute

Objective: This operation sheet provides step-by-step instructions on how to use These
attributes help control the appearance, layout, and behavior of the table and its contents.

Ministry of Education 399

 Grade 11 Web Design and Development Student Module

Instructions: type each HTML code and see the effects of them in the page.
Taskl: Specifies the width of the border around the table cells
<table border=" 1 "> </table>
Task2:Specifies the space between the cell content and its borders html
<table cellpadding="10"> </table>
Task3: Specifies the space between the table cells.
<table cellspacing="10"> </table>
Task4: Specifies the width of the table.
<table width="100%"> </table>
Task5: Specifies the height of the table.
<table height="200"></table>
Task6: Specifies the alignment of the table on the page. Values can be left, right, or center.
<table align="center"></table>
Task7: Specifies the background color of the table.
<table bgcolor="lightblue"></table>

Example 24: An HTML code to demonstrate table Border ,bgcolor and Align Attribute
Code Description: HTML code that show who to use all possible types of unordered list <!
DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table align="center" border="1" bgcolor="yellow">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>

Ministry of Education 400

 Grade 11 Web Design and Development Student Module

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Output Description: How the HTML code above looks in a browser

Attributes for Table Rows and Cells

HTML also provides developers with the option to merge and split table cells. Merging cells
allows us to combine the content of two or more cells into a single cell, while splitting cells al-
lows us to divide a single cell into multiple cells. Here's an example of how to use HTML ele-
ments to split and merge table cells:

• Colspan is an attribute which assigns multiple columns to a cell of a table. The number of
columns depends on the value entered by you in colspan-'" attribute. It Allows a single table
cell to span the width of more than one cell or column.

• Rowspan in table works similar to the clospan for columns, but here, we assign multiple
rows to a cell using an attribute rowspan-"". It Allows a single table cell to span the height of
more than one cell or row.

Ministry of Education 401

 Grade 11 Web Design and Development Student Module

f
Dear Students! You can merge two or more table rows into a single row by using the
rowspan attribute, and you can merge table columns into a single column by using
the colspan attribute.

_ )
Example 25: Merge column and row cells
Code Description: HTML code that shows who to make magre cells based on column
<!DOCTYPE html>
<table border-' 1 ">
<caption> New Employees Records </caption>
<tr>
<th>Name</th>
<th colspan="2">Jobs</th>
<th>Working Experience</th>
</tr>
<tr>
<td>John</td>
<td>Software Engineer</td>
<td>Data Analyst</td>
<td rowspan="2">5 Years</td>
</tr>
<tr>
<td>Abebe</td>
<td colspan="2">Senior Web developer</td>
</tr>
<tr>
<td>Hirut</td>
<td>Junior Tech Writer</td>
<td>Blogger</td>
<td>6 Months</td>
</tr>
</table>

Ministry of Education 402

 Grade 11 Web Design and Development Student Module

Output Description: How the HTML code above looks in a browser

New Employees Records
Name Jobs Working Experience
John Software Engineer Data Analyst
5 Years
Abebe Senior Web developer
Hirut Junior Tech Writer Blogger 6 Months

Example 26:Demonstration of Height and Width of the Table

Code Description: HTML code that demonstrates how to make a table with di-
mensions <!DOCTYPE html>
<html>
<head>
<titl e></title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Student Name</th>

<th>Grade</th>
</tr>
<tr>
<td>Abebe</td>
<td>10</td>
</tr>
<tr>
<td>Selam</td>
<td>11</td>

Ministry of Education 403

 Grade 11 Web Design and Development Student Module

Ministry of Education 404

 Grade 11 Web Design and Development Student Module

</tr>
<tr>
<td>Hirut</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Output Description: How the HTML code above looks in a
browser New Employees Records
Name Jobs Working Experience
John Software Engineer Data Analyst 5 Years
Abebe Senior Web developer
Hirut Junior Tech Writer Blogger 6 Months

Self-check 3-4:
1. Write code that can provide the output table shown below?

Item Quantity Price Amount

Computer Box 2,000 1,000 2,000,000

Paper 100 800 80,000

USB Flash 600 1500 900,000

Sub total 2,980,000

Tax 15% 447,000

Total 3,427,000

Ministry of Education 405

 Grade 11 Web Design and Development Student Module

3.6 HTML frame

HTML frames are used to divide your browser window into multiple sections where each sec-
tion can load a separate HTML document. A collection of frames in the browser window is
known as a frameset. The window is divided into frames in a similar way the tables are orga-
nized
3.6.1. <frameset> Element
The <frameset> element replaces the <body> element in a document, and it defines how to di-
vide the window into frames. Each <frameset> can contain multiple <frame> elements or other
<frameset> elements to create nested frames.

Using the <frameset> tag with percentages and the asterisk (*) allows you to create flexible
layouts where certain sections of the page take up fixed or proportional amounts of space, and
the remaining space is allocated to other sections.
The <frameset> element was used in HTML 4 to define a web page that should use frames,
where each frame could display a separate HTML document. However, the use of frames and
the <frameset> element is deprecated in HTML5, meaning it is no longer recommended for
use, and support for it may be removed from browsers. Instead, CSS and modern layout tech-
niques such as Flexbox and Grid Layout are recommended for creating complex page layouts.

Undoubtedly, there are several drawbacks associated with using frames, which is why they are
generally not recommended for modern web development. Here is a detailed explanation of
these drawbacks:

Ministry of Education 406

 Grade 11 Web Design and Development Student Module

Drawbacks of Using HTML Frames

1. Incompatibility with Smaller Devices:

o Problem: Many smaller devices, such as smartphones and tablets, struggle to display frames
properly because their screens are not large enough to be divided into multiple sections.
o Impact: Users on these devices may experience poor usability and an impaired browsing ex-
perience, leading to frustration and potentially causing them to leave the site.
2. Inconsistent Display Across Different Computers:
o Problem: Web pages using frames can be displayed differently on different computers due to
varying screen resolutions and browser configurations.
o Impact: This inconsistency can make it difficult to ensure a uniform user experience across
all devices and screen sizes. Elements may not align correctly, and content can become difficult
to read or navigate.
3. Browser Back Button Issues:
o Problem: The browser’s back button may not work as expected when using frames. Typi-
cally, the back button reloads the entire frameset instead of just the content of a single frame.
o Impact: This can confuse users and make navigation more cumbersome, as they might not be
able to easily return to previously viewed content within a frame.
4. Lack of Support in Some Browsers:
o Problem: Although most modern browsers support frames, there are still a few browsers that
do not support frame technology. Additionally, as HTML5 does not include frameset elements,
future browser versions may further limit support.
o Impact: Users of these browsers will be unable to view the content as intended, which can
lead to a loss of accessibility and a diminished user experience.

Ministry of Education 407

 Grade 11 ie tofajf^Wvi^cl^h Dr) t Module
fTiPS"
providing a consistent layout across different devices and screen sizes.
1

5. Search Engine Optimization (SEO) Challenges:

o Problem: Search engines may have difficulty indexing framed content correctly. Since each
frame is a separate HTML document, search engines might not be able to associate the
content within frames with the main site effectively.
o Impact: This can negatively affect the site’s search engine rankings and reduce its visibility
in search results.
6. Accessibility Issues:

o Problem: Frames can create barriers for users with disabilities. Screen readers and other as-
sistive technologies may struggle to navigate framed content effectively.
o Impact: This can lead to compliance issues with accessibility standards (such as WCAG) and
make the website less usable for people with disabilities.

3.6.2. Attributes of <frameset>

1. rows: Defines the number and size of the rows in the frameset. Values can be
specified in pixels, as a percentage of the total window size, or using asterisks (*) for
proportional resizing.
2. cols: Defines the number and size of the columns in the frameset. Similar to rows, values
can be in pixels, percentages, or asterisks.

3.6.3. Attributes of <frame>

1. src: Specifies the URL of the document to be displayed in the frame.
2. name: Assigns a name to the frame. This can be used as the target for links and form
submissions.
3. frameborder: Specifies whether the frame should have a border (1 for yes, 0 for no).

Ministry of Education 408

Grade 11 Web Design and Development Student

Ministry of Education 409