Everyone likes to see images in any presentation. Whether it's a picture of the author, renderings of research or graphs, they can convey a lot of information in a small space. This is what the web was created for!
Including an image on a web page is easy, we simply use <img src="myimage.jpg"> to place the picture in file "myimage.jpg" on the page. As with all file references it can be either a relative path like this, or a full URL. Note that as all the information is included in the tag, there's no need for a closing tag.
By default any text after the <img> tag will
be displayed underneath the image. If we want the text to be displayed
alongside the image then we can use the align attribute
with either align="left" or align="right". The
space to the side of the image will be filled up by the subsequent
text.
It's a good idea to include some alternative text in case the image
itself cannot be displayed. This may be because the page is viewed
with a text-only browser such as Lynx, but these days it is more
likely to be because of a specialist browser for the
sight-impaired. For this reason the text should describe what the
image is there for, rather than simply describing the image
itself. This text can be included in the <img>
tag using the alt attribute.
One of the drawbacks to putting images on web pages is that they require the browser to be able to interpret the file format. The most widely used image file formats are JPEG/JPG and GIF, and if you stick to these you won't go far wrong. JPEG files are very good for compressing photographs, producing small images that still look good. GIFs are good for compressing files that have fewer, more striking features such as graphs and line art. Portable Network Graphics (PNG) files are like GIFs but with many useful extensions such as support for more colours (GIFs are limited to 256) and transparency, but some browsers have problems displaying them correctly.
You should beware of littering your pages with too many images. A few images can add clarity, beauty, and a lot of useful information to a page; too many can lead to a page looking crowded, confusing and garish. Also remember that not everyone may be viewing your page over broadband or a T1 connection, and including many large images will severely hamper their appreciation of your page.
You can also make an image a link to another page. Simply put the
<img> inside the
<a>...</a>.
Since underlining an image makes little sense, most browsers will indicate that an image is a link by adding a border that's the same colour as the link colour. You can often prevent this if you do not want it by using <img border=0>; similarly you can request a border be put round an image using <img border=2> (for a border two pixels wide).
You should have access to an image of yourself in a portable format such as jpeg or GIF. Copy it to your University web space and include it in your home page. Your web page might look something like this.
You can also create a `figure', using the <figure>...</figure> tags. This allows you to add a caption to the figure with a <figcaption>...</figcaption>. A typical HTML figure might be something like:
<figure>
<img src="my_graph.png" alt="A graph showing that y increases with x">
<figcaption>Fig. 1 My soon-to-be prize-winning results</figcaption>
</figure>
| Previous page | Next page |