Lorian Network | Building | Graphics
|
|
|||
| Intro to Graphics. | Standard HTML has the capability to include graphic images within the web page. The image itself it not part of the HTML web page file, only a reference to the graphic file is included. In essence, the HTML page says, "Put this image HERE." | ||
|
|
|||
| What kind of graphics can I use on a web page? |
Web browsers can deal with two basic types of graphics, "GIF" (Compuserve GIF) and "JPG" images. To be recognized, the images file name must end with ".gif" or ".jpg" as appropriate. Most common graphic manipulation programs can create either of these file types, or convert to them from other types. | ||
|
|
|||
| What is the difference between a GIF and a JPG image? |
GIF images are usually used for small graphic elements that use a limited number of colors. Notice that the photograph below doesn't look very good saved as a "GIF" file. |  |
JPG images are usually used for photographic images or those with subtle gradations in color. The photograph below looks much better as a "JPG" file. |
| Photograph as a GIF and as a JPG |
 |
 |
|
|
|||
|
In spite of looking worse, the GIF file above is larger, at about 10 Kb in size. However, the graphic image below,a button, a GIF looks as good as the JPG version to the right. In this case, the GIF is smaller, only about 0.7 Kb. Use GIF's for simple graphic design elements. |
The JPG file is smaller, taking up only about 6.5 Kb so it will not only look better, it will load faster. With the buttonf image below, the JPG format doesn't do as well. It looks fine, but takes up 1.7 Kb, more than twice the size of the GIF. Use JPG's for photographs and photograph-like images. |
|
|
|||
| Design graphic as a GIF and as a JPG. |
 |
 |
|
|
|
|||
| How do you include a graphic image reference in HTML? Click here to see this HTML as a web page |
<html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>Simple Web Page with Graphic</title> </head> <body> <p>This is a very simple web page with a graphic image.</p> <p><img src="media/mountain.jpg" width="240" height="180" border="0"></p> <p>Click on your browsers BACK button.</p> </body> </html> |
||
|
|
|||
| Are GIF's and JPG's the only kind of graphic files that can be used? |
No, although the majority are GIF's and JPG's. There is a movement in the web community to replace GIF's with a newer format, PNG that is more flexible. Most modern browsers can understand PNG files and most graphic manipulation programs can convert to them as well. So we'll probably be seeing more of them in the future.
Other types of graphics can be used, but requre the use of special browser plug-in's to display. |
||
|
|
|||
USING HTML |
 ADDING SSI'S |
||
|
|
|||
| Main | Services | Rates | Equipment | Accounts | Contact | Building | Samples | Support | Resources | News |