HTML Elements, Tags, Attributes and List Formatting

HTML  Hyper Text Markup Language. HTML is made up of
elements or tags and attributes which tells browsers how to display
them. The extension name of HTML document is .html or .htm.
Tags  Tags are the commands that indicates how part of a web
page should be displayed. Tags are enclosed in angular brackets < >
Syntax :- To start a HTML tag -- <tag-name>
To end a HTML tag -- </tag-name>
There are two types of tags in HTML :-
1. Container tag :- HTML tag that has a starting as well as
ending tag. The container tags affect everything that comes
between their starting and ending tag.
2. Empty tag :- HTML tag that require just a starting tag and not
an ending tag. Empty elements just carry out their specific job.
Created by -- Neelima Kamboj

<html>
<head>
<title> Title of the page </title>
</head>
<body>
Contents of the HTML page
</body>
</html>
Head
Body
The HTML program design
Title of the page will
be displayed here
Contents of the HTML page will be
displayed here

<html>
<head>
<title> St. Xavier School </title>
</head>
<body>
Welcome to class 10th of St. Xavier School
</body>
</html>
Heading of
web page
Body of the
web page

Line Break Tag
<BR> tag is used to insert a line break into the text of web page.
This is an empty tag that is it has only start tag no end tag.
<html>
<body>
Welcome
To <br>
HTML
Programming
</body>
</html>
Default heading used by Internet Explorer if user
does not specify the heading

Body Tag Attributes
• BACKGROUND ---
displays the picture as the background of the page.
syntax - <BODY BACKGROUND = system-path>
example - <BODY BACKGROUND = “C:welcome.gif”>
• BGCOLOR --- changes the back color of the web page.
syntax - <BODY BGCOLOR= ColorName or ColorCode>
example - <BODY BGCOLOR= Red>
<BODY BGCOLOR= f0f0ab>
• TEXT ---
changes the fore color or the text color of the web page.
syntax - <BODY TEXT = ColorName or ColorCode>
example - <BODY TEXT= blue>
<BODY TEXT= ab123d>

<html>
<head>
<title> St. Xavier School </title>
</head>
<body bgcolor = yellow text = red >
Welcome to class 10th of St. Xavier
School
</body>
</html>
Final Output

Heading Tags
There are 6 levels of headings in HTML
ranging from h1 for the biggest important,
to h6 for the smallest important.
Syntax :- <Hno> type the heading contents </Hno>
Example :- <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<html>
<head>
<title> Heading tags </title>
</head>
<body bgcolor=black text=white >
<h1> CLASS-XII </h1>
</body>
</html>

Font Tag
The Font tag is used to change the font size, name and color of text
enclosed in it. It is a container tag.
Attributes :-
1. SIZE --- Changes the size of text. The value must be between pixels 1 and 7.
The size can be given an absolute value (example: 3,4) or
relative value (example : +3, -2). By default size is 1 pixel.
2. COLOR --- Changes the color of the text.
3. FACE --- Changes the font type of the text.
Syntax:- <FONT SIZE=value COLOR=color FACE= “font-names” >
Example :-
<font size=2 face="Times new Roman" color=red> HELLO </font>

<html>
<head>
<title> Text Formatting Tag </title>
</head>
<body>
<font size=2 face="Times new Roman" color=red> HELLO </font>
<br>
<font size=+4 face="monotype corsiva" color=abc123> HELLO </font>
</body>
</html>

Syntax Meaning Example Output
<b>text</b>
writes text as
bold.
<b>Welcome</b> Welcome
<i>text</i>
writes text in
italics.
<i>Welcome</i> Welcome
<u>text</u>
writes
underlined
text
<u>Welcome</u> Welcome
<s>text</s>
strikes a line
through the
text.
<s>Bye</s> Bye
Text Formatting Tags

<sub>text</sub> Sub Scripts the text H<sub>2</sub> H2
<sup>text</sup> Super Scripts the text A<sup>2</sup> A2
Syntax Meaning Example Output
<big>text</big> increase the size by one <big>HI</big> HI
<small>text</small> decrease the size by one <small>HI</small> HI

Lists
There are two types of lists in HTML Unordered Lists and Ordered Lists
Unordered List --- also known as bulleted list or un-numbered list.
<UL> tag is used to create a bulleted list. It is a container tag.
The list items can be added using the <LI> tag which is an empty tag.
Attribute of <UL> tag
TYPE -- it is used to change the bullet shape. HTML provides only three bullets
value Shape
disc 
circle 
square 
Syntax :- <UL TYPE=value>
<LI> text
<LI> text
…
</UL>

Ordered List --- also known as numbered list.
<OL> tag is used to create a numbered list. It is a container tag.
The list items can be added using the <LI> tag which is an empty tag.
Attributes
1. TYPE -- This attribute is used to change the numbering style.
There are five types of number styles.
2. START -- This attribute sets the starting value of the list items.
The value should always be a number irrespective of the type used.
Value Meaning Samples
1 Plain numbers 1, 2, 3, 4, 5
A Capital Letters A, B, C, D, E
a Small Letters a, b, c, d, e
I Capital Roman Numbers I, II, III, IV, V
i Small Roman Numbers i, ii, iii, iv, v
Syntax
<OL TYPE=value start=value>
<LI> text
<LI> text
…
</OL>

HTML Elements, Tags, Attributes and List Formatting

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML Elements, Tags, Attributes and List Formatting

Similar to HTML Elements, Tags, Attributes and List Formatting (20)

Recently uploaded

Recently uploaded (20)

HTML Elements, Tags, Attributes and List Formatting