MMDT1021 Chapter 5 Notes

MMDT1021 Chapter 5 Notes - page 8

Inserting Images on a Page and Offering Alternate Text

Adding an image

Code	Result
`<img src="world.jpg" />`

Adding alternative text

Code Result

<img src="world.jpg" alt="Second Image Text" />

Code	Result
`<img src="world.jpg" alt="Second Image Text" />`
There is purposely an error in the file name to show you what happens when the image is not able to be displayed. You can see the alternate text being displayed. `<img src="worldx.jpg" alt="Second Image Text" />`

There is purposely an error in the file name to show you what happens when the image is not able to be displayed. You can see the alternate text being displayed.

<img src="worldx.jpg" alt="Second Image Text" />

Adding a border

Code Result

Code	Result
This effect using the border attribute has fallen out of favor as there are now better methods of accomplishing borders around images. However it is being show here for historical reasons. `<img src="world.jpg" border="5" alt="Third Image Text" />`
The modern method is to use the style tag with border properties. `<img src="world.jpg" alt="globe" width="137" height="145" style="border: 5px solid #04661D; border-radius: 10px;" />`

This effect using the border attribute has fallen out of favor as there are now better methods of accomplishing borders around images. However it is being show here for historical reasons.

<img src="world.jpg" border="5" alt="Third Image Text" />

The modern method is to use the style tag with border properties.

<img src="world.jpg" alt="globe" width="137" height="145" style="border: 5px solid #04661D; border-radius: 10px;" />

Specifying Size for Speedier Viewing

If you tell the browser how many pixels wide and high a picture is, the browser can then draw the page quicker.

Code	Page
Here is a page without the use of width= and height= attributes.	Result Source
Here is a page with the use of width= and height= attributes.	Result Source