Using Graphics
- The bare essentials to inserting a graphic on your web page...
- Specifying alternate text and dimensions for your graphic...
- How to align your graphics and define white space around them...
- About background images and page background color...
- How to use graphics as hyperlinks and controlling the link border...
- How to insert horizontal rules into your web page...
Graphics 1 - The Essentials
One of the best ways to create an impact with your web page is to add some graphics. Graphics can add color, depth and sparkle to a web page and can serve to catch the eye and retain viewer interest. For these reasons, web page headings are often rendered as graphics since, like book covers, these are the first things a potential viewer sees when surfing the internet. Graphics are placed on web pages using the
img element...Graphics 2 - Accessibility
Theoretically, all you need to display a graphic on your web page is the
img element with the src attribute along with an appropriate value. However if you really want to optimize how web browsers display your graphics, you should also take care to use other attributes as well, most particularly alt, width and height...Alignment and White Space
In the hundreds of personal pages that I've visited on the internet over the past several years, I've noticed that many web authors fail to take advantage of ability to float graphics to the left or right on their web pages. When you float images to the left or right, it causes adjacent text to flow along the right or left borders of your graphic and then continue below it once the text flow exceeds the bottom border. This makes text appear to 'wrap around' your graphics and thus creates a professional looking layout. The wrap-around effect is created using the align attribute with the img element...
Page Color and Background
Not only can graphics be used individually but they can also be set to repeat or tile themselves across the screen thereby creating a background for your web page. This is accomplished by using the
background attribute in the body element. The value for the background attribute can essentially be any graphic file however there are some important things to take into consideration when it comes to choosing your background image...Using Graphics as Hyperlinks
Now that you know how to insert graphics on your web page and how to create hyperlinks, let's put the two together to display graphics that act as hyperlinks. Some common uses for this are...
Horizontal Rules
HTML has a kind of built-in graphic that can be used to draw horizontal rules on your web page. This is accomplished with the
hr element which is an empty element, i.e. it contains no content and only employs a start tag. Horizontal rules have a number of uses including acting as dividers to graphically separate your web page into sections or as underlining for headings...| HOME | TOP | NEXT ~> |
