The Complete HTML Teacher

Adding graphics to your pages is easy. However, there are some things you must know first. First, you need to know how to find and save graphics. Finding them isn't so tough...you can click on the links in The Graphics Directory, or simply go to any search engine and search for "free graphics"....or visit any web page! It is important that you not use anything that is copyrighted without the owners permission! If you are unsure if a graphic image is copyrighted or not, simply e-mail the owner of the site and ask permission before using their graphic. To save a graphic image from a page, follow these steps: Right click the image with your mouse. When the menu pops up, choose "Save Image As..." When the box opens, choose where you want to save the image on either your hard drive or your floppy disk. It is suggested that you save the image in the same directory or file that contains your web pages...it will have to end up there anyway! Next, choose the file name of the image. You can generally name it anything you wish, but if you will be using it on your web pages, it must have the extension .gif or .jpg at the end of the file name. Finally, choose "Save as type...". Here you will want to choose either .gif or .jpg...whichever extension you used when naming the file. It isn't important to know this..but you may be interested to know that .gif stands for "Graphic Interchange Format" and .jpg, or JPEG, stands for "Joint Photographic Experts Group". A .gif is a common format for image files, especially suitable for images containing large areas of the same color. GIF format files of simple images are often smaller than the same file would be if stored in JPEG format, but GIF format does not store photographic images as well as JPEG. JPEG is most commonly mentioned as a format for image files. JPEG format is preferred to the GIF format for photographic images as opposed to line art or simple logo art. Now, it's time to learn how to actually place the graphic images on your page. The correct HTML code for placing a graphic image on your page is: <img src="yourimage.gif"> or <img src="yourimage.jpg"> You would, of course, replace "yourimage" with the actual name of your own graphic image. For your information again... "img" stands for "Image" and "src" stands for "Source". Source refers to the location of the image file. Okay, that was pretty simple stuff right? Now, your page can have graphics! But there is more..of course. You didn't think it would all be that easy did you? You can also link to a graphic that is on another site. This means that the actual image file doesn't have to be in the directory that your pages are in. It can be on a website in Japan...or anywhere else for that matter. The correct HTML code for linking to a graphic is: <img src="http://kwilliams.hypermart.net/hbfban.gif"> The above code would place the banner from The Home Business Files on your page, exactly where that line of HTML code is! Be sure to request permission before linking to someone's images this way!!! That didn't hurt a bit, did it? But of course there is more.... There is more that can be done with that <img> tag. You can label your images. It is important to do this because many people turn off the "auto load images" option in Netscape. They usually do this if they have a slow modem. When this option is turned off, your label will be displayed instead of the image. You label your images by adding the "alt" attribute to your <img> tag. It will look like this: <img src="yourimage.gif" alt="The Title or Message of Your Gif"> I know..another easy step there towards mastering graphics...but there is still more! You can specify the height and width of your image, as well as the size of the border around the image. This is done like this: <img src="yourimage.gif" alt="Your Label" height="60" width="468" border="1"> The width, height, and border sizes used above would be the standard information for a banner graphic. You just have to play around with these numbers with your own graphics to get the look and size that you want. Okay...we are almost there. There is one more attribute that you need to know. You have learned how to use the "align" attribute with the <p> tag. You can also use the "align" tag with the <img> tag. But the effect you get is a little different. Where <p align="left, right, or center"> would only affect the placement of text and graphics, <img align="left, right, or center"> will not only effect the placement of the graphic, but it would also cause text to flow around the graphic images. <img align="left" src="yourimage.gif" alt="your label"> The above tag would align your image to the left and cause text to wrap around the right side of it. Let's try this with an icon. The name of the image is: icon-computer.gif I would type the following code: <img align="left" src="icon-computer.gif"> This text will wrap around to the right of this image. You will notice that it doesn't go below the image, or on separate lines from the image...just wraps around the right of the image. With that code, I would get this: This text will wrap around to the right of this image. You will notice that it doesn't go below the image, but instead, it places all of the text that is typed in after the <img> tag to the right side of the image itself..without running into...without dropping the entire text down below the image. <img align="right" src="icon-computer.gif">Now, if I change the "align" attribute to "right", you see how it moves the banner to the right side of the page, and wraps the text around to the left of the banner. All that was changed was one simple word...we changed "left" to "right". The above tag would give me this: Now, if I change the "align" attribute to "right", you see how it moves the banner to the right side of the page, and wraps the text around to the left of the banner. All that was changed was one simple word...we changed "left" to "right". Simple stuff again...but what if I changed the "align" attribute to "center"? <img align="center" src="icon-computer.gif">We have changed the align attribute to center. Let's see what this does: We have changed the align attribute to center. Let's see what this does: As you can see...that doesn't work out too well. The align="center" attribute works differently when used inside the <img> tag. Instead of using it in this tag, it should be used as such: <center><img src="icon-computer.gif" ></center> This aligns your image in the center of the page. You should then do a line break, and center your text under the image. Now you know how to put graphics on your page, how to align them, label them, and even how to determine their height, width, and border sizes. Next you need to know about sizes, and how they affect the load time of your page. The larger and more colorful and animated a graphic is...the longer it will take to load. The more graphics you have on the page...no matter how small, the longer the page takes to load. When it comes to graphic images, remember, less is more. It is a good idea to keep your graphics between 20k and 50k in size. You can find out the size of a graphic by right clicking on the image and choosing properties. You might also try compressing your graphics with a compression utility. Many graphic designing programs, such as Gif Construction Set come with a built in compressor. You can also use NetMechanic's free graphics compressor or the free image optimizer at WebUtilities. At some point you may want to design and create your own graphic images. This can be done using programs such as Paint Shop Pro and Gif Construction Set, but that is a whole other e-book! The Graphics Directory Okay, I understand this! Contents