-- Graphics, Pictures and Backgrounds --
Graphics and Pictures really can jazz up a web page, or they can ruin it.
A graphic or picture can be inserted almost anywhere in a page, even in the middle of a sentence. Graphics are often used as a page background.
Lets talk about Pictures first:
A picture on the computer is made up of a bunch of little squares, called PIXELS Visualize if you will a checkerboard. If each square is considered to be a pixel, then a checkerboard is 8 px by 8 px, 64 pixels in all. If a picture is said to be 300 pixels by 200 pixels, that means there are 200 rows of 300 pixels across the picture. 60,000 pixels in all. This will give you some idea of why it's so important to size the pictures for your page. Some modern cameras put out a picture 4000 pixels by 3000 pixels. If you do the math, it means that picture has 12 million pixels!! Each Pixel takes a memory bit, so that one picture takes up 12 meg of memory.
The basic HTML for inserting a picture is:
<IMG SRC="picture-of-me.jpg">
IMAGE SOURCE is named "PICTURE OF ME" is what that tag is saying.
It is assumed that in the same place where the webpage is located, there is a picture with the name "picture-of-me.jpg"
Often the pictures will be in a separate folder. I use one folder for Graphics and one for Pictures.
In that case, the HTML will look like this:
<IMG SRC="pictures/picture-of-me.jpg">
or
<IMG SRC="graphics/picture-of-me.jpg">
If for some reason the picture can not be displayed, provision for that would look like this:
<IMG SRC="pictures/picture-of-me.jpg" alt="picture of me">
The words "picture of me" will come up as text in a box where the picture would normally be, so the use of spaces, capitals, etc. doesn't matter here. It will also show in a little box when you hover over the picture, if your browser supports it.
The size of the picture should also be stated in the HTML. So, our final HTML will look like this.
<IMG SRC="pictures/picture-of-me.jpg" alt="picture of me" width=600 height=400 >
There are some other things you may want to add to your picture HTML.
align=? Which can be: top, middle,bottom, left, or right. This determines where the text is in relation to the picture.
border=? Puts a border around the picture. If you make it "border=0", there will be none at all.
vspace=? Puts the amount of pixels space above and below the picture.
hspace=? Puts the space to the left and right of the picture.
So, let's add a picture to this page.
The picture name is "frozen3_sm.jpg" and it is located in a folder named "pix". The size is 170 px by 221 px. Let's put it on the right side of the page, and add a small border.
The HTML to do this is:
<img src="pix/frozen3-sm.jpg" alt="Niagara Falls" width=170 height= 221 align=right border=3 vspace=2 hspace=5>
And here it is.
A good thing to do is to have a small picture load in the web page, and have it linked to a full size picture. To do this we add:<a href="pix/frozen3-lg.jpg"> to the front of our picture HTML.
The end result is:
<a href="pix/frozen3-lg.jpg"><img src="pix/frozen3-sm.jpg" alt="Niagara Falls" width=170 height= 221 align=right border=3 vspace=2 hspace=5></a>
Notice the blue border around the picture. It has become a link to another picture. In the folder "pix" we must now have a larger picture of Niagara. Notice also that we had to add </a> to turn off the link. Whenever we have "a href=" we must have </a> to turn it off.
We could also size the larger picture, however, our example isn't loading a web page, just a picture, so it's not really necessary as long as the picture isn't really large. In this case, it's 400 x 520 pixels, a real good size for use on the web.
However, let's say you have a picture, and want to add some descriptive text when it displays.
In this case, we will link the small picture to a web page, which will display the full size picture and anything else we want.
Here's how:
Instead of: <img src="pix/picture-of-me.jpg">, we will add a link to a web page before it.
<a href="pix/picture-of-me-page.html><img src="pix/picture-of-me.jpg"></a>
Now, we need to make a web page named "picture-of-me-page.html" and put it into the pix folder. After we put the usual stuff in the head, we will add a link to the picture in the body.
<img src="pix/picture-of-me.jpg" width= 500 height= 340 vspace= 10 hspace= 10 align= "left">
What we have done here is tell the browser where to find the picture, what the size of it is, and we want 10px of space between the picture and anything else on all sides, and we want the text to wrap on the right side of the picture.
Then, below that on the page, we add the text for the picture
Here is what the Picture of me Page looks like
This is what the code looks like for the page:
<body bgcolor="#77ffff"><img alt = "picture of me" src="picture-of-me.gif" border=1 width= 250 height= 250 vspace= 10 hspace= 10 align="left" ><br>
<h3>Here is the text to go with the picture.</h3>
<br> Notice that it is pushed 10px away from the picture.<br>
<p>Close this window to go back.</p>
</body>
The main things to keep in mind and some good habits to form are:
- Never use spaces or capital letters in the name of a picture. Use "picture-of-me.jpg" rather than "Picture of Me.JPG"
- No picture should be wider than about 900px for use on a web page. Anything larger takes too long to load, especially for those who have a dial-up connection. Remember our discussion about pixels at the beginning of this page.
- The picture must be physically sized, not sized with the HTML. When a large picture is sized with the width and height HTML tags, the computer still has to load the big picture, it just displays smaller. It's really surprising how many websites are out there that have very small pictures that take forever to load, because the picture size is huge. A good web designer should know better.
Now, lets talk about Backgrounds.
Backgrounds are usually a graphic, although a picture could be used. The Top of this page is a graphic called "bg_main.gif". It is one pixel wide and 152 pixels tall. The web browser is told by the stylesheet that it is to "tile" the graphic across the top of the page 100% of the width.
This is what the graphic looks like.
Lets use something easier for our demo here. The graphic we'll use is something we can use to cover the whole page. It's called "white_brick_br.gif" and looks like this:
To tile this image over our page we insert this into our HTML in place of the BODY tag:
<BODY background="white_brick_bg.gif">
Here is a page that shows the result.