 This site designed with Web Page Creator 32 HTML Editor ver. 6.0 |
| Introduction |
| Backgrounds |
| Fonts and Text |
| Accents |
| Lists |
| Images |
| Links |
| Tables |
| Frames |
| Forms |
| JavaScript |
| Great Books |
| Members Area |
Don't be fooled by the term "Photo Quality". On the Web photo quality is not necessarily the best way to go. It's all a matter of memory space and download time. You don't want a simple image to take several seconds to a minute to download, you will lose your visitors. On the Web, small is better.
Click on the Image above with your right mouse button and save it just like that background image. Again, save it your sub-folder "Images". Save it as "Cool.gif". We'll use it shortly. While you're at it, save these three below as well. Save them as "Back.gif", "Home.gif", and "Next.gif". We'll use them too!
The HTML for programming Images is slightly more complex than simple text, fonts, accents and so on but only because with images you have other attributes to think of such as the Image Width, Height, Border, and File Address. The following HTML tags are used for simple images:
<IMG - Tells the Browser that the Object is a Image file
WIDTH - Specifies the Image width in # of pixels
HEIGHT - Specifies the Image height in # of pixels
BORDER - Specifies the size of the Image border around it in thickness of # of pixels
SRC - Declares the file path to the Address of the Image to be displayed
ALT=" ">Alternate text to be displayed in old browsers that don't do images
Open up your text editor and get busy with this code:
<HTML>
<HEAD>
<TITLE>My Cool Web Page</TITLE></HEAD>
<BODY BACKGROUND="Images/blue.gif">
<CENTER><IMG WIDTH=450 HEIGHT=70 SRC="Images/Cool.gif" ALT="My Cool Web Page"></CENTER>
<P><HR SIZE=5>
<P><CENTER><FONT SIZE=5 COLOR=#0000FF FACE="Arial"><B>
My First "Cool" Web Page</B></FONT></CENTER>
</BODY>
</HTML>
Open that up in your Browser and check it out! Now that's a cool page! Notice that there may be an annoying little 1 pixel wide BORDER around the Image. Some Browsers do that by default, always blue and always 1 pixel unless you specify otherwize. If you like you can eliminate it by simply inserting the "BORDER" attribute.
<CENTER><IMG WIDTH=450 HEIGHT=70 BORDER=0 SRC="Images/Cool.gif" ALT="Image without border"></CENTER>
Or you can specify the width of the border and the color of the border around the image by just declaring how many pixels wide you want it to be. BORDER=5 will give you a border that is 5 pixels wide top, bottom, left, and right of the image, and BORDER COLOR=#000000 SIZE=10 will give you a black border that is 10 pixels wide
That first example displayed the image "centered at the very top of the page. Open up your text editor and remove the <CENTER> and the </CENTER> tags from around the Image line. Then put lots and lots of text on your page. Any text. Anything you want, just put a lot of it on there, say enough to fill up half a screen or so. And then go view it. Go ahead! I'll wait here.
The whole picture changed didn't it? Now leave all your text where it is but eliminate the Horizontal Rule. Add the following ALIGN=LEFT attribute to your Image tags, just like below.
<HTML>
<HEAD>
<TITLE>My Cool Web Page</TITLE></HEAD>
<BODY BACKGROUND="Images/blue.gif">
<IMG <P><CENTER><FONT SIZE=5 COLOR=#0000FF FACE="Arial"><B>
My First "Cool" Web Page, (and all my other text)</B></FONT></CENTER>
</BODY>
</HTML> The ALIGN=LEFT attribute causes the image to align left and all the text wraps to the right of the image.
There are other attributes that cause text do strange things, but if you are creative you can use these to your advantage.
ALIGN=RIGHT - causes the image to align to the right side of the page, and of the text goes left.
ALIGN=MIDDLE - Causes text to align to the center of the image.
Try all of these out and get comfortable with them. Try it several ways before you move on here.
Next step, snatch this image! All you will see is it's border. I planned it that way. It's a "Transparent .gif" Image. Very useful for spacing and arranging the imagery and layout of your web pages. Again, Save it in your "Images" sub-folder as "Trans.gif". And snatch the one next to it as well. Save it as "CD.gif".
<HTML>
<HEAD>
<TITLE>My Cool Web Page</TITLE></HEAD>
<BODY BACKGROUND="Images/blue.gif">
<CENTER><IMG WIDTH=450 HEIGHT=70 BORDER=0 SRC="Images/Cool.gif" ALT="My Cool Web Page"></CENTER>
<P><HR SIZE=5>
<P><CENTER><FONT SIZE=5 COLOR=#0000FF FACE="Arial"><B>
<P><IMG ALIGN=LEFT WIDTH=100 HEIGHT=98 BORDER=0 SRC="Images/CD.gif" ALT="CD.gif">
<IMG ALIGN=LEFT WIDTH=100 HEIGHT=98 BORDER=0 SRC="Images/Trans.gif" ALT="Transparent .gif">
<FONT SIZE=3 COLOR=#0000FF FACE="Arial"><B>My really Cool Web Page is full of all kinds of really cool stuff like Images, and lots of text with great information about what it is I feel like putting here!
</B></FONT> </BODY>
</HTML> This considerably changes the appearance of the page by keeping the text from crunching up against the image. It keeps the text much more readable. It's valuble little trick to remember when you're creating your web pages.
You can easily create your own ".gif" images with most any graphics software that you may already have on your system. Paint Shop Pro is a good one that's easy to work with at any level. Microsoft Image Composer is my favorite, but it's pretty advanced and may take you a while to figure out how to use it.
".jpg" are normally scanned photo images, though they don't have to be. The ".jpg" image file format is normally used for photos or photo quality needs and take up considerably more memory space and take longer to download into your browser for viewing. The only difference in the coding to use .jpg images is the format at the end of the Image's address.
<IMG WIDTH=100 HEIGHT=200 BORDER=0 SRC="Images/MyPhoto.jpg">
Then there are animated .gif images. You need special animation software to create them but there are several great "shareware" programs out there and they are inexpensive, easy to find, and easy to use.
Practice your use of Images and all the different aspects of it before you go to the next section. You can't get enough practice! Here are a few more pieces of Imagery to practice with, save them to your "Images" sub-folder. Notice the names of the image files and their sizes will appear as the "Alternate Text" when you roll your mouse over them. But you can name them whatever you want.
*NOTE: If you are using an old Browser, like Netscape 3.0, you may not see some of these images because of the long file names. Netscape 3.0 for example will not display images with file names more than 8 charactors. Some of these file names are longer. (Comingsoon.gif), etc. I left them long to encourage you to get a newer Browser if you don't have one already.
