Lesson 4

Graphics for the Web

It is amazing, but you already know most all of the tags you need to create a great looking web page. Really! Now all you need is some information on adding graphics to your web page. There are basically 3 main graphics formats for the web. They are: GIF, JPEG, and PNG. These are fully supported by the major browsers. You should become familiar with these formats and when to use each one. The book has a great explanation of these file formats.

One thing you will need to remember about graphics in your web page. Graphic files are linked to your document and not included. What does this mean? When you create a word processing document in a program like Microsoft Word or Corel Wordperfect, any images you place in your document are embedded in it. When you save your word processing document the file is saved with it, inside of it. All you have is one file with all your text and all your images. When you place the image tag <img> in your HTML document, then you are only referencing it. So you must also upload/ftp this image when you upload/ftp your web page. The cool thing about this, is that you can reference these graphic files from anywhere on the web.

Readings

Day 7 Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days. ISBN 0-672-32519-5

Elements & Tags

<img>

Activities

Go through the examples in day 7. They will provide you with a great background of using images. The CD that came with your book has a folder on it called "examples." These examples are arranged by day in the book. You can use the images there to build along with the book.
Build a web page that contains at least 3 graphics/images along with text. You may use any graphic from the book cd, any website, or other graphics you have available to you. If necessary, size them appropriately. Your images should contain the ALT element. This provides text alternatives to those who use a screen reader. FTP the folder with this page and your images to your directory on the class website. Be sure to test it out by using your browser to navigate to the site on the web. Your website should have a purpose, and not simply three images to complete this assignment. Search the internet for clip art and other sites that offer free clip art, pictures or other graphic elements you might be able to use on you web page. Share at least one of these sites with the class by posting your find in the lesson 4 discussion area.

Resources

Overview of Graphics formats

HTML tutorial

Reflective Questions

When would you save an image as a JPEG rather than a GIF?