Computer language - HTML tags

HTML Tags
By
Dr. I. Uma Maheswari
iuma_maheswari@yahoo.co.in

Tags
• Tags also called as markups, instruct the
browser how to display HTML document.
• It consists of a keyword (which has pre –
defined meaning) enclosed within
angular brackets (< >).
• HTML uses two types of tag element
1. Empty tag
2. Container tag

Empty tag
• Empty tag represents the formatting
options of text such as line break,
horizontal ruler, paragraph setting etc.
• These tags have only beginning tag (start
tag)
• Eg. , <HR>,

Container tag
• Container tags have a section of text,
which specifies the formatting construction
for all the selected text.
• Container tag has both start tag and End
tag.
• The end tag is same as the start tag with
an addition of a forward slash.
• Eg ………….. 
<body> …….. </body>

Attributes
• Attributes are additional information given
to a tag.
• They are used for specific purpose only.
• Attributes are added only to ‘start’ tags and
not to ‘end’ tags.
• Attributes are not enclosed within angular
bracket.

Structure of HTML document
• HTML document has two sections
1. Head Section
2. Body Section
<HTML>
<HEAD>
Head section <TITLE> …………… </TITLE>
</HEAD>
<BODY>
Body section
</BODY>
</HTML>

Head section
• Contains all document header information like title
of the document.
• This section begins and ends with <HEAD> …….
</HEAD> tags.
• The document title is displayed with the help of
<title> ….. </title> tags which is enclosed within
<head> …… </head> tags.
• This title is displayed in the title bar or at the top of
the document.
• It is a quick reference to WWW browsers and other
application that access HTML files.

Eg., 1
<HTML>
<HEAD>
<TITLE> Computer Education </TITLE>
</HEAD>
</HTML>
Eg., 2
<HTML>
<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>
</HTML>

Body Section
• The body section comes after head
section.
• It includes text, object, images and sound
that gets displayed in the browser window.
• The body section is enclosed with <body>
…. </body> tags.

Comment tags
• Comments are added to the documents for the
benefit of the writer, which helps to understand
the document.
• It is also used to specify the author’s name, copy
right message etc.
• Comments are included anywhere in the
program.
• These comment statements are ignored by the
browser.
• They are given within <!- - and - -> tags
• eg. <!- - This is a title of the web page - ->

Tags
• <BIG> ….. </BIG> - displays the text in a font
larger than the font currently being used.
• …… - displays the text in a
font smaller than the font currently being used.
Eg.<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<BIG> ELECTIVE </BIG>
 COMPUTERS IN EDUCATION 
</BODY>
</HTML>

• tag is used to specify the font
style, size and colour for a character,
phrase or a range or text to be
displayed.
• …….. tags, encloses the
text.

Attributes of font
FACE
• Font styles displayed in the browser can
be changed using the face attribute.
• Face attribute has a value which is a font
name, enclosed within double quotes.
• If the specified font is not available in the
system, then default font will be assumed.

Size
• The size attribute is enclosed within the font tag
that indicates the size in which the font has to be
displayed.
• The values of size attributes are 1 to 7, where 3
is the default size.
Colour
• This attribute is used for changing the colour of
the text.
• The value of colour attribute is either a colour
name or a RGB code (000000 to FFFFFF).

Example
<HTML>
<HEAD>
</HEAD>
<BODY>

ELECTIVE

</BODY>
</HTML>

More tags on formatting
Bold - The tag is used to display the text thicker
and darker than normal. The end tag is 
Italics - To display the text in Italics, tag is used.
The end tag is 
Underline - The tag is used to underline the text
in the document. is the end tag.
Center - The text enclosed within <center> …….
</center> tag will be displayed in the center of the
line.

Example
<HTML>
<HEAD>
</HEAD>
<BODY>

ELECTIVE 
ELECTIVE 
ELECTIVE 
<Center>ELECTIVE </Center> 

</BODY>
</HTML>

Heading tags
• There are six levels of headings from
heading 1 to heading 6 in HTML.
• The heading tags has a start tag and an
end tag.
• H1, H2, H3, H4, H5, H6 are the six levels,
each having its own appearance.
• The headings tags are used to set apart
document text and section subtitles.

Example
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>ELECTIVE </H1> 
</BODY>
</HTML>

Paragraph
• The paragraph tag is used to break
the text into paragraphs.
• The tag is placed at the beginning of
each new paragraph, and the browser
separates the text into paragraphs.
• The end tag is optional.
• The paragraph alignment is also possible
in HTML

The paragraph attribute ‘align’
 - aligns paragraphs to the
left
 - aligns paragraphs to the
right
 - aligns paragraphs to
the center
 - justifies the paragraphs
to the page

Example
<HTML>
<HEAD>
</HEAD>
<BODY>
 To write a HTML document code we
need a text editor or a word processor which saves the documents in
plain, flat, un styled ASCII style text.
 HTML requires a web browser to
display the document (web page) created using text editor.
 The Browsers are MS Internet
Explorer, Netscape Navigator, Mosaic, Net cruiser, Mac Web etc.
 To write a HTML document code we
need a text editor or a word processor
</BODY>
</HTML>

Line Break
• The browsers normally displays the text in
one line that are included in the body
section.
• The white spaces and carriage returns that
are used in the text editor will be ignored.
• The document that may be perfectly
aligned in the html document will not be
aligned in the browser while it is displayed.
• To avoid this line break is needed.

• The tag is used to give a line break.
• The text placed next to it will be forced to
start from the left margin of the next line
on the screen.
• The line break element does not give any
blank lines between the text.
• Multiple tags allow multiple line
breaks.
• It does not have an end tag.

Example
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1> you can</H1>
Do all the good you can, 
In all the places you can, 
To all the people you can.
</BODY>
</HTML>

Horizontal tag
• To draw a horizontal line the <HR> tag is used.
• It does not have an end tag.
• <HR> tag automatically introduces a horizontal
line break.
• The <HR> tag has two attributes “size” and
“noshade”.
• The size attribute is used to specify the thickness
of the line which is in terms of numbers and
enclosed within double quotes and the noshade
attribute displays the line in dark grey.

Example
<HTML>
<HEAD>
<TITLE> horizontal line coding </TITLE>
</HEAD>
<BODY>
<H1> you can</H1>
<HR size = “3”>
<HR size = “25” noshade>
</BODY>
</HTML>

Background colour
• The background colour of the page can be
changed by using the “bgcolor” attribute.
• Bgcolour is one of the attribute of <body>
tag.
• Html allows specifying colours in RGB
colour code (000000 to FFFFFF).
• The first two digit represent red, the next
two green component and the last two
represents blue component.

• Some browser allows the user to use the
colour name directly.
• They allow us to use upto 16 colour
names such as aqua, black, blue, fuchsia,
green, grey, lime, maroon, navy, olive,
purple, red, silver, teal, white and yellow.
• If the background colour is not specified,
the browser assumes default colour
specified while installation.
Eg., <body bgcolour = “RED”> … </body>

Text attribute
• The text attribute is another attribute of
<body> tag.
• It is used to specify the colour in which the
text has to be displayed on the browser.
• The colours used in background colour
can also be applied in this attribute.
Eg., <body text = “yellow” bgcolor = “red”>
……….</body>

• When the colour of the text is changed
using TEXT attribute of <body> tag, then
the change affects all the text.
• When the colour of the text is changed
using COLOR attribute of tag,
then the change affects only the text that
are enclosed within the tag.

Marquee tag
• The text enclosed within the <MARQUEE> and
</MARQUEE> tag makes the text to scroll from
one end of the window to the other end.
• BGCOLOR and DIRECTION are the two
attributes of MARQUEE tag.
• BGCOLOR specifies the background colour of
the page and DIRECTION specifies the direction
to which the text should scroll.
• Left (or) right (or) up and down (or) down and up
are the directions
• <Marguee> tag works only in internet explorer

Example
<HTML>
<HEAD>
<TITLE> marquee coding </TITLE>
</HEAD>
<BODY>
<MARQUEE Direction = “right”>
Wish you success in coming years
</MARQUEE>
</BODY>
</HTML>

Computer language - HTML tags

More Related Content

What's hot

Similar to Computer language - HTML tags

More from Dr. I. Uma Maheswari Maheswari

Recently uploaded

Computer language - HTML tags