Denise's Virtual Notebook

(Lesson 3)

Home Page
Lesson 1
Lesson 2
Lesson 4

This is the third week of our class. In this lesson we learned how to dress up our page by adding a variety of attributes to our body tag, how to change colors and font appearance and how to add images to our pages.  I tried using a tiled background for this page but decided it looked too "busy" and decided instead to use a simple gray.  I will do some more experimenting as time permits to try to create something that I like.




Working With Fonts

These are a few of the ways to change what fonts look like on a page:
This is color red, size 5
If you have this font installed, it it called Comic Sans MS.

This is color blue, size 2, Comic Sans MS font.


Working With Images

I have chosen to use this rose to show what I have learned about placement of images and text in this lesson.

Visit Eagle's Lair for flowers like this rose image
Visit Eagle's Lair for this and other flower images to use in great VU HTML classes.



Beautiful Rose
This image and text are centered on my web page.


Beautiful Rose Because I didn't skip any lines and didn't choose to align the image with respect to the text, this is the way my image and text will appear on my web page.


Beautiful Rose In this example I have chosen the align="left" value which places my image to the left of my text and lines up against my left margin.  My text will appear to the right of my image.
I can use line breaks if I wish which would help to fill the space beside the image.
If I have enough text it will eventually "wrap" around my image.  This means that once the text fills the space to the right of the image, the text will then move to the space under my image.  As you can see from the following examples, I can also choose to align my text to begin at the top, middle or bottom of the image.  This is especially important if I only have a small amount of text.


Beautiful Rose This option places my text to the right of my image and aligns it at the top.  If there is more than one line of text after the image, that line of text will be put below the image.


Beautiful Rose This option places my text to the right of my image and aligns it at the center.  Again, if there is more than one line of text after the image, that line of text will be put below the image.


Beautiful Rose This option places my text to the right of my image and aligns it at the bottom.  Like the previous two examples, if there is more than one line of text after the image, that line of text will be put below the image.


Beautiful Rose In this example I have chosen the align="right" value which places my image against my right margin.  My text will appear to the left of my image.  Just as in my align="left" example, if I have enough text it will eventually "wrap" around my image.  Both the align="left" and align="right" values by themselves would require lots of text and would probably not be the best choices.  Instead I think it would be better to choose the "top," "middle" and "bottom" values as shown above.


Special Note: There is not an align= attribute with a value="center" to use to center an image horizontally on my page.  I would need to use the <center></center> tag set to do this.  To place text on both sides of a centered image, I would need to create a table.  I won't learn how to do this until my next lesson!

I took this photo of a field of lupine during a digital photography class.
Explore Virtual University

Home Page

Hosted by www.Geocities.ws

1