SlideShare a Scribd company logo
Internet and WWW
CSC1215 WEB COMPUTING
Learning objectives
At the end of this chapter, student should be able to:
1. Explain the concept of World Wide Web
2. List out the basic design element
3. Determine type of web navigation models
Introduction to Internet
and WWW
CSC1215 WEB COMPUTING
INTERNET and WWW
➢ Internet – the network of computer networks that provides the framework for the World Wide
Web.
➢ The web can’t exist without the internet.
➢ Browser – link documents on any computer on any network by means of an easy-to-use piece of
software.
➢ World Wide Web – web of documents that linked together.
Concept of using WWW
Used web browser
to open web sites
by using URL
and homepage
will appear
Computer program that interprets HTML commands to
collect, arrange and display web sites such as Mozilla Firefox,
Google Chrome, Opera and others.
Internet location that contain collection of hyperlinked web
pages.
Unique address of web sites.
The first page of the web sites.
Basic web design
principles
CSC1215 WEB COMPUTING
Web design
Web Design Element
Web Design Element
Web Design Principle
Web Design Principle
Portable design
• Must be portable and accessible by user who have different browser, OS and
computer platform
Design for low bandwidth
• Website design must be accessible at a variety of speeds
Direction
• The elements need to place in sequence where the eye moves and perceive
the things it sees
Web Design Principle
Accessibility
• when a visitor enters the website, he must be able to easily access the
information.
White space
• use white space deliberately in your design as a breathing space. May also be used
to show division of contents
Simplify
• the more options you place in your site, the more difficult it is for a visitor to make
a decision and more time is required to browse through them.
Web Design Principle
convenience
•to allow a visitor to make an action, click buttons
should be conveniently located and accessible
Regular testing
•the website should be regularly upgraded, updated,
and tested so that problems will be quickly resolved.
Characteristics of Web Pages
➢ Create building blocks of a website, like a page in a book.
➢ Require a browser such as Internet Explorer, Firefox to be viewed.
➢ Contain HTML code to define format and functions.
➢Include text, downloadable files, audio, video and animation in different formats.
➢ Allow nonlinear navigation to other pages through hyperlinks.
Web Navigation Design CSC1215 WEB COMPUTING
Web Navigation Design
1. Your navigation scheme should reflect your website
structure and you should always make it clear for your
visitors how they can get between topics easily.
2. Always provide a means for them to go back from
where they started.
3. Make an outline of your website and go from there.
Web Navigation Models
Web Layout
Web Layout
Homepage/Index Page
This should be considered the first tier of content and lead
into the interior of your site. Here is where your visitor is first
introduced to your website. First impressions are important
on the Web just as in life.
Main Sections/Site Index
The main sections of your site have been identified and
placed in order of importance in your navigation scheme.
Web Layout
Subsections/Database
Subsections are placed in their proper categories and the
content has been decided upon. This is where the main body
of your website content resides. (i.e. database) They contain
the bulk of the information that you are presenting to your
visitors.
Element of Web Page Design
• Emphasis - Communicates your message effectively.
• Contrast - Generates visual interest by making page appealing.
• Typography - Refers to the arrangement of text on a page.
• Color and Graphics - Defines character and identity of the web page.
• Navigation - Refers to the way a web page is structured for use.
• Visual Balance - Refers to the combination of visual elements such as lines, images, text,
shapes, and color on a page.
Conclusions
1. The concept of using WWW are used web browser, to open the website, by using the URL and
homepage will appear
2. There are 7 elements in designing the web which are colour, text, graphics, shapes,
background, video/audio and links
3. There are linear navigation model, database navigation model and hierarchical navigation
model
Discussion
Give any 3 WEBSITE that you always visit.
Discuss why? Present in the classroom

More Related Content

Similar to Chapter 1.pdf

web designing.pptx
web designing.pptxweb designing.pptx
web designing.pptx
excellence academy
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
Farmanzaland
 
ONLINE PLATFORMS AS TOOLS
ONLINE PLATFORMS AS TOOLSONLINE PLATFORMS AS TOOLS
ONLINE PLATFORMS AS TOOLS
LeahAmor1
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Harshith Rockx
 
Soodam
SoodamSoodam
Online platform
Online platformOnline platform
Online platform
awkldjlkawjldkajwdlk
 
Online Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment TechnologiesOnline Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment Technologies
Mark Jhon Oxillo
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
EromRamos
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptx
asmeerana605
 
Future Scope of Website Designing in India
Future Scope of Website Designing in IndiaFuture Scope of Website Designing in India
Future Scope of Website Designing in India
Gagandeep Singh Rawat
 
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your websiteMobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions Pvt Ltd
 
Webdesign
WebdesignWebdesign
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Company
samyakmahendra
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Development
adrianlaranjo111
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
RIAH ENCARNACION
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptx
asmeerana605
 
Microsoft FrontPage PPT
Microsoft FrontPage PPTMicrosoft FrontPage PPT
Microsoft FrontPage PPT
anushreekmurthy
 

Similar to Chapter 1.pdf (20)

Web Usability
Web UsabilityWeb Usability
Web Usability
 
web designing.pptx
web designing.pptxweb designing.pptx
web designing.pptx
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
ONLINE PLATFORMS AS TOOLS
ONLINE PLATFORMS AS TOOLSONLINE PLATFORMS AS TOOLS
ONLINE PLATFORMS AS TOOLS
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
 
Soodam
SoodamSoodam
Soodam
 
Online platform
Online platformOnline platform
Online platform
 
Online Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment TechnologiesOnline Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment Technologies
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptx
 
Webdesign
WebdesignWebdesign
Webdesign
 
Future Scope of Website Designing in India
Future Scope of Website Designing in IndiaFuture Scope of Website Designing in India
Future Scope of Website Designing in India
 
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your websiteMobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your website
 
Webdesign
WebdesignWebdesign
Webdesign
 
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Company
 
Websites
WebsitesWebsites
Websites
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Development
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptx
 
Microsoft FrontPage PPT
Microsoft FrontPage PPTMicrosoft FrontPage PPT
Microsoft FrontPage PPT
 

More from AnisZahirahAzman

Chapter 6.pdf
Chapter 6.pdfChapter 6.pdf
Chapter 6.pdf
AnisZahirahAzman
 
Chapter 4.pdf
Chapter 4.pdfChapter 4.pdf
Chapter 4.pdf
AnisZahirahAzman
 
Chapter 10.pdf
Chapter 10.pdfChapter 10.pdf
Chapter 10.pdf
AnisZahirahAzman
 
Chapter 3.pdf
Chapter 3.pdfChapter 3.pdf
Chapter 3.pdf
AnisZahirahAzman
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
AnisZahirahAzman
 
Chapter 1.pdf
Chapter 1.pdfChapter 1.pdf
Chapter 1.pdf
AnisZahirahAzman
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
AnisZahirahAzman
 
Chapter 1.pdf
Chapter 1.pdfChapter 1.pdf
Chapter 1.pdf
AnisZahirahAzman
 
Chapter 13.pptx
Chapter 13.pptxChapter 13.pptx
Chapter 13.pptx
AnisZahirahAzman
 
Chapter 9.pptx
Chapter 9.pptxChapter 9.pptx
Chapter 9.pptx
AnisZahirahAzman
 
connecting smart object in IoT.pptx
connecting smart object in IoT.pptxconnecting smart object in IoT.pptx
connecting smart object in IoT.pptx
AnisZahirahAzman
 
Chapter 5.pptx
Chapter 5.pptxChapter 5.pptx
Chapter 5.pptx
AnisZahirahAzman
 
introduction to c.pptx
introduction to c.pptxintroduction to c.pptx
introduction to c.pptx
AnisZahirahAzman
 
component of c language.pptx
component of c language.pptxcomponent of c language.pptx
component of c language.pptx
AnisZahirahAzman
 

More from AnisZahirahAzman (15)

Chapter 6.pdf
Chapter 6.pdfChapter 6.pdf
Chapter 6.pdf
 
Chapter 4.pdf
Chapter 4.pdfChapter 4.pdf
Chapter 4.pdf
 
Chapter 10.pdf
Chapter 10.pdfChapter 10.pdf
Chapter 10.pdf
 
Chapter 3.pdf
Chapter 3.pdfChapter 3.pdf
Chapter 3.pdf
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
 
Chapter 1.pdf
Chapter 1.pdfChapter 1.pdf
Chapter 1.pdf
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
 
Chapter 1.pdf
Chapter 1.pdfChapter 1.pdf
Chapter 1.pdf
 
Chapter 13.pptx
Chapter 13.pptxChapter 13.pptx
Chapter 13.pptx
 
IoT Protocol Stack.pdf
IoT Protocol Stack.pdfIoT Protocol Stack.pdf
IoT Protocol Stack.pdf
 
Chapter 9.pptx
Chapter 9.pptxChapter 9.pptx
Chapter 9.pptx
 
connecting smart object in IoT.pptx
connecting smart object in IoT.pptxconnecting smart object in IoT.pptx
connecting smart object in IoT.pptx
 
Chapter 5.pptx
Chapter 5.pptxChapter 5.pptx
Chapter 5.pptx
 
introduction to c.pptx
introduction to c.pptxintroduction to c.pptx
introduction to c.pptx
 
component of c language.pptx
component of c language.pptxcomponent of c language.pptx
component of c language.pptx
 

Recently uploaded

How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
Gal Baras
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
Javier Lasa
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
3ipehhoa
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
laozhuseo02
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
GTProductions1
 
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
VivekSinghShekhawat2
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
JeyaPerumal1
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
natyesu
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Sanjeev Rampal
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
nirahealhty
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
laozhuseo02
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
Rogerio Filho
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
JungkooksNonexistent
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
keoku
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Brad Spiegel Macon GA
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
Arif0071
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
3ipehhoa
 

Recently uploaded (20)

How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
 
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
 

Chapter 1.pdf

  • 1. Internet and WWW CSC1215 WEB COMPUTING
  • 2. Learning objectives At the end of this chapter, student should be able to: 1. Explain the concept of World Wide Web 2. List out the basic design element 3. Determine type of web navigation models
  • 3. Introduction to Internet and WWW CSC1215 WEB COMPUTING
  • 4. INTERNET and WWW ➢ Internet – the network of computer networks that provides the framework for the World Wide Web. ➢ The web can’t exist without the internet. ➢ Browser – link documents on any computer on any network by means of an easy-to-use piece of software. ➢ World Wide Web – web of documents that linked together.
  • 5. Concept of using WWW Used web browser to open web sites by using URL and homepage will appear Computer program that interprets HTML commands to collect, arrange and display web sites such as Mozilla Firefox, Google Chrome, Opera and others. Internet location that contain collection of hyperlinked web pages. Unique address of web sites. The first page of the web sites.
  • 11. Web Design Principle Portable design • Must be portable and accessible by user who have different browser, OS and computer platform Design for low bandwidth • Website design must be accessible at a variety of speeds Direction • The elements need to place in sequence where the eye moves and perceive the things it sees
  • 12. Web Design Principle Accessibility • when a visitor enters the website, he must be able to easily access the information. White space • use white space deliberately in your design as a breathing space. May also be used to show division of contents Simplify • the more options you place in your site, the more difficult it is for a visitor to make a decision and more time is required to browse through them.
  • 13. Web Design Principle convenience •to allow a visitor to make an action, click buttons should be conveniently located and accessible Regular testing •the website should be regularly upgraded, updated, and tested so that problems will be quickly resolved.
  • 14. Characteristics of Web Pages ➢ Create building blocks of a website, like a page in a book. ➢ Require a browser such as Internet Explorer, Firefox to be viewed. ➢ Contain HTML code to define format and functions. ➢Include text, downloadable files, audio, video and animation in different formats. ➢ Allow nonlinear navigation to other pages through hyperlinks.
  • 15. Web Navigation Design CSC1215 WEB COMPUTING
  • 16. Web Navigation Design 1. Your navigation scheme should reflect your website structure and you should always make it clear for your visitors how they can get between topics easily. 2. Always provide a means for them to go back from where they started. 3. Make an outline of your website and go from there.
  • 19. Web Layout Homepage/Index Page This should be considered the first tier of content and lead into the interior of your site. Here is where your visitor is first introduced to your website. First impressions are important on the Web just as in life. Main Sections/Site Index The main sections of your site have been identified and placed in order of importance in your navigation scheme.
  • 20. Web Layout Subsections/Database Subsections are placed in their proper categories and the content has been decided upon. This is where the main body of your website content resides. (i.e. database) They contain the bulk of the information that you are presenting to your visitors.
  • 21. Element of Web Page Design • Emphasis - Communicates your message effectively. • Contrast - Generates visual interest by making page appealing. • Typography - Refers to the arrangement of text on a page. • Color and Graphics - Defines character and identity of the web page. • Navigation - Refers to the way a web page is structured for use. • Visual Balance - Refers to the combination of visual elements such as lines, images, text, shapes, and color on a page.
  • 22.
  • 23. Conclusions 1. The concept of using WWW are used web browser, to open the website, by using the URL and homepage will appear 2. There are 7 elements in designing the web which are colour, text, graphics, shapes, background, video/audio and links 3. There are linear navigation model, database navigation model and hierarchical navigation model
  • 24. Discussion Give any 3 WEBSITE that you always visit. Discuss why? Present in the classroom