1,2,3 ABC HTML Made Easy
Graphics

Getting the graphic to your page:
To get the graphic to your page you will need to upload it. If you need a refresher course on how to UPLOAD you may wish to visit this page How to Upload to your site

---

Graphic Linking

Once you have the grapchic at your site you can see it by visiting its address. To do this you can click the following graphic and it will take you to where it is actually coming from:

ADDRESS: "a/BlueSquare.gif"
Look at the top of your screen where you see a long white box.

Now that you know where it is, it is only a matter of getting it to show up on your web page. You will do this much the same as making a link on your page only you will use

<img src="http://THE ADDRESS OF YOUR GRAPHIC HERE">

instead. So to make the above graphic show up on this page I basically used the following code:
<img src="a/BlueSquare.gif">
This is the basic code you will need to have a graphic show up on your web page.

Boarders

I said basically above because I added a few things to get the graphic to show up exactly as I wanted it. One of the things I added was border=0, if I didn't add this the graphic would have had a border around it like this:

When you make a link with a graphic, a border will show up if you do not add the border=0 in there, like this:

<img src="a/BlueSquare.gif" border=0>

Perhaps you like the border, if so you can contol it by changing the number thus:

<a href="a/BlueSquare.gif" target="new_window"><img src="a/BlueSquare.gif" height=20 width=20 alt="SquareBlue.gif" border=100></a>

Notice I added the link in there so you will have the entire idea.

If you really like boarders you can get real fancy and make one by using a table like this:

<TABLE BORDER="10"> <TR> <TD ALIGN="center"><IMG SRC="a/BlueSquare.gif"></TD> </TR> </TABLE>

You can change the sizes of the boarders by changing the number 10 to another number.

---

WIDTH AND HEIGHT

You should place width and height in your graphic link so that browsers will be able to know how large the graphic should be on your page. It will also help the page to load faster. The more graphics on your page and the more bits they have the longer they will take to load. A black and white, 8 color, 16 color, or 256 color "gif" will load much faster than a true color "jpg".

You can change the size of your picture by changing the HEIGHT and WIDTH numbers:

<img src="Address/BlueSquare.gif" height=40 width=40 alt="SquareBlue.gif 40 X 40" border=0>

If you change the numbers from what they should be many times the picture will be distorted on your page. If you don't know what the height and width is of a particular graphic you may need to keep changing it until it looks right. Web graphics are in pixel size. To give you an idea this is the blue graphic blown up to 300X300 pixels:

And here is 100x100

We could also change the Square blue gif into a rectangle

<img src="a/BlueSquare.gif" height=100 width=300 alt="SquareBlue.gif 100 X 300" border=0>

---

Alt Tags

Notice in the code above the word alt=
Any words you type in the alt tag will show up when people place their mouse arrow over the graphic. (If this option is available on their computer) Try placing your mouse arrow over the different squares. Some people will turn the graphics off. I do this many times when checking links, so that I can check them faster without having to wait for the graphics to load. Some people just plain don't like graphics. If you use graphics for your links they will not know where that link will take them unless you use the alt tag. They also will not know what sort of picture you have placed there.

When making the alt= don't forget to enclose what you want to show up on the page in quote marks " " . Also make sure you have both quote marks one before what you have written and one after, or it will really mess things up.

<img src="BlueSquare.gif" alt="SquareBlue.gif" >

---

Placing the graphic on your page

Now that we know a bit about setting up the graphic code and how to get it on our web page we need to know how to get it placed exactly where we want it.

(Please Note I am changing the graphics name below so it is shorter on the page) "http://Address/BlueSquare.gif" but in the addy I am actually using it says
"a/BlueSquare.gif"

You can place the graphic to the left, right, or center:

Left:
<p align="left"><img src="http://Address/BlueSquare.gif" height=20 width=20 alt="God Loves You!" border=0></p>

Center:
<p align="center"><img src="http://Address/BlueSquare.gif" height=20 width=20 alt="Jesus is my best friend!" border=0></center>

<p align="right"><img src="http://Address/BlueSquare.gif" height=20 width=20 alt=":) SMILE :)" border=0></p>

You can also center a graphic by just using the center codes. <center><img src="http://Address/BlueSquare.gif" height=20 width=20 alt="Jesus is my best friend!" border=0></center>

---

You can also use graphics as a link:

<a href="http://address/Back.html"><img src="http://address/SOMEOT.gif" height=100 width=100 alt="Some other page" border=0></a>

---

Graphics and Tables

To understand how tables work you can go here Tables

You can place graphics inside of tables to get them placed nicely on your page. Following is a basic example you can place on your page, then work with it, to see the different ideas you can come up with. You can change the border and cell padding/spacing. Also remember that if the graphics you use are different sizes each square will go acording to the size of the graphic, with the example below.

<TABLE BORDER="5" CELLPADDING="2" CELLSPACING="2">
<TR>
<TD> IMG SRC HERE</TD>
<TD> IMG SRC HERE</TD>
<TD> IMG SRC HERE</TD>
</TR>
<TR>
<TD> IMG SRC HERE</TD>
<TD> IMG SRC HERE</TD>
<TD> IMG SRC HERE</TD>
</TR>
</TABLE>

---

Graphics with text and tables.
To understand how tables work you can go here Tables

Text across top

Text to left

Text to right

<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">
<CAPTION>Text across top</CAPTION><TR>
<TD>
Text to left</TD>
<TD>
<img src="a/BlueSquare.gif" height=150 width=150 alt="Jesus is my best friend!" border=0>
</TD>
<TD> Text to right</TD>
</TR>
</TABLE>

HTML

Tables

Frames

Forms

Graphics

Music

Main Page

Site Index