Inserting Images
The Web without images is like coffee without cream. Some people might go for it, but it wouldn't enjoy world domination without it. Using a range of images from funky bullet points to full color photographs can help you really make a statement with your pages. (Plus, it's just a lot of fun)
Bullets, Banners, and Backgrounds
1. Find the image or graphic you would like to display and put that file
in your html folder.
2. Decide where you want to image to go.
3. Insert image or graphic using the image tag.
The image tag looks like this: <IMG SRC="filename">
IMG SRC stands for "image source," which is just another way to say, where should the browser look to find the image you want displayed on the web page. Where is says filename you would insert the name of whatever graphic file you wanted to show on your page. For instance to display this picture of the American Flag called usflag.gif:
...you would simply type <IMG SRC="usflag.gif">
And that would be that. Now, just a warning. Images are not all the same size and do not always fit neatly with your text or other things on a page. So a good idea is to learn how to modify the IMG SRC tag to align and control the size of displayed images on your pages. We won't go into that here, but any of the HTML guides noted later in this tutorial can help you there.
You may be particular interested in using images
to pep up your bullet
lists.
No problem, just use the same IMG SRC tag and you
can make your own bullets by inserting bullet point sized images of little
red or blue or green balls, arrows, etc.
Just make sure the bullet or ball in question is
actually the size you want!
Banners
The default horizontal rule in HTML is functional but boring. A common trait of really excellent web pages is that their section dividers somehow match the purpose, attitude, or content of the overall page or site. Fortunately, you can use the IMG SRC tag to put really cool horizontal dividers in your page just as easily as using the HR tag.
So, for example, to insert the blue divider which appears right below the HTML looks like this:
<IMG SRC="BLUEBAR.GIF">
Backgrounds
A special use of images is to control the look of a web page's background. If simply changing the color is not enough, you can use an image to create almost any look you want. The images used are usually pretty small and then "tiled" to create a seamless look on your page.
To change the background you modify the BODY tag again. Here is the code for this page's background which is a tiled version of a file called "mainback.gif":
<BODY BACKGROUND="mainback.gif">
Did you ever wonder how they turned an image into a link? Well, wonder no more, it's easy. All you do is insert an image tag where you would normally put the text in a link tag. The code to turn Porky Pig into a link to Warner Bros. looks like this:
<A HREF="HTTP:WWW.WB.COM"> <IMG SRC="PPIG.GIF"> </A>
That's all there is to it, nothing more.
This concludes the CS111 HTML Tutorial. We hope you have enjoyed your journey. To find useful links to various HTML resources click on the Right Arrow or Click on the House to go back to the beginning.
