HTML Tutorial

              Lesson 3
         
 

Home

Introduction to HTML

<html> to </html>

<body> to </body>

Formatting

Links

Backgrounds

Tables

Frames

Other tags

A little Style

Resources

   

• Tags covered in this lesson:

• Explanation:

• Working examples:



Tags covered in this lesson:

            <h1> through </h6>

            <b> & </b>

            <i> & </i>

            <u> & </u>

Top


Explanation:

Formatting means presenting the text in a format that is easily readable, the various sections and the divisions of text should be easily distinguishable.

<h1> through <h6>

In the previous lesson we wrote a paragraph. How about adding a heading over it? This can be done either by increasing the font size or you could use the <h1> through <h6> HTML tags.

The first paragraph in our lesson looked like this:

<p align="center">This, as the title suggests is my First Page.</p>

Now add a heading to it using the heading tag, like this:

<h1>My First Page</h1>

Your page would now look like this in the browser:

My First Page

This, as the title suggests is my First Page.

Like it? The <h> tag goes up to 6 levels, the size of the heading decreasing with every subsequent level. So, your heading will look something like this:

My First Page

My First Page

My First Page

My First Page

My First Page
My First Page


Top


<b> and </b>

There are times when we want a particular word or sentence to stand out or be easily distinguishable from the rest. For this we use the <b> and </b> tags.

1. In the first paragraph of our page we have two words "First Page". Let's make them bold, by using <b>. This is our paragraph:

<p>This, as the title suggests is my First Page.</p>

Now, to make the words bold:

<p>This, as the title suggests is my <b>First Page</b>.</p>

This is how your paragraph should look now in the browser:

This, as the title suggests is my First Page.

Top


<i> and </i>

These tags will italicise any words ensconed between them. Let's begin using them. This was our paragraph after adding the bold tags:

<p>This, as the title suggests is my <b>First Page</b>.</p>

Let us say that you want to itilicise the word 'title'. Here is how:

<p>This, as the <i>title</i> suggests is my <b>First Page</b>.</p>

This should be your output in the browser:

This, as the title suggests is my First Page.

Top


<u> and </u>

This last tag for this lesson is the underline or <u> tag. Any words ensconed between the two <u> & </u> will be underlined.

Let us not over do things by adding underline to the present paragraphs. Let us add a new paragraph:

<p>Teach me more.</p>

You got it, we are going to underline the word 'more'!

1. The tag for underlining is <u>. So, here it goes:

<p>Teach me <u>more</u>.</p>

2. As usual save and view it in the browser.

What do you see, I saw an underlined "more"?

That does it for this lesson. In the next lesson we will take up links. Till then practice these three lessons. You can build a simple page out of the knowledge you have.

Top


Working examples:

  1. FirstPage3.html
  2. FirstPage4.html
  3. FirstPage5.html
  4. FirstPage6.html









  Home | Introduction to HTML | <html> to </html> | <body> to </body> | Formatting | Links | Backgrounds
Tables | Frames | Other tags | A little Style | Resources