adding images
5 questions
- Who
- What
- When
- Where
- How
who
- Everyone must be able to
access the contents of an image - From those with perfect vision
to blind people using speech
what
3 general image types:
- JPG
- GIF
- PNG
.jpg
- Compressed
- Flat
- Photographs
.gif
- Blocks of color
- Transparency
.png
- Best of both worlds
- Good support
when
- To support text content
- Show a photograph
- Informational diagram
(i.e. detailed graph, chart) - Show company logo
when not
- Show anything that is text
- In place of more accessible content
where
- In the <body> of HTML
- In the CSS as a background image
how
- With code, silly!
<image>
<img>
<img/>
self-closing, empty or void tags
these tags cannot have any content
<img>
what goes here?
</img>
well?
- Source of the image?
- Image dimensions?
- Alternative text to make
the image accessible? - Image styles?
- Hyperlinks for that image?
wrong
<img />
<img source />
<img src />
<img src=""path"" />
<img src=""photo.jpg"" />
<IMG
src=""photo.jpg""
alternative text
/>
<IMG
SRC=""PHOTO.JPG""
alt
/>
<IMG
SRC=""PHOTO.JPG""
ALT=""Photo of something""
/>
<IMG
SRC=""PHOTO.JPG""
ALT=""PHOTO OF SOMETHING""
width
/>
<IMG
SRC=""PHOTO.JPG""
ALT=""PHOTO OF SOMETHING""
WIDTH=""amount in pixels""
/>
<IMG
SRC=""PHOTO.JPG""
ALT=""PHOTO OF SOMETHING""
WIDTH=""300""
/>
<IMG
SRC=""PHOTO.JPG""
ALT=""PHOTO OF SOMETHING""
WIDTH=""300""
height=""300""
/>
put it all together
<img src="photo.jpg" alt="Photo of something" width="300" height="300" />
so what's this icon?
broken images
- SRC attribute points to missing file
- Each browser displays a different thing
- Broken image icon
- Question mark
- ALT text if it exists
- Red 'X'
remember
- Double-check your image paths (the SRC)
- Test pages in the browser to verify links
are correct and nothing is broken - Always provide ALT text for your media
exercise
Recreate the page on the next slide using your own images.
Note that each image links to another website.
