Lesson 4
Document Actions
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?
