1. CS 200 – Graphics in Web Pages Banners, Bullets, Backgrounds, and Images

2. Where are Graphics in Web Pages? Banners & Mastheads Links & Buttons Bullets Background Image ("wallpaper") Photos in main content Image Maps (click areas for links) Some Terminology about Graphics (see next few slides) Bit-mapped image Vector images Layers

3. Bit-Mapped Images Every dot is remembered – Also called "raster graphics" – Created by programs such as MSPaint – Good for photos – Lines get "the jaggies" when enlarged (downside) – GIMP uses bit-mapped images

4. Vector Graphics "Formulas" are remembered for each line, square, circle, etc. – Created by Word, PowerPoint, Flash Flash can create a mixture of bit-mapped and vector graphics – Good for diagrams, etc. – Can enlarge to any size without distortion

5. Overall goal: Graphics Many Places First task: Use the Supplied Graphics

6. HTML tag: If image is at another location (don't forget the http://) If image is on your own computer

7. So … code for the masthead

8. Kompozer Can Assist Position the cursor and add an image

9. Set size Two ways: Attributes (older method) Styles (newer method)

10. Using an image for bullets Images as bullets are done with a style and "normal" and tags: ul { list-style-image: url("bullet999.png") ; } Diamonds Necklaces

11. Animate Gif Same as other graphics: (image changes)

12. Background on whole page This is a style for body tag: body {background-image: url("background999.jpg") ; }

13. Float To make an image float left or right (and allow words around it): <img src=" x x.jpg" style="float: right;" />

14. Construct the page Construct the sample page. Then, the rest of the lab is to construct your own graphics and substitute them for the "999" images.

15. Stopping a "float" The table sometimes appeared adjacent to the paragraph with the floated image. To force the table down (technically to stop the float), use: