1. Putting Images on Your Web Page
Tags, Attributes & Considerations

2. img Tag src  specify the file name & extension of the picture
width & height  of the picture in pixels
alt  Short description of the picture in words

3. Attributes
Considered in a Bit More Detail

4. src Filename is case-sensitive Spaces in filename cause problems
Naming convention for us:
Keep filenames fairly short
Separate words with hyphens
Filenames should make sense to describe image

5. Where should the file actually be located
The pictures are still separate from the page
If src=“filename.jpg”….
filename.jpg sits directly next to the web page in the SAME folder
If src=“images/filename.jpg”…
filename.jpg sits inside a folder called images that is in the same folder as the web page

6. height & width Why specify?
So browser knows how much space to leave for the picture as the page renders
Click on pic in folder to see its Dimensions

7. Description of what the picture shows Why?
alt
Description of what the picture shows
Why?
some of your visitors cannot see images
alt attribute is of great help for those
search engine bots can use this info

8. Styling an Image
Controlling images with style sheets

9. No Style, <p> and <img> separate

10. No Style, <img> is Child of <p>
Next to text – but only 1st line of it

11. Floating Left Note – for float to apply as shown, the image
Must occur BEFORE the text.
Floating Left

12. Floating Right Note – for float to apply as shown, the image still
Must occur BEFORE the text.
Floating Right

13. Increase space next to picture
Margin
Just consider the image as a box-model object
Increase space next to picture

14. Border

15. Padding

16. Adds a shadow to any box-model object
Box-Shadow
The Shadow
Adds a shadow to any box-model object
Amount out to right (make negative to go left instead)
Amount out to bottom (make negative to go up from top instead)

17. Adds a shadow to any box-model object
Box-Shadow
The Shadow
Adds a shadow to any box-model object
Color (optional)

18. Amount of blur (optional)
Box-Shadow
The Shadow
Adds a shadow to any box-model object
Amount of blur (optional)

19. Higher Number = Rounder
Border Radius
Corners Rounded
Can apply to any box-model object
Higher Number = Rounder

20. Border Radius – Shorthand
4 values: top-left, top-right, bottom-right, bottom-left
3 values: top-left, top-right and bottom-left, bottom-right
2 values: top-left and bottom-right corner, top- right and bottom-left corner
1 value: all four corners are rounded equally

21. Border Radius

22. Accessibility Issues to Keep in Mind
Don’t let pictures be the only representation of important text content.

23. Words in Graphics
Able to make fancy words
Not considered as same structure of page
Whereas words will have semantic meaning to structure, pics will not