Image editing

Read more about HTML’s <img> tag in this post: The <img> tag.

The PAT Learner Guide specifies that your images must be correctly sized for the web. Many 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.

In this post:

  1. Creating website graphics
  2. Editing website graphics
  3. Coding images
  4. Background images

1. Creating website graphics

Working in fully-featured graphics software such as PhotoShop and GIMP is not a simple matter and even the most straightforward tasks can be quite difficult to execute. For this reason, I recommend using something you are already familiar with that will produce more than adequate results: PowerPoint! Read more here: Using PowerPoint to create graphics.

2. Editing website graphics

Windows users can open up images in Paint or Paint 3D to perform basic tasks such as resizing an image file. 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 such as Canva.

3. Coding images

Images should be coded using the HTML tag, <img>. The <img> tag has one required attribute, href, which determines the image to be included in the webpage. All images must also have width and height attributes, as well as alt attributes for accessibility.

<a href="" width="" height="" alt="" />

4. 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 the readability of text when the image is not suitable.

Tiling (repeating) a small image file to create a 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).

See the Pen HTML <body> background image by David Fox (@foxbeefly) on CodePen.

<body background="repeating_image.gif">

See the post Phase 3 HTML website post for more info on the PAT website for Grades 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.