Image File Formats

There are three main types of image available to include in a web site:

GIF files (Graphics Interchange Format) – An image format limited to 256 colours.  Therefore GIFs are most useful for images with few colours or large areas of flat colours such as company logos, maps or charts.  GIF files do support transparency but only one colour can be transparent.  They can also be animated. Becoming less popular with the rise of the PNG (see below) – apart from on Twitter where the animated GIF is a cause of much hilarity.

JPEG (Joint Photographic Experts Group) – You may be familiar with this format through digital photography as most digital cameras will save to this file format.  JPEG files can be saved using a huge amount of different colours therefore making them ideal for photographs.  JPEG do not support transparency.

PNG (Portable Network Graphic) – The newest format to emerge.  Supports more than 256 colours and also multi-colour transparency. Used for the app icons on your favourite smart phone.

Attributes

Adding images and hyperlinks require us to add attributes to HTML elements.  Attributes are additional properties that can be associated with a particular HTML element.  With images and links we need to use attributes to indicate which image we want to use or where it is that we would like to link too.

Each HTML element has a list of prescribed attributes that can be set.  These are placed inside the opening angle brackets. The vast majority of attributes consists of a property and value.  The value should be placed in quotes ie


<img src="images/logo.png">

Relative and Absolute Paths

An important concept to understand in web design is the difference between relative and absolute paths.

Absolute Paths  – An absolute path is one that contains the full URL of the page to be linked to or the image to be included in the file.  An absolute path leaves no room for dispute as to its location on the internet.  An example of an absolute path is:

http://www.mywebsite/section2/introduction.html

Absolute paths are most commonly used when you link to a page external to your own web site.

Relative Paths – A relative path finds its way to a particular file based on its starting point.  Relative paths can therefore be shorter than absolute paths but care needs to be taken to ensure the route taken is correct.

Images

Images are added with the <img> tag.  The src attribute is used to indicate which particular image we want to use.  The src is short for source and is the path to the image we wish to use.  The path to the image can be absolute or relative.


<body>
<img src="images/logo.png">
</body>

Other attributes that you are likely to use with an image include width, height and alt.  The widthheight indicate the dimensions of the image to be referenced and help speed up page loading.  The alt attribute is used to provide alternate text for users who cannot see the image.  It is also useful for improving your pages search engine ranking. This is a common SEO (Search Engine Optimisation) technique.

Attributes can be placed in any order but must be separated from each other by a single space.  Therefore a fuller example of the HTML required to insert an image would be:

<img src="images/logo.png" width="200" height="150" alt="Sheffield Winter Gardens">

The values for width and height are in pixels. You do not need to explicitly declare them as been in pixels.  As stated above the actual order of attributes does not matter but generally web designers will place src first as this is the most important attribute to use with the <img> tag.

Adding Hyperlinks

The <a> anchor tag is responsible for adding hyperlinks.  The <a> tag can be placed around both text and images to make them hyperlinks.  Like the <img> tag, the <a> tag needs attributes to make it do anything interesting.  The main attribute associated with the <a> tag is <href> which stands for hypertext reference.  This is the location of the file you wish to link to entered either as an absolute or relative path.

An absolute path example would be:

<a href="http://www.shu.ac.uk">
Link to Sheffield Hallam University
</a>

Assume we have a file called ‘index.html’ and we want to link to a page call ‘about.html’ that is in the same folder then the relative path would be:

<a href="about.html">
About the Building
</a>

If the ‘about.html’ file was in a folder called ‘facts’ that was below the current location of the file containing the link the path would be as follows:

<a href="facts/about.html">
About the Building
</a>

If the ‘about.html’ file in the ‘facts’ folder linked back to the ‘index.html’ page in the folder above it then the path would be as follows:

<a href="../index.html">
Home
</a>

The double dots take the browser back up a directory to find the ‘index.html’ page.

Another trick with a relative path is to add a backslash at the beginning. The backslash has the effect of making the path relative to the root of the web site. That is you are basically navigating to the top of the tree structure and then winding you way down from that point.

<a href="/facts/about.html">
About the Building
</a>

In the above example the link will look for a subfolder at the top of the file structure called ‘facts’. The benefit of relative paths like this is that you do not need to worry about the domain name on which the files are held.

<a href="/facts/about.html">
About the Building
</a>

The above example could be the same as the following.

<a href="http://www.mustbebuilt.co.uk/facts/about.html">
About the Building
</a>

Or it might be equal to:

<a href="http://www.someother.com/facts/about.html">
About the Building
</a>

It just depends which server the file is placed on.

Another attribute of the <a> tag is title.  This adds a screen tip when the user places their cursor over a link in the browser.  An example of a hyperlink with the title attribute would be:

<a href="facts/about.html" title="Learn About the Building">
About the Building
</a>

When you make text a hyperlink it will appear blue and underlined.  If you have visited that page already it will appear pink.  The underline effect and colours are default styling, that as we will see later, can be changed by the addition of some CSS.

Tip: Surely links use the <link> tag? Well there is a <link> tag, but it is used for attaching CSS (stylesheets) to the HTML document.

Leave a Comment