Image editing

The Learner Guide specifies that your images must be correctly sized for the web. Most Learners simply change the dimensions of the image using the width and height attributes, often causing the image to be displayed out of proportion in the process. This does also not change the file size.

It is worth taking the extra time to learn how to correctly resize an image using an appropriate image editing software such as the excellent GIMP or even one of the online options.

The image should be sized appropriately in both size and resolution, creating an image which has the smallest file size possible.

All of your image tags should have the width and heigh attributes, as well as alt text:

<img src="" width="" height="" alt="" />

You can add a border around the image using the border attribute:

<img src="" width="" height="" alt="" border="" />

Wrapping text

Text can and should be wrapped around images where appropriate. Doing this correctly also counts towards the mark for the correct use of white-space on your web-pages.

Background images

Background images can be problematic in web design as they are often difficult to execute on multiple different screen sizes (or “view portals”).

They also often negatively affect readability of text when the image is not suitable.

Tiling a small image file to create texture effect can be effective.

If you do use an actual picture in the background, once again it may be necessary to use image-editing software such as GIMP to ensure text is legible by changing its opacity (make the picture look faded).

A background image can be added using the following HTML:

<body background="bgimage.gif">

Of course, CSS offers much more control and many more options. Read my CSS primer here.

See the Phase 3 HTML website post for more info on the PAT website for Grade 11 and 12.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.