Essential HTML Tags Explained
Uploaded by
mekashfetene89Essential HTML Tags Explained
Uploaded by
mekashfetene891
CHAPTER TWO
HTML TAGS
01/08/2026
[Link] HTML Tags
2
1.1 HTML: Hypertext Markup Language
HTML stands for Hypertext Markup Language.
It is the markup language used for creating web
pages.
A markup language is a set of markup tags, and HTML
uses markup tags to describe web pages.
HTML is written in the form of HTML
elements consisting of HTML tags surrounded
by angle brackets (e.g. <html>).
HTML tags normally come in pairs like <b> and </b>.
The first tag in a pair is the start tag, the second tag
is the end tag
You can also refer to them as opening 01/08/2026
[Link] HTML Tags…
3
HTML elements form the building blocks of all websites.
HTML allows images and objects to be embedded and
can be used to create interactive forms.
It provides a means to create structured documents by
denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items.
It can embed scripts in languages such
as JavaScript which affect the behavior of HTML
webpage.
HTML can also be used to include Cascading Style
Sheets (CSS) to define the appearance and layout of
text.
01/08/2026
[Link] HTML Tags…
4
While a web developer uses the HTML tags
to create the web page, software is required
to interpret tags and display the information.
The software is web browser software.
The purpose of a web browser is to read
HTML documents and display them as web
pages.
The browser does not display the HTML tags,
but uses the tags to interpret the content of
the web page.
01/08/2026
[Link] HTML Tags…
5
World Wide Web Consortium (W3C) is the organization that
develops guidelines and specifications for many web technologies
including HTML.
The W3C website is found at www==[Link].
01/08/2026
[Link] HTML Tags…
6
1.2 HTML, HEAD, TITILE and BODY Tags
The entire web page document is contained
within an <html> tag.
The <html> tag is called the root element
because it contains all the elements in the
document, and it can not be contained
within any other element.
Every web page starts with <html> tag and
ends with </html>.
01/08/2026
[Link] HTML Tags…
7
Let us first see how a plain html code
looks like.
<html>
<head>
<title>Page title here </title>
</head>
<body>
Our body content here
</body>
</html>
01/08/2026
[Link] HTML Tags…
8
The total code is divided into two parts and
both the parts are kept inside <html> tag.
Our page should start with <html> and end
with </html>.
The first part inside this html tags is the head
and it starts with <head> and ends with
</head>.
The second part starts with <body> and ends
with </body> tag.
Whatever we place in <body> will be
displayed by the browser to the01/08/2026
web users.
[Link] HTML Tags…
9
01/08/2026
[Link] HTML Tags…
10
<HEAD> </HEAD>
The web page should have only one head tag.
The head tag starts with <head> and ends with
</head>.
The text or tags that are inside the head tag will not
be displayed in the browser window.
One of the important tags which is put inside
<head> is <title> </title> tag.
Title tags are used to give title to the browser
window.
01/08/2026
[Link] HTML Tags…
11
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text that will appear on the web page </p>
</body>
</html>
01/08/2026
[Link] HTML Tags…
12
It is also possible to put JavaScript
code and Cascading Style Sheets
in head section.
If we are adding any JavaScript
code here then that will be loaded
when the browser opens the
page.
01/08/2026
[Link] HTML Tags…
13
<BODY> </BODY>
This is where we place our content for
our visitors.
What we place here will be displayed to
our visitors.
A <body> element may contain
anything from a couple of paragraphs
under a heading to more complicated
layouts containing forms and tables.
01/08/2026
[Link] HTML Tags…
14
The <title> Element
You should specify a title for every page that you write
inside the <title> element.
This element is a child of the <head> element.
It is used in several ways:
It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers.
Its is used by search engines that use its content to help
index pages.
Example: Here is the example of using title tag.
<head>
<title>HTML Basic tags</title>
</head> 01/08/2026
[Link] HTML Tags…
15
HTML Tag Attributes
Attributes provide additional information about HTML tags.
HTML tags can have attributes
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value“
The syntax for attributes is as follows:
<element attribute-name="value"> Content </element>
or for empty elements:
<element attribute-name="value" />
Example: the background color of HTML document can be
changed using “bgcolor” attribute of the <body> tag.
<body bgcolor=”green”> 01/08/2026
[Link] HTML Tags…
16
<html> attribute
Setting HTML Language
The HTML lang attribute can be used to declare the
language of a Web page or a portion of a Web page.
This is meant to assist search engines and browsers.
According to the W3C recommendation you should
declare the primary language for each Web page with
the Lang attribute inside the <html> tag, like this:
<html lang="en">
…
</html> 01/08/2026
[Link] HTML Tags…
17
ISO 639-1 defines abbreviations for languages.
In HTML, they can be used in the lang attributes.
Language ISO Code
Chinese zh
English en
French fr
German de
Russian ru
Local language
Afar aa
Amharic am
Afan Oromo om
Somali so
Tigrinya ti
01/08/2026
[Link] HTML Tags…
18
<html lang=“om">
<head>
<title>Setting Language</title>
</head>
<body>
This web page in Afan Oromo
</body>
</html>
01/08/2026
[Link] HTML Tags…
19
<body> Attributes
Background Color
You can change background color of your web
page by using <BODY> tag attribute bgcolor
<body bgcolor=”green”>
Color can be specified using color name or RGB
value.
The following also sets background color to green:
<body bgcolor=”#00FF00”>
01/08/2026
[Link] HTML Tags…
20
Background Image
We can use a background picture for web page instead of
background color.
You must have an image to do this.
Then you can use background attribute of <BODY> tag
as follows:
<BODY BACKGROUND="[Link]">
Text Color
We can also set the text color of the web page just like
background color.
We use text attribute of <BODY> to do this.
<body bgcolor=”yellow” text="red"> 01/08/2026
[Link] HTML Tags…
21
Example:
<HTML>
<HEAD>
<TITLE>Page with Back
Color</TITLE>
</HEAD>
<BODY bgcolor="yellow"
text="#FF0000">
Page with yellow back color and red
text color
</BODY>
</HTML> Fig Back and text colors of body
01/08/2026
[Link] HTML Tags…
22
Other <body> attributes
alink: Sets the color for active links or selected
links.
link: Sets a color for link text.
vlink: Sets a color for visited links - that is, for linked
text that you have already clicked on.
<html>
<head>
<title> Link Colors </title>
</head>
<body alink="#00A000“ link="#00FF00" vlink="#0000FF">
<a href="[Link]">first page</a><br>
<a href="[Link]"> second page</a><br>
</body> 01/08/2026
</html>
[Link] HTML Tags…
23
Meta Tag
The <meta> tag provides metadata about the HTML document.
Metadata is data (information) about data.
Metadata will not be displayed on the page, but will be machine
par-sable.
Meta elements are used to specify page description, keywords,
author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content
or reload page), search engines (keywords), or other web
services.
<meta> tags always goes inside the <head> element.
Metadata is always passed as name/value pairs.
The content attribute must be defined if the name or the http-
equiv attribute is defined.
if none of these are defined, the content attribute cannot be
01/08/2026
defined.
[Link] HTML Tags…
24
The keywords attribute
Keywords meta tag defines keywords for search
engines.
It was a critical element for early search engines
to index the page.
Today, search engines no longer depend on
keywords meta tag to index the page.
The structure is as follows:
<meta name="keywords" content="HTML, CSS,
XML, XHTML, JavaScript">
01/08/2026
[Link] HTML Tags…
25
The description attribute
The description attribute provides a concise
explanation of a Web page's content.
The description attribute is supported by most
major search engines, like Yahoo! and Bing, while
Google will fall back on this tag when information
about the page itself is requested.
The structure is as follows:
<meta name="description" content="Free Web
tutorials on HTML, CSS, XML and JavaScript">
01/08/2026
[Link] HTML Tags…
26
The refresh attribute
We can tell the web page to refresh itself
every given seconds.
<meta http-equiv="refresh" content="30">
We can tell the page to redirect/refresh within
the given seconds.
<meta http-equiv="refresh"
content="x_seconds;
url=[Link]
ml"> 01/08/2026
[Link] HTML Tags…
27
The content-type attribute
The content-type attribute specifies the default charset for
plain text using meta:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" >
The expires attribute
The expires attribute specifies when the content should be
refreshed from the webserver:
<meta http-equiv="Expires" content="Tue, 20 Aug 2022
14:25:27 GMT “>
This will result in the HTTP header:
Expires: Tue, 20 Aug 2022 14:25:27 GMT
This can be used by caches to determine when to fetch a
01/08/2026
fresh copy of the associated document.
[Link] HTML Tags…
28
The author attribute
The author attribute defines the author of the page.
The structure is:
<meta name="author" content="John Li">
01/08/2026
[Link] HTML Tags…
29
Creating Links
A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to a new
document or a new section within the current
document.
Web pages can contain links that take you directly to
other pages or specific parts of the given page.
These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web
sites by clicking on words, phrases, and images.
Thus you can create hyperlinks using text or images
available on your web page.
01/08/2026
[Link] HTML Tags…
30
Links are specified in HTML using the <a> tag.
This element is called anchor tag as well.
Anything between the opening <a> tag and
the closing </a> tag becomes part of the link.
The <a> tag can be used in two ways:
To create a link to another document, by
using the href attribute
To create a bookmark inside a document, by
using the name attribute
01/08/2026
[Link] HTML Tags…
31
The href Attribute:
A link in HTML is always composed of two parts, the clickable part
(the link text) and the URL (the destination site, page or resource).
The URL is specified using href attribute.
Here is an example:
<a href=” [Link] Yahoo mail</a>
The target attribute
It is used to specify where to display the contents of a selected
hyperlink. If set to:
_blank then a new window will be opened to display the loaded page
_top or _parent then same window will be used to display the
loaded document.
_self then loads the new page in current window. By default its _self.
01/08/2026
[Link] HTML Tags…
32
Example: a link that opens on a new window
<a href="[Link]" target="_blank"> First
Page</a><br>
The name Attribute
The name attribute specifies the name of the anchor.
The name attribute is used to create a bookmark
inside an HTML document.
Bookmarks are invisible to the reader.
Example: A named anchor inside an HTML document:
<a name="example">Sample Examples</a>
Then create a link to the "Sample Examples" inside
the same document: <a href="#example">Go
01/08/2026 to
[Link] HTML Tags…
33
The title attribute
The title attribute is used to type a short description of the link.
If you place the cursor over the link, you will see the text in the
title attribute.
Example:
<a href="[Link] title="Visit [Link] and learn
HTML">Learn HTML </a>
The accesskey attribute:
The accesskey attribute provides a keyboard shortcut to activate
the link.
For example, you could make the T key an access key so that
when the user presses either the Alt or Ctrl key on his keyboard
along with the T key, the link gets activated.
Example:
01/08/2026
<a href="[Link]" target="_blank" accesskey="m">First
[Link] HTML Tags…
34
Linking to email
It is also possible to make a link to an e-mail address.
It is done in almost the same way as when you link to a
document.
To link to an email, you type mailto: followed by an e-
mail address.
Example:
<a href="[Link] an e-mail to us
</a>
When the link is clicked, the default e-mail program opens
with a new blank message addressed to the specified e-
mail address.
This function will only work if there is an01/08/2026
e-mail program
installed on your computer.
2. HTML Text Formatting Tags
35
HTML Headings
In HTML, you can create different heading levels in
your document to help you organize the document
into sections, just as you might do when writing a
book.
A heading element briefly describes the topic of
the section it introduces.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading and <h6> the
smallest heading. 01/08/2026
2. HTML Text Formatting
36
Tags…
Heading tags are block tags, and you must specify opening
and closing tags.
Example:
<body>
<h1>this is heading level 1.</h1>
<h2>this is heading level 2.</h2>
<h3>this is heading level 3.</h3>
<h4>this is heading level 4.</h4>
<h5>this is heading level 5.</h5>
<h6>this is heading level 6.</h6>
</body>
01/08/2026
[Link] Text Formatting
37
Tags…
HTML Paragraphs
Authors traditionally divide their thoughts and
arguments into sequences of paragraphs.
Along with using headings to structure your Web page,
you can add structure by grouping common text into
paragraphs.
Paragraphs are defined with the <p> tag.
Example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Both of the above tags will enforce a new line whenever
you write the tag. 01/08/2026
[Link] Text Formatting
38
Tags…
The <p> element is a block element.
It cannot contain block-level elements including <p> itself.
The align attribute
You can use align attribute to align your paragraphs.
Paragraphs can be aligned left, center, right or justified.
You can do this by using align attribute.
Align attribute can be used also with other tags like headers,
etc.
Example:
<p align="center">This is center aligned.</p>
<p align="justify">This is justified. This works when you
have multiple lines in your paragraph and 01/08/2026
you want to
[Link] Text Formatting
39
Tags…
HTML Fonts
The <font> tag is used to add font type, size, and color to the
text on your site.
The font tag is has three attributes
size,
color, and
face
They are used to customize your fonts.
To change any of the font attributes at any time within your
page, simply use the <font> tag.
The text that follows will remain changed until you close with
the </font> tag.
You can change any or all of the font attributes at the one
time.
01/08/2026
[Link] Text Formatting
40
Tags…
Font Size:
You can set the size of your font with size attribute.
The range of accepted values is from 1(smallest) to
7(largest).
The default size of a font is 3.
Example:
<font size="1">Font size=1</font>
<font size="2">Font size=2</font>
<font size="3">Font size=3</font>
<font size="4">Font size=4</font>
<font size="5">Font size=5</font>
<font size="6">Font size=6</font> 01/08/2026
[Link] Text Formatting
41
Tags…
Specify Relative Font Size
You can also specify relative font sizes instead of exact font size.
This can be done like:
<font size="+n">
<font size="-n">
This specifies how many sizes larger or how many sizes smaller than the
preset font size should be.
Example:
<font size="-1">Font
size="-1"</font>
<font size="+1">Font
size="+1"</font>
<font size="+2">Font
size="+2"</font>
<font size="+3">Font
size="+3"</font>
<font size="+4">Font 01/08/2026
size="+4"</font>
[Link] Text Formatting
42
Tags…
Font Face:
You can set any font you like using face attribute
But be aware that if the user viewing the page doesn't have
the font installed, they will not be able to see it.
Instead they will default to Times New Roman of your font
with size attribute.
Example:
<font face="Times New Roman" size="5"> Times New Roman
</font>
<font face="Verdana" size="5"> Verdana </font>
<font face="Comic sans MS" size="5"> Comic Sans MS </font>
<font face="WildWest" size="5"> WildWest </font>
01/08/2026
[Link] Text Formatting
43
Tags…
A visitor will only be able to see your font if they
have that font installed on their computer.
So, it is possible to specify two or more font face
alternatives by listing the font face names,
separated by a comma.
Example:
<font face="arial, helvetica">
<font face="Lucida Calligraphy, Comic Sans MS,
Lucida Console>
01/08/2026
[Link] Text Formatting
44
Tags…
Font Color:
You can set any font color you like using color
attribute.
You can specify the color that you want by either
the color name or hexadecimal code for that color.
Check a complete list of HTML Color Name with
Codes.
Example:
<font color="#0000FF">This text blue color</font>
<font color="red">This text is red</font>
01/08/2026
[Link] Text Formatting
45
Tags…
The <basefont> Element:
The <basefont> element is used to set a default
font size, color, and typeface for any parts of the
document that are not otherwise contained within
a <font> element.
You can then use the <font> elements to override
the <basefont> settings.
The attributes that the <basefont> element takes
are exactly the same as for the <font> element.
You can also set the size of fonts relative to the
size of the <basefont> by giving them a value of
+1 for a size larger or -2 for two sizes smaller.
01/08/2026
[Link] Text Formatting
46
Tags…
Example:
<basefont face="arial, verdana, sans-serif" size="2"
color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size="+2" color="darkgray">Here is some
darkgray text two sizes larger</font></p>
<p><font face="courier" size="-1" color="#000000">Here
is a courier font, a size smaller, in black</font></p>
01/08/2026
[Link] Text Formatting
47
Tags…
Formatting Tags
In HTML, there are many tags that you can use to
enhance and change the look of the text.
You can make text bold, italicized, or underlined;
these are just some of the presentational options
available to indicate how text can appear in HTML.
Bold Text - The <b> Element:
Anything that appears in a <b>...</b> element is
displayed in bold.
The <b> tag makes text to be displayed in bold face.
01/08/2026
[Link] Text Formatting
48
Tags…
Example:
<p>The use nuclear energy needs <b> safety caution
</b> because of the associated danger.</p>
This will produce following result:
The use nuclear energy needs safety caution because of
the associated danger.
Italic Text - The <i> Element:
Anything that appears in a <i>...</i> element is displayed
in italicized face.
Example:
<p>The following word uses a <i>italicized</i>
typeface.</p>
This will produce following result: 01/08/2026
[Link] Text Formatting
49
Tags…
Underlined Text - The <u> Element:
Anything that appears in a <u>...</u> element
is displayed with underline.
Example:
<p>The following word uses a
<u>underlined</u> typeface.</p>
This will produce following result:
The following word uses a underlined typeface.
01/08/2026
[Link] Text Formatting
50
Tags…
Centering Content - The <center> Element:
You can use <center> tag to put any content in
the center of the page or any table cell.
Example:
<p>This is not in the center.</p>
<center> <p>This is in the center.</p>
</center>
01/08/2026
[Link] Text Formatting
51
Tags…
Strike Text - The <strike> Element:
Anything that appears in a <strike>...</strike>
element is displayed with strikethrough, which
is a thin line through the text.
Example
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
This will produce following result:
The following word uses a strikethrough
typeface.
01/08/2026
[Link] Text Formatting
52
Tags…
Create Line Breaks - The <br> Element:
The <br> tag inserts a single line break.
You can also use <br /> which does the same.
Whenever you use the <br> element, anything following
it starts on a new line.
This tag is an example of an empty element, where you do
not need opening and closing tags, as there is nothing to
go in between them.
The <br /> element has a space between the characters
br and the forward slash.
If you omit this space, older browsers will have trouble
rendering the line break, while if you miss the forward
01/08/2026
slash character and just use <br> it is not valid XHTML.
[Link] Text Formatting
53
Tags…
Example
Hello<br>
You come most carefully upon your hour.<br />
Thanks<br>
Mahnaz
This will produce following result:
Hello
You come most carefully upon your hour.
Thanks
Mahnaz 01/08/2026
[Link] Text Formatting
54
Tags…
Preserve Formatting - The <pre> Element:
Sometimes you want your text to follow the exact format of how
it is written in the HTML document.
In those cases, you can use the preformatted tag (<pre>).
The <pre> tag defines preformatted text.
Text in a pre element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks.
Example: This produces :
<pre> function testFunction( int a,
function testFunction( int a, int b ){ int b ){
int sum = a + b;
int sum = a + b;
alert (sum);
return;
alert (sum);
} return; 01/08/2026
}
2. HTML Text Formatting
55
Tags…
Horizontal Rules - The <hr> Element
<hr> stands horizontal rules are used to visually break up sections
of a document.
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content in an HTML page.
For example you may want to give a line between two paragraphs
as follows:
<p>This is paragraph one and should be on top</p>
<hr>
<p>This is paragraph two and should be at bottom</p>
This produces the following output:
This is paragraph one and should be on top
____________________________________________________________
01/08/2026
This is paragraph two and should be at bottom
2. HTML Text Formatting
56
Tags…
Subscript and Superscript Text:
The <sub> tag defines subscript text.
Subscript text appears half a character below the baseline.
Subscript text can be used for chemical formulas, like H2O.
The <sup> tag defines superscript text.
Superscript text appears half a character above the
baseline.
Superscript text can be used for mathematical expressions
like x2+y or footnotes, like HTTP[1].
Example:
<p> The chemical formula for water is H<sub>2</sub>O
</p>
01/08/2026
<p> Solve 5X<sup>2</sup>+6X+10 </p>
2. HTML Text Formatting
57
Tags…
Big and small Text:
The <big> tag displays texts in big.
The content of the <big> element is displayed
one font size larger than the rest of the text
surrounding it.
The <small> tag renders (reduce) a smaller
text.
The content of the <small> element is
displayed one font size smaller than the rest
of the text surrounding it.
01/08/2026
2. HTML Text Formatting
58
Tags…
Example:
<html>
<head>
<title>Formatting Tags</title>
</head>
<body>
<font size="5">
<p> The chemical formula for water is
H<sub>2</sub>O </p>
<p> Solve 5X<sup>2</sup>+6X+10 </p>
<p>The following word uses a
<small>small</small> typeface.</p>
<p>The following word uses a
<big>big</big> typeface.</p>
</font>
</body> 01/08/2026
2. HTML Text Formatting
59
Tags…
Bidirectional Text - <bdo> Tag
bdo stands for bidirectional override.
The <bdo> tag allows you to specify the text
direction and override the bidirectional algorithm.
This is especially useful for languages like
Hebrew and Arabic where text is written from
right to left.
Example:
<bdo dir="rtl">Here is some Hebrew text!</bdo>
This produces the following output:
01/08/2026
2. HTML Text Formatting
60
Tags…
Tag Description
<em> Renders as emphasized text
<strong> Renders as strong (highlighted) text
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample output from computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<q> Defines a short quotation.
<blockquote> To quote a passage from another source
01/08/2026
2. HTML Text Formatting
61
Tags…
<html>
<head> <title>HTML Tags</title>
</head>
<body>
<abbr title="World Health
Organization">WHO</abbr> reports that malaria
epidemic is increasing. <br>
Two <acronym title="North Atlantic Treaty
Organization">NATO</acronym> troops are killed in
Afghanistan. <br><em>Emphasized text</em>
<br>
<strong>Strong text</strong> <br>
<dfn>Definition term</dfn> <br>
<code>Computer code text</code> <br>
<samp>Sample computer code text</samp> <br>
<kbd>Keyboard text</kbd> <br>
<var>Variable</var> <br>
<cite>Citation</cite> <br>
01/08/2026
</body>
2. HTML Text Formatting
62
Tags…
Special Characters
Characters within HTML documents that
are not part of a tag are rendered as-is by
the browser.
However, some characters have special
meaning and are not directly rendered,
while other characters can't be typed into
the source document from a conventional
keyboard.
Special characters need either a special
name or a numeric character encoding for
01/08/2026
Character Code Short name Character name
" " " quotation mark
' ' ' apostrophe
& & & ampersand
< < < less-than
> > > greater-than
  non-breaking space
¡ ¡ ¡ inverted exclamation mark
¢ ¢ ¢ cent
£ £ £ pound
¤ ¤ ¤ currency
¥ ¥ ¥ yen
¦ ¦ ¦ broken vertical bar
§ § § section
¨ ¨ ¨ spacing diaeresis
© © © copyright
ª ª ª feminine ordinal indicator
« « « angle quotation mark (left)
¼ ¼ ¼ fraction 1/4
½ ½ ½ fraction 1/2
¾ ¾ ¾ fraction 3/4
¿ ¿ ¿ inverted question mark
× × × multiplication
÷ ÷ ÷ division
¬ ¬ ¬ negation
­ ­ soft hyphen
® ® ® registered trademark
¯ ¯ ¯ spacing macron
° ° ° degree
± ± ± plus-or-minus
² ² ² superscript 2
³ ³ ³ superscript 3
´ ´ ´ spacing acute
µ µ µ micro
¶ ¶ ¶ paragraph
· · · middle dot
¸ ¸ ¸ spacing cedilla
¹ ¹ ¹ superscript 1
º º º masculine ordinal indicator
» » » angle quotation mark (right)
¼ ¼ ¼ fraction 1/4
½ ½ ½ fraction 1/2
¾ ¾ ¾ fraction 3/4
¿ ¿ ¿ inverted question mark
× × × multiplication
÷ ÷ ÷ division
[Link] Text Formatting
65
Tags…
Tags and Their Attributes
The <p>, <center>, <b>, <i>, <u>, <pre>,
<strike>, <s> tags support the following
standard attributes:
attribute value description
dir ltr Specifies the text direction for the content in an
rtl element
lang language_code Specifies a language code for the content in an
element
title text Specifies extra information about an element
01/08/2026
HTML Comments
66
Comments are piece of code which is ignored by any web
browser.
It is good practice to comment your code, especially in
complex documents, to indicate sections of a document, and
any other notes to anyone looking at the code.
Comments help you and others understand your code.
HTML Comment lines are indicated by the beginning tag <!--
and ending tag --> placed at the beginning and end of every
line to be treated as a comment.
You can comment multiple lines by the special beginning tag
<!-- and ending tag --> placed before the first line and end of
the last line to be treated as a comment.
For example: Given line is a valid comment01/08/2026
in HTML
<!-- This is commented out -->
Inserting Image
67
Images are very important to beautify as well as
to depicts many concepts on your web page.
It is often said that an single image is worth than
thousands of words.
So as a Web Developer you should have clear
understanding on how to use images in your web
pages.
In HTML, images are defined with the <img>
tag.
The <img> tag has attributes, but not closing
tag.
To display an image on a page, you need to use
01/08/2026
Inserting Image…
68
Syntax for inserting an image:
<img src="url" alt="Alternative Text"/>
The alt attribute
The required alt attribute specifies an alternate
text for an image, if the image cannot be
displayed.
The alt attribute provides alternative information
for an image if a user for some reason cannot
view it
This could be because of slow connection, an
error in the src attribute.
01/08/2026
Example:
Inserting Image…
69
The width and height attributes
To define the height and width of the image,
rather than letting the browser compute the size,
us
the height and width attributes.
The attributes:
width: sets width of the image.
This can have a value like 10 or 20% etc.
height: sets height of the image.
This can have a value like 10 or 20% etc.
Example: 01/08/2026
Inserting Image…
70
The border attribute
The border attribute sets a border around the image.
This will have a value like 1 or 2 etc.
The align attribute
The align attribute sets horizontal alignment of the
image and takes value either left, right or center.
Example:
<img src="[Link]" alt="Highland coffee"
width="100" height="100" border="2" align="right"
title="HTML Tutorial" />
01/08/2026
Inserting Image…
71
01/08/2026
Inserting Image…
72
The valign attribute
The valign attribute sets vertical alignment of the
image and takes value either top, bottom or center.
The hspace and vspace attributes
hspace: sets horizontal space around the image.
This will have a value like 10 or 20% etc.
vspace: sets vertical space around the image.
This will have a value like 10 or 20% etc.
The title attribute
The title attribute specifies a text title.
The browser displays the title when the mouse passes
01/08/2026
over the link.
Inserting Image…
73
Example:
<html>
<head>
<title>Testing HTML</title>
</head>
<body>
Just checking img tag.
<img src="[Link]" alt="Highland coffee"
align="left" hspace="50" vspace="100">
</body>
</html> 01/08/2026
Inserting Image…
74
Fig Image insertion 01/08/2026
Image Map (assignment)
75
Image maps enable you to define multiple links
within a single image.
For example, if you have a picture of African
countries, you can create links in the image that
opens each country’s picture/page for detailed
information.
Clickable regions within image maps can be basic
shapes like rectangles and circles or complex
polygonal shapes.
01/08/2026
Image Map…
76
The following diagram is the image used in this
section to show how a basic image map is
created.
It contains three geometric shapes that will be
turned into clickable hot-spots.
01/08/2026
Image Map…
77
The image is added to the web page in the usual way, but
with the addition of a usemap attribute, whose value must
be preceded by a hash sign (#).
Example:
<img src="[Link]" area shapes=“rect”
alt=“image map“ width="398" height="398"
usemap="#shape" />
The value of the usemap attribute must correlate with the id
values of the associated map element.
The name attribute is required for backward compatibility,
whereas the id attribute is mandatory.
<map id="shapes" name="shapes">
01/08/2026
</map>
Image Map…
78
To create the map used by img tag, we use the following tags
and attributes:
<map> tag maps information for an imagemap
name="text" - The legacy method for giving the map a
name
id="text" - The current method for giving the map a name
<area> tag contains information for a clickable area in an
imagemap.
The <area> element specifies the shape and the coordinates
that define the boundaries of each clickable hotspot.
shape="rect|circle|poly" - shape of the linked area
coords="numbers" - pixel coordinates for the linked area
01/08/2026
href="url" - target file for the link
Image Map…
79
The map element acts as a container for specifications
regarding the map’s active areas, which are added as
area elements.
<img src="[Link]" alt="Shapes" width="398"
height="398" usemap="#shapes" />
<map id="shapes" name="shapes">
<area shape="rect" coords="29,27,173,171"
href="[Link]“ title="Access the squares page">
<area shape="circle" coords="295,175,81" href="[Link]“
title="Access the circles page" >
<area shape="poly" coords="177,231,269,369,84,369"
href="[Link]" alt="A triangle“ title="Access the
triangles page">
</map> 01/08/2026
Image Map…
80
Suppose you want to create clickable image map of
regional states like the following:
01/08/2026
<html>
<head>
<title>Regional States</title>
</head>
<body>
<img src="Ethiopia_regions.png" width="350" height="269"
usemap="#map" />
<map name="map" id=”map”>
<area shape="poly" coords="85,30,86,16,96,17,97,18,
99,17,100,14,108,13,112,16,118,4, 122,7,125,8,
129,14,137,13,143,8,147,12,148,15,151,12,162,12,163,15,157,16,158,22,1
60,34,158,42,159,49,162,52,160,61,148,62,146,54,148,51,147,45,142,46,1
41,40,136,41,134,34,128,34,118,35,114,32,109,38,99,36,92,36,90,33,84,32,
84,30" href="[Link]" />
<area shape="poly"
coords="83,32,79,42,78,53,68,53,65,55,57,70,58,74,63,
74,69,68,74,69,76,76,81, 73,82,79,86,83,81,95,81,102,87,106,98,108,101,
112,108,114,113,118,129,111,131,105,139,106,135,114,139,121,144,122,1
50,120,150,126,153,129,148,131,151,135,149,142,156,141,160,139,160,13
4,162,130,162,120,167,115,168,111,168,96,168,85,165,78,159,62,149,63,1
46,55,148,47,143,46,141,41,136,40,133,34,123,35,117,34,115,32,110,38,1
04,38,96,36,85,32,84,32" href="[Link]" />
<area shape="poly" coords="163,14,169,11,197,34,218,59,207,77,
205,92,194,92,189,100,186,115, 187,
117,181,121,180,127,177,129,175,129,166,
141,164,137,161,136,161,134,162,121,167,115,168,99,168,87,161,71,158,
<area shape="poly" coords="32,146,37,147, 44,153,48,155,54,155,50,158,49,166, 53,170,58,172,59,
177,58,180,52,179,51,177,50,180,46,180,43,183,39,180,35,181,30,176,27,170,20,166,13,166,5,164,6,1
59,9,156,10,150,21,149,23,151,32,148,32,146" href="[Link]" />
<area shape="poly" coords="57,170,58,164,61,161,65,164,
69,163,69,157,72,158,72,165,78,171,86,173,
92,176,101,177,105,173,106,163,106,159,111,159,111,154,108,152,109,149,112,152,122,151,126,150,
127,154,130,149,134,150,134,159,130,166,129,171,122,177,122,183,126,179,134,179,134,181,135,187
,137,189,142,191,144,196,145,201,145,202,141,201,136,196,130,196,126,205,129,208,124,209,121,20
2,125,198,126,195,122,193,119,191,115,192,115,196,115,201,115,205,119,206,121,212,119,215,117,2
22,114,223,110,222,104,225,98,223,93,226,94,235,91,240,75,241,70,237,69,234,70,225,70,221,63,218,
59,220,57,216,52,212,50,204,50,198,50,195,44,190,41,187,35,183,40,181,44,182,49,180,51,178,56,180
,60,179,59,172,57,172,57,168" href="[Link]" />
<area shape="poly" coords="206,91,213,92,226,89,231,91,226,102,234,113, 239,119,244, 128, 255,
137,271,144,286,147,301,153,314,157,322,160,342,159,346,159,336,171,279,230,254,229,238,234,227
,246,214,248,207,252,191,251,183,246,180,243,181,237,190,235,192,231,201,231,194,226,191,217,19
3,212,186,203,184,198,188,195,189,189,196,200,200,203,202,202,202,197,205,192,210,192,214,178,2
10,172,210,163,214,152,214,146,216,145,218,147,222,148,225,158,227,154,228,151,231,148,229,142,
224,138,223,130,220,126,219,122,216,120,213,120,205,121,202,126,193,126,186,130,183,128,181,124
,186,117,185,110,188,99,190,94,194,92,206,91,211,91" href="[Link]" />
<area shape="poly" coords="91,241,96,241,109,251,119,258,123,260,134,259,148, 261,154, 263,
162,256,165,251,179,245,182,245,182,238,191,234,192,231,201,231,193,224,192,216,192,212,189,206
,185,201,185,197,188,195,190,189,195,198,199,202,203,200,202,195,206,192,211,190,215,176,211,16
9,211,160,214,150,214,145,222,148,224,155,229,151,231,147,229,140,225,133,219,122,217,118,205,1
22,200,126,191,126,184,128,180,126,167,140,161,134,157,141,150,143,150,133,149,129,152,128,149,
126,150,118,145,124,141,120,136,117,136,113,138,106,130,105,128,110,113,118,105,113,100,111,96,
107,86,106,78,113,77,122,84,127,79,130,77,134,71,128,69,128,63,120,60,119,56,115,50,113,46,122,46
,125,39,122,39,129,37,132,32,133,32,147,37,147,44,153,53,155,49,164,54,171,57,172,58,165,62,161,6
6,164,68,161,68,157,72,159,72,164,76,169,84,173,89,173,96,177,102,177,107,171,106,159,110,159,11
1,154,107,151,108,149,113,152,125,150,127,153,131,151,135,150,133,161,128,172,121,179,121,183,1
26,179,130,179,134,179,135,187,142,191,145,196,145,202,143,202,134,195,129,196,126,204,128,208,
125,209,121,202,125,196,122,193,116,191,115,201,114,206,121,211,119,216,117,223,111,221,105,225
,99,224,95,224,92,229,93,235,90,240,91,241" href="[Link]" />
3. Tables
83
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag
Each row is divided into data cells with the <td>
tag.
td stands for "table data," and holds the content
of a data cell.
A <td> tag can contain text, links, images, lists,
forms, other tables, etc.
Table headers
Headers in a table are defined with the <th> tag.
The text in a <th> element will be bold and
centered. 01/08/2026
3. Tables…
84
If you do not specify a border attribute, the table will be
displayed without borders.
Sometimes this can be useful, but most of the time, we want
the borders to show.
Example:
<table border="1">
<tr>
<th>dept</th>
<th>cgpa</th>
</tr>
<tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
01/08/2026
</tr>
3. Tables…
85
HTML code above looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Attributes of table:
• The attributes of a table will be applied on the whole table
element which include one or more rows (<tr>), header
cells (<th>) or data cells (<td>).
01/08/2026
Attribute Value Description
align Left Specifies the alignment of a table according to
Center surrounding text
right
bgcolor rgb(x,x,x) Specifies the background color for a table
#xxxxxx
colorname
background Image url Sets background image of the table
border pixels Specifies the width of the borders around a table
bordercolor rgb(x,x,x) Specifies the color used for the border
#xxxxxx
colorname
cellpadding pixels Specifies the space between the cell wall and the
cell content
cellspacing pixels Specifies the space between cells
width Pixels Specifies the width of a table
%
height Pixels Specifies the height of a table
%
3. Tables…
87
Example:
<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr><td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
01/08/2026
</table>
3. Tables…
88
Table Cellpadding and Cellspacing:
There are two attribiutes called cellpadding and cellspacing
which you will use to adjust the white space in your table cell.
Cellspacing defines the width of the border, while cellpadding
represents the distance between cell borders and the content
within. 01/08/2026
3. Tables…
89
Example:
<table border="1" cellpadding="15" cellspacing="10">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Ramesh Raman</td> <td>5000</td> </tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td> </tr>
</table>
01/08/2026
3. Tables…
90
Attributes of rows and cells:
This attributes will be applicable only to the header cell or
the data cell if it is used with <th> or <td> tag
It will affect the whole content of the row if it is used by the
<tr> tag.
Attribute Value Description
align left | right | center | Aligns the content in a cell
justify
bgcolor rgb(x,x,x) Specifies a background color for a cell
#xxxxxx
Colorname
colspan number Specifies the number of columns a cell should span
rowspan number Sets the number of rows a cell should span
height Pixels Sets the height of a cell
% (percent)
width Pixels Specifies the width of a cell
%(percent)
nowrap nowrap Specifies that the content inside a cell should not wrap
valign top|middle|bottom Vertical aligns the content in a01/08/2026
table row
3. Tables…
91
Spanning rows and cells
<table border="1" cellpadding="2">
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td>
</tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td>
</tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr> 01/08/2026
3. Tables…
92
01/08/2026
3. Tables…
93
Using a Header, Body, and Footer:
Tables can be divided into three portions: a header, a body, and a
foot.
The head and foot are rather similar to headers and footers in a word-
processed document that remain the same for every page, while the
body is the main content of the table.
The three elements for separating the head, body, and foot of a table
are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different
pages or groups of data.
But it is notable that <thead> and <tfoot> tags should appear before
<tbody>. 01/08/2026
Example:
<table border="1" width="100%">
<thead>
<tr> <td colspan="4">This is the head of the table</td> </tr>
</thead>
<tfoot>
<tr> <td colspan="4">This is the foot of the table</td> </tr>
</tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell
4</td> </tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell
4</td></tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
3. Tables…
95
This produces the following output:
01/08/2026
Ordered and Unordered List
96
The most common HTML lists are ordered and
unordered lists.
An ordered list: An unordered list:
1. The first list item List item
2. The second list item List item
3. The third list item List item
01/08/2026
Ordered and Unordered List…
97
Unordered List
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black
circles).
The “type” attribute can be used to specifies the style of the bullet
points of the list items, its value includes disc, square and circle.
Example:
<ul>
<li>Banana</li>
<li>Orange</li>
</ul>
How the HTML code above looks in a browser:
• Banana 01/08/2026
• Orange
Ordered and Unordered List…
98
<ul> attributes:
Attribute Value Description
compact compact Specifies that the list should render smaller than
normal
type disc Specifies the style of the bullet points of the list
square items
circle
01/08/2026
Ordered and Unordered List…
99
Ordered List
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
The list items are marked with numbers.
Example:
Types of fruits are:
<ol>
<li>Banana</li>
<li>Orange</li>
<li>Apple</li>
</ol>
How the HTML code above looks in a browser:
Types of fruits are:
1. Banana
2. Orange 01/08/2026
3. Apple
Ordered and Unordered List…
10
0
The start attribute:
If you want a numbered list to start at a number other than
“1,” you can use the start attribute to specify another
starting number.
Example
<ol start="17">
<li>Highlight the text with the text tool.</li>
<li>Select the Character tab.</li>
<li>Choose a typeface from the pop-up menu.</li>
</ol>
The resulting list items would be numbered 17, 18, and 19,
consecutively.
01/08/2026
Ordered and Unordered List…
10
1
The <ol> attributes:
Attribute Value Description
compact compact Specifies that the list should render
smaller than normal
start number Specifies the start point for the list items
type 1 Specifies which kind of bullet points will
I be used
i
A
a
01/08/2026
Ordered and Unordered List…
10
2
Example:
Types of fruits are:
<ol type=”I”>
<li>Banana</li>
<li>Orange</li>
<li>Apple</li>
</ol>
This produces the following attribute:
Types of fruits are:
I. Banana
II. Orange
[Link]
01/08/2026
Ordered and Unordered List…
10
3
Nesting Lists
One list can be put inside another to create nested list.
Example:
<ol>
<li>Super computer</li>
<li>Mainframe computer</li>
<li>Mini computer</li>
<li>Micro computer</li>
<ul>
<li>Desktop computer</li>
<li>Laptop Computer</li>
<li>Palmtop computer</li>
</ul>
01/08/2026
</ol>
HTML Forms
10
4
HTML forms are used to pass data to a server.
Users generally "fill" a form by modifying its controls (entering
text, selecting list items, etc.) before submitting the form for
further processing by server.
Forms are a vital tool for the webmaster to receive information
from the web surfer, such as their name, email address, credit
card, etc.
You may store that data into a file, place an order, gather user
statistics, register the person to your web forum, or maybe
subscribe them to your weekly newsletter.
A form will take input from the site visitor and then will post to
your back-end application such as CGI, ASP, PHP script etc.
Then your back-end application will do required processing on
that data in whatever way you like.- 01/08/2026
HTML Forms…
10
5
The <form> tag is used to create an HTML form:
<form>
input elements
</form>
The most important element inside form element is the
input element.
The input element is used to accept user information.
An input element can vary in many ways, depending on
the type attribute.
An input element can be of type text field, checkbox,
password, radio button, submit button, and more.
The most used input types are described in the next
subsections.
01/08/2026
The form itself is not visible but form elements are
HTML Forms…
10
6
Text Field
You can create text field by using:
<input type="text">
This defines a one-line input field that a user can enter text
into.
Text fields have two important attributes: name and value.
The name attribute gives name to the text field for
identification purpose and to make it easily accessible.
The value attribute sets content of the text field.
<form>
First name: <input type="text" name="firstname"><br />
Last name: <input type="text" name="lastname">
01/08/2026
</form>
HTML Forms…
10
7
The following is the list of attributes for <input type=”text”>
tag.
name: the name attribute is required for identifying the input
field name.
value : the value attribute specifies default text that appears
in the field when the form is loaded.
size: by default, browsers display a text-entry box that is 20
characters wide, but you can change the number of
characters.
maxlength: By default, users can type an unlimited number
of characters in a text field regardless of its size.
You can set a maximum character limit using the maxlength
attribute.
Example:
01/08/2026
<input type="text" name="username" size="8"
HTML Forms…
10
8
Password
A password field works just like a text entry field, except the
characters are obscured (hidden) from view using asterisk
(*) or bullet (•) characters, or another character determined
by the browser.
We can define a password field like:
<input type="password" />
Example:
<form>
Password: <input type="password" name="pwd">
</form>
How the HTML code above looks in a browser:
Password: 01/08/2026
HTML Forms…
10
9
Text Area
At times, you may want your users to be able
enter multiple line of text.
For these instances, use the <textarea> element
that is replaced by a multi-line, scrollable text
entry box when displayed by the browser.
Example:
<textarea name="comment"> Tell us what you
feel about our tutorial with 50 words or less.
</textarea>
01/08/2026
HTML Forms…
11
0
Text Area attributes:
Text area has the following attributes:
name – name is used to identify the text area
rows - specifies the number of lines of text area should
display.
Scrollbars will be provided if the user types more text than fits
in the allotted space.
cols - specifies the width of the text area measured in number
of characters.
Example:
<textarea name="comment" rows="5" cols="100"> Tell us
what you feel about our tutorial with 50 words or less.
</textarea>
01/08/2026
HTML Forms…
11
1
Radio Buttons
Radio buttons are a popular form of interaction.
You may have seen them on quizzes,
questionnaires, and other web sites that give the
user a multiple choice question.
Below are a couple attributes you should know
that relate to the radio button.
value: specifies what will be sent if the user
chooses this radio button.
Only one value will be sent for a given group of
radio buttons.
name: defines which set of radio buttons that it is a
01/08/2026
part of.
HTML Forms…
11
2
Radio buttons let a user select ONLY ONE of a limited
number of choices.
We can define a radio button like:
<input type="radio">
Example
<form>
<input type="radio" name="sex" value="male">
Male<br>
<input type="radio" name="sex" value="female">
Female
</form>
01/08/2026
HTML Forms…
11
3
Radio button attributes are:
name: sets name of the radio button
value: sets the value of the radio button. This is
the data sent to server when the user submits
the form.
checked: sets whether the radio button is
checked by default or not. It accepts the value
checked.
Example:
<form method=”post” action=”[Link]”>
<input type="radio" name="sex" value="male"
01/08/2026
checked=”checked”> Male <br>
HTML Forms…
11
4
Checkboxes
Check boxes allow for multiple items to be selected for a
certain group of choices.
The check box's name and value attributes behave the same
as a radio button.
We can define a checkbox like:
<input type="checkbox">
Checkboxes let a user select ONE or MORE options.
Example:
<form>
<input type="checkbox" name="vehicle" value="Bike"> I
have a bike <br>
<input type="checkbox" name="vehicle" value="Car"> I
have a car
</form> 01/08/2026
HTML Forms…
11
5
Selection lists
Drop down menus are created with the <select> and <option>
tags.
<select> is the list itself and each <option> is an available
choice for the user.
Example:
Educational level: <br>
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option> 01/08/2026
</select>
HTML Forms…
11
6
Checkbox attributes are:
name: sets name of the checkbox
value: sets the value of the checkbox. This is the data sent to server
when the user submits the form.
checked: sets whether the checkbox is checked by default or not. It
accepts the value checked.
Example:
What type of food do you like?
<ul>
<li><input type="checkbox" name="genre" value=" spaghetti "
checked="checked"> Spaghetti</li>
<li><input type="checkbox" name="genre" value="pizza"
checked="checked"> Pizza</li>
<li><input type="checkbox" name="genre"
value="sandwich">Sandwich </li>
<li><input type="checkbox" name="genre"
01/08/2026
value="Burger">Burger</li>
HTML Forms…
11
7
Attributes of select
Attribute Value Description
disabled disabled Specifies that a drop-down list should be disabled
multiple multiple Specifies that multiple options can be selected
name text Specifies the name of a drop-down list
size number Specifies the number of visible options in a drop-down list
Attribute of option
Attribute value Description
selected selected Specifies whether the option is selected or not
when the form loads
01/08/2026
HTML Forms…
11
8
Scrolling Lists
To make the menu display as a scrolling list, simply specify
the number of lines you’d like to be visible using the size
attribute.
Example:
Select the fruits you like:
<select name="fruits" size="6" multiple="multiple">
<option>Orange</option>
<option>Apple</option>
<option selected="selected">Banana</option>
<option selected="selected">Mango</option>
<option> Avocado</option>
<option>Pineapple</option>
<option>Papaya</option>
01/08/2026
<option>Strawberry</option>
HTML Forms…
11
9
This produces the following output:
01/08/2026
HTML Forms…
12
0
Button
There are a number of different kinds of buttons that
can be added to web forms.
Some are:
submit button,
reset button, and
client side button.
Submit Button
When clicked, the submit button immediately sends the
collected data in the form to the server for processing.
Submit button is defined as follows:
01/08/2026
<input type="submit">
HTML Forms…
12
1
Submit button has the following attributes:
value: this sets the text displayed on the button as a
label.
name: used to give name to the submit button
Example:
<input type=”submit” name=”info” value=”Send”>
Reset Button
The reset button returns the form controls to the state
they were in when the form loaded.
This clears the text users typed into text fields, and
removes selections made.
01/08/2026
HTML Forms…
12
2
Reset button can be defined as follows:
<input type="reset">
Client Side Button
This is a button that is used to trigger(activate) a
client-side script when the user clicks on that button.
This is used to execute scripting language such as
JavaScript.
It has no predefined function on its own, as submit
and reset buttons do.
Client side button can be defined as follows:
<input type="button"> 01/08/2026
HTML Forms…
12
3
Client side button has the following attributes:
value: this sets the text displayed on the button as
a label.
name: used to give name to the button
Example:
<input type=”button” name=”adder” value=”Add”>
Image Button
This type of input control allows you to replace the
submit button with an image of your choice.
The image will appear flat, not like a 3-D button.
01/08/2026
HTML Forms…
12
4
Image button can be defined as follows:
<input type="image">
Image button attributes:
src: sets the image to be used as the submit
button
value: text displayed on the button
name: name of the submit button
Example:
<input type="image" src="[Link]"
01/08/2026
value="Submit">
HTML Forms…
12
5
The button element
The button element is a flexible element for creating
custom buttons similar to those created with the input
element.
The content of the button element (text and/or images) is
what gets displayed on the button.
In this example, a button element is used as a submit
button.
The button includes a label and a small image.
<button type="submit" name="submit">
<img src="[Link]" alt=""> Ready to go.
</button>
01/08/2026
HTML Forms…
12
6
Hidden controls
There may be times when you need to send information to the
form processing application that does not come from the user.
In these instances, you can use a hidden form control that
sends data when the form is submitted, but is not visible when
the form is displayed in a browser.
<input type="hidden">
Hidden controls are added using the input element with the
type set to hidden.
Its sole purpose is to pass a name/value pair to the server
when the form is submitted.
Example:
<input type="hidden" name="page"
value="[Link]
01/08/2026
HTML Forms…
12
7
File selection control
Web forms can collect more than just data.
They can also be used to transmit external documents from a
user’s hard drive.
For example, a printing company could use a web form to
receive artwork for a business card order.
A magazine could use a form on their site to collect digital
photos for a photo contest.
The file selection control makes it possible for users to select a
document from the hard drive to be submitted with the form
data.
It is added to the form using our old friend the input element
with its type set to file.
Example:
01/08/2026
<input type="file">
HTML Forms…
12
8
The browser displays a “file” input as a text field <html>
with a button that allows the user to navigate <body>
the hard drive and select the file for upload. <h1>File upload</h1>
Example:
<p>Show a file-select
<input type="file" name="photo" size="28" field which allows a file
id="form-photo"> to be chosen for
It is important to note that when a form contains upload:</p>
a file selection input element, you must specify <form
the encoding type (enctype) of the form as action="[Link]
multipart/form-data and use the POST [Link]/action_page.
method. php">
Example: <label
<form action="[Link]" method="post" for="myfile">Select a
enctype="multipart/form-data"> file:</label>
<p> Send a photo to be used as your online <input type="file"
icon:<br> id="myfile"
<input type="file" name="photo" size="28" name="myfile"><br><b
id="form-photo" /></p> r>
01/08/2026
<input type="submit"
<html>
<head> <title>Form Elements</title> </head>
<body>
<form name="test" method="post">
First name: <input type="text" name="fname"> <br>
Last name: <input type="text" name="lname"> <br>
Sex: <input type="radio" name="sex" value="male" checked> Male
<input type="radio" name="sex" value="female"> Female
<br>
Educational level: <br>
<select name="education" size="6">
<option>Primary School</option> <option>Secondary School</option>
<option>College Diploma</option> <option>First Degree</option>
<option>Masters Degree</option> <option>PhD</option>
</select> <br>
Which fields are you interested in? <br>
<input type="checkbox" name="" value="Electronics"> Electronics <br>
<input type="checkbox" name="" value="Software Engineering"> Software Engineering <br>
<input type="checkbox" name="" value="Computer Engineering"> Computer Engineering
<br>
<input type="checkbox" name="" value="Networking"> Networking
<br> <br>
Tell us what you feel about our tutorial with 50 words or less. <br>
<textarea name="comment" rows="10" cols="50"> </textarea> <br>
<input type="submit" name="submit">
</form>
</body>
</html>
HTML Forms…
13
1
Linking HTML Forms with PHP Scripts
To create a link between PHP scripts and HTML forms,
we need to use the submit button, and the attribute
of the <form tag>, specifically “action” and
“method”.
Buttons:
Submit buttons: When activated, a submit
button submits a form.
A form may contain more than one submit button.
01/08/2026
HTML Forms…
13
2
<!DOCTYPE html>
A submit button is used to
<html>
send form data to a server.
<body>
The data is sent to the <h2>HTML Forms</h2>
page specified in the <form
form's action attribute . action="[Link]
The file defined in the _page.php">
action attribute usually <label for="fname">First
does something with the name:</label><br>
received input: <input type="text" id="fname"
name="fname" value="John"><br>
<label for="lname">Last
<form name="input"
name:</label><br>
action="[Link]"
<input type="text" id="lname"
method="get">
name="lname" value="Doe"><br><br>
Username: <input <input type="submit" value="Submit">
type="text" </form>
name="user"> <p>If you click the "Submit"
01/08/2026 button, the
<input type="submit" form-data will be sent to a page called
HTML Forms…
13
3
Automating Processing: Info Forms and Emails
If you would like to provide your web site visitors with a simple way to
contact you from your web site, but really don't want to display your email
address, this HTML form code may be what you're looking for.
You can create a simple form, to enable your visitors to send you
comments, questions, product support requests, or whatever you'd like.
<form action=[Link] method=“post" enctype="text/plain">
Your Name: <input type="text" size="20“ name="VisitorName">
<br><br>
Your Comment: <textarea name="VisitorComment" rows="4" cols="20">
</textarea><br><br>
<input type="submit" value="Email This Form">
</form>
01/08/2026
Fieldsets
13
4
Fieldsets are used to enclose a group of related form fields:
<form method="post" action="[Link]">
<fieldset>
<legend>Client Details</legend>
<input type="text" name="Name"/>
<input type="text" name="Phone"/>
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" name="Quantity" />
<textarea cols="40" rows="10"
name="Remarks"></textarea>
</fieldset>
</form>
01/08/2026
HTML Forms – Example
[Link]
<form method="post" action="[Link]">
<input name="subject" type="hidden" value="Class"
/>
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of
Science</option>
<option value="MBA"
selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
01/08/2026
<br />
<label for="lname">Last Name</label> 135
HTML Forms – Example (2)
[Link] (continued)
13
6
<br />
Gender:
<input name="gender" type="radio" id="gm"
value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf"
value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send
01/08/2026
Form" />
HTML Forms – Example (3)
[Link] (continued)
13
7
01/08/2026
Frames
13
8
Frames can divide the screen into separate windows.
Each of these windows can contain an HTML document.
A file that specifies how the screen is divided into
frames is called a frameset.
The frameset page lacks a <body> element (although
it still requires head and title elements) and instead
uses a <frameset> element, which sets the attributes
for how the frames are positioned.
The frameset element houses frame elements, which
define the location and attribute of each frame.
01/08/2026
Frames…
13
9
When a frameset page is loaded, the browser automatically
loads each of the pages associated with the frames.
Each HTML document is called a frame, and each frame is
independent of the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
The frameset element holds two or more frame elements.
Each frame element holds a separate document.
The frameset element sets no of columns or rows in the
frameset and it uses <frameset> tag.
The <frame> tag defines one particular window(frame)
within a frameset. 01/08/2026
Frames…
14
0
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
The frameset column size can also be set in pixels
(cols="200,500"), and one of the columns can be set
to use the remaining space, with an asterisk
(cols="25%,*").
You cannot use the body element together with the
frameset element.
However, if you add a <noframes> tag containing
some text for browsers that do not support frames,
you will have to enclose the text in a01/08/2026
body element.
Frames…
14
1
Attributes of frameset
Attribute Value Description
cols pixels Specifies the number and size of columns in a
% frameset
*
rows pixels Specifies the number and size of rows in a
% frameset
*
01/08/2026
Frames…
14
2
Example:
<frameset cols="30%,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
01/08/2026
Frames…
14
3
Attributes of frame
Attribute Value Description
frameborder 0 or 1 Specifies whether or not to display a border around a frame
marginheight pixels Specifies the top and bottom margins of a frame
marginwidth pixels Specifies the left and right margins of a frame
noresize noresize Specifies that a frame cannot be resized
scrolling yes Specifies whether or not to display scrollbars in a frame
no
auto
src URL Specifies the URL of the document to show in a frame
01/08/2026
Frames…
14
4
You can also nest framesets, to create a
combination of columns and rows:
<frameset rows="120,*">
<frame noresize=”noresize” src="frame-
[Link]">
<frameset cols="150,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</frameset>
01/08/2026
Frames…
14
5
01/08/2026
Frames…
14
6
Nested Frames
Framesets may be nested to any level. In the following
example, the outer FRAMESET divides the available space into
three equal columns.
The inner FRAMESET then divides the second area into two
rows of unequal height.
Example:
<FRAMESET cols="33%, 33%, 34%">
<frame src=”[Link]”>
<FRAMESET rows="40%, 50%">
<frame src=”[Link]”>
<frame src=”[Link]”>
</FRAMESET>
<frame src=”[Link]”> 01/08/2026
Frames…
14
7
Working with iframes (internal frames)
The <iframe> tag defines an inline frame that
contains another document.
<iframe>s enable you to update a page section
without reloading the rest of it.
In addition, <iframe>s can be handy for enabling
users to update a portion of a site’s design
without touching the rest of the design.
01/08/2026
14
8
<p>Your browser does not
<html> support iframes.</p>
<head> </iframe>
<title>Internal <br> <br>
Frame</title> <table border="1">
</head> <tr> <th>Name</th>
<body> <th>Salary</th> </tr>
<p> Maths is the base of <tr> <td>Chan Li</td>
many sciences including <td>5000</td> </tr>
<tr> <td>Anna Andrey</td>
engineering, computer
<td>7000</td> </tr>
science, physics, etc. </p> </table>
<br> <br> </body>
<iframe src ="[Link]" </html>
width="100%"
height="300"> 01/08/2026
Inserting Multimedia
14
9
You can add music or video into your web page.
The easiest way to add video or sound to your
web site is to use <embed> tag.
The src attribute of <embed> tag defines what
video/audio file to embed into the page.
This tag causes the browser itself to include
controls for the multimedia automatically.
Example:
<embed src="[Link]" autostart="false" />
01/08/2026
Inserting Multimedia…
15
0
The following is the list of important attributes for <embed> element.
align - determines how to align the object. It takes either center, left or right.
autostart - Indicates if the media should start playing automatically. Netscape
default is true, Internet Explorer is false.
loop - Specifies if the sound should be played continuously (set loop to true), a
certain number of times (a positive value) or not at all (false). This is supported
by Netscape only.
playcount - Specifies the number of times to play the sound. This is alternate
option for loop if you are usiong IE.
hidden - Defines if the object shows on the page. A false value means no and
true means yes.
height – set height of the object.
width – set width of the object.
pluginspage - Specifies the URL to get the plugin software.
name - A name used to reference the object.
src - URL of the object to be embedded. This can be any recognizable by the
user's browser. It could be .mid, .wav, .mp3, .avi and so on).
volume - Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
01/08/2026
This attribute is supported by Netscape only.
Inserting Multimedia…
15
1
Example:
<embed src="[Link]
Pluginspage="[Link] width="320"
height="250"
CONTROLLER="true" LOOP="false" AUTOPLAY="false" name="IBM
Video">
</embed>
File types that are supported by the embed tag are Flash movies
(.swf), mpeg(.mpg or .mpeg), AVI's (.avi), and MOV's (.mov).
.swf files - are the file types created by Adobe Flash program.
.wmv files - are Microsoft's Window's Media Video file types.
.mov files - are Apple's Quick Time Movie format.
.mpeg files - are movie files created by the Moving Pictures Expert
Group.
Macromedia's .swf and .mpeg formats may be the best options for web
because the high compression reduces file size and expedites the
01/08/2026
download periods for your page visitors.
HTML Graphics
15
2
HTML Canvas
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a red
rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.
The <canvas> element is only a container for graphics. You must use JavaScript to
actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
A canvas is a rectangular area on an HTML page. By default, a canvas has no
border and no content.
<canvas id="myCanvas" width="200" height="100"></canvas>
01/08/2026
15
3
Add a JavaScript: After creating the
<!DOCTYPE html> rectangular canvas area, you must add a
<html> JavaScript to do the drawing.
<!DOCTYPE html>
<body>
<html>
<canvas id="myCanvas"
<body>
width="200" height="100"
<canvas id="myCanvas" width="200"
style="border:1px solid
height="100" style="border:1px solid
#000000;">
#d3d3d3;">
</canvas>
tag.</canvas>
</body>
<script>
</html>
var c =
[Link]("myCanvas");
var ctx = [Link]("2d");
[Link](0,0);
[Link](200,100);
[Link]();
</script>
</body>
01/08/2026
</html>
15
4
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
. </canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "30px Arial";
[Link]("Hello World",10,50);
</script>
</body>
</html>
01/08/2026
ClockClock using
15
5
<!DOCTYPE html> var ctx =
[Link]("2d");
<html> var radius = [Link] /
<body> 2;
<canvas id="canvas"
[Link](radius,
width="400" height="400" radius);
style="background- radius = radius * 0.90
color:#333"> setInterval(drawClock,
1000);
</canvas>
<script> function drawClock() {
drawFace(ctx, radius);
var canvas = drawNumbers(ctx, radius);
[Link]( drawTime(ctx, radius);
"canvas"); }
01/08/2026
Clock using Canvas
15
6 function drawFace(ctx, radius) {
var grad; function drawNumbers(ctx, radius)
[Link](); var ang;
[Link](0, 0, radius, 0, 2*[Link]); var num;
[Link] = 'white'; [Link] = radius*0.15 + "px arial"
[Link](); [Link]="middle";
grad = [Link]="center";
[Link](0,0,radius*0 for(num = 1; num < 13; num++){
.95, 0,0,radius*1.05); ang = num * [Link] / 6;
[Link](0, '#333'); [Link](ang);
[Link](0.5, 'white'); [Link](0, -radius*0.85);
[Link](1, '#333'); [Link](-ang);
[Link] = grad; [Link]([Link](), 0, 0);
[Link] = radius*0.1; [Link](ang);
[Link](); [Link](0, radius*0.85);
[Link](); [Link](-ang);
[Link](0, 0, radius*0.1, 0, }
2*[Link]); }
01/08/2026
[Link] = '#333';
15
7 function drawTime(ctx, radius){
function drawHand(ctx,
var now = new Date();
pos, length, width) {
var hour = [Link]();
[Link](); var minute = [Link]();
[Link] = width; var second = [Link]();
[Link] = "round"; //hour
[Link](0,0); hour=hour%12;
[Link](pos); hour=(hour*[Link]/6)+
(minute*[Link]/(6*60))+
[Link](0, -length);
(second*[Link]/(360*60));
[Link]();
drawHand(ctx, hour, radius*0.5,
[Link](-pos); radius*0.07);
} //minute minute=(minute*[Link]/30)+
</script> (second*[Link]/(30*60));
drawHand(ctx, minute, radius*0.8,
</body> radius*0.07);
// second
</html>
second=(second*[Link]/30);
drawHand(ctx, second, radius*0.9,
radius*0.02);
} 01/08/2026
15
8
HTML SVG •SVG stands for Scalable Vector Graphics
•SVG is used to define graphics for the
Web
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics. SVG has several
methods for drawing paths, boxes, circles, text, and graphic images.
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4"
fill="yellow" />
</svg>
</body>
</html>
01/08/2026
15
9
<!DOCTYPE html>
<html>
<body>
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220"
ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190"
ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170"
ry="15" style="fill:yellow" />
Sorry, your browser does not support
inline SVG.
</svg>
</body>
</html>
01/08/2026
SVG Advantages
16
0
Advantages of using SVG over other image formats (like JPEG
and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and
compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable
SVG graphics do NOT lose any quality if they are zoomed or
resized
SVG is an open standard
SVG files are pure XML
01/08/2026
You might also like
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure32 pages
- HTML Basics: Creating Your First DocumentNo ratings yetHTML Basics: Creating Your First Document34 pages
- HTML Basics and Hyperlinking TechniquesNo ratings yetHTML Basics and Hyperlinking Techniques120 pages
- HTML Basics: Essential Tags & TechniquesNo ratings yetHTML Basics: Essential Tags & Techniques30 pages
- Requirements Elicitation in Software EngineeringNo ratings yetRequirements Elicitation in Software Engineering58 pages
- P vs NP: Understanding Complexity TheoryNo ratings yetP vs NP: Understanding Complexity Theory18 pages
- Microbial Biotechnology in Health & IndustryNo ratings yetMicrobial Biotechnology in Health & Industry20 pages
- Accounting Fundamentals Group AssignmentNo ratings yetAccounting Fundamentals Group Assignment6 pages
- Java Networking and Socket Programming GuideNo ratings yetJava Networking and Socket Programming Guide20 pages
- Accounting Cycle for Business Line ConsultingNo ratings yetAccounting Cycle for Business Line Consulting12 pages
- Random Variables and Probability DistributionsNo ratings yetRandom Variables and Probability Distributions24 pages
- Cabbage Cultivation and Market AnalysisNo ratings yetCabbage Cultivation and Market Analysis11 pages
- Understanding Sampling Methods and ErrorsNo ratings yetUnderstanding Sampling Methods and Errors19 pages
- Merge Sort Algorithm Overview and ImplementationNo ratings yetMerge Sort Algorithm Overview and Implementation10 pages
- Memory Organization and Hierarchy ExplainedNo ratings yetMemory Organization and Hierarchy Explained12 pages
- Stacks and Queues: Data Structures ExplainedNo ratings yetStacks and Queues: Data Structures Explained53 pages
- Register Transfer Language and Micro OperationsNo ratings yetRegister Transfer Language and Micro Operations75 pages
- Introduction to Digital Systems OverviewNo ratings yetIntroduction to Digital Systems Overview16 pages
- User'S Guide: Secure Socket Layer Introduction and IkeymanNo ratings yetUser'S Guide: Secure Socket Layer Introduction and Ikeyman51 pages
- JavaScript Insertion and Validation MethodsNo ratings yetJavaScript Insertion and Validation Methods12 pages
- D3.Js in Action, Third Edition (Elijah Meeks Etc.) (Z-Library)No ratings yetD3.Js in Action, Third Edition (Elijah Meeks Etc.) (Z-Library)658 pages
- Web Frameworks: React, Angular, Vue.js AnalysisNo ratings yetWeb Frameworks: React, Angular, Vue.js Analysis65 pages
- Sistema Web para Restaurantes EficienteNo ratings yetSistema Web para Restaurantes Eficiente80 pages
- Cybersecurity Student Profile & ProjectsNo ratings yetCybersecurity Student Profile & Projects2 pages
- Software Engineer with Payment Gateway ExperienceNo ratings yetSoftware Engineer with Payment Gateway Experience3 pages