Unit 8.2 / Lesson 1 / presentation1a Web Elements.

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