Fourth Chapter Lesson-6: Heading tags, Paragraph tags, Formatting tags etc.

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.

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.

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:

 

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:

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.

Output of this code:

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:

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 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:

Output of the above code:

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

 

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.

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.

Output of the above html Code:

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.

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.

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.

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.

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:

According to the stem answer the following Questions:

abc

c) Write HTML code for showing the stem on the web page.

According to the stem answer the following Questions:

H2SO4  and 102 = 100

c) Write HTML code for showing the stem on the web page.

According to the stem answer the following Questions:

(a1+b1)2=a12+2a1b1+b12 

c) Write HTML code for showing the stem on the web page.

According to the stem answer the following Questions:

(a1+b1)3=a13+3a12b1+3a1b12+b13

c) Write HTML code for showing the stem on the web page.

According to the stem answer the following Questions:

c) Write HTML code for the first line, second line and the third line of the stem using the largest tag, smallest tag and paragraph tag respectively.

According to the stem answer the following Questions:

c) Write HTML code for showing the stem on the web page.

According to the stem answer the following Questions:

c) Write HTML code for showing the stem on the web page.

 

Multiple Choice Questions:

1. Which tag is used to make a text italic?

a) <i>              b) <u>           c) <th>             d) <b>

2. Which tag is used to make a paragraph?

a) <P>             b) <img>             c) <th>             d) <br>

3. Which tag is used to add a line break?

a) <dt>            b) <hr>            c) <br>            d) <tr>

4. Which one is the largest heading tag?

a) <h1>           b) <h4>           c) <h5>            d) <h6>

5. Which one is formatting tag?

a) <sup>……</sup>                  b) <body>……</body>

c) <table>……</table>               d) <html>……</html>

6. Which tag is used to show X=a2+bequation?

a) <sup>          b) <sub>        c) <li>             d) <h2>

7. Which one indicates white color?

a) “#BBBBBB”          b) “#EEEEEE”           c) “#AAAAAA”         d) “#FFFFFF”

8. Functions of <font> tag are-

i. Specifying the text type        ii. Specifying text size       iii. Specifying text color

Which one is correct?

a) i & ii             b) i & iii          c) ii & iii           d) i, ii & iii

9. How many heading tags are in HTML?

a) 2        b) 4         c) 6          d) 8

10. Attributes of <font> tag are-

i.size                ii.color             iii.face

Which one is correct?

a) i & ii             b) i & iii          c) ii & iii           d) i, ii & iii

11. What is the output of “<p> H <sup> 2 </sup> 0 </p>” ?

a) H2O            b) H2O              c) H2O             d) HO2

12. Which one is the smallest heading tag?

a) <h1>           b) <h4>           c) <h5>            d) <h6>

13. Tags like <i> are-

i. <u>            ii. <del>           iii. <tr>

Which one is correct?

a) i & ii             b) i & iii          c) ii & iii           d) i, ii & iii

 


Written by,

Leave a Reply

Your email address will not be published. Required fields are marked *