Module IV

Web design Using HTML

Set by: Asnake Shi.

Grade-11 WEB DESIGN AND DEVLOPMENT 1

UNIT 1: MARKUP LANGUAGE
1.1 Introduction to markup language
1.2 Types of markup languages
1.3 Introduction to HTML
UNIT 2: HTML DEVELOPMENT ENVIRONMENT AND HTML STRUCTURE
2.1 Introduction to integrated development environment (IDE)
2.2 Basic HTML document structure
UNIT 3: CREATE WEB CONTENT USING HTML
3.1 HTML Elements
3.2 HTML Formatting tags
3.3 HTML Links
3.4 HTML Lists
3.5 HTML table
3.6 HTML frame
3.7 HTML Form
3.8 Multimedia elements
Grade-11 WEB DESIGN AND DEVLOPMENT 2
 UNIT 1
MARKUP LANGUAGE
Unit Coverage

This unit is designed to provide you the necessary information and practice regarding the
following content coverage:
1.1. Introduction to markup language
1.2. Types of markup languages
1.3. Introduction to HTML

Unit Learning Outcomes

This unit will also assist you to attain the following learning outcomes. Specifically, upon
completion of this unit, you will be able to:
● Identify markup languages

Grade-11 WEB DESIGN AND DEVLOPMENT 3

 1.1. 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 presentation.

Grade-11 WEB DESIGN AND DEVLOPMENT 4

 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.

Grade-11 WEB DESIGN AND DEVLOPMENT 5

➢ A markup language is not a programming language.

➢ It is static, not dynamic.

➢ It does not use logic.

➢ It simply indicates the style, structure, and

formatting.

Grade-11 WEB DESIGN AND DEVLOPMENT 6

1.1.1. History

o Markup languages have existed since 1967. The first widely used markup

language was SGML, a variant on GML that some systems still use today.

Developers at IBM used SGML to create large, complex documents that could

be easily read and distributed.

o In 1993, the most popular markup language (HTML) appeared. Developers and

designers quickly adopted it throughout the World Wide Web.

o XML is a more recent markup language but is still very popular. Developed in

1996, XML is simple to read and easy to understand. Frequently, developers use

XML to transport (export and import) data between different systems.

Grade-11 WEB DESIGN AND DEVLOPMENT 7

1.2.2. Features of Markup Language

➢ A markup language uses tags to annotate texts.

➢ Tags are special words or characters that indicate when

formatting should be applied.

➢ Tags come in pairs, with an opening tag and a closing tag.

➢ For example, in HTML,

The bold tag is written as <b> and </b>.

Grade-11 WEB DESIGN AND DEVLOPMENT 8

o 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.

o Markup languages also have a syntax, or set of

rules, that define how to use the tags.

Grade-11 WEB DESIGN AND DEVLOPMENT 9

 1.1.3. Merits and Demerits of Markup languages
I. Merits
➢ Markup languages are easy to learn and use. Even someone
with no programming experience can create a basic web
page using HTML.
➢ Markup languages also aren't as strict as programming
languages; if something goes wrong in HTML, you won't
receive a compiler error.
For that reason, experts often advise programming novices to
start by learning a markup language.

Grade-11 WEB DESIGN AND DEVLOPMENT 10

 II. Demerits

➢ Markup languages are, by nature, limiting. They are

not as versatile as programming languages and cannot
be used to create dynamic or interactive applications.

➢ Most serious web development requires programming

languages such as PHP, JavaScript, or Python

Grade-11 WEB DESIGN AND DEVLOPMENT 11

1.2. Types of markup languages

Markup languages can be classified into various categories based on their purpose

and functionality. These categories 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.

Grade-11 WEB DESIGN AND DEVLOPMENT 12

 ➢ Mathematical Markup Languages: These markup languages are specifically
designed for representing mathematical 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 Generalized 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 (Scalable Vector Graphics) is a
markup language for describing two-dimensional graphics.

Grade-11 WEB DESIGN AND DEVLOPMENT 13

 ➢ 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.

Grade-11 WEB DESIGN AND DEVLOPMENT 14

Language Syntax Typical Usage Versions Year

Creating structured 1997

HTML(Hypertext documents for web pages, HTML4, (HTML4),
Tag-based
Markup Language) including text, images, and HTML5 2014
links. (HTML5)

XML Representing and structuring

XML 1.0, 1998 (XML
(Extensible Tag-based data in a generic, platform
XML 1.1 1.0)
Markup Language) independent manner.

SGML Defining markup languages

1986
(Standard and document types, serves SGML
Tag-based (SGML
Generalized as a foundation for HTML 1.0
1.0)
Markup Language) and XML.

TeX High-quality typesetting of

TeX, 1978
(Typesetting Macro-based technical and scientific
LaTeX (TeX),
System) documents.

Grade-11 WEB DESIGN AND DEVLOPMENT 15

 Typically, in web development, there are two common categories of
markup that are utilized based on the

➢ structure of web content and the visual appearance or layout of its

content of a webpage.

It is used to structure the content of a web page in a meaningful way,

allowing search engines and assistive technologies to understand the
information. By using semantic markup, developers can improve the
accessibility, Search Engine Optimization (SEO), and overall user
experience of a website It focuses on the meaning and purpose of the
elements used, such as headings, paragraphs, lists, and links.

Grade-11 WEB DESIGN AND DEVLOPMENT 16

[Link]. Presentational Markup
Presentational markup is used to define the visual appearance
and layout of the content. It is primarily concerned with how
the web page should look to the users. It involves the use of
HTML tags and CSS styles to define the layout, colors, font
size, positioning and other websites. Both types of markup play
important roles in creating well-structured or well-designed and
accessible, visually appealing web pages.

Grade-11 WEB DESIGN AND DEVLOPMENT 17

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.

Grade-11 WEB DESIGN AND DEVLOPMENT 18

 1.3.1. HTML Versions
➢ HTML was created by Tim BernersLee in 1991.
The first-ever version of HTML was HTML 1.0, but the first
standard version was HTML 2.0, published in 1995.
➢ In this specific instance, we will thoroughly analyze the differences
between different versions of HTML.
➢ HTML 1.0 (1993):- The first version of HTML, HTML 1.0, was
released in 1993. It laid down the initial foundations for building
web pages. However, it was relatively simple and lacked many
features compared to later versions12

Grade-11 WEB DESIGN AND DEVLOPMENT 19

 ➢ HTML 2.0 (1995):-HTML 2.0 was officially published in 1995. It expanded
upon the basic structure of HTML 1.0 and introduced new elements and
features. This version marked significant progress in web development13.

➢ HTML 3.2 (1997):-HTML 3.2 brought more enhancements, including support

for tables, forms, and image maps. It was widely used during the late 1990s
and early 2000s1.

➢ HTML 4.01 (1999):-HTML 4.01 was a major version released in late 1999. It
introduced features like frames, style sheets, and improved form controls. This
version played a crucial role in shaping the web landscapes 13.

➢ HTML5 (2008):-HTML5, the most recent and robust version, emerged in

2008. It revolutionized web development by introducing new semantic
elements, multimedia support (such as <video> and <audio>), and the powerful
<canvas> element for graphics and animations.
Grade-11 WEB DESIGN AND DEVLOPMENT 20
 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

Grade-11 WEB DESIGN AND DEVLOPMENT 21

 ➢ 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 additional 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 platforms and devices

Grade-11 WEB DESIGN AND DEVLOPMENT 22

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 system that has a web browser.

➢ 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 engaging and interactive web experiences.

Grade-11 WEB DESIGN AND DEVLOPMENT 23

 ➢ 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, enhancing the
interconnectedness of web content.

➢ Markup Language: HTML stands for Hypertext Markup

Language. As a markup language, HTML uses tags to define 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.

Grade-11 WEB DESIGN AND DEVLOPMENT 24

1.3.4. 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.

➢ Easy Implementation: HTML's simplicity makes it easy to implement.

With just a basic understanding of its syntax, users can start creating web
pages.

➢ 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 website

Grade-11 WEB DESIGN AND DEVLOPMENT 25

➢ Fundamentals of Web Programming: Learning HTML provides a solid

foundation for understanding web programming concepts. It introduces

beginners to essential concepts like markup languages, document structure,

elements, attributes, and the basics of client-side web development.

➢ Professional Career Boost: Proficiency in HTML can significantly boost

one’s professional career, especially in fields related to web development,

design, and digital marketing. Many job roles in these industries require

knowledge of HTML as a fundamental skill. Having HTML skills on your

resume demonstrates your ability to create and maintain web content,

which is highly valued in today's digital economy.

Grade-11 WEB DESIGN AND DEVLOPMENT 26

1.3.5. Merits and Demerits of HTML

HTML several advantages,

➢ its simplicity and ease of use.

➢ It is a straightforward language that allows users to create and structure web

pages without requiring extensive coding knowledge.

➢ Additionally, HTML is supported by all major web browsers, ensuring

compatibility across different platforms and devices.

➢ HTML is used to build websites. It is supported by all browsers.

➢ It can be integrated with other languages like CSS, JavaScript, etc

Grade-11 WEB DESIGN AND DEVLOPMENT 27

 Dis advantages
➢ One of the main drawbacks is its limited functionality when it comes to creating
dynamic and interactive web pages.

➢ HTML alone cannot handle complex tasks such as user input validation or
database interactions.

To overcome this limitation, developers often need to combine HTML with

other programming languages like JavaScript or [Link] can only create
static web pages.

➢ For dynamic web pages, other languages have to be used.

➢ A large amount of code has to be written to create a simple web page. The
security feature is not good.

Grade-11 WEB DESIGN AND DEVLOPMENT 28

 UNIT 2
HTML DEVELOPMENT ENVIRONMENT
AND HTML STRUCTURE

Grade-11 WEB DESIGN AND DEVLOPMENT 29

Unit Coverage

This unit is designed to provide you the necessary information and practice regarding the
following content coverage:
1. Introduction to integrated development environment/ IDE/
2. Basic HTML document structure

Unit Learning Outcomes

This unit will also assist you to attain the following learning outcomes. Specifically, upon
completion of this unit, you will be able to:
● Setup the HTML development environment
● Create HTML pages

Grade-11 WEB DESIGN AND DEVLOPMENT 30

2.1. Introduction to integrated development environment (IDE)

An integrated development environment (IDE) is a software platform that offers a

wide range of tools and functionalities to support the development of software
applications. In the case of web development, the development environment
provides the necessary tools and resources that allow developers to create HTML
code.

An HTML integrated development environment (IDE) is a software tool that

provides a comprehensive platform for developing HTML code.
Definitely! In web development, an integrated development environment (IDE)
provides a convenient and efficient workspace for creating HTML code and
building web applications.

Grade-11 WEB DESIGN AND DEVLOPMENT 31

2.1.1. Tools Required in web design
The necessary tools for establishing an HTML development environment. Setting up an
HTML development environment 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 highlighting, 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 environment 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

Grade-11 WEB DESIGN AND DEVLOPMENT 32

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.

➢ Examples of HTML Text editors include-Notepad++, VSCode, Sublime Tex

2. WYSIWYG HTML Editor

What you see is what you get’(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.

Grade-11 WEB DESIGN AND DEVLOPMENT 33

 3. Browser Tools
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
features and quirks, so it's a good idea to test your code in
multiple browsers.

Grade-11 WEB DESIGN AND DEVLOPMENT 34

Advantages of using HTML Editors

➢ They are of great benefit since they allow the users to easily check their syntax,
insert commonly used HTML tags and structures and also provide auto-
completion.

➢ The code generated through an HTML editor can be translated to other languages
such as XML, JavaScript,etc. For example-NVU editor provides this translation
functionality.

➢ Website development can be very exhausting and cumbersome. With the help of
online HTML editors, it is possible to create websites with ease and at a faster
rate.

➢ HTML editors provide full control to the developer, hence helping him to delve
deeper into the source code and find the hidden intricacies.

➢ HTML editors provide an amicable and aesthetic designing experience.

Grade-11 WEB DESIGN AND DEVLOPMENT 35
2.1.2. Installing required tools and extensions
I. Software Requirements for Web Development
Most operating systems come with a basic text editor. However, if you want additional
features like syntax coloring, auto completion, and code search, consider using third -
party editors.
Some popular text editors include:

✓ Windows: Notepad, Notepad++, Visual Studio Code, WebStorm, Brackets, ShiftEdit,

Sublime Text.

✓ Mac OS: TextEdit, TextWrangler, Visual Studio Code, Brackets, ShiftEdit, Sublime Text.

✓ Linux: Vi (for all UNIX systems), GEdit (Gnome), Kate (KDE), LeafPad (Xfce), Emacs,
Vim, Visual Studio Code, Brackets, ShiftEdit, Sublime Text.

✓ ChromeOS: ShiftEdit.

Grade-11 WEB DESIGN AND DEVLOPMENT 36

 II. Hardware Requirements for Web Development:
HTML5-capable browsers vary in their hardware requirements. However,
several lightweight devices can run HTML5 browsers effectively: It
lightweight and should easily run on today's hardware of Personal
[Link] recommend:
CPU >1.6 GHz or faster processor and >1 GB of RAM

❑ Post-PC Devices: Devices like iPods, iPads, iPhones, various Android

devices, and Blackberries can run lightweight, full-featured HTML5
browsers based on projects like WebKit. These devices have low hardware
specifications but can handle HTML5 content, including video playback
and JavaScript transformations

Grade-11 WEB DESIGN AND DEVLOPMENT 37

III. Extensions for web development:
Additionally, as a web developer, having the right browser extensions can significantly
enhance your productivity and streamline your workflow. Here are some must-have
Chrome extensions for both developers and designers that can enhance your web
development experience:-

❑ Web Developer: A suite of tools within a single Chrome extension. It includes various
useful tools for both general developers and web developers

❑ Wappalyzer: Although not a Chrome extension, it’s worth mentioning. Wappalyzer helps
you identify the technologies used on any website, including programming languages,
frameworks, and content management systems . It provides insights into the stack used,
including programming languages, frameworks, and content management systems.

❑ HTML Validator: Check your HTML code for errors and ensure proper syntax. This
extension helps you maintain clean and valid HTML markup

❑ Web Developer Checklist: Get a checklist of best practices for web development. It
covers various aspects like performance optimization, accessibility, and security
Grade-11 WEB DESIGN AND DEVLOPMENT 38
 2.2. Basic HTML document structure
HTML document structure
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 include
multimedia elements such as audio, video, animations etc. Entire
HTML document is bound within a pair of <html> and </html>
tags.
HTML tags are generally have an opening and closing tag
surrounding the text they affect. It is written between < >
brackets and HTML elements consist of several parts, including
the opening and closing tags, the content, and the attributes.

Grade-11 WEB DESIGN AND DEVLOPMENT 39

 Example 1:Basic HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>

Grade-11 WEB DESIGN AND DEVLOPMENT 40

 Table 2-2: Description of The basic HTML structure
No HTML element Description

This declaration specifies the version of HTML that the document is

1 <!DOCTYPE html>
written in. It is usually the first line of an HTML file

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

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

This element is HTML elements that provide information about a

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

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

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

Grade-11 WEB DESIGN AND DEVLOPMENT 41

 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 [Link] hierarchical
structure is called the DOM (Document Object Model), and it is used by the web
browser to render the web page.

Figure 2.1: Document Object Model

Grade-11 WEB DESIGN AND DEVLOPMENT 42

 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>

Grade-11 WEB DESIGN AND DEVLOPMENT 43

 Output Description: Basic HTML output will describe each elements

Grade-11 WEB DESIGN AND DEVLOPMENT 44

 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

for example: [Link]

Grade-11 WEB DESIGN AND DEVLOPMENT 45

 2.2. Saving and opening html documents

To begin coding HTML you need only two things:

➢ a simple-text editor(NOTEPAD) write code and

➢ A web browser (open the code)

Grade-11 WEB DESIGN AND DEVLOPMENT 46

2.2.3. Metadata and its importance in SEO
What is HTML metadata?
Metadata is data (information) about data. <meta> tags
always go inside the <head> element, and are typically used
to specify character set, page description, keywords, author
of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine

parsable.

Grade-11 WEB DESIGN AND DEVLOPMENT 47

 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.

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 results.

❑ 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.

Grade-11 WEB DESIGN AND DEVLOPMENT 48

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 of 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
Grade-11 WEB DESIGN AND DEVLOPMENT 49
 UNIT 3
CREATE WEB CONTENT USING HTML

Grade-11 WEB DESIGN AND DEVLOPMENT 50

Unit Coverage

This unit is designed to provide you the necessary information and practice
regarding the following content coverage:
3.1 HTML Elements
3.2 HTML Text formatting elements
3.3 HTML links
3.4 HTML lists
3.5 HTML table
3.6 HTML frame
3.7 HTML form
3.8 HTML multimedia

Unit Learning Outcomes

This unit will also assist you to attain the following learning outcomes. Specifically,
upon completion of this unit, you will be able to:
● Create web pages
● Insert contents using HTML

Grade-11 WEB DESIGN AND DEVLOPMENT 51

3.1 HTML Elements
HTML uses predefined tags and elements which tell the browser how to properly
display the content.

An HTML element is defined by a start tag, some content, and an end tag.

Syntax: <element> content </element>

Figure 3.1: HTML element

Grade-11 WEB DESIGN AND DEVLOPMENT 52

 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.
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/>
Grade-11 WEB DESIGN AND DEVLOPMENT 53
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 below:

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 .

Grade-11 WEB DESIGN AND DEVLOPMENT 54

2. Structure Tags
The HTML tags that help in structuring the HTML document are called Structure
Tags. Description, head, html, title, body, etc., form the group of the page structure
tags. The structure 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 HTML tags can also be simply divided based on basic categories like :

Grade-11 WEB DESIGN AND DEVLOPMENT 55

 Figure 3.2: Categories of basic HTML tags categories

Table 3-2: HTML tags and Groups

Grade-11 WEB DESIGN AND DEVLOPMENT 56

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

Basic Root Tags html, head, and body

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>,
HTML Text formatting
<acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>,
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

form, input, textarea, select, option, optgroup, button, label, fieldset and
HTML Form Tags
legend

HTML media Tags Audio, Video, SVG (Scalable Vector Graphics),and Canvas Tags

HTML script or
Canvas, Script and nonscript
programming tags
Grade-11 WEB DESIGN AND DEVLOPMENT 57
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 Element as its content.

Grade-11 WEB DESIGN AND DEVLOPMENT 58

 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 possible. 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.

Grade-11 WEB DESIGN AND DEVLOPMENT 59

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! -->

Grade-11 WEB DESIGN AND DEVLOPMENT 60

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
<!—

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

<p>This is a paragraph.</p>
-->

Grade-11 WEB DESIGN AND DEVLOPMENT 61

 3.1.3 HTML attributes

In HTML, attributes are used to modify the behavior or appearance of an element or to

provide additional information about an HTML element that cannot be conveyed

through the element's content alone. Attributes are specified within the opening 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 attributes provide common functionality and can be applied universally. they can

be used on all elements, though they may have no effect on some elements. Global

attributes specified on both standard and non-standard elements. Let’s explore some

common of these global attributes:

Grade-11 WEB DESIGN AND DEVLOPMENT 62

 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.

● 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"

Grade-11 WEB DESIGN AND DEVLOPMENT 63

 Syntax:
<Tag_name attribute_name="value"> contents </ Tag_name>

Figure 3.3: Attribute of HTML element

Grade-11 WEB DESIGN AND DEVLOPMENT 64

 HTML Tag Attributes

Example:

html

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

• dir="rtl" - Right-to-left text direction

• lang="fr" - French language

Grade-11 WEB DESIGN AND DEVLOPMENT 65

 Body Tag Attributes

Attribute Values Description

bgcolor color name, hex, RGB Background color

text color name, hex, RGB Text color

background URL Background image

leftmargin pixels Left margin

topmargin pixels Top margin

Grade-11 WEB DESIGN AND DEVLOPMENT 66

 Color Representation Methods

• Color Names: red, blue, green, yellow

• Hex Codes: #FF0000 (red), #00FF00 (green)

• RGB Values: rgb(255,0,0) (red)

Grade-11 WEB DESIGN AND DEVLOPMENT 67

 HTML Writing Best Practices

• Use proper indentation

• Use semantic HTML
• Close all tags properly
• Keep HTML and CSS separate
• Use meaningful comments
• Validate your code
• Stay updated with standards

Grade-11 WEB DESIGN AND DEVLOPMENT 68

 HTML Formatting Tags

• Enhance text appearance

• Make content more readable

• Highlight important information

Grade-11 WEB DESIGN AND DEVLOPMENT 69

 Paragraph Tags
html

<p>This is a paragraph.</p>

➢Creates text paragraphs

➢Adds automatic spacing before and after

➢Block-level element

Grade-11 WEB DESIGN AND DEVLOPMENT 70

 Line Break and Horizontal Rule
html

<br> <!-- Line break -->

<hr> <!-- Horizontal rule -->

<br> - Inserts single line break

<hr> - Creates thematic break (horizontal line)

Grade-11 WEB DESIGN AND DEVLOPMENT 71

 Creating Space in Paragraphs

html

<p>Extra space &nbsp;&nbsp; inside paragraph

</p>

&nbsp; - Non-breaking space character

Grade-11 WEB DESIGN AND DEVLOPMENT 72

 Heading Tags
HTML provides 6 levels of headings:
html
<h1>Heading 1</h1> <!-- Largest -->
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <!-- Smallest -->

Grade-11 WEB DESIGN AND DEVLOPMENT 73

 Text Formatting Tags
Tag Purpose
<b> Bold text
<strong> Important text
<i> Italic text
<em> Emphasized text
<u> Underlined text
<mark> Highlighted text
<small> Smaller text
<del> Deleted text
<ins> Inserted text
<sub> Subscript
<sup> Superscript

Grade-11 WEB DESIGN AND DEVLOPMENT 74

 Text Formatting Examples
html
<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Highlighted</mark>
<del>Deleted</del>
<ins>Inserted</ins>
Water is H₂O
x² + y²

Grade-11 WEB DESIGN AND DEVLOPMENT 75

 Font Tag (Deprecated)
html

<font size="12" color="red" face="Arial">

Text here </font>

Note: Deprecated in HTML5 - use CSS instead

Grade-11 WEB DESIGN AND DEVLOPMENT 76

 Nested Elements
• Elements inside other elements
• Must be properly closed (last opened, first closed)

Correct:

html
<p><b><i>Hello!</i></b></p>

Wrong:

html
<p><b><i>Hello!</p></b></i>

Grade-11 WEB DESIGN AND DEVLOPMENT 77

 Image Tag
html

<img src="[Link]" alt="description">

• Self-closing tag

• Embeds images in web pages

• Supports formats: GIF, JPEG, PNG, SVG

Grade-11 WEB DESIGN AND DEVLOPMENT 78

 Image Tag Attributes
Attribute Description

src Image source/file path

alt Alternative text

width Image width

height Image height

align Alignment (top, middle, bottom)

border Border thickness

hspace Horizontal space

vspace Vertical space

Grade-11 WEB DESIGN AND DEVLOPMENT 79

 Image Example

<img src="[Link]"

alt="Description"

width="500"

height="333"

align="left">

Grade-11 WEB DESIGN AND DEVLOPMENT 80

 Marquee Tag
<marquee>Scrolling text</marquee>

• Creates scrolling text or images

• Attributes: direction, behavior, loop, scroll
amount
Example:
html

<marquee direction="left">Scroll left</marquee>

<marquee direction="up">Scroll up</marquee>

Grade-11 WEB DESIGN AND DEVLOPMENT 81

 HTML Links (Anchor Tags)
html

<a href="url">Link Text</a>

• Create hyperlinks to other resources

• Can link to pages, files, emails, locations

Grade-11 WEB DESIGN AND DEVLOPMENT 82

 Types of Links
[Link] Links: Clickable text

[Link] Links: Clickable images

[Link] Links: Opens email client

[Link] Links: Links within same site

[Link] Links: Links to other sites

Grade-11 WEB DESIGN AND DEVLOPMENT 83

 Anchor Tag Attributes

Attribute Description

href URL of the link

target Where to open link

title Tooltip text

download Download file instead of opening

Grade-11 WEB DESIGN AND DEVLOPMENT 84

 Target Attribute Values

Value Description

_self Same window/tab (default)

_blank New window/tab

_parent Parent frame

_top Full body of window

Grade-11 WEB DESIGN AND DEVLOPMENT 85

 Link Examples
html
<!-- Text link -->
<a href="[Link] Google</a>
<!-- Open in new tab -->
<a href="[Link]" target="_blank">New Tab</a>
<!-- Image link -->
<a href="[Link]">
<img src="[Link]" alt="Click me">
</a>
<!-- Email link -->
<a href="[Link] Us</a>

Grade-11 WEB DESIGN AND DEVLOPMENT 86

 • HTML Lists

• Used to group related items

• Three types of lists

Types of HTML Lists

1. Ordered Lists (<ol>) - Numbered

2. Unordered Lists (<ul>) - Bulleted

3. Description Lists (<dl>) - Terms and descriptions

Grade-11 WEB DESIGN AND DEVLOPMENT 87

 Ordered List (Numbered)
html
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Output:
1. First item
2. Second item
3. Third item
Grade-11 WEB DESIGN AND DEVLOPMENT 88
 Ordered List Type Attribute
Value Style

type="1" Numbers (1, 2, 3)

type="A" Uppercase letters (A, B, C)

type="a" Lowercase letters (a, b, c)

type="I" Uppercase Roman (I, II, III)

type="i" Lowercase Roman (i, ii, iii)

Grade-11 WEB DESIGN AND DEVLOPMENT 89

 Ordered List Examples

html
<ol type="A">
<li>Apple</li>
<li>Banana</li>
</ol>
<ol type="I" start="5">
<li>Item 5 (V)</li>
<li>Item 6 (VI)</li>
</ol>
Unordered List (Bulleted)
html
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Grade-11 WEB DESIGN AND DEVLOPMENT 90

 Unordered List Type Attribute

Value Bullet Style

type="disc" Solid circle (default)

type="circle" Hollow circle

type="square" Solid square

type="none" No bullets

Grade-11 WEB DESIGN AND DEVLOPMENT 91

 Unordered List Examples

html
<ul type="square">
<li>Square bullet</li>
</ul>
<ul type="circle">
<li>Circle bullet</li>
</ul>

Description List
html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Grade-11 WEB DESIGN AND DEVLOPMENT 92

 Nested Lists
Lists inside other lists:
html
<ol>
<li>Countries
<ul>
<li>Ethiopia</li>
<li>Kenya</li>
</ul>
</li>
</ol>

Grade-11 WEB DESIGN AND DEVLOPMENT 93

 HTML Tables

• Display data in rows and columns

• Organize information in grid format

Basic Table Structure

html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Grade-11 WEB DESIGN AND DEVLOPMENT 94

 Table Tags
Tag Description
<table> Defines the table
<tr> Table row
<th> Table header cell
<td> Table data cell
<caption> Table caption
<thead> Table header group
<tbody> Table body group
<tfoot> Table footer group

Grade-11 WEB DESIGN AND DEVLOPMENT 95

 Table Attributes
Attribute Description

border Border width

cellpadding Space between cell content and border

cellspacing Space between cells

width Table width

height Table height

align Table alignment

bgcolor Background color

Grade-11 WEB DESIGN AND DEVLOPMENT 96

 Merging Cells
➢ colspan: Merge columns horizontally

➢ rowspan: Merge rows vertically

Html

<td colspan="2">Spans two columns</td>

<td rowspan="3">Spans three rows</td>

Grade-11 WEB DESIGN AND DEVLOPMENT 97

 Table with Colspan Example

html

<table border="1">

<tr>

<th colspan="2">Name</th>

</tr>

<tr>

<td>First</td>

<td>Last</td>

</tr>

</table>

Grade-11 WEB DESIGN AND DEVLOPMENT 98

 Table with Rowspan Example
html
<table border="1">
<tr>
<td rowspan="2">Row 1 & 2</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
</table>

Grade-11 WEB DESIGN AND DEVLOPMENT 99

 HTML Frames (Deprecated)
• Divide browser window into multiple sections

• Each section loads separate HTML document

• Note: Frames are obsolete in HTML5

• Use CSS and modern layout techniques

instead

Grade-11 WEB DESIGN AND DEVLOPMENT 100

 Frameset Structure
html

<frameset cols="25%,75%">

<frame src="[Link]">

<frame src="[Link]">

</frameset>

Grade-11 WEB DESIGN AND DEVLOPMENT 101

 Frameset Attributes
Attribute Description

rows Row sizes (pixels, %, *)

cols Column sizes (pixels, %, *)

frameborder Border display (1 or 0)

border Border thickness

Frame Attributes
Attribute Description
src URL of document to display
name Frame name (for targeting)
noresize Prevent resizing
scrolling Scrollbar (yes/no/auto)
Grade-11 WEB DESIGN AND DEVLOPMENT 102
 Drawbacks of Frames
• Not supported on smaller devices

• Browser back button issues

• SEO challenges

• Accessibility problems

Deprecated in HTML

Grade-11 WEB DESIGN AND DEVLOPMENT 103

 HTML Iframes (Modern Alternative)
html
<iframe src="url" width="500" height="300">
</iframe>

• Inline frame
• Embeds another document within current
page
Still supported in HTML5

Grade-11 WEB DESIGN AND DEVLOPMENT 104

 Iframe Attributes
• src - Source URL
• width - Frame width
• height - Frame height
• name - Frame name
• frameborder - Border display
• allowfullscreen - Allow fullscreen mode

Grade-11 WEB DESIGN AND DEVLOPMENT 105

 HTML Forms

• Collect user input

• Send data to server for processing Essential for interactivity

Form Tag Syntax

html

<form action="[Link]" method="POST">

<!-- Form elements go here -->

</form>

Grade-11 WEB DESIGN AND DEVLOPMENT 106

 Form Attributes
Attribute Description
action URL where form data is sent
method HTTP method (GET or POST)
name Form name
target Where to display response
enctype Encoding type for file upload
GET vs POST Methods
Feature GET POST
Data location URL Request body
Visibility Visible Hidden
Security Less secure More secure
Data limit ~2048 chars No limit
Bookmark Can bookmark Cannot bookmark
Grade-11 WEB DESIGN AND DEVLOPMENT 107
 Form Elements
• <input> - Various input types
• <label> - Input labels
• <select> - Dropdown lists
• <textarea> - Multi-line text
• <button> - Clickable buttons
• <fieldset> - Group related elements
<legend> - Caption for fieldset
Grade-11 WEB DESIGN AND DEVLOPMENT 108
 Input Tag Types
Type Description
text Single-line text
password Masked text
radio Radio button (single choice)
checkbox Checkbox (multiple choice)
file File upload
submit Submit button
reset Reset button
button Generic button
email Email address
number Numeric input
date Date picker
10
Grade-11 WEB DESIGN AND DEVLOPMENT
9
 Common Input Attributes

Attribute Description
name Field name
value Default value
placeholder Hint text
required Field must be filled
readonly Read-only field
disabled Disabled field
maxlength Maximum characters
size Visible width
checked Pre-selected (radio/checkbox)

Grade-11 WEB DESIGN AND DEVLOPMENT 110

 Text Input Example
html
<label for="username">Username:</label>
<input type="text"
id="username"
name="username"
placeholder="Enter username"
required
maxlength="20">

Grade-11 WEB DESIGN AND DEVLOPMENT 111

 Password Input
html
<label for="pwd">Password:</label>
<input type="password"
id="pwd"
name="password"
placeholder="Enter password"
required>

Grade-11 WEB DESIGN AND DEVLOPMENT 112

 Radio Buttons
html

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other

• Same name attribute = only one selection

Grade-11 WEB DESIGN AND DEVLOPMENT 113

 Checkboxes
html

<input type="checkbox" name="hobby1" value="reading"> Reading

<input type="checkbox" name="hobby2" value="sports"> Sports

<input type="checkbox" name="hobby3" value="music"> Music

• Multiple selections allowed

11
Grade-11 WEB DESIGN AND DEVLOPMENT
4
 File Upload

html

<label for="file">Choose file:</label>

<input type="file" id="file" name="upload" multiple>

• multiple - Allow multiple files

Submit and Reset Buttons

html
<input type="submit" value="Submit Form">
<input type="reset" value="Clear Form">
Or using button tag:
html
<button type="submit">Submit</button>
<button type="reset">Reset</button>

Grade-11 WEB DESIGN AND DEVLOPMENT 115

Select Dropdown

html

<select name="city">

<option value="addis">Addis Ababa</option>

<option value="bahir">Bahir Dar</option>

<option value="dire">Dire Dawa</option>

</select>

Grade-11 WEB DESIGN AND DEVLOPMENT 116

 Select with Option Groups
html
<select name="subject">
<optgroup label="Grade 9">
<option>Math</option>
<option>English</option>
</optgroup>
<optgroup label="Grade 10">
<option>Physics</option>
<option>Chemistry</option>
</optgroup>
</select>
Grade-11 WEB DESIGN AND DEVLOPMENT 117
Textarea (Multi-line Text)

html
<textarea name="message"
rows="5"
cols="40"
placeholder="Enter your message">
Default text here
</textarea>

Fieldset and Legend

html
<fieldset>
<legend>Personal Information</legend>
<label>Name: <input type="text"></label>
<label>Email: <input type="email"></label>
</fieldset>
• Groups related form elements
• Adds bordered box with caption

Grade-11 WEB DESIGN AND DEVLOPMENT 118

 • HTML5 Input Types
• email - Email validation
• url - URL validation
• number - Numeric spinner
• range - Slider control
• date - Date picker
• time - Time picker
• color - Color picker
• tel - Telephone number

Grade-11 WEB DESIGN AND DEVLOPMENT 119

 Number Input Example

html
<input type="number"
name="quantity"
min="1"
max="10"
step="1"
value="5">

Range Input
html
<input type="range"
name="volume"
min="0"
max="100"
value="50">

Grade-11 WEB DESIGN AND DEVLOPMENT 120

Date and Time Inputs

html

<input type="date" name="birthday">

<input type="time" name="appointment">

<input type="datetime-local" name="meeting">

<input type="week" name="week">

<input type="month" name="month">

Email and URL Inputs

html

<input type="email" name="useremail" required>

<input type="url" name="website" placeholder="[Link]

Grade-11 WEB DESIGN AND DEVLOPMENT 121

 Form Validation
Ensures user input meets criteria before
submission

Two types:

[Link]-side - In browser (HTML5/JavaScript)

[Link]-side - On server (more secure)

Grade-11 WEB DESIGN AND DEVLOPMENT 122

 HTML5 Validation Attributes
Attribute Description
required Field must be filled
pattern Regular expression pattern
min/max Min/max values
minlength/maxlength Min/max characters
step Increment steps

Grade-11 WEB DESIGN AND DEVLOPMENT 123

 Pattern Attribute Example

html
<input type="text"
pattern="[A-Za-z]+"
title="Letters only">

<input type="text"
pattern="[0-9]{5}"
title="5-digit number">
Multimedia Elements
• HTML5 introduced native multimedia support:
• <img> - Images
• <audio> - Audio files
• <video> - Video files
• <iframe> - Embed external content

Grade-11 WEB DESIGN AND DEVLOPMENT 124

 Audio Element html

<audio controls>

<source src="song.mp3" type="audio/mpeg">

<source src="[Link]" type="audio/ogg">

Your browser doesn't support audio.

</audio>

Audio Attributes

Attribute Description
controls Show play/pause controls
autoplay Start playing automatically
loop Loop the audio
muted Mute by default
preload How to preload (none/metadata/auto)

Grade-11 WEB DESIGN AND DEVLOPMENT 125

 Video Element html

<video width="640" height="360" controls>

<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser doesn't support video.
</video>
Attribute Description
controls Show video controls
width/height Video dimensions
autoplay Start playing automatically
loop Loop the video
muted Mute by default
poster Thumbnail image
preload How to preload
Grade-11 WEB DESIGN AND DEVLOPMENT 126
 Multiple Sources
html

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
<source src="[Link]" type="video/webm">
<p>Your browser doesn't support video.</p>
</video>

• Provides fallback options

• Browser uses first supported format

Supported Media Formats

Tip: Always provide multiple formats for compatibility

Media Formats
Video MP4, WebM, Ogg
Audio MP3, WAV, Ogg

Grade-11 WEB DESIGN AND DEVLOPMENT 127

 Adding Subtitles/Captions html

<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt"
kind="subtitles"
srclang="en"
label="English">
</video>

Object Element html

<object data="[Link]" type="application/pdf"
width="500" height="600">
<p>PDF cannot be displayed</p>
</object>
• Embeds external objects (PDFs, Flash, etc.)

Grade-11 WEB DESIGN AND DEVLOPMENT 128

 Embed Element
html
<embed src="[Link]"
type="application/x-shockwave-flash
"
width="400" height="300">

• Simpler than <object>

Used for plugins and external content
Grade-11 WEB DESIGN AND DEVLOPMENT 129
 HTML Entities
Special characters represented by codes:

Entity Character

&nbsp; Non-breaking space

&lt; <

&gt; >

&amp; &

&copy; ©

&reg; ®

Grade-11 WEB DESIGN AND DEVLOPMENT 130

 HTML Summary - Key Points

• HTML structures web content

• Elements have opening and closing tags
• Attributes provide additional information
• Forms collect user input
• Tables organize data
• Lists group related items
• Links connect resources
Multimedia enhances user experience

Grade-11 WEB DESIGN AND DEVLOPMENT 131

 HTML Document Structure Recap

html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Visible content -->
</body>
</html>

Grade-11 WEB DESIGN AND DEVLOPMENT 132

 Common HTML Tags Reference
Tag Purpose
<h1>-<h6> Headings

<p> Paragraph

<a> Link

<img> Image

<ul>/<ol> Lists

<table> Table

<form> Form

<div> Division/container

<span> Inline container

Grade-11 WEB DESIGN AND DEVLOPMENT 133

 HTML Best Practices
• Use lowercase tags and attributes
• Always quote attribute values
• Close all tags properly
• Use semantic HTML5 elements
• Keep code indented and readable
• Validate your HTML
• Separate content from presentation

Grade-11 WEB DESIGN AND DEVLOPMENT 134

 Semantic HTML5 Elements

• <header> - Page header

• <nav> - Navigation links
• <main> - Main content
• <article> - Self-contained content
• <section> - Thematic grouping
• <aside> - Sidebar content
• <footer> - Page footer
HTML Accessibility Tips
• Use alt attributes for images
• Use proper heading hierarchy
• Label form inputs
• Use semantic elements
• Ensure keyboard navigation
• Provide text alternatives

Grade-11 WEB DESIGN AND DEVLOPMENT 135

 HTML vs XHTML

HTML XHTML

Case-insensitive Case-sensitive (lowercase)

Tags don't need closing All tags must close

Quotes optional Quotes required

More forgiving Strict syntax

13
Grade-11 WEB DESIGN AND DEVLOPMENT
6
 • HTML5 New Features
• Semantic elements
• Form input types
• Multimedia elements
• Canvas for graphics
• Local storage
• Geolocation API
• Drag and drop

Grade-11 WEB DESIGN AND DEVLOPMENT 137

HTML Forms - Complete Example
<form action="/submit" method="post">
<fieldset>
<legend>Registration</legend>
<label>Name: <input type="text" required></label>
<label>Email: <input type="email" required></label>
<label>Password: <input type="password" required></label>
<label>Gender:
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female
</label>
<label>Country:
<select>
<option>Ethiopia</option>
<option>Kenya</option>
</select>
</label>
<button type="submit">Register</button>
</fieldset>
</form>

Grade-11 WEB DESIGN AND DEVLOPMENT 138

HTML Table - Complete Example
html
<table border="1">
<caption>Student Grades</caption>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abebe</td>
<td>Math</td>
<td>A</td>
</tr>

Grade-11 WEB DESIGN AND DEVLOPMENT 139

 </tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">End of Report</td>
</tr>
</tfoot>
</table>

Grade-11 WEB DESIGN AND DEVLOPMENT 140

 HTML Lists - Complete Example(HTML)
<h2>Website Structure</h2>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Company History</li>
<li>Team Members</li>
</ul>
</li>
<li>Services
<ol type="i">
<li>Web Design</li>
<li>Development</li>
<li>SEO</li>
</ol>
</li>
<li>Contact</li>
</ul>

Grade-11 WEB DESIGN AND DEVLOPMENT 141

 HTML Links - Complete Example(HTML)
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>

<!-- Email link -->

<a href="[Link]
Contact Support
</a>

<!-- Download link -->

<a href="files/[Link]" download>
Download PDF
</a>

Grade-11 WEB DESIGN AND DEVLOPMENT 142

 HTML Multimedia - Complete Example(HTML)

<!-- Video with controls and poster -->

<video controls width="600" poster="[Link]">

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

<source src="[Link]" type="video/webm">

<track src="[Link]" kind="captions">

<p>Your browser doesn't support video.</p>

</video>

<!-- Audio with playlist -->

<audio controls>

<source src="track1.mp3" type="audio/mpeg">

<source src="[Link]" type="audio/ogg">

<p>Your browser doesn't support audio.</p>

</audio>

Grade-11 WEB DESIGN AND DEVLOPMENT 143

 HTML Character Entities - Common Codes

Character Entity Description

< &lt; Less than
> &gt; Greater than
& &amp; Ampersand
" &quot; Double quote
' &apos; Apostrophe
© &copy; Copyright
® &reg; Registered
&trade; Trademark
€ &euro; Euro
£ &pound; Pound

Grade-11 WEB DESIGN AND DEVLOPMENT 144

 HTML Colors

Ways to specify colors:

1. Color names: red, blue, green

2. Hex codes: #FF0000 (red), #00FF00 (green)

3. RGB: rgb(255,0,0) (red)

4. RGBA: rgba(255,0,0,0.5) (with opacity)

5. HSL: hsl(0,100%,50%) (hue, saturation, lightness)

Grade-11 WEB DESIGN AND DEVLOPMENT 145

 HTML5 Data Attributes

<div data-user-id="12345" data-role="admin">

User Information

</div>

<!-- Accessed with JavaScript -->

<script>

let div = [Link]('div');

let userId = [Link];

let role = [Link];

</script>

• Store custom data in HTML

• Prefix with data- Accessible via JavaScript

Grade-11 WEB DESIGN AND DEVLOPMENT 146

 HTML Microdata
<div itemscope itemtype="[Link]
<span itemprop="name">Abebe Kebede</span>
<span itemprop="jobTitle">Web Developer</span>
<div itemprop="address" itemscope
itemtype="[Link]
<span itemprop="addressLocality">Addis Ababa</span>
<span itemprop="addressCountry">Ethiopia</span>
</div>
</div>

Grade-11 WEB DESIGN AND DEVLOPMENT 147

 HTML Validation Tools

• W3C Validator: [Link]

• Browser Developer Tools: F12 or right-click > Inspect

• HTML Linters: Built into code editors

• Browser Extensions: Web Developer Toolbar

Grade-11 WEB DESIGN AND DEVLOPMENT 148

 Common HTML Errors to Avoid
1. Missing DOCTYPE declaration

2. Unclosed tags

3. Improper nesting

4. Duplicate IDs

5. Missing alt attributes on images

6. Using deprecated tags

7. Inline styles (use CSS instead)

8. Tables for layout (use CSS)

Grade-11 WEB DESIGN AND DEVLOPMENT 149

 HTML Deprecated Tags (Avoid)

Tag Use Instead

<font> CSS font properties

<center> CSS text-align

<marquee> CSS animations

<frame> CSS or iframe

<strike> CSS text-decoration

<big> CSS font-size

<blink> Avoid entirely

Grade-11 WEB DESIGN AND DEVLOPMENT 150

Grade-11 WEB DESIGN AND DEVLOPMENT 151