• Italic text
• Underlined text
• Horizontal Rules
• Invisible Comments

Note: You do not have to create a special web page sample for this lesson. However, you will use what you learned here in your sample page for Lesson Five.

Section 1 - ITALIC and UNDERLINED TEXT

To italicize text all you have to do <I>is this.</I>

To underline text all you have to do <U>is this.</U>

<I><U>Or you can do both like this,</U></I>

<U><I>or both like this.</I></U>

You should always,

<B><U><I>wrap tags in order</I></U></B>.
(note tag opening and tag closing order)

because

<U><B><I>this might not always work.</U></I></B>.
(depending on the browser used to view your page)

Section 2 - HORIZONTAL LINES

To make a line, you use the Horizontal Rule (line) tag: <HR>

<HR>

Used as shown above, will create a line like this...
(the full available width)

<HR noshade>

Used as shown above, will create a line like this...
(the full available width)

Can you see the difference? If not, it might be because of your browser, but let me make the lines thicker and that may help.

<HR SIZE=4>

Used as shown above, will create a line like this...

<HR noshade SIZE=4>

Used as shown above, will create a line like this...

There, now you know how to make the lines thicker. I prefer the lines to have noshade so that is what I will use for the following examples. Note: <HR> includes an automatic line break before and after the tag.

The lines above go across the full available width of the area. Their size will change if you change the size of this window because without a width attribute to limit them, they will go as far as they can. That is the default. To set a fixed width (in pixels)...

<HR width=200 noshade SIZE=1 >

Used as shown above, will create a line like this...

<HR width=300 noshade SIZE=1 >

Used as shown above, will create a line like this...

<HR width=50% noshade SIZE=1 >

Used as shown above, will create a line like this - half the available width (even if you resize the window) - or whatever percentage you set it to...

What if you want a line to be forced to the LEFT, RIGHT, or CENTER of a page? (To override the default setting in your web site visitor's browser, which is probably CENTER.)

<HR align=left width=200 noshade SIZE=6 >

Used as shown above, will create a line like this...

<HR align=right width=200 noshade SIZE=6 >

Used as shown above, will create a line like this...

<HR align=center width=200 noshade SIZE=6 >

Used as shown above, will create a line like this...

If you are using Internet Explorer as your browser the line below may appear red. Do not rely on the color attribute because many browsers do not support it. If you use the color attribute for a line, the only people who will see that line in color are those viewing your web page with Explorer, all others will see a black line.

Now those of you who are using a browser other than Explorer may be asking yourself, "But I have seen colored lines on web pages." They may not have really been lines. The "colored line" below is not created with the <HR> tag and is in fact not even a line. It is a long thin box, not an image, but a box created with HTML Code. When you learn how to create Tables you will be able to create such a box.

Section 3 - COMMENTS

As you create your sample pages with the new code you learn in each lesson, you may begin to find it difficult to "read" your coded pages because this is all new and strange to you. Don't you wish you could write yourself notes in the coding, so you can find specific areas again or to remind you what a tag and its attributes is used for, but not so anyone sees it when they view your page on-line? Well you can.

When you are writing your code, you can insert lines which the browser will ignore, keep "invisible," when it renders your page on a visitor's computer. This is how you do that...

<!------ This Would Be Invisible To Browsers Also ------------------->

You begin the comment with <!--
Note there are no spaces between those four characters.

You end the comment with -->

You may add more dashes, if you want to make your comment easier to find within all your coding, but you need at least two in both places as shown here...   <!-- comment -->

When you include a comment in your code, do not do this:

<!--
Some browsers may misinterpret this comment.
-->

<!-- Also, do not make your comment line very long, like this example, because some browsers may have a problem dealing with it when it tries to display your page on a visitor's monitor.-->

<!-- This is a better way to write your comment -->
<!-- if you find it necessary to make a long note to yourself -->
<!-- or someone else who may edit your code in the future. -->

You should now know how to italicize and underline text, as well as create various lines on your web pages. You should also have learned how to add invisble comments to your coding to make it easier to find particular sections, or to make notes to yourself - or anyone else who may come along later to edit your code.