1 / 12

Images and Web Pages

Images and Web Pages. Masters Project CS 490. Two Major Types. Inline images Automatically appear on the Web page Graphic file name is part of HTML code External images Not directly displayed on the Web page Downloaded file viewed in an image editor or viewer. File Formats. GIF

halla-sykes
Download Presentation

Images and Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Images andWeb Pages Masters Project CS 490

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

  3. File Formats • GIF • Graphics Interchange Format • JPG or JPEG • Joint Photographic Expert Group • PNG • Portable Network Graphic

  4. .GIF • Recommended for small images with few colors and blocks of the same color • Developed by CompuServe • Uses LZW compression • Compresses large blocks of the same color • Indexed color • Custom palette of <256 colors • Interlaced Format Option

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

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

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

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

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

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

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

  12. Images & Links • Images can be click able links: • <A HREF=“coffee.htm”> <IMG SRC=“cup.gif”> </A> • 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>

More Related