of 28
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