This post is specifically aimed at completing the HTML website section of the DBE PAT. As such, the HTML is in line with the curriculum and is not necessarily best-practice or valid by modern (HTML5) coding standards.
All images should be sized appropriately in both physical dimensions (width & height) and resolution, creating an image that has the smallest file size possible. Read the post Editing images for your website for more help. Read the post The <img> tag for more.
In this post:
1. General
All of your image tags must have:
- the correct
srcattribute, - the
widthandheightattributes, alttext.
<!-- the default unit for width and height is pixels --> <img src="ice-cream.png" width="400" height="200" alt="A selection of mouth-watering, artisanal gelati." />
2. Image borders
You can add a border around the image using the border attribute:
<!-- use integers for the border value - the higher the value the thicker the border --> <img src="" width="" height="" alt="" border="1" />
3. 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.
Images and paragraphs are both block-level elements. This means they will automatically never occupy space next to each other — the one will always be above the other. To change this, we can use the align attribute for the <img> tag:
<img src=”ice-cream.jpg” align=”right” /> <p>This paragraph of text flows on the left of the image - the image will appear to float on the righ-hand side of the page.</p>
See the Pen HTML Images by David Fox (@foxbeefly) on CodePen.light
Again: CSS offers far more effective techniques to achieve this type of formatting.
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 the same image horizontally & vertically to fill an area) a small image file to create a texture effect can be effective. A small image will be tiled automatically.
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">
See the Pen HTML background image by David Fox (@foxbeefly) on CodePen.light
Of course, CSS offers much more control and many more options. Read my CSS primer here.