Web Page Basics

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?

Factors to Consider
Monitor Resolution
640 X 480 pixels per inch

800 X 600
1024 X 768 1152 x 864, etc.

Factors to Consider (Cont.)

Colour
16 colours (4 bit) 256 colours (8 bit) Thousands of colours (High Color 16 bit) Millions of colours (True Color 24 bit)

Factors to Consider (Cont.)

Graphics/ Images
size in kilobytes or megabytes graphic/ image formats
JPEG GIF PNG

Factors to Consider (Cont.)

Animation
Animated Gifs
can be viewed without a plugin

Other types of Animation

Macromedia Flash (Flash Player) Director/Authorware (Shockwave)

Factors to Consider (Cont.)

Browser Plugins
Adobe Acrobat Real Player Quicktime Cosmo Player

Video dan Audio

bandwith issue

What is a web site?

Collection of files or documents in HTML format (hypertext mark-up language) - a programming language All files are called html files Extension - .htm or .html WYSIWYG editor

 Home page saved as index.htm(l) browsers will automatically display. Other pages name for easy recognition

 Use lower cases Use short names Use underscore if two words.
syllabus_mei2002.html

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)

assign.html

refer.html

Relative links

index.html
syllabus.html read.html

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

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

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

Click to go to syllabus

index.html

syllabus.html

Link to files of other formats

Click here to download

index.html

Nota.docx/pptx, etc

anchor/bookmark

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

Hyperlinks - absolute
Link from a page /site to another page at another site (external) Change in URL (location)

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

Click to go to The Star

index.html

news.html

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

Navigation
Need a good navigation structure
Help the users browse through easily Does not confuse or lost

Make link on texts or graphics

Click here to go home

Navigation (Cont.)

 Linear the sequence is fixed to ensure users go through the determined sequence no choice in sequence is given. Eg. Students must master Topic A before they can understand topic B. (teachers determine sequence based on their expertise)

 Hierarchical suitable for presenting information which are arranged in nested order containing subtopics choices in sequence are allowed

 Non-linear sequence not determine users make own choice of sequence of learning

 Composite a combination of linear, hierarchical and non-linear sequences Content expert determines which topic is linear or hierarchical or non-linear bases on learning requirement

Links
Click here to go to Ministry of Education

OK
OK

Click here to go to Ministry of Education http://www.moe.gov.my

Screen Design
Simple Not cluttered Orderly Interesting Normal or framed window Effective and suitable use of color and texts

 Use appropriate language level for intended audience Use graphics as necessary and appropriate Clear instruction

Interactivity
Important feature in CBI/WBI 2-way communication between computer and users Allows users to provide input and provide feedback to users

Web vs Courseware (CD)

http://www.stand.ac.uk/ITS/CAL/newslet ter/5/comparison.html