Coding Class, Lecturer 1
HTML
By
Tr. Tara
19-May-24 TARA_ACADEMY 1
What is HTML?
The Hyper Text Markup Language or HTML is the
standard markup language for creating web pages.
HTML describes the structure of a web page
HTML consists of a series of elements
HTML elements label pieces of content such as
“this is a heading”, “this is a paragraph”, “this is a
link”, etc.
19-May-24 TARA_ACADEMY 2
What is HTML used for?
HTML (HyperText Markup Language) is the code that is
used to structure a web page and its content.
For example, content could be structured within a set of
paragraphs, a list of bulleted points, or using images and
data tables.
19-May-24 TARA_ACADEMY 3
The commands/keywords of HTML are called tags.
A HTML document is a plain text file that contains text
and HTML tags.
HTML is not a programming language, but a markup
language.
It creates simple text files using any HTML editor.
It consists of markup tags.
It is saved with the extension of .htm or .html.
It is not case sensitive, that is, <HTML>, <html> or
<HTml> are the same.
19-May-24 TARA_ACADEMY 4
HTML tags
HTML tags are keywords enclosed in a pair of
angular brackets,
< and >.
These tags are usually paired (for example,
<HTML> and </HTML>) to mark the start and
end of a HTML instruction or HTML
Type the complete path of the HTML file saved
in your computer in the Address bar of your
web browser to get the output. element. The
first tag is known as the opening tag and the
second tag is known as the closing tag.
The end tag or closing tag is preceded by a
forward slash (/) within the angular brackets.
19-May-24 TARA_ACADEMY 5
There are two types of tags.
1. Container Tags: These tags have a start and an end tag to a HTML element. For
example, <B> .. . <IB>, <BODY> ... </BODY>, etc.
2. Empty Tags: These tags have only an opening or a start tag and no closing tag to a
HTML element. For example, <LI>, <IMG> <HR>, etc.
19-May-24 TARA_ACADEMY 6
HTML elements
The content typed along with the start tag and the end tag
is called the HTML element.
For example, <B> Click Start <IB> is one HTML element.
HTML can also have nested elements.
For example, <B> <U> Click Start <IU> <IB>.
The opening and closing of the tags should always follow a
sequence, that is, the tag that opens first should be closed
last.
For example,
<B> <U> Click Start <IU> <IB> is a correct sequence
while.
<B> <U> Click Start <IB> <IU> is an incorrect sequence.
19-May-24 TARA_ACADEMY 7
HTML Tag Attributes
Attributes of a tag provide additional information about
the HTML elements.
Attributes appear as an attribute name followed by an '='
sign and then the attribute value.
Attribute values should be enclosed within double quotes,
though some browsers allow single quotes as well.
Different attributes in the same tag are separated by a
space.
For example, <IMG align="left">
Here, align="left" is an attribute of the HTML element:
'align' is the attribute name and
'left' is the attribute value.
19-May-24 TARA_ACADEMY 8
Basic Codes of HTML
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--_ -- > Defines a comment
19-May-24 TARA_ACADEMY 9
Structure of a HTML document
All HTML documents contains standard
HTML tags that are executed in a web
browser.
The browser uses the tags to interpret and
display the content of the page.
A HTML document contains the following
main elements:
◦ Root element
◦ Head element
◦ Body element
19-May-24 TARA_ACADEMY 10
Root element
This contains the HTML tag.
It is a container tag.
This tag does not show directly on the web page.
It is used to detect the document as a HTML document.
19-May-24 TARA_ACADEMY 11
Head element
This element contains information about the
document.
The text and tags do not show directly on the web
page.
It contains the HEAD tag which is the first tag
under the HTML tag.
This in turn can contain various other tags such as
TITLE tag (the title appears in the Title bar of the
web page), STYLE tag, etc.
19-May-24 TARA_ACADEMY 12
Eg. of Head element
<HTML>
<HEAD>
<TITLE>
Click Start - Learning HTML
</TITLE>
</HEAD>
</HTML>
19-May-24 TARA_ACADEMY 13
19-May-24 TARA_ACADEMY 14
Body element
This element defines the document's body.
This comes after the head element.
The BODY tag is used to display text, images, links, etc. on the
web page.
This may contain several other tags.
<HTML>
<HEAD>
<TITLE>
Click Start- Learning HTML
</TITLE>
</HEAD>
<BODY>
Learning HTML is an enjoyable experience!
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 15
Some important attributes of the
<BODY> tag:
Text:
This attribute specifies the color of the text for the entire
document.
The value can be the name of the color within quotes.
Bgcolor: This attribute specifies the color of the background of
the web page.
Leftmargin: This attribute sets the left margin of the web page.
The value can be given as a number or percentage
Topmargin: This attribute sets the margin at the top of the web
page. The value can be given as a number or percentage.
Background:
This attribute will make an image the background of the web
page.
To illustrate the attributes of the BODY tag, see the following
example:
19-May-24 TARA_ACADEMY 16
19-May-24 TARA_ACADEMY 17
<HTML>
<HEAD>
<TITLE>
Click Start- Learning HTML
</TITLE>
</HEAD>
<BODY text="Blue"
bgcolor="Green"
leftmargin="60"
topmargin="50">
Learning HTML is an enjoyable experience!
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 18
Some important points
• The space between the tags does not matter. For example,
<U>Underline text</U> is the same as <U>Underline text
</U>
• There should not be any space between letters of the tag
names. For example,
<HTML> is correct;
< HTML >, <HT ML>, <H T M L> is incorrect.
• Attributes are always specified with the tag they belong to.
• Attribute names are not case sensitive.
19-May-24 TARA_ACADEMY 19
<HlML>
<HEAD>
<TITLE> My Firs web page </TITLE>
</HEAD>
<BODY>
<h1>First Level Heading</h1>
HI FRIENDS LET US START WORKING IN HTML
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 20
