Images
Pictures that you put on your web page are called images. They are usually in the .png, .jpeg (or .jpg) or .GIF formats, which you can create using any number of applications, including Paint (which comes with Windows), GIMP (which is free to download and install), and commerical products such as PhotoShop.
Tags
The tag used for inserting a picture is quite simple:
<img src="graphics/flag.gif" style="float: right">
Positions the picture as so:
You do not need to include the style part if you don't want the text to wrap around the picture. Using float: right will put the picture on the right of the screen. The text will then flow around the left of the picture. Similarly, float: right will place the image on the left and wrap the text around it. You can also include optional height and width values (see below).
The src part gives the name of the file that contains the picture. For the browser to find the picture, you need to either put the file in the same folder as the HTML file, or include the folder name in the tag.
Background Images
You may want to include a background image on your web page. This is a picture that goes behind any text or other pictures that appear on your page, and would most commonly be used to give the background a texture, such as a marbled finish. The picture doesn't need to be as big as your page. If the picture is small, the web browser "tiles" (repeats) it to cover the whole of the background.
You don't use the <img> tag to insert a background image. They are inserted in the <body> tag at the top of your HTML file, again using CSS style definitions, e.g.:
<body style="background-image: url('background.gif')">
Again, you need to make sure that either you include the full path to the file, or that it is in the same folder as the HTML file.
You can also use the <body> tag to change the background and text colours of your web page as follows:
<body style="background-color: #FFFF99"; color: #000080">
These are the colours used on this page (note the American spelling of "color" in the tag). All colours are made up of six digits, two each for the amount of red, green and blue that you want to use.
Because HTML uses a number system called hexadecimal, the digits go from 0 to 9, and then from A-F, so the smallest number is 00 and the largest is FF. The colours work like light, rather than paint; the higher the number the lighter the colour. So, #000000 would give you black, #FF0000 would be bright red, #00FF00 would be bright green, etc.
If you can't be bothered to work out the colour values yourself, you can download a colour mixer from the VisualBASIC section of the site.
Height and Width
When you insert a picture, it appears on the web page the same size as would do when you view it in Paint or Photo Editor. If you want to change the size of the picture without editing the jpeg or GIF file, you can use CSS styles with the <img> tag to set the height and width in pixels. For example, the following HTML tags give the following results:
<img src="graphics/flag.gif" style="width: 50px; height: 50px">
<img src="graphics/flag.gif" style="width: 100px; height: 100px">
<img src="graphics/flag.gif" style="width: 150px; height: 150px">
You don't need to set both the height and the width. If you set one, the other will be set automatically so that the picture stays the correct shape.
You can also set what is called a "relative" size, which is a percentage of the screen size. For example:
<img src="graphics/flag.gif" style="width: 25%">
<img src="graphics/flag.gif" style="width: 50%">
This is also a very useful technique, because it can be used to create other shapes from a single coloured pixel, or combined with "scripting" to generate things such as bar charts, e.g.:
In fact, the multi-coloured bars at the top and bottom of these pages are GIF images that are just 1 pixel high. They are stretched out using the height attribute. This means that small files are needed, saving space on the network, and making the web page faster to load.
NB. Please note that images can also be styled with CSS, and in a lot of cases that would be a better way to do it. There is a video on inserting images and sizing with CSS in my HTML and CSS YouTube playlist.