Incorporating Horizontal Rules and Graphical Elements
CIW Website Design Manager Course Section 1, Part B, Chapter 3
Horizontal Rule
"A Horizontal Rule is a line, and a line is a line" I hear you say. Well yes, there isn't too much to be said about the horizontal rule element. But there is some. The <HR> element has four attributes: ALIGN, NOSHADE, SIZE and WIDTH.
The above line uses all the attributes except the NOSHADE. I have just proved myself wrong! I was about to explain that NetScape displays horizontal lines differently but, having just tried it, it doesn't. The following line uses all of the attributes.
Incorporating Images onto Pages
It is said that "A picture is worth a thousand words". Evidently, most Web developers believe this, because the Web is inundated with graphic images. Images can be big or small, they can function as links, they can be used to launch script actions, and they can be used as image maps (clickable graphical menus made from a single image).
Images, when chosen carefully, can greatly enhance your page. Too many images, however, can slow the loading of pages, waste costly online time, and even displease visitors by making the page look too busy. Be creative but sparing with your use of images.
Image File Formats
GIF
Typically, GIF files support fewer colours, and are best used for line art, custom drawings, and text used as graphic. Two principal GIF versions exist: GIF87a and GIF89a. GIF89a is more popular as it supports the following techniques:
- Transparency - the ability to make any part of the image blend into a background colour, or the colour of another image.
- Interlacing - the ability for an image to "fade-in" as it renders.
- Animation - a series of images acting together to provide an animation sequence.
JPEG
The JPEG format supports many more colours, and is used typically for photographic and complex bitmap images. This format also supports compression, meaning you can make the images smaller. However, the more you compress an image the more you will reduce it's quality.
PNG
Portable Network Graphics (PNG) is a newer graphics format. This format is also designed to compress information.
<IMG> Attributes
| Attribute | Description |
|---|---|
| align | for aligning images and wrapping text around images |
| alt | for offering alternate text that is displayed if the image is not |
| border | for specifying the thickness of the border |
| hspace, vspace | for specifying the space around the image |
| src | for specifying the URL of the image |
| usemap | for specifying the image map that should be used with the referenced image |
| width, height | for specifying the size of the displayed image |
Perhaps the most used attribute is border, as setting border=0 turns the border off and I seldom use borders around graphical elements.
In the course notes sample code, the IMG tag is shown as an open tag (without a closing </IMG>). I have also seen this in a number of HTML books. This is incorrect in HTML 4.0 Transitional. If you go to the W3C site and validate your code you will receive an error for every image without a closing tag.