"Adding Images"
- Look around for some images you might want to use on these pages. Start
with the websites below and do a search for "free photos" Bookmark your favorite
places. Right-click the mouse to "save the picture as," name it carefully,
and place it in your images folder. Keep the names simple, distinctive and
all lower case to save yourself some grief.
- Team up with someone and take each other's pictures. Put your picture in
your folder
- Scan a picture you've brought. Save as a .jpg and make sure you keep the
file size as small as you can Again, place this in the correct folder
On bitmap files: You'll need to open your file in Photoshop or another program that can read it and write gif or jpeg file formats. Open it as a bitmap and save it as a jpeg (many colors; most photographs) or as a gif (fewer colors; often like a cartoon)
To add an Image to Your HTML Document:
- Use the <img> tag where you want the image. There is no closing </img> tag.
- Specify the URL of the image by placing the SRC (source) atttribute within the <img> tag
- If you store your images in the same directory as your HTML files, the URL is simply the file name of the image. For example, to insert a gif file named logo into your HTML document, you would type <img src="logo.gif"> It must be exactly correct, including capitals and spaces!
- To link to images not in the same directory as the HTML document, use a relative URL to locate the image. For example, if the same logo were in a subdirectory called images in your HTML documents folder, you would type <img src="images/logo.gif">
- The ALT attribute allows you to create alternative text for your image that will be shown to users who have browsers that do not support graphics and (in some browsers) while the image is loading. Type ALT= followed by the text in quotes. For example, <img src="logo.gif"" ALT="Wheeler High School Logo">
- To align the image above the text that surrounds it, type align=bottom (This sets the bottom of the image to the baseline of the text)
- To align the image below the surrounding test, type, align=top
- To align the middle of the image to the text baseline type align=middle
- To force the text to wrap around an image type align=left inside the <img> tag (This will align the image with the left margin and text will flow around it
- Align=right will place the image in the right margin
- You can specify the height and width of the image. The browser will scale the image to fit your setting (the results may not be pretty!) Type height= or width= followed by the number of pixels.
- To load a background image insert background=' followed by the file name of your image INSIDE the <body> tag.
You're probably going to want to place your images more precisely on the page than these tags will allow you. For that, you'll need tables!
