Section 11. About Adding Graphics

11. About Adding Graphics

BEFORE YOU BEGIN

2 Use HTML Tags

7 Set Up a Web Page's Basic HTML Structure


SEE ALSO

10 About Creating Hyperlinks

79 About Image Information

99 About Image Information


The Web would be a pretty dull place if it was made up only of text. So you'll often want to add graphics to your pages.

To add a graphic, you use the image tag, <IMG> and </IMG> , along with the source ( SRC ) attribute. Here's how to use it:

<IMG SRC=" http://www.ltolstoy.com/picture.jpg "</IMG>

Note that when you point to a graphic, you need to include its locationwhere it can be found on the Webnot just its name .

If, though, you are going to put your graphic in the same location on the same web server as the web page that points to it, you don't need to include the location (although if you do, it won't hurt).

So, to reiterate, to place a graphic on a page, you use the image tag in this format: <IMG SCR=" filename "> where " filename " includes both the location and name of the file itself.

When you place a graphic on a page, there might be a great deal of white space to the right of it. That's because when you place a graphic, the graphic is placed on the left side of the page, and no text will appear to the right of the graphic. Instead, any text will appear underneath the graphic, as you can see in the following figure.

Too much white space to the right of a graphic can seem awkward .

There's an easy way to fix that. You can use the ALIGN attribute to wrap text around an image. The image can be aligned to the right or to the left, and the text will wrap around it in both cases. Here's how to align the graphic to the left. When you do this, text will automatically wrap around it to the right:

<IMG SRC=" http://www.ltolstoy.com/picture.jpg " ALIGN="left"</IMG>

The following figure shows how the page looks by aligning the image to the left and wrapping text around it.

Aligning the image to the left and wrapping the text around it.

If you use ALIGN="right" , it will look like the following figure.

Aligning the image to the right and wrapping the text around it.

TIP

When creating graphics for the web, use the .gif, .jpg , or . png file formats, because those are the only ones that all browsers will recognize. Also, if you're going to use a graphic to create an image map, there's some help on the Web. Go to http://www.htmlgoodies.com/tutorials/image_maps/index.php and http://www.ihip.com/ for help.




Sams Teach Yourself Creating Web Pages All in One
Sams Teach Yourself Creating Web Pages All in One
ISBN: 0672326906
EAN: 2147483647
Year: 2006
Pages: 276

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net