 |
|
|
 |
 
|
Adding Graphics to Your PageHome > Build > Programming > HTML by Aaron West Web Pages need graphics. There was a time, not too long ago in fact, when there were no web browsers capable of displaying graphics, which made the internet very dull. Fortunately, browsers started supporting graphic formats long ago, so there isn't much of a concern with compatibility. There are still text browsers out there, and often users will set their browsers to not download images, so we need to make sure they still receive the content. For more information on how to create graphics, click here. To link to a graphic, use the <IMG> tag. Then, use the SRC attribute to specify the path to that graphic. Here is an example of a graphic displayed on a web page: <HTML> The SRC path pointed down 3 levels, to the root directory, to the 'graphics' subdirectory, to a w3nation logo (one that was never used.) For more information about relative versus absolute URLs, see our URL section. If the graphic file is in the same directory as the HTML file, then no path has to be given. You can simply use the filename as the SRC: <IMG SRC="w3nation.gif"> You can also link to a graphic that resides on another server on the internet. For that you must type the Absolute URL of the graphic. For example, if you wanted to use this logo on your page, but didn't want to have to download it to your server, you could use our URL as the SRC path. Be careful with this. Most webmasters frown on people using graphics from their site. It's illegal to steal images and when you link to a graphic on another server, you're stealing bandwidth. Attributes of the <IMG> Tag Remember that not everyone will have a graphics browser, although most will, or some people might have image loading turned off in their browser. If you plan to use buttons to navigate your site, the user that can't view graphics might get a bit confused. That's why there is ALT text. ALT text allows you to use a line of text to describe the graphic. For example, I might wish people to know that the broken image is the w3nation logo, to do this I would use ALT text. Here is an example: <HTML> Note that the graphic was not in the local path, which is why you couldn't view it. That is called a broken link. ALT text works with broken links, and will also display before an image loads. Using ALT text insures that your site is navigable at virtually all times. Similar to the <P> tag, there is an alignment attribute with the <IMG> tag, although it is a little different. Instead of aligning the actual image, it aligns any text that appears near the image. TOP - Aligns the text
to the top of the graphic. You still have to use another tag, such as <P> to align the graphic. Here is an example: <HTML> There are other uses for the ALIGN attribute in images. If you wanted to wrap a lot of text around the graphic, you would you use LEFT and RIGHT to define where the overflow text goes. Here is an example: <HTML> Note: We used much more sample text in the source. You got the point. What if the graphic and the text seems too close? There is a way to handle that as well. There are two other <IMG> attributes that can define how far the text should be from the graphic: VSPACE
- Vertical space in pixels Here is an example: <HTML> |
||||||||||||||||
|
