Unit 8.2 / Lesson 1 / presentation1a Web Elements

When you use the Internet you probably do not notice all the different parts that make up a web page – you just skim the page and move on! But there are a number of different elements:

Background This is the area behind the text and graphics. It is important to have a contrast between text colour and background You can use pictures but text may ‘disappear’ into the background

Navigation - Buttons Some pages use buttons to help you navigate through their site These can be any shape or size but should be labelled clearly

Navigation – HyperText HyperText is text that is highlighted to let you know it is a link The text can be highlighted in many different ways

Navigation – Image Maps Image Maps are pictures that have hotspots as links Move your pointer over a picture and when it turns to a hand, click There is usually a text label to tell you where you are going

Text Areas of text can be placed on a page Make sure font style is readable and a common one Emphasise headings Do not put too much text on a page

Graphics - Still Graphics can be added to ‘break up’ a page of text Usually in the format JPEG, GIF or PNG File size is very important – it should not be too big!

Graphics - Animations Animations can provide a bit of fun but they can also be irritating! They are usually in the format of animated GIFs which are small Animated GIFs are made up of a series of different images Flash animations are also used but tend to be bigger file sizes

Audio Audio files can be very big and can be costly to download Click an audio link and the file plays in your computer’s media player They can be in the format WAV, MIDI, Real Audio, MP3

Video Video files can be very large even for the smallest clip Click a video link and the file plays in the required media player (if it is installed!) They can be in the format MPEG, AVI

Tables Tables are very useful for placing text where you want it They can be used in the traditional way with a border. Or you can take the border away and just use it for positioning the text on a page. That was how this Southampton page was constructed! Here is my ‘invisible’ table