Lesson #4:  Adding an Image

Remember how things were in the beginning?  In this episode, Jeri adds an image to her page.  Jeri was very excited to see the tree actually jump up onto her page after today's lesson.

Contents of Lesson 4

Lesson 4: Adding an Image

Now, big fun, let's put the picture in. I have scanned the tree photo you so kindly sent, cut it down to a nice web-page size, and it is ready to use.

I have mailed you a copy of the tree, and you need to save it in the SAME DIRECTORY as your htm pages.


Stealing:

[At this point, you can go get your own copy of the Tree of Hope, using "save as".]

To "steal" the tree, in Netscape, position your mouse anywhere over the tree image and press your RIGHT mouse button. This will show you a pop-up menu that includes "save image as". Choose that option, and save the tree IN THE SAME DIRECTORY as your home page and tree page.


Just as a rule of thumb, it's usually considered rude to have an image bigger than about 30,000 bytes. There are MANY exceptions to this, when the image contains a lot of information, and imparts something really essential to the purpose of the page. But usually, you try to keep your graphics as small and trim as possible. Our tree weighs in at 53,405 bytes, which is large, but I bent the rules in order to make the deer as visible as possible.

So, we will add an image statement to the tree page. Right after the <BODY...> statement, add the following:

<IMG SRC="treehope.jpg">

Remember when I said that ALMOST all HTML commands have a start and an end (start-body / end-body, start-head / end-head, etc.)? Well, the image command is one of the exceptions. There is no </IMG>, the image command stands alone.

The only REQUIRED parameter of the image command is the name (source) of the image it is supposed to use. In this case, the name is treehope.jpg. Notice that then name has to be included in quotes. If the picture was in another directory, or on some other site, we would have to add some things to the name, but in our case it's quite simple because it's in the same directory as the page.

CAUTION: The name must be spelled exactly right, and also, HTML is case-sensitive. Win95 allows us to use upper and lower case in our file names, so be sure to always name your images in lower case, and refer to them in lower case in your HTML code.

For example, if we code:
<IMG SRC="TreeHope.jpg">
this will not work, because of the capital letters.

Similarly, if we code:
<IMG SRC="treehope.gif">
this will not work, because the suffix is .jpg, not .gif.

So, our page should now look like this:

<HTML>
<HEAD>
<TITLE>Jeri Walsh's Tree of Hope</TITLE>
</HEAD>

<BODY BGCOLOR="#ccffcc">
<IMG SRC="treehope.jpg">
Here is our Beautiful Tree of Hope.
To return to my home page:
<A HREF="index.htm">Click here</A>
</BODY>
</HTML>


Save this change, view it thru Netscape, and be prepared to jump up and down with excitement.

Just for fun, let's add a border, to make it look "framed".

Add the border to the image statement as follows:
<IMG SRC="treehope.jpg" BORDER=5>

Now save & view. What do you think?

That's enough for today -- let me know when you've reached this point.

Love & hugs,
Lehua


3/26, Jeri to Gene:

>> I have a question-is there a plaque on a stand on the left of the tree? If there is what does it say? Just Curious. <<

Aha, you're the one that asked about the plaque next to the tree--geez, maybe I don't have Alzheimer's--of course I hadn't deleted your note and saw the question (gg).

It's a prayer and I asked Lehua about eventually including it also in the Web Page. I'll post a copy of it in this section so all can read it. Not everyone was here when I posted it in December when I started the tree. It was given to me by our own George S. here on CIS.

I finished my last lesson from Lehua, and it's WONDERFUL, the tree is beautiful!!
I can't wait to start the next lesson (gg).


View the Pages after Lesson 4


Next Lesson