CODING:

Day 7 PICTURES, Part 2

Coding for images:

SYNTAX:
<img src="path" alt="alternateText"/>
src: source of the image
can be a relative or absolute path to the image file
If image is in the same folder as the page that
contains the tag, then the path is simply the image
filename

alt: alternate text

few words that describe the image for screen
readers for the blind to read aloud

So, it would look like

this:
<img src="hotdog.png"
alt="Hot dog" />
*Anything look different with
this code?

COPY A PICTURE FROM A

WEBPAGE

1. Find a picture on the internet

you can use on your Filename
website.
(no
spaces,
2. Right click on the image.
all

3.SAVE AS

to your

lowercas
e letters)

MyWebsite folder

TRY IT:
1. Open practice.htm in your
editor.
2. Use the correct syntax to add a
photo to your page.

SIZING
What unit of measurement
do we use?

PIXELS

SIZING
Pixels -- one tiny dot of light on your
screen

too tiny to see with the naked eye

zoom in, each pixel a tiny colored
square

100 pixels

about 1 inch (2.5 cm)

YOU decide the size!

use

width attribute in the img tag

width="x

specify only the width; the

height will be calculated
automatically to maintain the
same aspect ratio (ratio of
the width to the height)

So
If I want my picture to be about 2
inches wide on the screen what
would my width attribute be?

width=200
If I want my picture to be about
4.5 inches wide on the screen
what would my width attribute be?

width=450

Try it
Whats the img tag for
displaying the hot dog image with a
width of 100 pixels?
<img src="hotdog.png" alt="Hot dog"
S
width="100" />
P
A
C
E

Wait HEIGHT!
height=

height="y"
specify only height, width
calculated automatically
to maintain original shape

What do you think?

How would I indicate I want my
hot dog image to be 50 pixels
high?
<img src="hotdog.png" alt="Hot dog"
height="50" />

Can ALSO specify both

WIDTH AND HEIGHT

width of 500
height of 50

For example,

and

Any guesses?
<img src="hotdog.png" alt="Hot dog"
width="500" height="50" />

BUT changes original shape,

distorts picture

Watch the sizes!

file size
bytes

-- measured in

File size matters to Web

developers:
The larger a file, the longer it takes to
download, so the longer the visitor
has to wait. Folks can be impatient.
So if they have to wait too long, they
might just navigate away from your
site before they even see the picture.
Most hosting services charge for the
number of bytes your site services. A free
hosting service will often put a limit on
how many bytes you can serve, and it'll
just stop serving if you exceed your limit.
If you use larger files, it's more likely that
you'll exceed your limit.

How many bytes?

Download speed - depends on
Internet connection

GOAL-- not using unnecessarily

huge files

File sizes under 1MB are good

Under half a megabyte (500K)
even better

How do I know?
1. In your folder, right click on
image of the picture you're
thinking of using.
2. Choose Properties.

What do you
Is this image
OK for a website?
think?
1. TIFF file -- not one of the
acceptable file types for
websites
2. Too wide (3648 pixels) -most people probably
browse with their browser
at 1,000 pixels wide or
less.
3. File size (6.7MB) too large.
It's best to keep each
image under 1MBor
better yet, under half a
megabyte (500KB).
4. File name - Short, simple,
meaningful file names that
are easy to type into the
src= attribute are best.

Check
Check the properties of the

hotdog.png
Would you recommend
this image size for use
on a web page? Why
or why not?
image

SHRINKING IMAGES:
1. Open Paint.
2. Choose a file to resize.
3. Click the RESIZE button (or Ctrl
+ W).

SHRINKING IMAGES:
4. Maintain aspect ratio box is
checked so you don't
accidentally change the
shape of the picture and
distort it. Choose Pixels,
and set the pixel width to
whatever you think you
might use in your page. For
example 600px is usually
plenty.
5. Then click OK.
6. Save AS CHANGE THE FILE
NAME to KEEP ORIGINAL.

ACTIVITY
Save 2 photos from the internet.
Resize them to 200 pixels wide.
Write in the code to put them in
your practice.htm website.