graphics - Bits & Pieces

You can also Search this page using the form below. Your question may have been addressed in a previous class.

Note Netscape will not handle showing images with spaces in the filenames. The same can be true for web pages with spaces in the filenames.

When you send your HTML file to the web you have to also send your image files or they won't show up. Each individual file that is associated with your HTML document has to be uploaded.

Q. 1. From the questions on the bulletin board, lots of people seem to be having trouble with the etc. tags as covered in Week 2, Part 1. Are we all missing something in the instructions?...I can't get my text to move at all.
2. Just curiosity, in Week 5, can you justify both the left AND the right margins in TABLE WIDTH? If not, what would you use?

A. The links to the resources in week 4 on graphics in the section on Attributes for the <IMG SRC> Tag are excellent for showing different things you want to achieve. Examine the source and view the examples in the graphics chapter from Castro.
http://beta.peachpit.com/vqs/69696/samples/05.html

Especially look at
Wrapping text around images Fig. 5.15, 5.19
Stopping text wrap Fig. 5.20, 5.21
You can see it is a combination of the alignment for the images and how the with the different variations of CLEAR= is used to move and place the text.

http://www.zoniez.com/TQFK/imgalgn.html
http://vuweb.net/htmlzone/graphics/b06mn20.htm _

Hopefully someone else can answer your question about justifying margins. Justifying both left and right margins is not something that can be done consistently in all browsers and I do not have a suggestion for a workaround.

Q. If I have a bitmap image, can I change it to GIF or JEPG file format? If so, how?

A. Yes using a graphics program like MS Paint (comes with windows), Paint Shop Pro or other that support both bmp and jpg, just load the bmp and save as jpg

Q. I type in the correct html tag for my images but when I view my webpage the picture doesn't show up.

A. I am viewing the source of your page. The image you want to appear is called rushmore.jpeg and needs to be renamed/saved as so that the extension is .jpg instead of .jpeg to show on your page. Once you do that, upload rushmore.jpg to your server and change the filename in your document to match.

Q. I am using a GIF image on my page, but I need to make the borders transparent

A. Like this-just add Border="0" to your img tags <IMG SRC="myimage.gif" height="90" width="100" border="0" alt="my logo">

Q. Thumbnail is done; changed large image to small and linked to larger one on new page...Added the ALT to images on the main pages...should ALT be added to written links as well?

A. You do not need to use ALT for written links.

Q. I'm saving Lesson 2 (Part 1) into an html file on my C: disk OK. But when I reach the brick image, I only see a square with a ? mark inside. The brick image is there when I'm viewing your file online, but not when I'm viewing mine offline. Is there anything I can do differently to be able to view the image in my html file offline?

A. To view the image offline, you need to save it to your HTML folder -- be sure it is in the file as the HTML document!
To learn how to save images from the web -- see Eagle's supplement to the lessons:
For Internet Explorer --
http://vuweb.net/htmlzone/blockie.html
For Netscape --
http://vuweb.net/htmlzone/blockns.html

Q. I have a question about wrapping text around an image. This is what I am using:
<img src="Tori5.jpg" align=left height="200" width="250"> and then the text follows.

This works fine, but what I don't understand is why you need the two align=left tags, and why in that position. ( The image, BTW, is of one of my cats rather than the bricks!)
A. Try <img src="Tori5.jpg" align="left" height etc

Q. What does text wrapping around an object mean? A. Like you see in a newspaper or magazine when an image is in the middle of an article and there is text above, below and on both sides.

Q. I got my text to wrap around my gif but how do I get the wording identifying the gif to be displayed under the gif and not in the text paragraph. This is the code I am working with:The architecture of Columbus offers the casual traveler or seasoned student of design an inspirational look into the past. <IMG SRC="downtown.jpg" width="200" height="200" align="Left">The entire downtown is an historic district on the National Register. What is perhaps even more unusual is that buildings such as the 1892 City Hall, 1906 Railroad Station, 1916 Park Pavilion ,and 1912 Carnegie Library (built in Prairie style) all still serve their original purposes 
A. What you have here is a paragraph that is aligned to the left and within that paragraph you have an image that is also aligned to the left. This is what is causing the image to be at the left . The text then continues to the right of the image. The size of the graphic is generic as to how much text will remain next to the image. If this image were only 50 pixels in height then some of the text would also wrap under the image.
If you want text in a new paragraph-that would appear under the image, then close the /P after the image and start a new P

Q. I have a lot of images stored on floppies and zip drives. What is the coding path I would use to put them on a web page?

A. To be seen on a web page, the path will depend on where it is uploaded. It doesn't matter where you store it, floppy, hard drive, cd. Just as long as it is uploaded to your web server. If you are putting it online, in the same folder as your .html, all you need is the file name. If you also want to see it before you have it uploaded you will have to change the path in your html to the floppy it is on. Not a good idea because you will have to change it back to the web storage path before uploading changes. It would be best to Insert and open your floppy -- find the image you want -- right click on it and then click on Copy.
Go to the folder where your .html document is located on your hard drive and click on paste.
The image needs to be in the "same" file as your .html document. Then, use your <IMG SRC> code as shown in the class lessons.

Q. where is a good example for understanding converting pixels into width/height measurements.

A. The WIDTH and HEIGHT of images is made up of pixels -- no need to convert!

To find the WIDTH and HEIGHT of images in IE and in NS -- visit eagle's class supplement page -- the size info is at the bottom of the page: IE: http://vuweb.net/htmlzone/blockie.html

NS: http://vuweb.net/htmlzone/blockns.html

Cool Ruler- http://www.fabsoft.com

Q. where are we supposed to save pictures to use on our web pages? Do I need to create another folder or save it to one of the two that we already created? A. For this class, since you will be linking your web pages together, it is best (and easiest) to make a new folder named HTML and save all html and image files in that folder.

Q. I can not put up a pic. I only get a red "X" in a white box...What is wrong? A. be sure the image is in your same folder as your HTML document. Also be sure that it is in fact a .jpg. Not sure if the capital "R" would be affecting the display, could try renaming in all lower case, which is actually better anyway, because some servers don't like caps in file names.

Q: Using AOL -I have down loaded some .gif buttons, they show up as .art files and cannot get them to save as .gif files, do I have a problem or do I leave alone?

A: Sounds like you are using AOL. The .art graphics will not be viewable in most browsers. See the week 4 lessons on graphics, Part 2 in Saving Images for how to download the images as .gif instead of .art . At the end there is a description about AOL and saving images. This resource might also be helpful.
http://www.ossweb.com/article-3.html
In AOL 4.0, go to MY AOL, then PREFERENCES and Choose WWW. Go to WEB GRAPHICS and uncheck "Use Compressed Graphics".

A: To clear your cache files in AOL 4.0 and 5.0 click on the My AOL button and then preferences. Click on WWW icon and then Delete Files and then Clear History. This will clear your browser cache.
It is correct that you have to have Use COmpressed Graphics unchecked. When trying to save a gif file right click on the picture you want to save and click on "save picture as" and the dropdown menu will give you the choice of saving as a gif file.

Q: When using an image as a link, should the ALT attribute refer to the image itself or to the destination (where clicking will take the visitor) or to both?
I ran a page through Bobby (-- what a disaster! This test is for advanced kids, I hope --), and mention was made of adding descriptive (D) links.

Here's the exact message: "If any images on this page convey important information beyond what is in each image's alternative text, add descriptive (D) links."

Can you enlighten me? Is my original question related to what Bobby said?

A: It used to be a lot easier to interpret Bobby messages and figure out how to fix pages so that they will be more accessible. A lot of the information given is only in the standards for HTML 4 with the new tags available. We did not cover them in this class.
It is perfectly acceptable to just describe your image in the ALT text. Sometimes I have just added something in the ALT text describing the image and where it takes you to.

A: In regard to the ALT attribute when the image is used as a link --
one term we had a student who was visually impaired and used a voice synthesizer to read his pages to him. He really pushed everyone to 'always' use the ALT attribute and make it descriptive, otherwise he had no idea what the image was.
He also said that if the image was a link -- don't just put ALT="click here" -- but describe the image and what to do or where it's going --
Examples:
ALT="Link to picture of my cat"
or
ALT="logo link to Virtual University"

A: The HEIGHT, WIDTH, BORDER ALT describe the image itself. The ALIGN is that images relationship on the page and with the surrounding text or other images.

Animated gifs. How do they work?
"THE MYSTERY OF ANIMATED .GIFS" http://vuweb.net/htmlzone/otter/animate.html

Animated gifs are made from a series of images which are combined into "one package" to give the appearance of movement or color changes -- similar to the little books for children where you flip the pages real fast and the images seem to move. There are a lot of programs that make it very simple to do animations -- a good shareware to try out would be GIF Construction Set --
http://www.mindworkshop.com/alchemy/gifcon.html -- it will walk you through the steps of creating animations and you can make a few before buying the program.
There is also a good FAQ page about animations and links to other sites at -- http://www.microsoft.com/imagecomposer/gifanimator/gafaq.htm (no longer there)

Country Flags & Anthems JKH's place - 24 countries listed and their flags and anthems

For examples of align attribute and images see: http://vuweb.net/htmlzone/imgalgn.html

Before grabbing a graphic off of ANY web page, make sure it is in the public domain. If you don't know, get the author's permission BEFORE using anything from their page.

Q: There isn't any way I can eliminate the space between the top two images unless I put them in tables with a "0" border is there?

A: Only way I know to get rid of all spaces, is to place in a table with 0-borders 0-cellpadding 0-cellspacing, that might work, not 100% sure though.
Only the first to the second, image creates a small space, not bad really, and that is only because of the blue top, maybe switch the second image with the first? Just a suggestion, otherwise, I wouldn't have noticed the space, if you didn't say anything about it.

A: The first thing you need to do is make your background color white because if a person has their browser background set to another color, it shows around your images.
<BODY BGCOLOR="#FFFFFF">

Then, to delete the space between your images, put them all on "one line" in your code with "no space" between them, rather than on separate lines:

<img src="watch.gif" width="600" height="150" alt="Watch us Change!"><img src="floor.gif" width="600" height="150" alt="This is my brain on"><img src="paintsp.gif" width="600" height="100"alt="Paint Shop Pro">

It is okay if you have "word wrap" on in notepad -- just be sure you put the <img src=> tags "next" to each other with no spaces between them!

Q: I have put some photos on my web page and they appear fine on microsoft explorer offline, but all I see when I go to my website online are red crosses.

A: Did you upload the photos, are they in .jpg or.gif format, are they named exactly in your HTML as the filename is the <IMG SRC> tag directing to the proper directory? Q: The code I used is: <IMG SCR="Jessie curled up web.jpeg"> and
<IMG SCR="Border (Navy).jpeg"> The
jpeg's are in my HTML folder; putting <IMG SCR="Judy's Html folder/Jessie curled up web.jpeg">
didn't make any difference. Putting <Judy's zip/Judy's Html folder/Jessie curled up web.jpeg">

A: First you need to tell us the name of html file that you uploaded to geocities as when I go to the url you posted it only shows the generic index.html that geocities starts you out with and does not have a link to the page you would us to look at.
http://www.geocities.com/erbenhof/
What is the name of your web page?
http://www.geocities.com/erbenhof/notebook.html
Is an example, but your filename will be whatever you have called it.

Your filenames for your images need to end in .jpg instead of .jpeg and as Deb suggested, should not have any spaces in the filenames either. It looks like you are confusing what should go in the ALT text which describes what the graphic is with the actual filename of the graphic itself. <IMG SRC="web.jpg" ALT="Jessie curled up web" > would be a better choice. Can you rename your graphic to this and try uploading it to see if will work. Do not include any path to subdirectories on your hard drive when you code it. Then upload the webpage with your coding.

I would take the parenthesis out of the this filename and rename the graphic file so your filename is all one word with no spaces or unusual characters. All lower case is even better but not needed as the filename of the graphic matches the way you have it in your html code. Make sure you have a copy of all of the graphics and your webpages in one folder on your hard drive. This will make it easier to see if you have used a filename that is accepted on the server as well as on your hard drive.
<IMG SCR="BorderNavy.jpg">

Finding image size

**In Netscape I right click on the image - Chose View Image-The image will open all by itself on a page. Look in the very top TITLE bar and it gives the image name and its width and height.

** In Internet Explorer - Right click on the image and chose Properties. The dimensions will be shown in the Properties window.

*Using Netscape: Load your web page, then select View from the browser menu. Then select Page Info. You will see the links to all of your graphics on the page. Click on the link and then scroll to the bottom of this screen. There you will see the dimensions of your image.

*Using Paint: Another way to find out the size of your .bmp images is to use the Paint program that comes with Windows. You will find it by clicking on your start button, then go to Programs and then Accessories. Click on Paint. Must be .bmp

In the Paint menu, select Image from the menu and Attributes. The dimensions for width and height will show there. Make sure you have selected pixels (the circle should have a dot in it as it is the default) but if it is not, just click to select pixels rather than the inches or cm.

A: I can open images in paint a few ways. One is to right click on an image and chose COPY. Then go to Paint-EDIT/Paste . If this image is very large I get this message: "The image in the clipboard is larger than the bitmap. Would you like bitmap enlarged?" I always chose YES.
The image is then pasted in paint ready to play with.

Another way to open an image if it is on your hard drive is to open Paint and go to File/Open and then browse your hard drive for what you want.

Thumbnails

Q: I've mastered thumbnails (difficult task), but am confused when I get to the larger image. How do I direct folks back to my home page from the larger image?

A: On the page with the thumbnails, tell them to click their browser's back button to return to the page if you have the full size image open in the same window. You can also have it open in a separate window - then they would just close the larger versions. Or you could have a link back on the full size.

Q: I want to know if Paint Shop Pro is a good way to go if I am interested in making my own graphics. If so, how do you use it? Can anyone give me any info?

A: You can check out http://www.pspug.org/ and www.pspiz.com

Q: I succeeded in removing the blue border around an image, but I've got two animated images that came inside white boxes. (These boxes were not obvious on the page I took the images from. It was one of the sites recommended in our lesson.) How can I get rid of them so that the color of the page background is seen instead?

A: The reason your animated images have white 'boxes' around them is because they are not "transparent" graphics. I'm sure the page you copied them from probably had a white background and you had no way of knowing. There's not much you can do to make them transparent (get rid of the white) except display them on a white page. I am sure they are copyrighted and it would be against the law for you to manipulate them.
Plus, animated graphics are made up of many images and each one would have to be made transparent! For more info on how animations work, see:
http://vuweb.net/htmlzone/otter/animate.html

Q. When I use the tag <img src="imagename.imagetype"> What opens in my browser is a square with a red x. What am I doing wrong.

A. There could be a couple problems here.

First -- the graphic you want to use must be downloaded to your computer and in the same folder as the web page where you want to use it.

Second -- double check the spelling of the image and make sure you copy it "exactly" into your HTML code. For instance:
"cat.gif" is different than "CAT.gif" or "Cat.gif" etc.

The red x that you are getting means that your browser is not reading the code you have entered and can't find the picture to insert.

Also, check the rest of your HTML code to make sure you haven't forgotten any "quotes", <brackets>, closing tags, etc.

Q. An X where the picture should be.

A. You're calling your image from your hard drive..and I believe you have the "j" missing in your image file name...that's why you get the red X where the image should be...Also check to make sure your have the name of your image file spelled properly and placed in the same folder with your HTML files.

A. #1 make sure file name in the folder and <img src="image file name"> are exactly the same spelling and case count, top.gif and Top.gif are seen as different and won't work
#2 make sure the image file is in the right place, IE where the HTML page is.
#3 make sure that when the file was transferred to the web site some gobblin didn't change the name of the file on you, (yes this does happen) If it does, then change the name of the image in your HTML page to match that of what the goblin named it, and reload page. (Goblin- Some servers will change image and file names to all lowercase no caps allowed, some will remove spaces between letters, depends on server)
#4 load the image alone in your browser (File/Load) and see if it shows, the image file itself may be no good.

Q. Sizing images - <IMG SRC ="block.gif" WIDTH ="50" HEIGHT ="50">> ...instead of using height and width cant we use the percentage, so that the end image would be in proportion. A. You should only use the actual dimensions of the image, if it is 50x50 then use 50x50, if you want it smaller or larger you need to load it into a graphics editor like Paint Shop Pro and change the size of it there. Resizing an image using the height width attributes will only give you headaches and ulcers : ) as for using % I don�t believe the height width attributes except % has to be in pixels.

Q. Copying Brick A. Directions are here
http://vuweb.net/htmlzone/blockie.html

Q. How can I get a "pjeg" file to view on my page. I have download some pjeg picture and I can't view them at all. A. When you save them, change the extension to Save as All files and type in the extension .jpg
For the ones you have you can try this. Go to them in Windows Explorer and see if you can rename them with the .jpg extension. Then see if you can view them

Q. How to save images using Netscape 4+ A. http://vuweb.net/htmlzone/blockns.html

Q. I have a problem in including a image. I make a simple picture in paint and save it as a gif image and still it doesn't open.Can you help? How do I send my web page? A. Save the image as a .gif or .jpg into your HTML folder with the rest of your page info. Tag it like this on your page.Use the correct name and attribute sizes. <IMG SRC=myimage.gif" HEIGHT="100" WIDTH="50" alt="my image" border="0">

Q. Just uploaded my button from Week 5's homework and was wondering why Netscape shows button with blue border while I.E. does not.

A. You need to add the border attribute and set it to zero 0 to get rid of the blue border which is there because your button is a link.

<A HREF="#top"><IMG SRC="top.gif" width="150" height="50" border="0" alt="go to the top"></A>

Scoot the closing anchor tag up a line so that it comes just after the end of your image tag. By having it on a separate line, there is a little blue "tick" mark or line which was still part of the link made by the extra space before you closed it. While you are editing make sure to add the width and height along with the alt text.

I think you will have an easier time of it if you rename all your html files lower case on your computer and on the server. Some servers will not like the caps for .HTML and it can cause problems for you later.

Q. Are we suppose to be able to see our image(blocks) A. If you have copied the blocks into your html folder and added it as an image with the correct <IMG SRC-"usethenameofgifhere.gif"> then yes you should be able to see your blocks.

Q. I am trying to place an image on the left, one in the center and one on the right. This is the coding I'm using which looks the same to me, but I can't get the center one to come up in the center!

<img src="tori11.jpg" align=left>
<img src="tori11.jpg" align=center>
<img src="tori11.jpg" align=right>

Maybe I've been looking at it too long!

BTW, I lost my entire notebook1 file - how I don't know, but it's nowhere to be found on the hard drive. So, I'm now backing it up on a zip drive! A word to the wise!
A. What you will learn in the next few lessons is a table coding that will help you to align left. center and right. In the mean time, side by side you can place the images just take out the extra p's
<img src="tori11.jpg"><img src="tori11.jpg"><img src="tori11.jpg">
This will place them all on one line, side by side. To center them in the page add the center code.
<CENTER><img src="tori11.jpg"><img src="tori11.jpg"><img src="tori11.jpg"></CENTER>
There is a space code you could add in between to space them out a bit: &NBSP; each one of these codes = 1 space.
I prefered until I learned tables to use the alignment code:
<img VSPACE="10" HSPACE="20" src="tori11.jpg"><img VSPACE="10" HSPACE="20"src="tori11.jpg"><img VSPACE="10" HSPACE="20"src="tori11.jpg">

A. the way you have it coded each will be on a seperate level (line), if that is what you want, your telling the images to align inside the paragraph but not telling the paragraph how to align : ) try this instead : )

<img src="tori11.jpg" align=left>
<img src="tori11.jpg align=center">
<img src="tori11.jpg" align=right>

A. if you put <center><img src="torri11.jpg"></center> your image should be centered.

Q. When I saved the brick image, .gif and .jpeg were not listed in the "save as type" I only saw bitmap and *ART. I was able to view the brick in notebook2, but will this make a difference to others who would view the page A. I noticed from your email address that you are using AOL. It normally doesn't automatically save images in the .jpg or .gif format without a little manipulation on your part (as you noticed it changes them to .bmp or .art)!

Here is the way to turn off the "compression" so that you can save graphics in a "better" format to use on web pages (they must be changed to the .jpg or gif format!).

In AOL 4.0, go to MY AOL, then PREFERENCES and Choose WWW. Go to WEB GRAPHICS and uncheck "Use Compressed Graphics". AOL's browser is setup by default to save any images in the .art format (It will show as a broken image in other browsers if you use this format on your web pages.) When trying to save a gif file, right click on the picture you want to save and click on "save picture as" and the dropdown menu will give you the choice of saving as a gif file.

Select the choice for jpeg if you know the graphic should be in that format (the block image in the lesson should be saved as "block.gif").

Judy's tutorial explains more about graphics and AOL:
Creating Effective Web Sites for AOL Users http://www.ossweb.com/article-3.html

Q. Text with Images - I just added page 4 to my site. It contains some icon(small) images which when clicked on link to enlarged pictures. This is something I wanted very much to do. But I can't figure out how to add text to the enlarged image. Could someone give me explicit instructions on how to add that text? A. create a page for each image, like image1.html, then make you links read <A HREF="image1.html"><IMG SRC="thumbnail.jpg"></A> This will keep the image as the link but will load a page with the image on it instead of just the image, you can add lots of text that way : )

AOL Graphics

Q: I can't seem to get the background {Black} or graphics to work on my page in AOL

A: Did you upload your background and graphics on aol also?The file names must be uploaded exactly as they are written in your file.

Q: Bullets don't appear on my browser. I am using AOL. Also I saved an image as a jpg file in the images folder of my C Drive. I typed in <IMG SRC= "images/marisa.jpg" ALT= "ME"> and when I saved it and pulled up my page, it was very little and said "ME" but the image box had an X in it. What do I do?

Q. I was wondering when I use Photoshop or PSP and filing my pictures the smallest as possible, if thats all I can do to let the images load faster to guests of my site. I saw some reference to gif split, is that the only program, or is there another program or trick you can recommend to me? The reason why I didn't show my site still is that I want to work with as much images as can be possible, but I don't want to have guests waiting for hours to load my site. A. Website Garage has a program called GIF Lube that you can use right from their site to downsize images. http://websitegarage.netscape.com/O=wsg/turbocharge/gif_lube/index.html

A. I find that Ulead's SmartSaver Pro is invaluable as far as image compression and image splitting for fast download of web graphics goes. You can get a 15 day trial version from the following url. One nice thing about it is that when you do image splitting with this application it makes the HTML for you also to ensure proper loading of the split image. http://www.ulead.com/ssp/runme.htm

Q. Went to www.lynda.com/hexh.html

Can you please define the term "non-dithering"?

A. Lots of information about colors here which hopefully will answer your question. http://www.visibone.com/color/faq.html For different operating systems and browsers, you should use the "browser-safe" palette which is available on many of the color sites like Lynda's or the Visibone Color Lab.

A. Dithering is a technique for simulating colors that are missing from an image file's palette. The missing colors are simulated by intermingling pixels of two or more palette colors. If the unavailable color differs too greatly from the colors in the image's palette, dithering produces a grainy or mottled appearance. This site has a chart of the non-dithering 216 color palette and a bit more explanation. http://www.wmoen.com/custom/dither.htm