Download Image Files Are Separate Files

DePaul University
SNL 262
Web Page Design
Chapt 10 - Putting Graphics on A Web
Page
Instructor: David A. Lash
AdvWeb-1/12
Image Files Are Separate Files
Lion.gif
mypage.html
<P>Welcome</P>
<image src=lion.gif>
Welcome
Displays
as:
AdvWeb-2/12
Placing Image on a Web Page


Image files are typically saved in separate,
external files from the HTML text.
You need to include the image files from the
HTML text
–

The basic command to include images is:
<img src="elivs.gif">
You can also use an absolute address to the
image:
<img src="www.depaul.edu/~dlash/surfer.gif">

Typically copy the image to your server area and
use local address.
AdvWeb-3/12
Getting Images to Put On Your
Web Page

There are many sites on the WWW
–
–

http://dir.yahoo.com/Computers_and_Internet/
Graphics/Clip_Art/
http://www.web-animator.com/
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.
Warning some images have copywrite
protection!
AdvWeb-4/12

The Save As … Dialog box
AdvWeb-5/12
Types of Graphic Files
- 2 major file formats for WWW graphic images
–
GIF (Graphic Interchange Format) - uses 8 bit
or 256 possible colors.
Particularly good for areas of flat colors like
logos, cartoons, icons.
Does not good for photographic images since
it reduces all images to 256 colors.
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)
Uses a 24 bit RGB color information, (displays
8 bit colors on 8bit color systems)
ideal use for photographs. Not good at
compressing images with solid colors such as
logos, line art and cartoons.


AdvWeb-6/12
The ALT Attribute:


Use Atl= inside the <image> tag, to define some
alternative text to display
For example:
<image src=“hi.gif” ALT="your message here”>
–
–
–
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:
<img SRC="calvin1.gif" ALT="This Is Calvin" >
AdvWeb-7/12
Making an image “clickable”

Any image can be made to be “clickable”
–

That is, when click image it takes you to another
link.
Combine the Anchor tag with image src to make
an image click able:
<A HREF=http::/www.disney.com"><IMG SRC=sebastin.gif"></A>
The
destination
link
Sebastin example click here
AdvWeb-8/12
The
image file
that will
load.
Horizontal And Vertical Alignment

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:
<DIV ALIGN="left">
<Img SRC="snoopy.gif">
</Div>

The following will align the image left but not allow
text to wrap around it giving it a different feel:
<img align="left" src="snoopy.gif">

Click here to see an example of using the DIV tag to
align left right and center.
Click here for a snoopy example
AdvWeb-9/12
The Height and Width Attribute of
Image Tag

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.
You can help this process out by specifying the
HEIGHT and WIDTH of image in the IMG tag. E.G,
<img SRC="snoopy1.gif" height=32 width=30>


The browser can therefor not worry about the size o
the image, display the HTML right away (giving
impression of faster page loading), and then
download graphics.
You can use the height and width attributes to
change the size of the image:
<img SRC="snoopy1.gif" height=60 width=56>

For example, snoopy.gif created bigger
AdvWeb-10/12
The Size Of Graphical Images



Large graphical files take longer to download across
network than small.
If images are too long, people won't hang around to
wait for page to load.
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
You can use explorer to look at size of files
AdvWeb-11/12