MMDT1021 Chapter 5 Notes

MMDT1021 Chapter 5 Notes - page 10

Adding Space around an Image

No Space

Code Result

This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

Code	Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.	This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

hspace="25"

Code Result

This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" hspace="25" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

Code	Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" hspace="25" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.	This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

vspace="25"

Code Result

This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" vspace="25" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

Code	Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" vspace="25" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.	This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

hspace="25" vspace="25"

Code Result

This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" hspace="25" vspace="25" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

Code	Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" hspace="25" vspace="25" /> This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.	This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

Scaling an Image

True Image.

Code	Result
`<img src="world.jpg" width="137" height="145" alt="True globe" />`

Double size. What happens when you scale up? Pixilation occurs and the image quality looks poor.

Code	Result
`<img src="world.jpg" width="274" height="290" alt="Bigger globe" />`

Double width, half height.

Code	Result
`<img src="world.jpg" width="274" height="72" alt="Squished globe" />`

Scaling to half size. The image quality is fine, but this is not recommended. Why not? Consider file size and download time.

The original file world.jpg is 14.5KB

Code	Result
`<img src="world.jpg" width="68" height="72" alt="Incorrect thumbnail" />`

This is the correct method. Resize the image in your graphics editing software to half size.

The new, reduced size file worldsm.jpg is 2.2KB. This is a major reduction in file size and download time savings. Notice that reducing an image's dimensions by 1/2 reduces file size 4 times smaller or more.

Code	Result
`<img src="worldsm.jpg" width="68" height="72" alt="Thumbnail" />`