Expertrating-HTML Tutorial, Formatting

Home > Courses, Tutorials & eBooks > HTML Tutorial > Formatting

HTML Tutorial - Formatting

Page 1 of 3

Formatting is the structuring and styling of the document. Formatting allows the designer to determine the appearance and create the style of the HTML document.

As discussed in the earlier chapter, formatting is done with the help of tags. These tags help in making the HTML document readable and interesting. This chapter illustrates tags in detail.

Heading Tags

Headings are created in HTML by adding text between the <h1> tags; also known as the heading tags. The heading tag is used to separate the paragraph of the text from the heading.

HTML has six levels of headings, numbered 1 through 6 in decreasing order. In other words; 1 is the biggest heading, 6 is the smallest. For e.g. <h1>,<h2>,<h3> and so on.

Headings are displayed in larger and bolder fonts than normal body text. The most important heading should be between the <h1> tags. This is illustrated with the help of an example:

Example:

<h1> Welcome to this great site of jokes. </h1>

Output:

Welcome to the great site of jokes.

Align Attribute of the Heading Tag

The align attribute is used with the heading tag. This attribute is used to align the text in the heading tag. It can have four values ranging from left, right, center, and justify.

Example:

<h1 align=center> Welcome to the great site of jokes. </h1>

Output:

Welcome to the great site of jokes.

Paragraph Tag

The paragraph tag indicates the start of a new paragraph. It is defined by a <p>. When some text is put within the <p> tags, it is displayed in a new paragraph. A single line above and below the paragraph is automatically left blank.

Example:

<p> A new paragraph is started with the text written within these tags. </p>

Output:

A new paragraph is started with the text written within these tags.

Align Attribute of the Paragraph tag

The align attribute is used with the paragraph tag. This attribute is used to align the text in the heading tag. It can have four values- left, right, center, justify.

Example:

<p align=center> A new paragraph is started with the text written within these tags. </p>

Output:

A new paragraph is started with the text written within these tags.

Line Break

A line can be ended after a certain word without starting a new paragraph. This can be done by a <br> tag. It just inserts a single line break.

Example:

<p> A new paragraph is started with the text written within these tags. <br/> This text will come in the next line. </p>

Output:

A new paragraph is started with the text written within these tags.
This text will come in the next line.

Horizontal Rule Tag

The horizontal rule tag inserts a horizontal line in between the text. It is written as <hr>. It separates two lines of text with a horizontal line.

Example:

<p>This line lies above the horizontal rule. <hr/>This line lies below the horizontal rule.<p>

Output:

This line lies above the horizontal rule.

This line lies below the horizontal rule.

Font Style Tag

The font style tags add some richer effects to the text. They are used for formatting. Some of these tags are bold, italics, etc.

Bold

The bold tag is written as <b>. The text written between these pair of tags is shown as bold in the document.

Example:

<p><b> This text will appear as bold </b></p>

Output:

This text will appear as bold

Italics

The italics tag is written as <i>. The text written between these pair of tags is shown in italics in the document.

Example:

<p><i> This text will appear in italics </i></p>

Output:

This text will appear in italics

Big

The big tag is written as <big>. The text written in these pair of tags appears bigger than the normal text.

Example:

<p><big> This text will appear big </big></p>

Output:

This text will appear big

Small

The small tag is written as <small>. The text written in these pair of tags appears smaller than the normal text.

Example:

<p><small> This text will appear small </small></p>

Output:

This text will appear small

These tags are implemented in the following example:

Example:

< html>

< head>

< title> My bag of jokes </ title>

</ head>

< body background = "myimage.jpg" text = “blue”>

< h1 align= left> I want to make you laugh</ h1>

Hello, this is My Jokes website.< hr />

< p>Here you can read some rib-tickling jokes.< br />

< b>< i>These jokes are meant for people of all ages.

Some of them are very good, they will have you in splits. </ b></ i></ p>

< h2>Classic jokes.</ h2>

< p>< b>During their silver anniversary, a wife reminded her husband: “Do you remember that when you proposed to me, I was so overwhelmed that I didn't talk for an hour?"< br /> The hubby replied: "Yes, honey, that was the happiest hour of my life."</ b></ p>

</body>

</html>

This is how the web page looks with all the formatting done:

ExpertRating HTML Certification - Get Certified Now!!