Putting Images on Your Web Page Tags, Attributes & Considerations

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

Attributes Considered in a Bit More Detail

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

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

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

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

Styling an Image Controlling images with style sheets

No Style, <p> and <img> separate

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

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

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

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

Border

Padding

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)

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

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

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

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

Border Radius

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

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