Images and Web Pages Masters Project CS 490

Images and Web Pages Masters Project CS 490 Kevin Murphy

Two Major Types n Inline images - Automatically appear on the Web page - Graphic file name is part of HTML code n External images - Not directly displayed on the Web page - Downloaded file viewed in an image editor or viewer Kevin Murphy

File Formats n GIF - Graphics Interchange Format n JPG or JPEG - Joint Photographic Expert Group n PNG - Portable Network Graphic Kevin Murphy

. GIF Recommended for small images with few colors and blocks of the same color n Developed by Compu. Serve n Uses LZW compression n - Compresses large blocks of the same color n Indexed color - Custom palette of <256 colors n Interlaced Format Option Kevin Murphy

. JPG n The best format for photographs and images with subtle tones of color n Compresses by combining some subtle shades into one shade n Lousy compression Kevin Murphy

. PNG n Developed in 1995 with the intention of replacing GIF files n Based on a public-domain version of LZW that results in 10 -30% file size reduction Kevin Murphy

The <IMG> Tag n One-sided tag <IMG> (no closing tag) n SRC attribute specifies the filename (and path) of the image n Other attributes: HEIGHT, WIDTH, ALT, (deprecated) ALIGN, HSPACE, VSPACE n For spacing place the <IMG> tag within <P> and </P> tags Kevin Murphy

Sample <P> <IMG SRC=“cup. gif” ALT=“Cup Logo”> </P> Kevin Murphy

Other Attributes n ALT=“(Text shown when graphics turned off)” n WIDTH=(pixels), HEIGHT=(pixels) - specify size of graphic n HSPACE=(pixels), VSPACE=(pixels) - specify space open on each side, top/bottom of graphic n ALIGN=(position of graphic on page) Left or right ALIGN=(position of graphic on line) Kevin Murphy

<IMG> Syntax For a graphic in a line of text: <IMG SRC=“images/tasten 2. gif” ALIGN=top WIDTH=100 HEIGHT=100 HSPACE=20 VSPACE=20 ALT=“Abigail’s Restaurant Logo”> Kevin Murphy

<IMG> Syntax To wrap text next to a graphic: <IMG SRC=“images/tasten 2. gif” ALIGN=right WIDTH=100 HEIGHT=100 HSPACE=20 VSPACE=20 ALT=“Abigail’s Restaurant Logo”> Kevin Murphy

Images & Links n Images can be click able links: - <A HREF=“coffee. htm”> <IMG SRC=“cup. gif”> </A> n A small thumbnail can link to the full size graphic: - <A HREF="abi. gif"> <IMG SRC="abi. gif" ALIGN=top WIDTH=20 HEIGHT=20 ALT="logo"> </A> Kevin Murphy