AdvWeb-1/12 DePaul University SNL 262 Web Page Design Chapt 10 - Putting Graphics on A Web Page Instructor: David A. Lash

AdvWeb-2/12 Image Files Are Separate Files Welcome Lion.gif Welcome mypage.html Displays as:

AdvWeb-3/12 Placing Image on a Web Page u Image files are typically saved in separate, external files from the HTML text. u You need to include the image files from the HTML text – The basic command to include images is: u You can also use an absolute address to the image: u Typically copy the image to your server area and use local address.

AdvWeb-4/12 Getting Images to Put On Your Web Page u There are many sites on the WWW – Graphics/Clip_Art/ Graphics/Clip_Art/ – u General Procedure To Copy Web Graphic From Web Page to Hard Drive – Place your curser on the graphic to save. – Right click with your curser on the graphic to display a pull down menu. – Pull Down to Save Image As. – Fill in the "Save As..." information (See below). – Hit the Save button to save. u Warning some images have copywrite protection!

AdvWeb-5/12 The Save As … Dialog box

AdvWeb-6/12 Types of Graphic Files - 2 major file formats for WWW graphic images – GIF (Graphic Interchange Format) - uses 8 bit or 256 possible colors. u Particularly good for areas of flat colors like logos, cartoons, icons. u Does not good for photographic images since it reduces all images to 256 colors. u On a side note, Unisys holds the patent on the compression method that gif files uses. – In 1994, announced will charge for sites using GIF, causing people to move towards nonproprietary format. – JPEG (Joint photographic Experts Group) u Uses a 24 bit RGB color information, (displays 8 bit colors on 8bit color systems) u ideal use for photographs. Not good at compressing images with solid colors such as logos, line art and cartoons.

AdvWeb-7/12 The ALT Attribute: u Use Atl= inside the tag, to define some alternative text to display u For example: – Where your message here will display on older browsers that don’t display graphics. – Also displays this message when you point to the image. – For example look at Calvin example Created by the following line:

AdvWeb-8/12 Making an image “clickable” u Any image can be made to be “clickable” – That is, when click image it takes you to another link. u Combine the Anchor tag with image src to make an image click able: Sebastin example click hereexample click here The destination link The image file that will load.

AdvWeb-9/12 Horizontal And Vertical Alignment u Need to use a separate tag to properly wrap text around an image. For example may want the image to be on left and text wrap around it properly: u The following will align the image left but not allow text to wrap around it giving it a different feel: u Click here to see an example of using the DIV tag to align left right and center. Click here for a snoopy examplehere for a snoopy example

AdvWeb-10/12 The Height and Width Attribute of Image Tag u As pages download, a browser first downloads the HTML code to figure out how to lay out page. – If there are images must then download the images to see how big they are to properly lay things out. u You can help this process out by specifying the HEIGHT and WIDTH of image in the IMG tag. E.G, u The browser can therefor not worry about the size of the image, display the HTML right away (giving impression of faster page loading), and then download graphics. u You can use the height and width attributes to change the size of the image: u For example, snoopy.gif created biggersnoopy.gif created bigger

AdvWeb-11/12 The Size Of Graphical Images u Large graphical files take longer to download across network than small. u If images are too long, people won't hang around to wait for page to load. u On a 28.8 KB modem connection each 1 KB of size takes about 30 seconds to download. – 1 KiloByte (KB) => 1024 bytes – MegaByte (MB) => 1,024 KB => 1,0048,576 bytes – 1 GigaByte (GB) => 1,024 MB => 1,073,741,824 bytes u You can use explorer to look at size of files