At the end of this lesson-

1. You will be able to explain the uses of different heading tags.
2. You will be able to explain the use of paragraph tag.
3. You will be able to explain the uses of different formatting tags.
4. You will be able to define different properties of the fonts.

Go for Bangla Version

Heading Tags:

Any content or article starts having a nice heading, provides the headline or the topic name of any document. Similarly, in HTML code also, different sizes of heading can be given on your web page. HTML allows six sizes for heading that uses elements name in the format of <hn>, where n starts from 1 till 6; like this:

<h1> …</h1>
<h2> …</h2>
<h3> …</h3>
<h4> …</h4>
<h5> …</h5>
<h6> …</h6>

<h1> defines the most important heading. <h6> defines the least important heading.

<html> 
	<body>
		<h1> This is heading 1</h1> 
		<h2> This is heading 2</h2> 
		<h3> This is heading 3</h3> 
		<h4> This is heading 4</h4> 
		<h5> This is heading 5</h5> 
		<h6> This is heading 6</h6> 
	</body> 
</html>

Output of the above code:

Browsers automatically add some white space (a margin) before and after a heading.

Use HTML headings for headings only. Don’t use headings to make text BIG or bold.

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property.

Attributes of <h1> — <h6> Tags:

Attribute: align
Value: left, right, center, justify
Description: Specifies the alignment of the heading.

HTML Horizontal Rules:

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page. It is empty Tag.

<html>
<body>
  <h1>HTML</h1>
  <hr>
  <h1>CSS</h1>
</body>
</html>

Output of the above code:

HTML

CSS

Attributes of <hr> Tag:

Paragraph Tag:

The HTML <p> element defines a paragraph. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed. Browsers automatically add some white space (a margin) before and after a paragraph. Text of HTML paragraph has a default size. However, you can specify the text size of paragraph with the style attribute, using the CSS font-size property.

Let’s see the following code:

<html>
	<body>
		<p>
			This paragraph
			contains a lot of lines
			in the source code,
			but the browser ignores it.
			This paragraph
			contains a lot of spaces
			in the source code, but the browser ignores it.
		</p> 
	</body>
</html>

Output of the above code:

This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it.

Attributes of <p> Tag:

Attribute: align
Value: left, right, center, justify
Description: Specifies the alignment of the text within a paragraph

HTML Line Breaks:

The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph. The <br> tag is an empty tag, which means that it has no end tag. Let’s see the following HTML code:

<html>
<body>
    <p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>

Output of this code:

This is
a paragraph
with line breaks

The HTML <pre> Element:

The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.
</pre>
</body>
</html>

Output of this code:

The pre tag preserves both spaces and line breaks:   

   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.

The HTML Style Attribute:

Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax:

< tagname style=”property:value; ” >

The property is a CSS property. The value is a CSS value.

color property defines the text color for an HTML element, font-family property defines the font to be used for an HTML element and font-size property defines the text size for an HTML element. text-align property defines the horizontal text alignment for an HTML element:

Let’s see the following code:

<html>
	<body> 
		<h1 style = "font-family:veranda; font-size:18; color:green"> 
			It is a heading 
		</h1> 
		<p style = "font-family:Arial; font-size:12; color:red; font-style:Italic">
			This is a paragraph with some text
		</p> 
	</body> 	
</html>

Output of the above code:

<font> tag:

Color, size and face of the text can also be defined using <font> tag. Let’s see the following code:

<html>
     <body> 
		<font size="14" color="green" face="arial"> This is the use of font tag.</font>
     </body> 	
</html>

HTML Formatting Elements:

Formatting is one of the crucial sections of every development. For making any project or article or content looks attractive, readable and user-intractable, formatting plays a very important role. Formatting can be defined as the appearance of your documentation or presentation of your HTML code in a meaningful and nicer way. Formatting is mainly done for making the layout attractable.

In the above, you learned about the HTML style attribute. HTML also defines special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Some formatting tags or elements:

Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is “important”.

Let’s see the following code:

<html> 
	<body> 
		<p>HTML <small>Small</small> Formatting</p>
		<p>HTML <big>Big</big> Formatting</p>
		<p><b> This is bold text </b></p>
		<p><strong> This is strong text </strong></p>
		<p><i> This is Italic Text </i></p>
		<p><em> This is Emphasized Text </em></p>
		<p><u> This is underline text </u></p>
		<p><del> This is deleteted Text </del></p>
		<p><strike> This is striked Text </strike></p>
		<p>This is <sub> subscript </sub> text</p>
		<p>This is <sup> superscript </sup> text</p>
	</body> 
</html>

Output of the above code:

HTML code for displaying this (a+b)²=a²+2ab+b² theory on the web page.

<html>
	<body>  
		(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup>
	</body> 	
</html>

HTML Quotation and Citation Elements:

HTML <q> for Short Quotations:

The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element.

<html>
<body>
      <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>

Output of the above HTML code:

WWF’s goal is to: Build a future where people live in harmony with nature.

HTML <blockquote> for Quotations:

The HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements.

<html>
<body>
	<p>Avul Pakir Jainulabdeen Abdul Kalam, popularly known as Dr. 
     APJ Abdul Kalam was an aerospace scientist and the former President of India.
     He says, <blockquote>“One best book is equal to a hundred good friends, but one good 
	friend is equal to a library.”</blockquote> He served as 11th President of India from 
	2002 to 2007.</p>
</body>
</html>

Output of the above html Code:

আরো পড়ুন :: Sixth Chapter Lesson-10: Database security.

Avul Pakir Jainulabdeen Abdul Kalam, popularly known as Dr. APJ Abdul Kalam was an aerospace scientist and the former President of India.He says,

“One best book is equal to a hundred good friends, but one good friend is equal to a library.”

He served as 11th President of India from 2002 to 2007.

HTML <abbr> for Abbreviations:

The HTML <abbr> element defines an abbreviation or an acronym.

<html>
<body>
     <p>The <abbr>WHO</abbr> was founded in 1948.</p>
</body>
</html>

Output of the above html Code:

The WHO was founded in 1948.

HTML <address> for Contact Information:

The HTML <address> element defines contact information of a document or an article. The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

<html>
<body>
	<p>The HTML address element defines contact information of a document or article.</p>
	<address>
	Written by John Doe.<br> 
	Visit us at:<br>
	Example.com<br>
	Box 564, Disneyland<br>
	USA
	</address>
</body>
</html>

Output of the above html Code:

The HTML address element defines contact information of a document or article.

Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

HTML <cite> for Work Title:

The HTML <cite> element defines the title of a work. Browsers usually display <cite> elements in italic.

<html>
<body>
	<p><cite>The title of a work</cite> will be written here.</p>
</body>
</html>

Output of the above html Code:

The title of a work will be written here.

HTML Comments:

Comment tags are used to insert comments in the HTML source code. You can add comments to your HTML source by using the following syntax:

<!– Write your comments here –>

Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.

Comments are not displayed by the browser, but they can help document your HTML source code. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Output of the above html Code:

This is a paragraph.

Lesson Evaluation-

Knowledge Based Questions:

Comprehension Based Questions:

b. Explain the attributes of <font> tag.

Creative Questions: