|
One of the great attractions the World Wide Web is the ability to incorporate backgrounds and images. Currently, two image formats are supported on the Web:
Graphic Interchange Format (GIF)The Graphic Interchange Format (GIF) was originally developed for image transfer by users of Compuserve. GIF uses a color map with a maximum of 256 colors. Because of this, GIF's are not always appropriate for photo realistic images. GIF's are great for images with a limited color map such as buttons, logs or icons and have two features which make the extremely useful for web pages:
Joint Photographic Experts Group (JPEG)JPEG images support and image map up to 16 million images and allow for greater compression than GIF's. JPEG images may be a better choice for photo realistic images.
Adding ImagesThe <img> image tag allows you to insert graphics into your page. The image tag has one required and several optional attributes.The scr attribute is a required attribute whose values the URL of the image to be displayed. URL's can be absolute: <img scr="http://www.alltel.net/~woody1/button_1.gif"> or relative: <img scr="button_1.gif"> The alt attribute allows you to add alternative text to be displayed for text only browsers or for views who have graphics turned off. <img scr="button_1.gif" alt="Albritton Hamily Home Page"> The align attribute sets an image's alignment on the page to left, right or center. Default is left. Text will flow around left or right aligned images. <img scr="button_1.gif" alt="Albritton Family Home Page align=right> The vspace and hspace attributes insert space between the image and the surrounding text when text flows around the image. The value is in pixels. <img scr="button_1.gif" alt="Albritton Family Home Page" align=right vspace=10 hspace=5> The height and width attributes allow the page to load leaving appropriate space for the image. This allows the viewer to begin reading the text while the graphics load. <img scr="button_1.gif" alt="Albritton Family Home Page" align=right vspace=10 hspace=10 height=40 width=400> The border attribute includes a colored border around a graphic when the graphic is used as a hyperlink. Value is in pixels and the default is 3 pixels. Border can be eliminated completely by setting border to 0. This is especially useful for transparent GIF's. <img scr="button_1.gif" alt="Albritton Family Home Page" align=right vspace=10 hspace=10 height=40 width=400 border=0> Looking for graphics? Check out Laura's Graphics & More. She has compiled a list of over 80 sites with some of the best graphics, backgrounds and other neat stuff to help you design your web pages.
Adding BackgroundsBy default pages on the internet generally appear with black text and a gray background. The background can be changed using two attributes to the <body> tag. The bgcolor attribute changes to background color. Value can be the RBG value preceded by a # or the standard color name.<body bgcolor=#FFFFFF> The background attribute allows you to add a background graphic which tiles across the background of the page. I use the bgcolor and background attributes together in the event that my page is visited by someone with a text only browser. <body bgcolor=black background="back.gif"> With changes in the background, you may need to change the text colors and links to make them more visible. These are also changed with attributes to the <body> tag. The text attribute changes to text color for the entire document. (The color attribute to the <text> tag can be used to change the text color in sections of the document.) The value can be RBG or standard color name. <body bgcolor=black background="back.gif" text=white> The link, vlink and alink attribute set the color of hyperlinks which have yet to be visited, have been visited and are active respectively. The value can be RBG or standard color name. <body bgcolor=black background="back.gif" text=white link=red vlink=green alink=pink>
 |
