Coding Class, Lecturer 1I
HTML
By
Tr. Tara
19-May-24 TARA_ACADEMY 1
HTML Document Heading
Heading tags are used to display a text slightly bigger and bolder
than normal body text.
HTML has six levels of headings, numbered 1 to 6, with 1 being the
main heading and largest in size.
The first heading in each document should be tagged as <Hl>
...</Hl>. It is a container element.
The syntax used for the heading tag is:
<Hn> Text of heading </Hn> where, n is any number from 1 to 6
specifying the level of the heading.
19-May-24 TARA_ACADEMY 21
19-May-24 TARA_ACADEMY 22
<HTML>
<HEAD>
<TITLE> Heading Tags</TITLE></HEAD>
<BODY>
<H1> First level heading </H1>
<H2> Second level heading </H2>
<H3> Third level heading </H3>
<H4> Fourth level heading </H4>
<H5> Fifth level heading </H5>
<H6> Sixth level heading </H6>
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 23
HTML paragraph tag <P>
While writing a HTML document, all kinds of spaces are ignored including blank
lines and the Enter key. These are all compressed into one single space when
displayed in a browser.
For example,
◦ Honesty is the best policy.
◦ Hard work is the key to success.
These two lines when written in a HTML document will appear in a single line
as:
◦ Honesty is the best policy. Hard work is the key to success.
Therefore, to write a paragraph you use a paragraph tag, <P>.
The <P> tag is used to define the beginning of a new paragraph in a web page.
It leaves a blank line after the paragraph.
Thus, the text following the <P> appears on a new line.
The syntax used for the paragraph tag is:
<P> Paragraph 1 <IP>
<P> Paragraph 2 <IP>
19-May-24 TARA_ACADEMY 24
19-May-24 TARA_ACADEMY 25
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My First paragraph.</p>
</body>
</html>
19-May-24 TARA_ACADEMY 26
19-May-24 TARA_ACADEMY 27
HTML Paragraph tag <P>
<HTML>
<TITLE> words of wisdom
</TITLE>
<BODY>
<P>Wisdom is only found in truth. </P>
<P> Good health is above wealth. </P>
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 28
Attributes of <P> tag
A paragraph in a web page defined by a <P> tag can be
aligned using the align attributes.
The syntax used for various alignment attributes are given
below:
1. To left align the paragraph text: <P align="left">
2. To right align the paragraph text: <P align="right">
3. To center align the paragraph text: <P align=" center">
4. To justify the paragraph text: <P align="justify">
19-May-24 TARA_ACADEMY 29
19-May-24 TARA_ACADEMY 30
<HTML>
<TITLE> Paragraph Alignment </TITLE>
<BODY>
<P align ="left"> An apple a day keeps the doctor away
</P>
<P align ="center"> An apple a day keeps the doctor away
</P>
<P align ="right"> An apple a day keeps the doctor away
</P>
<P align="justify">An apple a day keeps the doctor away
</P>
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 31
Line break tag <BR>
You have learnt that a web browser does not
recognise line breaks.
The <BR> tag is used to give a single line break.
It is an empty element.
It is used to give a forced line break without
inserting any blank space in between the lines.
This is an empty tag and does not require an
end tag.
The syntax used is:
<BR> ... Text ...
Use <br> if you want a line break (a new line)
without starting a new paragraph
19-May-24 TARA_ACADEMY 32
<HTML>
<BODY>
This is an example<BR>to display line break.
</BODY>
<HTML>
19-May-24 TARA_ACADEMY 33
HTML Horizontal Rules
The <hr> tag is used to separate the contents
of HTML document, and is most often
displayed as a horizontal rule or a line.
The <hr> tag is an empty tag, which means
that it has no end tag.
The <hr> element is used to separate content
(or define a change) in an HTML page:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
19-May-24 TARA_ACADEMY 34
The attributes of different tags are dependent
on the type of browser you use – what will
work in one browser may not work in another.
These are the attributes or options used with
the <HR> tag.
• For thickness of the line: size=""
• For line color: color=""
• For length of the line: width='"'
• For alignment of line: align=""
• To make a solid line: noshade
19-May-24 TARA_ACADEMY 35
<HTML>
<BODY> <!-- for body-->
<Hl>This is an example of the horizontal line.</Hl>
<!-- using heading level 1-->
<BR> <!--This is for line break like enter-->
<HR size="4" width="50%" align="center” noshade> <!-- break
the content with line size 4, width 50% , etc-->
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 36
Comment tag
tag which is used to insert comments in HTML code.
This is used to increase the readability of code.
The comments do not get executed, and
thus you do not see their effect on a web page. The
comment tag is used for reference
by a programmer only. The syntax for this code is<!-- This is
a comment -->.
The lines written within the angular bracket will not be
displayed in the browser window.
Comments help you to understand your code and are useful
when you edit the source code later.
19-May-24 TARA_ACADEMY 37
19-May-24 TARA_ACADEMY 38
<HTML>
<BODY>
<H1><CENTER>Click Start</CENTER> </H1>
<!--This is the heading tag-->
<BR>
<HR size="4" width=“50%" align="center" noshade>
<!--This is to draw a horizontal line-->
</BODY>
</HTML>
19-May-24 TARA_ACADEMY 39
19-May-24 TARA_ACADEMY 40
