My Web Page for Lesson Five

small-expressions.com

HTML Tutorial by David K. Small ©

Code for Lesson 5, Sample Page (page05.htm)

Note:

Remember to save the background image blueback.jpg
in the same folder as your own sample page05.htm page
otherwise you will just have a white or grey background.

Your line spacing does not have to be
the same as shown below.

For your convenience, I have shown all the tags in color.

Notice when I used the FONT tag to change an attribute(s), I did not have to use any other attribute in that tag, and once I closed the tag, the remaining text staying the same.

The code begins below this line.

<HTML>

<HEAD>

<TITLE>My Web Page for Lesson Five</TITLE>


<style>
P {line-height:150%}
</style>

</HEAD>

<BODY leftmargin="100" marginwidth="100" topmargin=50 marginheight=50 BACKGROUND="blueback.jpg">





<CENTER>

This sentence is blue and centered on the page.



This sentence centered and these four words bolded. 
This sentence centered and these four words underlined. 
This sentence centered and these four words italicized.


 

<HR WIDTH=300 noshade>

</CENTER>

<HR>

<CENTER><HR WIDTH=400 noshade></CENTER>

 

The text in the four sentences above should be larger (size 4) than the text in this paragraph (size 2). The three lines above are centered. The first one is 300 pixels, the second one is full size (no WIDTH attribute), and the third one is 400 pixels wide. The first and third line are set with the noshade attribute. This paragraph should be aligned right, just so you learn how to use that attribute. The lower paragraphs do not use the align attribute. If you added the paragraph Style code above the HEAD tag, your line spacing should also be increased on this lesson's sample page.

<HR>

If you added the margin attributes to the opening BODY tag as I told you to do, you should now have more open space at the top of this sample page, as well as on the sides. Now that your sample pages are getting larger, you may notice you also have a bottom margin space. Although this attribute is generally not used to control the width of paragraphs, there are better ways which you will learn in other lessons, it does help make the paragraphs on this page easier to read now that they are not so wide.

If you do not use any margin attribute, there is a built-in default margin, otherwise the text in previous lessons would have touched the side of the page. One very good reason to use the margin attribute is to override the default margin by setting the margins to zero, thus removing any margin space. You will eventually want to do that when you start designing pages with graphics.

A good example of setting the margins to zero is the Small Expressions home page (small-expressions.com). The top-left graphic which includes the words, Let Yourself Be Inspired, is forced up into that corner without any margin space. Depending on your browser, you notice this paragraph does not have the added line spacing as do the paragraphs above. Why is that? If we were in an actual classroom I would wait to see who could figure this out. Since we are not, I will tell you it is because I did not start and end this paragraph with the necessary paragraph tags, so the paragraph Style is not applied here, and this is the default line spacing. Not as easy to read is it?

 
 

Now make a list or a poem using the line breaking tag. Put it between two short lines forced to the left as I have in my example below.

<HR WIDTH=200 ALIGN=LEFT>

Some type is bold 
Some type is blue 
Please save your code 
When you are through 
Then you can load 
When you try to.

<HR WIDTH=200 ALIGN=LEFT>







</BODY>

</HTML>