PGTUTOR.COM: HTML tutor- Lesson 2

HTML tutor- Lesson 2

So until now we've talked about the html, head, title, and body tags. From now on we'll only be concerned with the "main content" of your website- the body tags. Thus the code I show from now on will only contain the body tags.

So far we have this:

<body>
Hello Dear World!
</body>

In the upcoming few lessons we'll learn how to "decorate" text. Let's begin with bold, italic, and underlined text first. Add the following:

<body>
<b>Hello</b> Dear World!
</body>

Save the HTML file and view the results in the browser yourself. Anything between the b tags is turned into bold.

Similarly the i and u tags stand for italic and underline. Now add the following:

<body>
<b>Hello</b> <i>Dear</i> <u>World!</u>
</body>

View your webpage here

Very important: You can always view the HTML file for a webpage by clicking on View>>Source. So, if you don't understand what's going on, click on "view your webpage here" and then view source. You can't go wrong.

Very important: The latest version of HTML (HTML 4.01) doesn't support the u (underlined) tag anymore. Don't ask me why; just live with it. Instead we use styles (see CSS tutor after you're done with HTML tutor). Continue using the u tag for now because it makes learning easier. However, I highly encourage you to stick to the latest version of HTML. The only reason I'm not telling you about the style tag right now is because I don't want to confuse anyone.

Throughout this tutorial I might use old HTML tags but I'll let you know. Look at the HTML 4.01 tags/reference after you're done with tutorial just to get the older version of HTML out of your mind.

What if you want to make the text bold, italic, and underlined? Then you'd do the following:

<body>
<b><i><u>Hello Dear World!</u></i></b>
</body>

View your webpage here

Be careful not to overlap the tags. Notice that if <b> is the first starting tag, then </b> is the last closing tag. If <u> is the last starting tag then </u> is the first closing tag. Look at the above example until you get a "feel" for nested loops.

Don't do the following:

<body>
<b><i><u>Hello Dear World!</b></i></u>
</body>

View your webpage here

It still works! Well maybe in this case you just got lucky but this is just plain and simple bad coding. When you have table tags and all that stuff in your website and you get tags mixed up then let's just say your webpage won't look the way you expected it to look.

Note: If your browser doesn't show the changes you made in your HTML editor (notepad), then press the refresh/reload button. If this doesn't do the trick either then click CTRL+Refresh (IE users) or SHIFT+Reload (Netscape/Firefox users).

<< BACK NEXT >>

PgTutor - The easy way to make a website ...

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

PGTUTOR is an award winning website. In the past 2 years, we've won over 20 legitimate awards. Go to our awards page to verify for yourself.

You're not taking a risk when buying our products. If for any reason you're unsatisfied with the quality of our product(s), we'll refund your money. Also, you get to keep the product you bought.