7/27/2019 Basics Ofweb

1/28

Web Page Basics

7/27/2019 Basics Ofweb

2/28

Designing Web Pages

When you visit a website/

webpage and it fails to

load quickly, what do

you do? Why wont a webpage

load quickly?

Do you like to use the

scrollbar on a webpage;

up to down; left to right?

7/27/2019 Basics Ofweb

3/28

Factors to Consider

Monitor Resolution

640 X 480 pixels per inch

800 X 600

1024 X 768

1152 x 864, etc.

7/27/2019 Basics Ofweb

4/28

Factors to Consider (Cont.)

Colour

16 colours (4 bit)

256 colours (8 bit)

Thousands of colours (High Color16 bit)

Millions of colours (True Color24bit)

7/27/2019 Basics Ofweb

5/28

Factors to Consider (Cont.)

Graphics/ Images

size in kilobytes or

megabytes

graphic/ image formats

JPEG

GIF PNG

7/27/2019 Basics Ofweb

6/28

Factors to Consider (Cont.)

Animation

Animated Gifs

can be viewed without a plugin

Other types of Animation

Macromedia Flash (FlashPlayer)

Director/Authorware(Shockwave)

7/27/2019 Basics Ofweb

7/28

Factors to Consider (Cont.)

Browser Plugins

Adobe Acrobat

Real Player

Quicktime Cosmo Player

Video dan Audio

bandwith issue

7/27/2019 Basics Ofweb

8/28

What is a web site?

Collection of files or

documents in HTML format

(hypertext mark-up

language) - aprogramming language

All files are called html files

Extension - .htm or .html

WYSIWYG editor

7/27/2019 Basics Ofweb

9/28

Home pagesaved as

index.htm(l)browsers will

automatically display.

Other pagesname foreasy recognition

7/27/2019 Basics Ofweb

10/28

Use lower cases

Use short names

Use underscore if two

words. syllabus_mei2002.html

7/27/2019 Basics Ofweb

11/28

Hyperlinks - relative

From one page to another

page in the same location

(internal)

index.html to syllabus.html From one part of a page to

another part of the same

page (anchor/bookmark)

7/27/2019 Basics Ofweb

12/28

index.html

syllabus.html read.html

refer.htmlassign.html

Relative links

http://www.uum.edu.my/gl5013/

7/27/2019 Basics Ofweb

13/28

Click to go

to syllabus

index.html syllabus.html

http://www.uum.edu.my/gl5013/index.html

http://www.uum.edu.my/gl5013/syllabus.html

7/27/2019 Basics Ofweb

14/28

Clickhere

to download

index.html Nota.docx/pptx, etc

Link to files of other formats

7/27/2019 Basics Ofweb

15/28

#bottom

anchor/bookmark

http://www.uum.edu.my/gl5013/syllabus.html

http://www.uum.edu.my/gl5013/syllabus.html#bottom

7/27/2019 Basics Ofweb

16/28

Hyperlinks - absolute

Link from a page /site to

another page at another

site (external)

Change in URL (location)

7/27/2019 Basics Ofweb

17/28

Click to go

to The Star

Absolute links

http://www.thestar.com.my/news.html

http://www.uum.edu.my/gl5013/index.html

index.html news.html

7/27/2019 Basics Ofweb

18/28

Navigation

Need a good navigation

structure

Help the users browse

through easily Does not confuse or lost

Make link on texts or

graphicsClick here to go home

7/27/2019 Basics Ofweb

19/28

Navigation (Cont.)

7/27/2019 Basics Ofweb

20/28

Linearthe sequence isfixed to ensure users gothrough the determinedsequenceno choice insequence is given.

Eg. Students must masterTopic A before they canunderstand topic B.(teachers determinesequence based on theirexpertise)

7/27/2019 Basics Ofweb

21/28

Hierarchicalsuitable for

presenting information

which are arranged in

nested order containingsubtopicschoices in

sequence are allowed

7/27/2019 Basics Ofweb

22/28

Non-linearsequence not

determineusers make

own choice of sequence

of learning

7/27/2019 Basics Ofweb

23/28

Compositea

combination of linear,

hierarchical and non-linear

sequences Content expert determines

which topic is linear or

hierarchical or non-linear

bases on learningrequirement

7/27/2019 Basics Ofweb

24/28

Links

Clickhere to go to Ministry of

Education OK

Click here to go to Ministry of

Education OK

http://www.moe.gov.my X

7/27/2019 Basics Ofweb

25/28

7/27/2019 Basics Ofweb

26/28

Use appropriate language

level for intended

audience

Use graphics as necessaryand appropriate

Clear instruction

7/27/2019 Basics Ofweb

27/28

Interactivity

Important feature in

CBI/WBI

2-way communication

between computer andusers

Allows users to provide

input and provide

feedback to users

7/27/2019 Basics Ofweb

28/28

Web vs Courseware (CD)

http://www.st-

and.ac.uk/ITS/CAL/newslet

ter/5/comparison.html