The purpose of this lesson is to get you started with putting graphics into your web pages. Also, since the "Netscape" graphic on the Introduction is also a link, we will cover how to make a graphic a link to a page on the web.
The first question perhaps is, "Where do I get graphics?" Well there are a variety of places. In the RESOURCES FOR HTML section of the Table of Contents (TOC) there is a link to a source of free clip art. You can also create your own or scan in photographs or slides. There is a short descriptive note about that in the RESOURCES FOR HTML area in the TOC. As for now, here is a not very well kept secret about getting graphics.
If you put your cursor over the picture of the kids and press and hold the mouse button, a menu should pop up. In that menu is the choice "Save this Image as . . ." If you select that, a dialog box will pop up allowing you to save the graphic to your hard disk or some removable storage such as a floppy or zip disk. Do that now!
You should now have on your own computer a copy of the picture named "KidsLD.JPEG." JPEG is the computer graphic format of the graphic. To be used on the web a graphic must be either in JPEG (or JPG on a PC) format or in another graphic format named GIF. The extension ".JPEG", ".JPG, or ".GIF" must be appended to the graphics name. These are the only still graphics which will display reliably on the web.
In the exercises in Lesson 5 I had you bring up a graphic in your browser. That was an "animated" graphic, but was a GIF. In the file "Sone Final Notes about HTML" at the end of these lessons (It's on the TOC) is a not to lead you toe help with animated GIFs.
Now, open the graphic you just saved in your browser. You use the same "Open file in Browser, or Open Page, etc., that you have used to open an HTML file in the browser.
The question now is, "How do I embed a graphic in my HTML page?" Well it is easy. You just have to know the correct TAG. This time the tag is the <IMG> tag, and I guess, that because it loads and graphic and cannot be misinterpreted, it doesn't reqire a closing tag. However, it does require at least one "attribute" and there are lots of others you can use. The full tag used to put the graphic of the kids in this page is:
In actuality, I have put a <CENTER> tag around the whole thing to make sure the graphic is centered on the page. You can use a number of tags around graphic tags, where they make sense. <B> obviously doesn't.
The important part here is:
I have no idea what "SRC" stands for, and wasn't able to readily find it, but it doesn't make any difference. This is the syntax for loading a graphic. All the other "attributes" listed are unneccessary. Notice here that it begins with "Images" with no "/" That indicates that the graphic is in a subdirectory of the directory this page is in. The paths to graphics follow all the same rules that links to pages follow. You can even use a graphic in your page which is on another server, by using an "http:// . . ." type path. This is unusual, however.
The other "attributes" are VSPACE, HSPACE, WIDTH, HEIGHT, BORDER, and ALT.
VSPACE and HSPACE indicate the number of pixels around the graphic that you wish to remain free. That is, on this one, nothing on the page should be closer than 10 pixels (1 pixel is 1 "dot" on the computer screen) above and below (VSPACE) or 10 pixels to either side (HSPACE). This is normally used to keep text above, below, or to the sides of the graphic from crowding the graphic. They are not required in the tag, but if you include them, you can adjust them until the page looks the way you want it to.
WIDTH and HEIGHT are the actual size in pixels of the graphic. You can find this out if you open your program in a graphics editor such as "PhotoShop," but if you leave them out, the graphic will be shown in its actual size. If you wish to have the graphic appear bigger or smaller on the page, then just use the WIDTH attribute and put in the number of pixels you wish it to be. The HEIGHT attribute will automatically be scaled to be proportional to the real size. If you use both and they are not proportional to the real size, the graphic will be distorted.
WARNING: Making a graphic smaller, usually works ok (to a point), but making it larger will probably reduce the quality of the image. If you need it larger, then you should do that in a graphics editor before trying to use it on your web page.
BORDER puts a black border around the graphic whose width is the number of pixels you put in. This is also not necessary, but if you put it in as BORDER=0, it makes it easy to try out different width borders to see what looks best.
ALT is an attribute that may help you debug your HTML graphics tag. Before the graphic is loaded, the text you put as ALT (Here, ALT="Kids at Lahad Datu">) is displayed on the screen. If the graphic fails to load, it will stay there and let you know which graphic has failed to load.
That is pretty much the basics of putting a graphic into an HTML page. There is an ALIGNMENT attribute, which I don't bother with, because it has to do with the placement of text around a graphic. You have very little control with this attribute, because people can use different size fonts and different size windows in their browsers. I prefer putting graphics in tables, where you have a lot more control of text placement. If you want to know about the "ALIGN = . . ." attribute, check it out in the "HTML Reference Source: in the Table of Contents on the left.
How about making a graphic a link. In the last lesson, it was noted that you needed some "text" between the <A> tag and the </A> tag to click on, to activate the link. Well as it turns out, instead of text, you can put a graphic tag, <IMG> tag, in there. Check it out. When you do, the page will be in a new window, so just use the close box in that window to get rid of it when you are through.
|
Check it out by clicking on the "Apple" logo to the left. It will take you to the main Apple Computer page. |
By the way, I used a "table" to position the text to the right of the graphic. This is just a little PR for you to do the next lesson.
Notice also that there is automatically a border (usually blue) around the graphic to indicate that it is a link. Once the link has been used, that border changes color (usually red). The reason for all this "usually" hedging is that you can determine this color in your browser, or can select a different color for your "unvisited" and "visted" links when you set up the <BODY> tag. We will deal with that later in Lesson 11.
The actual syntax for this link is:
You can see that the IMG tag just replaces the text in the link syntax. If we had just written "Apple Computer Home Page" instead of putting the graphic tag, it would have looked like this.
And it would have accomplished the same thing. Try it!
Note that the WIDTH attribute here is "20%". That means that the graphic will be correctly proportioned to take up only 20% of the width of the page, leaving 80% for other things. Using percentages is an alternative to using "pixels," but can cause problems as you will see below.
Now create a new HTML file with the name GraphicsPractice.html .
Remove the WIDTH attribute from the tag.
We want to look at what happens to text placement with a graphic.
This should illustate the mess different size windows can make with text and graphics.
By now you should see how difficult it is to position text and graphics on an HTML page just using the <IMG> tag. That is why we will use tables for that in the next lesson.
After reading the answers, to put things back the way they were, use the BACK button or scroll down to the link at the bottom of the "Answers" page.