HTML tags, Tags, Empty tag, Container tag, Attributes, Structure of HTML document, Head section, body section, comment tags, Font tag, attribute of font tag, More tags on formatting, heading tags, paragraph tag, the paragraph attribute 'align', line break, horizontal tag, line break, background tag, text attribute, Marquee tag,
2. 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
3. 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. <BR>, <HR>, <P>
4. 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 <B> ………….. </B>
<body> …….. </body>
5. 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.
6. 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>
7. 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.
9. 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.
10. 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 - ->
11. Tags
• <BIG> ….. </BIG> - displays the text in a font
larger than the font currently being used.
• <small> …… </small> - 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>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
12. <FONT>
• <font> tag is used to specify the font
style, size and colour for a character,
phrase or a range or text to be
displayed.
• <font> …….. </font> tags, encloses the
text.
13. 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.
14. 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).
15. Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<FONT FACE = “ Arial” SIZE = “5” COLOR = “BLUE”>
ELECTIVE
</FONT>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
16. More tags on formatting
Bold - The <B> tag is used to display the text thicker
and darker than normal. The end tag is </B>
Italics - To display the text in Italics, <I> tag is used.
The end tag is </I>
Underline - The <U> tag is used to underline the text
in the document. </U> is the end tag.
Center - The text enclosed within <center> …….
</center> tag will be displayed in the center of the
line.
17. Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<FONT SIZE = “5””>
<B>ELECTIVE </B><BR>
<U>ELECTIVE </U><BR>
<I>ELECTIVE </I><BR>
<Center>ELECTIVE </Center><BR>
</FONT>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
18. 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.
19. Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<H1>ELECTIVE </H1><BR>
<H2>ELECTIVE </H2><BR>
<H3>ELECTIVE </H3><BR>
<H4>ELECTIVE </H4><BR>
<H5>ELECTIVE </H5><BR>
<H6>ELECTIVE </H6><BR>
</BODY>
</HTML>
20. Paragraph
• The paragraph tag <P> is used to break
the text into paragraphs.
• The <P> tag is placed at the beginning of
each new paragraph, and the browser
separates the text into paragraphs.
• The end tag </P> is optional.
• The paragraph alignment is also possible
in HTML
21. The paragraph attribute ‘align’
<P align = “left”> - aligns paragraphs to the
left
<P align = “right”> - aligns paragraphs to the
right
<P align = “center”> - aligns paragraphs to
the center
<P align = “justify”> - justifies the paragraphs
to the page
22. Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<P align = “left”> 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.
<P align = “right”> HTML requires a web browser to
display the document (web page) created using text editor.
<P align = “center”> The Browsers are MS Internet
Explorer, Netscape Navigator, Mosaic, Net cruiser, Mac Web etc.
<P align = “justify”> To write a HTML document code we
need a text editor or a word processor
</BODY>
</HTML>
23. 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.
24. • The <BR> 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 <BR> tags allow multiple line
breaks.
• It does not have an end tag.
25. Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<H1> you can</H1>
Do all the good you can, <BR>
In all the places you can, <BR>
To all the people you can.
</BODY>
</HTML>
26. 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.
28. 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.
29. • 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>
30. 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>
31. • 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 <FONT> tag,
then the change affects only the text that
are enclosed within the <FONT> tag.
32. 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
