Module 6 - Web Page Concept and Design - UNESCO Bangkok

UNESCO BANGKOK 

 

Bangkok, Thailand 

 

 

2006

Bangkok, 2006. 

 

 

 

UNESCO Bangkok. III. Japanese Fund in Trust. IV. Title.

EIPICT_M6_TG 

Module 6 

Web Page Concept and Design: 

Getting a Web Site Up and Running 

Teacher’s Guide 

Table of Contents 

General Guidelines 4 

Introductory Note 

Rationale 

Content of the Training Programme 

Prerequisites 

Materials and Equipment 

Teaching Tips for Face-to-Face Instruction 

Module Evaluation 

Typographical Conventions 

Overview of Module 9 

Learning Outcomes 

Schedule 

Module Outline 

Grading Policy 

List of Activities 

Assessment 

Reading/Reference List 

Glossary 

Lessons 

Lesson 1 How the World Wide Web Works 26 

Lesson 2 Principles of Web Design 38 

Lesson 3 Creating Web Pages using HTML 49 

Lesson 4 Web Publishing and Maintenance 63 

Evaluation Form 74 

3

EIPICT_M6_TG 

Empowering Information Professionals: 

A Training Programme on Information and 

Communication Technology 

General Guidelines for Teachers 

Introductory Note 

Library schools are now changing their curricula to produce graduates who are prepared 

for the changing service requirements in libraries. The majority of practitioners, however, 

graduated before the advent of the Information Age or studied in schools that did not 

teach ICTs for various reasons. This group of practitioners is now finding itself 

unprepared for the new demands of the profession. This Training Programme is in 

response to this identified need. 

People working in libraries and information centers are the primary target group of the 

Training Programme. It is intended to provide them with the knowledge and skills to deal 

with the application of ICTs to library and information services. It is also intended for use 

by teachers of students in library schools and of personnel in library and information 

centers. The Package has been developed by the UNESCO Asia and Pacific Regional 

Office with funding from the Japanese Funds in Trust for Communication and 

Information. 

Rationale 

In 1961, Marion Harper Jr. wrote, “To manage a business well is to manage its future; 

and to manage the future is to manage information.” 1 Less than 25 years later, John 

Naisbitt, in discussing the ten megatrends in his opinion were happening in the US, said 

“None is more subtle, yet more explosive, I think than this first, the megashift from an 

industrial to an information society.” 2 According to Naisbitt, “In 1950, only 17 percent 

of us worked in information jobs. Now more than 60 percent of us work with information 

as programmers, teachers, clerks, secretaries, accountants, stock brokers, managers, 

insurance people, bureaucrats, lawyers, bankers and technicians.” He groups librarians 

among professional workers who “are almost all information workers…” 3 Today, society 

is in the “Information Age,” an age where information is power. 

1 Harper, Marion Jr. 1961. “New profession to aid management,” Journal of Marketing, January, p. 1 

2 John Naisbitt entitled Megatrends : Ten new directions transforming our lives (New York, N.Y. : Warner 

Books, 1982), p11 

3 Ibid, p. 14-15 

4

EIPICT_M6_TG 

Content of the Training Programme 

The Training Program contains nine Modules: 

• Module 1 - Introduction to Information and Communication Technologies 

• Module 2 - Introduction to Library Automation 

• Module 3 - Information Seeking in an Electronic Environment 

• Module 4 – Creation and Management of Databases Using CDS/ISIS 

• Module 5 - The Internet as an Information Resource 

• Module 6 - Web Page Concept and Design: Getting a Web Page Up and Running 

• Module 7 - Library Management and Promotion 

• Module 8 - Digital Libraries and Open Access 

• Module 9 - Intellectual Property Rights in the Digital Age 

All the Modules have a Teacher's Guide and a Student’s Text. The Teacher's Guide 

should not be distributed to the students. 


The Teacher’s Guide includes the 

following: 

• General Guidelines 

• Introductory Note 

• Rationale 

• Content of the Training Programme 

• Prerequisites 

• Materials and Equipment 

• Teaching Tips for Face-to-Face 

Instruction 

• Module Evaluation 

• Typographical Conventions 

• Overview of Module 

• Learning Outcomes 

• Schedule 

• Module Outline 

• Grading Policy 

• List of Activities 

• Assessment 

• Reading/Reference List 

• Glossary 

• Lessons 

• Evaluation Form 

• Accompanying Materials 

• PowerPoint Slides 

• Student’s Text 

Student’s Text 

The Student’s Text contains the following: 

• General Guidelines 

• Introductory Note 

• Rationale 

• Content of the Training Programme 

• Prerequisites 

• Typographical Conventions 

• Overview of Module 

• Learning Outcomes 

• Schedule 

• Module Outline 

• Grading Policy 

• Lessons 

• List of Activities 

• References and Recommended 

Readings 

• Glossary 

5

EIPICT_M6_TG 

Prerequisites 

• Module 1. The student must have a genuine interest in understanding the impact of 

new information technologies on the practice of Library and Information Science. 

• Modules 2 - 9. The student must have finished Module 1 

Materials and Equipment 

The teacher and the students must have the facilities and technical support required to 

carry out the course. They must have CD-ROM drives and online access to the Internet. 

The teacher must be knowledgeable and skilled in using computers, the Internet, CD- 

ROMs and a variety of software and other electronic resources. Copies of the core 

materials could be downloaded and printed out if desired. 

• Teacher’s guide 

• Student’s Guide 

• Hands-on exercises 

• Computer system 

o Recommended: 

CPU—Intel Celeron D336 or Intel Pentium 506 (2.66)LGA 775 or higher 

Memory—512 MB PC400 DDR 

Hard Drive—WD 40GB 7200RPM 

CD-ROM/DVD drive (52x CD-ROM combo drive or 52 DVD combo drive) 

Monitor—15-17” CRT or LG EZ 17” Flatron 

Modem—56 k or DSL or Cable 

AVR—500 w 

Printer—Laser 

o Minimum 

Pentium IV Processor 

128 MB RAM 

• Operating system software ( Windows 98 with all the updates or Windows XP Service 

Pack2/XP Professional) 

• Application software MS Office 2000 

• Other applications (Acrobat Reader, Multimedia Flash Reader) 

• Internet access 

o If dial-up: modem card, phone and Internet Service provider. 

o If DSL: integrated LAN card and Internet Service provider. 

o Internet Cafes and other service centers. 

• Communication Tools. Asynchronous communication by e-mail, discussion groups 

and synchronous communication such as chat tools and virtual conference will be 

used as needed and whenever possible. Video will not be used due to possible 

limitations in access capabilities of some students. 

6

EIPICT_M6_TG 

Teaching Tips for Face-to-Face Instruction 

• Speak slowly and clearly to ensure that students can follow you – this is especially 

important if some or all the students do not have English as their first language. 

• Do not read your lecture notes verbatim. This is a sure way of losing your students’ 

attention. 

• Always show an interest in what you are teaching. 

• The Modules have been carefully planned, with exercises and discussions as well as 

lectures. Try to follow the schedule as set out in the Module. 

• Try to use examples as often as possible to explain concepts. If the examples are 

taken from the students’ own countries or regions, so much the better. 

• Try to keep within the daily timetable recommended for the Module – if you get 

behind in one lesson it may be difficult to make up time in a later lesson. Avoid 

extending the class beyond the time period allotted. 

• Be prepared to use back-up materials if for any reason the computer will not function 

during a lesson. 

• Try to answer all questions from students, but if you do not know the answer to a 

question it is better to admit it than to try and bluff. 

• Make sure that all equipment needed for a lesson is working properly before the 

lesson begins – things can often go wrong! 

• Be ready to stay behind for a few minutes after each lesson to answer questions that 

students may have but that they did not wish to ask in class. 

Module Evaluation 

At the end of the Module, ask your students to evaluate it. The evaluation of the Module 

by the students is meant to help you improve your teaching and should be seen in this 

light rather than as a criticism of yourself. Make use of it to do an even better job next 

time. The evaluation form is found after the last lesson of each Module 

Typographical conventions 

The following conventions are used through out the Module. 

Course Guide 

General introduction to the Module 

 

Course Objectives 

General introduction to the learning outcomes of the Module 

7

EIPICT_M6_TG 

Note 

General note to the teacher and additional information 

Tip 

Teaching tips and supplemental materials 

Activity 

Activity for the students 

Assessment 

Questions/activities to measure learning 

End of General Guidelines 

8

EIPICT_M6_TG 





Overview 

This is the Teacher’s Guide for Module 6 of Empowering Information 

Professionals: A Training Programme on Information and 

Communication Technology. Module 6 is about web page concept and 

design. 

Module 6 discusses the concepts and principles of web page creation and design, and 

introduces the basic steps in setting up and maintaining a web site. 

 

Learning Outcomes 

The goal of this Module is to provide the practising librarian with the skills 

and knowledge needed to create, setup and maintain a web site. 

By the end of the course, students should be able to: 

• Define the concepts and terms, as well as understand the technology, of web page 

creation and design. 

• Identify the principles and standards involved in web page creation and design 

• Create web pages using HTML editors. 

• Develop a simple web site ready for uploading to the World Wide Web. 

• Update and maintain web pages and web sites. 

• Address ethical, legal and other issues related to web publishing. 

Schedule 

The Module is designed for a one-week course of 40 hours: eight hours per day for five 

days. 

9

EIPICT_M6_TG 

Day 

Day 1 

Day 2 

Day 3 & 4 

Day 5 

Lessons 

Lesson 1. How the World Wide Web works 

Lesson 2. Principles of Web Design 

Lesson 3. Creating Web Pages using HTML 

Lesson 4. Web Publishing and Maintenance 

Outline 


Scope 

Objectives 

 

 

 

 

 

 

 

 

 

What is the World Wide Web? 

What makes the Web work? 

How does the World Wide Web 

work? 

What is a web server? 

What is a web browser? 

What is a web page? 

How does a web page work? 

What is a home page? 

What is a web site? 

By the end of the lesson students should be 

able to: 

• Demonstrate an understanding of the 

concepts, terms, and technology behind 

the World Wide Web. 

• Describe how the World Wide Web 

works. 

• List several web servers. 

• Identify different web browsers. 

• Define what is a web page. 

• Differentiate a home page from a web 

site. 

• Understand how a web page works. 

Lesson 2. Principles of Web Page Design 

Scope 

What are the first steps in web page 

design? 

What are the elements of a web page? 

What are some tips in web page 

creation and design? 

What are the guidelines for creating 

library web sites? 

How to evaluate web sites? 

Objectives 


able to: 

• Identify the first steps in web page 

design. 

• Recognize the elements of a web page. 

• Realize the do’s and don’ts in web page 


• Apply guidelines in designing library 

web sites. 

• Evaluate web sites. 

Lesson 3. Creating web pages using HTML 

Scope 

Objectives 

 

 

What is HTML? 

What are the tools needed for creating 


able to: 

10

EIPICT_M6_TG 

 

 

 

web pages? 

What are the basic HTML tags? 

How is a web page created using 

HTML? 

How is a web site built using HTML? 

 

 

 

 

 

Define what is HTML. 

Determine the basic tools for creating 

web pages. 

Learn basic HTML coding and tags. 

Use HTML to create web pages. 

Build a web site using an HTML editor. 

Lesson 4. Web Site Publishing and Maintenance 

Scope 

Objectives 

What are the steps in publishing a 

web site? 

Why is it important to secure a 

domain name? 

What web hosting services are 

available? 

What is needed to upload web pages 

to a web host? 

What are the steps in updating and 

maintaining a web site? 

How can a web site be promoted and 

marketed? 

What are the ethical, legal and other 

issues related to web publishing? 


able to: 

Identify the steps in web publishing, 

updating and maintenance. 

Realize the importance of a domain 

name. 

Differentiate between web hosting 

services. 

Upload web pages to a web host. 

Demonstrate an ability to promote and 

market a library’s web site. 

Address ethical, legal and other issues in 

web publishing. 

Grading Policy 

A score of 50 points is needed to pass the Module. The breakdown of the points for the 

module assessment is as follows: 

Lessons 

Points 

Lesson 1. How the World Wide Web works 10 

Lesson 2. Principles of Web Design 20 

Lesson 3. Creating Web Pages using HTML 50 

Lesson 4. Web Publishing and Maintenance 20 

List of Activities 

Lesson 1 


Lesson 1 

Activity 6.1.1 

Ask the students to read the following web documents to know more about the 

World Wide Web. 

1. Internet 101 - About the Web. 

11

EIPICT_M6_TG 

http://www.internet101.org/web.html 

2. What is the World Wide Web? 

http://www.centerspan.org/tutorial/www.htm 

3. How the Web Works. 

http://www.learnthenet.com/english/html/13wworks.htm 

Activity6.1.2 


Lesson 1 

Read these articles to know more about how the Web works. 

1. Overview of web mechanisms. 

http://www.cio.com/WebMaster/sem2_simple_pieces.html 

2. How web servers work. http://www.howstuffworks.com/web-server.htm 



Lesson 1 

Explore these pages that contain links to several web servers. 

1. Living Internet. Web Servers. 

http://www.livinginternet.com/w/ww_servers.htm 

2. Web server: Information from Answers.com. 

http://www.answers.com/topic/web-server 

3. Comparison of web servers: Information from Answers.com. 

http://www.answers.com/topic/comparison-of-web-servers 



Lesson 1 


1. Surf the Web: Web browsers. 

http://www.learnthenet.com/english/html/12browser.htm 

2. Web browser: Information from Answers.com. 

http://www.answers.com/topic/web-browser 

3. Comparison of web browser : Information from Answers.com. 

http://www.answers.com/topic/comparison-of-web-browsers 



Lesson 1 

Ask the students to read these online articles. 

1. How web pages work. http://www.howstuffworks.com/web-page.htm 

2. Living Internet - web 

pages.http://www.livinginternet.com/w/ww_pages.htm 

12

EIPICT_M6_TG 

3. Surf the Web: Anatomy of a web page. 

http://www.learnthenet.com/english/html/14wbpganat.htm 

4. Web page : Information from Answers.com. 

http://www.answers.com/topic/webpage 

5. How web sites work. http://www.answers.com/topic/website 

Lesson 2 


Lesson 2 


Go through the first steps in web page design and write down the answer to the 

initial questions discussed. You can add more information as you would like. 

Submit a copy to your instructor. 



Lesson 2 

Read these articles. 

1. Familiarize yourself with the different elements of a web page. 

http://www.bilk.ac.uk/college/helpweb/familiar.htm 

2. Anatomy of a web page. 

http://platea.pntic.mec.es/~jmas/manual/english/elementos_web.html 

3. Anatomy of a web page. 

http://terra.chemeketa.edu/faculty/bloj/design/anatomy2.htm 



Lesson 2 


1. Designing effective web pages. 

http://www.becta.org.uk/corporate/display.cfm?section=21&id=2540 

2. Research-based web guidelines on page layout. 

http://www.usability.gov/guidelines/layout.html 

3. Resources: Design tips. http://www.csus.edu/web/webdesign.html 

Activity6.2.4 


Lesson 2 

1. Make use of the information you gathered in activity 2.1 regarding your 

library’s web site, create a checklist of what you’ll need and what 

information and services the web site will provide. 

2. Create a storyboard for your web page, with a layout of for each page 

13

EIPICT_M6_TG 

3. Organize your web site; illustrate the structure of your site showing how 

the pages are linked to each other 



Lesson 2 

Read the following articles. 

1. ALA - Teaching undergrads web evaluation. 

http://www.ala.org/ala/acrl/acrlpubs/crlnews/backissues1998/julyaugust6/t 

eachingundergrads.htm 

2. Great web sites for kids selection criteria. 

http://www.ala.org/ala/alsc/greatwebsites/greatwebsitesforkids/greatwebsit 

es.htm 

Lesson 3 


Lesson 3 


Read these introductions to HTML. 

1. What is HTML? InterNIC 15 minutes series. 

http://www.netskills.ac.uk/mirrors/15min/html/html/sld01.html 

2. HyperText Markup Language Home Page. http://www.w3.org/MarkUp/ 

3. Dave Raggett: Getting started with HTML. 

http://www.w3.org/MarkUp/Guide/ 



Lesson 3 

To know more about how to use HTML to create web pages, browse the 

following sites. 

1. HTML Primer. http://www.htmlgoodies.com/primers/html/ 

2. HTML Basics. http://www.ncsu.edu/it/edu/html_trng/html_basics.html 

3. Introduction to HTML. http://www.w3schools.com/html/html_intro.asp 

Lesson 4 


Lesson 4 


1. Consult these sites. 

• InterNIC FAQs on the Domain Names, Registrars, and Registration. 

http://www.internic.net/faqs/domain-names.html 

2. To get your own domain name. 

14

EIPICT_M6_TG 

• How to Register Your Own Domain Name. 

http://www.thesitewizard.com/archive/registerdomain.shtml 

• For our purposes make use of sub-domains provided by free web hosting 

sites (e.g. www.topcities.com). 

• Register and pay for a domain name if your web site is ready for 

publishing on the Web. 



Lesson 4 


1. Finding a home for your site. 

http://www.learnthenet.com/english/html/51server.htm 

2. Choosing a web hosting company: How to choose a web host. 

3. http://www.thesitewizard.com/archive/findhost.shtml 

4. Free web Site hosting services. 

http://www.thefreesite.com/Free_Web_Space/ 

5. Free web hosts. 

http://www.thefreecountry.com/webhosting/freewebhosts.shtml 



Lesson 4 

1. Depending on which web server would be used, read the tutorials and follow 

the steps on how to set up a local host. 

Your own "Personal Web Server". 

http://www.windowsnetworking.com/articles_tutorials/pws.html 

Installing IIS on Windows 2000 Professional. 

http://www.webwizguide.com/asp/tutorials/installing_iis_win2k.asp 

How to install an IIS server on Windows XP Professional, by RazorX. 

http://www.razorx.com/tutorials/IISonXPPro/ 

Savant web server documentation. 

http://savant.sourceforge.net/docs/index.html 

Abyss web server: Getting started. 

http://www.aprelium.com/abyssws/start.html 

2. Download the other tools and read the documentation on how to use them 

for testing your web site locally. 

How to check your web site with multiple browsers on a single machine 

(Cross-Browser Compatibility Checking). 

http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml 

Web Page Backward Compatibility Viewer. 

http://www.delorie.com/web/wpbcv.html 

AnyBrowser.com: your source for browser compatibility verification. 

15

EIPICT_M6_TG 

 

http://www.anybrowser.com 

Free HTML / CSS / Link validators. 

http://www.thefreecountry.com/webmaster/htmlvalidators.shtml 



Lesson 4 

1. Read these articles on FTP and how to use FTP to upload web pages. 

FTP and understanding file permissions. 

http://www.interspire.com/content/articles/12/1/FTP-and- 

Understanding-File-Permissions 

FTP with FileZilla. http://wwell.net/tutorials/misc/filezilla/ 

The Nvu Web Editor Tutorial (Step 10: Publish). 

http://www.tqnyc.org/tutorial/Nvu/index.php?s=T 

Free FTP clients, secure FTP (SFTP) programs. 

http://www.thefreecountry.com/webmaster/freeftpclients.shtml 

2. Download FileZilla or get hold of an FTP program that will work with your 

system. 

3. Connect to the web server of your host and upload your web pages. 

4. Test your web site and submit your new web site URL to your course 

coordinator/instructor. 



Lesson 4 

Read the following. 

1. Maintenance and updating. 

http://www.learnthenet.com/english/html/52publiz.htm 

2. Web site maintenance: pros, cons, and solutions for non-web 

professionals. 

3. http://www.grantasticdesigns.com/websitemaintenance.html 

4. Annual web site maintenance checklist. 

http://www.popinteractive.com/webinsights/20021220.asp 

5. Site maintenance tools. http://www.webdisplays.com/guide-web-designtips-tutorial-help/tools.htm 



Lesson 4 

1. Write a short description of your newly created web site including its 

URL. 

2. Submit a copy to your course instructor / coordinator. 

3. Read “Search Engine Submission Tips”. 

http://searchenginewatch.com/webmasters/index.php 

16

EIPICT_M6_TG 

4. Submit your web site to different search engines. 



Lesson 4 


1. Copyright Law and Fair Use. Stanford. http://wwwsul.stanford.edu/cpyright.html 

2. Copyright Basics. Copyright Office. Library of Congress. 

http://www.loc.gov/copyright/circs/circ1.html 

3. Web Site Legal Issues. http://www.bitlaw.com/internet/webpage.html 

4. Ethics of Internet use - http://onlineethics.org/topics/interethics.html 

5. Keeping it Legal: Copyright and Other Legal Issues Arising out of Web 

Site Management. http://fno.org/jun96/legal.html 

6. ALA Copyright Issues. 

http://www.ala.org/ala/washoff/WOissues/copyrightb/copyright.htm 

Assessment 

Lesson 1 


Lesson 1 

Assessment 

Choose the correct answer 

1.______________________ is a hypertext-based system that provides, 

organizes and accesses information in a non-hierarchical and non-sequential 

manner, allowing users to jump from one information space to another 

a. World Wide Web b. Protocols c. Domain d. Multimedia 

2.______________________ set of rules and standards that govern how 

computers and other devices communicate with each other 

a. Universal Resource Locator b. Protocols c. HTML d. Web 

3.______________________ naming scheme that specifies unique addresses 

for web servers, documents and other Internet resources 

a. Protocols b. Universal Resource Locator c. HTML d. Web 

4.______________________ a computer program that lets you view and 

explore information on the World Wide Web 

17

EIPICT_M6_TG 

a. Web b. HTML c. Web server d. Web browser 

5.______________________ is a markup language and the lingua franca for 

publishing hypertext on the World Wide Web 


Answers: 1.World Wide Web 2.Protocols 3.Universal Resource Locator (URL) 

4. Web browser 5. HTML (HyperText Markup Language) 

Lesson 2 

Assessment 


Lesson 2 

Evaluate library web sites 

1. Visit library web sites. You can use Google or any search engine if you 

don’t have any particular library in mind, or use these links. 

Innovative Internet Applications in Libraries. 

http://www.wiltonlibrary.org/innovate.html 

Libweb: Libraries on the Web. http://lists.webjunction.org/libweb 

2. Using the principles and guidelines discussed together with the evaluation 

criteria, choose three library web sites which you would like to use as 

models for your library website. List the features and characteristics of the 

web sites that you would like to emulate. 

3. Submit to your instructor the names of the three web sites you have chosen 

and their URL’s with the list of features, functions, information and 

services provided. 

Lesson 3 


Lesson 3 

Assessment 

Project Web pages 

Submit electronic copies of the web pages created using the lesson to: 

• about.htm 

• collections.htm 

• services.htm 

• Other web pages created while using Notepad or Nvu. 

The links should be working. 

18

EIPICT_M6_TG 

Lesson 4 


Lesson 4 

Assessment 

Group Discussion 

Ask the students to search and visit each other’s web sites using different 

search engines. Check the web sites and take note of any errors encountered 

like dead links, broken pages and other observations. Discuss with the class 

and offer suggestions on how a certain web site could be improved or help fix 

it if there were problems encountered. Finally evaluate each web site for its 

overall design, usability, relevance and accuracy of content. 

Reference/Reading List 

Books 


1. Aronson, L. 1994. HTML Manual of Style. Emeryville, CA: Ziff-Davis. 

2. Franks, M. 1995. The Internet Publishing Handbook: for World Wide Web, 

Gopher and WAIS. Reading MASS.: Addison-Wesley. 

3. HTML 3.2: Quick Reference. 1997. Indianapolis, IN: Que. 

4. Internet and World Wide Web (Simplified). 1995. Foster City; CA: IDG 

Books Worldwide. 

5. LeVitus, B. & Evans, J. 1997. Webmaster: How to build your own World 

Wide Web Server without really trying. Boston: AP Professional. 

6. Miller, M. 1995. Easy Internet. Indianapolis, IN: Que. 

7. Nielsen, J. 1995. Multimedia and Hypertext: the Internet and Beyond. 

Boston: AP Professional. 

8. Powell, T. 1999. HTML: The Complete Reference. Osborne: McGraw-Hill. 

9. Siegel, D. 1996. Creating Killer Web Sites: The Art of Third-generation 

Site Design. Indianapolis, IN: Hayden Books. 

10. Stanek, W. R. 1996. HTML, JAVA, CGI, VRML, SGML: Web Publishing. 

Sams.net; Indiana. 

11. Steele, H. 1996. How to use the Internet. Emeryville, CA: Ziff-Davis. 

12. Waters, C. 1997. Universal Web Design: A Comprehensive Guide to 

Accessible Web Sites. Indianapolis, IN: New Riders Publishing. 

Electronic Resources 

1. Abyss Web Server: Getting Started. Aprelium Technologies. 


2. American Library Association. Copyright Issues. 

http://www.ala.org/ala/washoff/WOissues/copyrightb/copyright.htm\ 

19

EIPICT_M6_TG 

3. American Library Association. 1997. Great Web Sites for Kids Selection 

Criteria. ALSC Children and Technology Committee. 

http://www.ala.org/ala/alsc/greatwebsites/greatwebsitesforkids/greatwebsit 

es.htm 

4. Answers.com. Comparison of Web browsers. 


5. Answers.com. Comparison of Web Servers. 


6. Answers.com. How Web Sites Work. 

http://www.answers.com/topic/website 

7. Answers.com. Web page: Information from answers.com. 


8. Answers.com. Web server: Information from Answers.com. 


9. Answers.com. Web browser. http://www.answers.com/topic/web-browser 

10. Answers.com. World Wide Web: Definition and Much More from 

Answers.com. http://www.answers.com/topic/world-wide-web 

11. AnyBrowser.com. Your Source for Browser Compatibility Verification. 


12. Baccala, B., ed. 1997. HTTP Protocol Overview. Connected. An Internet 

Encyclopedia. http://www.freesoft.org/CIE/Topics/102.htm 

13. Birznieks, G. & Hughes, C. 2001. Serving Up Web Server Basics. 

ServerWatch. http://www.serverwatch.com/tutorials/article.php/1407961 

14. Blodget, J. 1998. Anatomy of a Web Page. Chemeketa Community 

College. http://terra.chemeketa.edu/faculty/bloj/design/anatomy2.htm 

15. Blodget, J. 1998. Page Elements. Chemeketa Community College. 

http://terra.chemeketa.edu/faculty/bloj/design/elements.htm 

16. Bouton, B. Getting your Site On-line Retrieved. E-fuse.com. 

http://www.efuse.com/Grow/your_site_s_home.html 

17. Bradford College. Web Page Elements. 


18. Brain, M. How Web Pages Work. HowStuffWorks. 

http://www.howstuffworks.com/web-page.htm 

19. Brain, M. How Web Servers and the Internet Work. HowStuffWorks. 

http://www.howstuffworks.com/web-server.htm 

20. British Educational Communications and Technology Agency (BECTA). 

Designing Effective Web Pages. 


21. California State University, Sacramento. Web Design: Design Tips. 

http://www.csus.edu/web/webdesign.html 

22. Case Western Reserve University. The Online Ethics center for 

Engineering and Science. Ethics of Internet use. 

http://onlineethics.org/topics/interethics.html 

23. CenterSpan. What Is the World Wide Web? 


24. Christie, D. 2004. Annual Website Maintenance Checklist. Web Insights 

20

EIPICT_M6_TG 

News & Articles, 19. 


25. Classroom Clipart. A Source for Free Clipart, clip Art Illustrations and 

Photographs. http://classroomclipart.com/ 

26. Cohen, L. 2005. Understanding the World Wide Web. Search the Internet: 

Internet Tutorials. State University of New York at Albany Library. 

http://library.albany.edu/internet/www.html 

27. Cooke, C. 2005. Nvu User Guide. NvuDev.org. 

http://www.Nvudev.org/guide/1.0PR/default.htm 

28. CoolArchive. Button maker. 

http://www.coolarchive.com/buttonmaker.php 

29. Cool Text. http://cooltext.com/ 

30. Cottingham, S. About The Web. Internet 101. 

http://www.internet101.org/web.html 

31. Cottingham, S. About Web Browsers. Internet 101. 

http://www.internet101.org/browser.html 

32. Delorie, D.J. Web Page Backward Compatibility Viewer. 


33. Dowling, T. Libweb: Libraries on the Web. 

http://lists.webjunction.org/libweb 

34. FTPPlanet. FTP 101 - A Beginner's Guide. 

http://www.ftpplanet.com/ftpresources/basics.htm 

35. The Free Site.com. Free Web Site Hosting Services. 


36. Grantastic Designs. Web Site Maintenance: Pros, Cons, and Solutions for 

Non-web Professionals. 

http://www.grantasticdesigns.com/websitemaintenance.html 

37. Helmig, J. 2000. Your own "Personal Web Server”. 


38. Heng, C. 2005. Free FTP Clients, Secure FTP (SFTP) Programs. 


39. Heng, C. 2005. Free HTML / CSS / Link Validators. 


40. Heng, C. 2006. Free Web Hosts. 


41. Heng, C. 2006. How to Check Your Website with Multiple Browsers on a 

Single Machine (Cross-Browser Compatibility Checking. The 

SiteWizard.com) 


42. Heng, C. 2005. How to Choose a Web Host. 

http://www.thesitewizard.com/archive/findhost.shtml 

43. Heng, C. 2005. How to Register Your Own Domain Name. 


44. Heng, C. 2005. NVU Tutorial 1. How to Design and Publish Your Website 

Using Nvu. http://www.thesitewizard.com/gettingstarted/Nvu1.shtml 

45. Heng, C. 2005. NVU Tutorial 2: Adding Images, Changing Fonts, 

21

EIPICT_M6_TG 

Colours, Creating Links, and Writing Your Content. 

http://www.thesitewizard.com/gettingstarted/Nvu2.shtml 

46. Heng, C. 2005. NVU Tutorial 3: How to Create Data Tables. 


47. Heng, C. 2005. NVU Tutorial 4: How to Create a Multiple Column 

Layout. http://www.thesitewizard.com/gettingstarted/Nvu4.shtml 

48. Heng, C. 2005. NVUTutorial 5: How to Add a Feedback Form to Your 

Website. http://www.thesitewizard.com/gettingstarted/Nvu5.shtml 

49. HTMLclinic.com. Easy To Use Color Picker/Identifier. 

http://www.htmlclinic.com/colorchart.php 

50. HTML Goodies. HTML Primer. 

http://www.htmlgoodies.com/primers/html/ 

51. InterNIC FAQs on the Domain Names, Registrars, and Registration. 


52. InterNIC Whois Search. http://www.internic.net/whois.html 

53. Kapoun, J. 1998. Teaching undergrads WEB evaluation. College & 

Research Libraries News, 59 (7). 

http://www.ala.org/ala/acrl/acrlpubs/crlnews/backissues1998/julyaugust6/t 

eachingundergrads.htm 

54. Lamont, M. Savant Web Server Documentation. 


55. Learn the net.com. Build a Website: Finding a Home for Your Site. L 


56. Learn the Net.com. Build a Website: Maintenance and Updating. 


57. Learn the Net. Surf the Web. 

http://www.learnthenet.com/english/section/www.html 

58. Learn the Net. Surf the Web: How the Web Works. 


59. Learn the Net. Surf the Web: Web Browsers. 


60. Learn the Net.com. The Web At-a-glance. 

http://www.learnthenet.com/english/web/000www.htm 

61. Learn the Net. Surf the Web: Under the Hood of the World Wide Web. 

http://www.learnthenet.com/english/html/70alan.htm 

62. Library of Congress. Copyright Basics. 


63. Lynch, P. & Horton, S. 2000. Web Style Guide. 2nd Edition. 

http://www.webstyleguide.com/index.html 

64. Machaalani, E. 2005. FTP and Understanding File Permissions. Interspire. 

http://www.interspire.com/content/articles/12/1/FTP-and-Understanding- 

File-Permissions 

65. McKenzie, J. 1996. Keeping it Legal: Copyright and Other Legal Issues 

Arising out of Web Site Management. The Educational Technology 

Journal, 5(7). http://fno.org/jun96/legal.html 

66. McKenzie, J. 1997. Why in the World Wide Web? Reasons for Schools to 

22

EIPICT_M6_TG 

Create Web Sites. The Educational Technology Journal. 

http://fno.org/mar97/why.html 

67. National Cancer Institute. Research-Based Web Design & Usability 

Guidelines: Page Layout. http://www.usability.gov/guidelines/layout.html 

68. Network Solutions. http://www.networksolutions.com 

69. Network Solutions. What is HTML? 


70. Nielsen, J. 1999. Alertbox: Ten Good Deeds in Web Design. 

http://www.useit.com/alertbox/991003.html 

71. Nielsen, J. 1996. Alertbox: Top Ten Mistakes in Web Design. 


72. North Carolina State University Computing Services. HTML Basics. 

http://www.ncsu.edu/it/edu/html_trng/html_basics.html 

73. Overview of Web Mechanisms. 1996. WebMaster Magazine. 


74. ScoilNet. Plan Web Publishing. http://www.ncte.ie/wpc/plan.htm 

75. Raggett, D. 2005. Getting started with HTML. W3C.org. 


76. RazorX. How to Install an IIS Server on Windows XP Professional. 


77. Richmond, A. 1999. HTTP Explained. ServerWatch: Tutorials. 

http://www.serverwatch.com/tutorials/article.php/1354871 

78. Richmond, A. Internet Protocols: Web Developer's Virtual Library. 

http://www.wdvl.com/Internet/Protocols/index.html 

79. Schnell, E. H. 2005. Writing for the Web: A Primer for Librarians. 

http://bones.med.ohio-state.edu/eric/papers/primer/toc.html 

80. Site Maintenance Tools. http://www.webdisplays.com/guide-web-designtips-tutorial-help/tools.htm 

81. Stanford University. Copyright Law and Fair Use. http://wwwsul.stanford.edu/cpyright.html 

82. Stewart, W. Living Internet: Web pages. 

http://www.livinginternet.com/w/ww_pages.htm 

83. Stewart, W. Living Internet: Web Servers. 


84. Sullivan, D., ed. Search Engine Submission Tips. 


85. Tenby, S. 2003. Planning Your Web Site. Webjunction.org. 

http://webjunction.org/do/DisplayContent?id=758 

86. ThinkQuest. The Nvu Web Editor Tutorial (Step 10: Publish). 


87. Typephases Design. Web Design: Anatomy of a Web Page. Digital Design 

Manual. 


88. Tysver, D. A. Web Site Legal Issues. BitLaw: A Resource on Technology 

Law. http://www.bitlaw.com/internet/webpage.html 

89. Uwhois.com. Search Multiple Generic and Country Code Top Level 

23

EIPICT_M6_TG 

Domains. http://www.uwhois.com 

90. W3C. HyperText Markup Language. http://www.w3.org/MarkUp/ 

91. W3C. Introduction to HTML. 

http://www.w3schools.com/html/html_intro.asp 

92. W3C. Online Web Tutorials. http://www.w3schools.com/ 

93. Webmonkey. HTML Cheatsheet. 

http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/ 

94. Web Wizard Guide. Installing IIS on Windows 2000 Professional. 


95. White, M. FTP With FileZilla. http://wwell.net/tutorials/misc/filezilla/ 

96. Xara. 3D Heading Maker. 

http://www.xara.com/referrer/headmaker_trial.asp 

Glossary 


1. Access. Refers to the ability of the user to connect to a database, or Internet 

service. 

2. Accessibility. Guidelines for designing web contents accessible to people 

with disabilities and more available to all users whatever software, 

hardware and platform they are using to access the Web and for making it 

easier to find information on the Web. 

3. Anchor. Text and graphical elements embedded with hyperlinks and other 

objects users click on to jump to a web document pointed by the browser. 

4. Applications software. A program that is designed to perform a specific 

task. 

5. ASCII. The encoding system called American Standard Code for 

Information Interchange. 

6. Backup. Pertains to a procedure or device to make a duplicate of a system 

or data for future use in the event of loss from the server or hard disk due to 

various factors. 

7. Client. Computers that requests information on a web server. 

8. Client-server. The computing architecture that designates computers as 

servers or clients, dividing the workload. 

9. Content. Textual, graphical elements, and other information in several 

media types that comprise a web page. 

10. Design. Overall style, structure, and presentation of a web page. 

11. Domain name. The familiar name of the computer hosting the web site of 

an individual or organization that corresponds to a series of numbers (IP 

address) that serve as routing addresses on the Internet. 

12. Domain Name System (DNS). An Internet service that translates domain 

names into IP addresses. 

13. DNS Servers. Servers on the Internet that act as an Internet Directory, 

transforming domain names into IP addresses. Points to the location of a 

web host by providing their IP address transformed from their domain 

24

EIPICT_M6_TG 

names. 

14. Domain Name Registrars. Companies accredited by ICANN (The Internet 

Corporation for Assigned Names and Numbers) that offer registration 

services for the domain names of organizations and individuals. 

15. Electronic mail. A communications tool used to send messages to and 

from computers. Also called email. 

16. End user. A user who is not an information intermediary but is seeking 

information for himself/herself. The individual providing input or using 

output from the computer. 

17. FTP. File Transfer protocol. Refers to the protocol and the program used to 

transfer files from one computer to another. 

18. Graphics. Images, icons, and other graphical elements found on a web 

page. 

19. Home page. The main page of a web site that typically serves as an index 

or table of contents to other web pages on the site. 

20. Hyperlinks. The embedded hypertext links that point to other web pages 

and other related resources. 

21. Hypertext. Presents and relates information in a non-linear and nonhierarchical 

organization allowing the user to view related information 

through a system of hypertext links (hyperlinks). 

22. HyperText Markup Language (HTML). The standard language used to 

create web pages. A markup language that uses tags and attributes that 

web browsers interpret to display web pages on the screen. 

23. HyperText Transfer Protocol (HTTP). The underlying protocol behind 


24. ICANN. The Internet Corporation for Assigned Names and Numbers 

ICANN is the non-profit corporation that was formed to assume 

responsibility for the IP address space allocation, protocol parameter 

assignment, domain name system management, and root server system 

management functions previously performed under US Government 

contract by IANA and other entities. 

25. Icons. Pictographs that are used in a Windows environment to indicate 

operations such as copy, save, delete, etc. 

26. Information. The output of information processing. Useful data. 

27. Information system. Generally a computer-based system for storing and 

retrieving data and information. 

28. Intellectual property rights. Recognized legal claim to ownership of 

recorded or manifested ideas. 

29. Interactive. Pertaining to online where there is immediate interaction 

between the user and the computer. 

30. InterNIC. The Internet's Network Information Center has been established 

to provide the public with information regarding Internet domain name 

registration services. 

31. Internet. A global network of computers communicating under one set of 

guidelines formally called the TCP/IP. 

32. Intranet. An internal network belonging to an organization that uses 

25

EIPICT_M6_TG 

TCP/IP with access limited only to members of the organization. 

33. IP address. A series of numbers called Internet Protocol numbers that 

serve as routing addresses on the Internet used to locate and communicate 

information on the Internet. 

34. Navigation. A way to explore and view information on the Web by 

following hyperlinks from one page/site to another. 

35. Netiquette. The accepted behavior online on the Net. 

36. Program. A set of instructions for the computer to perform a particular 

function. Also called software. 

37. Protocols. The set of rules and standards computers used to communicate 

with each other. 

38. Site structure. The overall layout of the web site, the connection and 

relationship of web documents on a web site. 

39. Simple Mail Transfer Protocol (SMTP). The protocol used for sending 

and receiving electronic mail. 

40. Text editor. Applications programs used to edit ASCII files like Notepad. 

41. Top-level domains. Limited number of predefined suffixes attached to 

Internet domain names. Some of these are: .com, .net, .org, .edu, and .mil. 

42. Uniform Resource Locator (URL). The uniform naming scheme that 

specifies unique addresses for web servers, documents and other resources, 

no matter what their access protocol. 

43. Upload. The process of transferring files from a client computer to a server 

through the Internet. 

44. User friendly. Used to describe a user interface that enables an 

inexperienced user to interact successfully with the computer. 

45. Web browser. Application software used to search and display web pages. 

The client software used to access the Web. 

46. Web host. The machine that hosts web sites and applications programs 

needed to serve documents on the Internet. See web server. 

47. Web page. An electronic document on the World Wide Web formatted 

using HTML and displayed using a web browser. 

48. Web server. The computer running application software that listens and 

respond to a client computer's request made through a web browser. 

49. Web site. A collection of related web pages of a certain individual, group, 

or organization connected through a system of hyperlinks, hosted in a 

particular domain. 

50. World Wide Web.(WWW) A global hypertext information system that 

serves as a way to access and provide information in various media via the 

Internet. 

End of Overview Module 6 

26

EIPICT_M6_TG 






Introduction 

The lessons are presented to the students as PowerPoint slides as shown in the title slide 

below. The Teacher’s Guide will provide you with information and tips on how to 

explain each slide. It will also provide you with exercises/activities that you can ask the 

students to do. 


Web Page Concept and 

Design: Getting a Web Page 

Up and Running 

Lesson 1 

How the World Wide Web Works 

UNESCO EIPICT MODULE 6. LESSON 1 1 

Slide 1. This is the title slide for Lesson 1. 

Tip 

Emphasize the need to understand the concepts, terms and technology behind 

the World Wide Web, and to have a clearer understanding of what a web page 

is, how it is created and how it works. 

Slide 2. Rationale 

27

EIPICT_M6_TG 

Tip 

This slide will provide justification for the lesson. You can also use it to ask 

the students about their own training and experiences with regard to the use of 


The Information Society has brought about developments in the way 

information is created, consolidated and accessed. ICT has produced larger 

volumes of information, new ways of packaging information and new tools for 

managing information. These developments require new knowledge and skills 

from librarians and other information workers to meet the demands of the 

global economy for information resources and services. 

This Module will attempt to provide experience and skill to the students to help 

them cope with the challenges and opportunities brought about by ICT in the 

World Wide Web. The module is also intended to provide the students with 

sufficient knowledge to enable them to train other library and information 

personnel in their workplace or even throughout the region. 

Slide 3. Scope 

Note 

Slide 3 provides an overview of the scope of the lesson. There is no need for 

discussion at this point. 

Slide 4. Learning Outcomes 

Tip 

Inform the students about the learning outcomes of the lesson. There is no need 

for discussion at this point. 

Slide 5. What is the World Wide Web? 

28

EIPICT_M6_TG 

Note 

The World Wide Web (WWW), also called the "Web", pertains to the system 

used to access information but also to the information resources accessible 

through that system. 

Slide 6: What is the World Wide Web? 

Note 

The best way to know the Web is to visit it. Ask the students to use their 

computers to access and read the online articles listed on the Activity 1.1 slide. 

This is discussed in Module 3. 

Slide 7: Activity 6.1.1 



Lesson 1 

Ask the students to read the following web documents to know more about the 

World Wide Web. 

1. Internet 101 - About the Web. http://www.internet101.org/web.html 

2. What is the World Wide Web? 


3. How the Web Works. 


Tip 

To have a better understanding of the topic and help you expound on these 

concepts during class discussions, read these articles. 

1. Understanding the World Wide Web. 

http://library.albany.edu/internet/www.html 

2. World Wide Web: Definition and Much More From Answers.com. 

http://www.answers.com/topic/world-wide-web 

3. The Web At-a-glance. 

http://www.learnthenet.com/english/web/000www.htm 

4. Under the Hood of the World Wide Web. 

http://www.learnthenet.com/english/html/70alan.htm 

29

EIPICT_M6_TG 

Slide 8: What makes the Web Work? 

Note 

The Web relies on these mechanisms: 

Hypertext - provides easy navigation among documents and resources. 

Protocols - set of standards used to access resources via the Web. 

Universal Resource Locator (URL) - uniform naming scheme for Internet 

resources. 

Client and server computers – basic Web access is based on client/server 

technology. 

Hypertext presents and relates information as interlinked documents, which 

allows the reader to explore related documents by selecting a linked object 

through a click of a mouse or other pointing device. A hyperlink (hypertext 

link) is usually embedded in the text and appears as either a highlighted word 

or phrase (usually underlined and colored blue), or as a symbol, an icon, or 

other graphic elements, which points to other documents or resources on the 

Web. Placing the cursor over a hyperlinked object will change the cursor to a 

hand. Web pages are hypertext documents on the Internet, mostly created using 

HTML. 

Protocols are a standard set of rules that govern how computers communicate 

with each other. Examples are TCP/IP, SMTP, FTP, and HTTP. HTTP is the 

underlying protocol used to transmit information over the Web. The Web 

supports several Internet protocols aside from HTTP such as STMP, FTP, and 

VoIP, allowing access to huge collection of information and services. 

The Uniform Resource Locator (URL) is a uniform naming scheme that 

specifies unique addresses for web servers, documents and other resources no 

matter what their access protocol. The URL points to where the data or service 

is located on the Internet. Web documents and resources are located and linked 

through their URL’s. Hyperlinks contain the URLs of web pages and other 

online resources that point to where web documents can be found, what 

protocol to use, the name of the computer (web server) that hosts the 

document, the directory in which it resides, and the name of the file. 

Web access is based on client/server technology. The Web uses the 

distributed client server computing model, which generally classifies 

computers connected to the Internet as either a server or a client computer that 

transmit information using HTTP. 

Server computers are computers that host web documents and provide 

information through a web server application program. Both the machine 

30

EIPICT_M6_TG 

running the application program and the program itself are referred to as the 

web server. But the machine can also run other applications and may also 

function differently aside from being a web server. Most machines work as 

web server, mail server and FTP server at the same time. Big web sites usually 

have dedicated machine(s) as their web server(s) to provide better, faster and 

more efficient services. Client computers access web documents using an 

application program called a web browser. 

A computer connected to the Internet may be both a server and a client. But 

companies or organizations normally run servers, while computers used by 

individuals who simply access the Web are client computers. 

Slide 9 is an illustration of how the Web works 

Note 

A computer with a web browser is required to access the Web. The computer 

sends a request for information by typing the URL of a web page on the 

browser’s address or location bar. The browser interprets the user’s selection 

and makes a request from the appropriate server by interpreting the URL. Once 

located, the server will accept and process the request from the browser. After 

processing, the server will send the requested file to the browser. The browser 

will interpret the file sent by the server and display it on the user’s monitor. An 

error message will appear if the requested file or service is unavailable. The 

same process occurs when a user selects a hyperlink on a web page. 




Lesson 1 

Ask the students to read the following web documents to know more about 

how the World Wide Web works. 

1. Overview of Web Mechanisms. 


2. How Web servers and the Internet Work. 

http://www.howstuffworks.com/web-server.htm 

31

EIPICT_M6_TG 

Slide 11: Hypertext Mark-up Language 

Note 

There are several programming languages that can be used to create web 

pages. However, we will only discuss HTML in this module. HTML provides 

the underlying foundations on which web pages are created and linked to one 

another. It is the lingua franca for publishing hypertext on the World Wide 

Web. The language makes use of tags and attributes and links to other parts of 

the program or other resources. The use of HTML in making Web pages will 

be discussed in another lesson. 

Slide 12: Anatomy of a URL 

Note 

The first part of a URL, the protocol (http), specifies the method of access. The 

second part is the host computer or the server name (www.unesco.org). The 

directory path (/webworld/ portal _bit/) points to where the web document can 

be found. Lastly the file name (index.shtml) of the web document specifies the 

actual web page that will be displayed on the screen. 

Note that not all URLs have a directory and file name, since web servers, 

based on their configuration, open the default home page of a web site when a 

specific file is not identified. For example, typing the URL 

http://www.unesco.org on the browser's address bar will bring you directly to 

the UNESCO home page. 

Slide 13-14: What is a Web Server? 

Note 

The term web server refers to computers that host web documents and provide 

information through a web server application program. Both the machine 

running the application program and the program itself are referred to as the 

web server. Web server listens and responds to a client computer’s request 

made through a web browser via HTPP protocol. It serves web documents and 

other files to browsers and applications making use of Web standards, 

technologies and protocols providing various online services. 

Examples are presented in slide 12. 

32

EIPICT_M6_TG 

Tip 

Read this article to know more about how web servers work. 

1. Serving Up: Web Server Basics. 

http://www.serverwatch.com/tutorils/article.php/1407961 




Lesson 1 


1. Living Internet: Web Servers 


2. Web server. Information from Answers.com 


3. Comparison of Web Servers. Information from Answers.com 


Slide 16: What is a Web Browser? 

Note 

A web browser is application software that is used to locate and issue a request 

for the page on the web server that hosts the document. It interprets the page 

sent back by the web server and displays it on the monitor. It is therefore a 

computer program that lets you view and explore information on the World 

Wide Web. 

Examples are: 

 

 

 

 

Internet Explorer - browser integrated with the Microsoft Windows 

operating system. 

Firefox - a free, open-source web browser based on the Mozilla code and 

available for Windows, Linux and Mac. 

Opera - free web browser popular on handheld devices, specially mobile 

phones. 

Safari - web browser developed by Apple Computers for its Mac OS X 

operating system. 

33

EIPICT_M6_TG 

 

 

 

Konqueror - open source web browser for Linux from KDE. 

Amaya - open source editor/browser from W3C. 

Lynx - text-based browser originally designed for Unix and VMS and the 

most popular console browser on GNU/Linux. 




Lesson 1 


1. Surf the Web: Web Browsers. 


2. Web Browser : Information from Answers.com. 

http://www.answers.com/topic/web-browser 

3. Comparison of Web Browser : Information from Answers.com. 


Slide 18: What is a Web Page? 

Note 

A web page is an electronic document that typically contains several types of 

information, accessible via the World Wide Web. It is a set of information 

created, and organized, in a document-like format using HTML and/or other 

web page authoring and development tools. The web document is interpreted 

and displayed on the screen according to the instructions of the web page 

authoring tool. It is the page representing an information resource on the Web. 

Slides 19-20 Demonstrate how Web Pages work. 

Note 

The captured image of the US Library of Congress web page shows how it is 

displayed on the screen. Its home page is at http://www.loc.gov 

Beside it is the image of its source (part of it), an ASCII file created using an 

HTML editor or other web page authoring tool. The source contains the 

instructions that define the contents, layout, and structure of a web page. The 

browser uses these instructions to interpret and display the web page on the 

screen. 

34

EIPICT_M6_TG 




Lesson 1 

Ask the students to read these online articles: 

1. How web pages work. http://www.howstuffworks.com/web-page.htm 

2. Living Internet: Web pages. 

http://www.livinginternet.com/w/ww_pages.htm 

3. Surf the Web: Anatomy of a Web Page. 

http://www.learnthenet.com/english/html/14wbpganat.htm 

4. Web page : Information from Answers.com. 


5. How Web Sites Work. http://www.answers.com/topic/website 

Slide 22. What is a Web Site? 

Note 

A web site can be composed of a single web page that contains links to related 

information located on several web sites or it can be the collection of related 

web pages of a certain individual, group, or organization, connected through a 

system of hyperlinks, hosted by a web server in a particular domain. 

A home page is the main page of a web site that typically serves as an index or 

table of contents to other web pages on the site. It is usually the first web page 

users see when they visit a web site. 

The terms web page, home page and web site are used interchangeably since 

they refer generally to electronic documents that populate the World Wide 

Web. 

Slide 18 is an example of a home page, a web page or a web site 

35

EIPICT_M6_TG 

Web page? Web site? Home 

page? 

This Web page is 

the home page of 

the UNESCO web 

site 


Assessment 

Assessment 

Choose the correct answer 

1.______________________ is a hypertext-based system that provides, 

organizes and accesses information in a non-hierarchical and non-sequential 

manner, allowing users to jump from one information space to another 

a. World Wide Web b. Protocols c. Domain d. Multimedia 

2.______________________ a set of rules and standards that govern how 

computers and other devices communicate with each other 

a. Universal Resource Locator b. Protocols c. HTML d. Web 

3.______________________ naming scheme that specifies unique addresses 

for web servers, documents and other Internet resources 

a. Protocols b. Universal Resource Locator c. HTML d. Web 

4.______________________ a computer program that lets you view and 

explore information on the World Wide Web 


5.______________________ a markup language and the lingua franca for 

publishing hypertext on the World Wide Web 

36

EIPICT_M6_TG 


Answers: 1.World Wide Web 2.Protocols 3.Universal Resource Locator(URL) 

4. Web browser 5. HTML (HyperText Markup Language) 

End of Lesson 1 of Module 6 

37

EIPICT_M6_TG 





Lesson 2: Principles of Web Design 

Introduction 









Lesson 2 

Principles of Web Page Design 



Tip 


the web page/site design and creation. 

Slide 2: Rationale 

38

EIPICT_M6_TG 

Tip 


the students about their own training and experiences with regard to web page 






of librarians and other information workers to meet the demands of the global 

economy for information resources and services. 


them cope with the challenges and opportunities brought about by ICT in the 

World Wide Web. The module is also intended to provide the students with 

sufficient knowledge to enable them to train other library and information 

personnel in their workplace or even throughout the region. 

Slide 3: Scope 

Note 



Slide 4: Learning Outcomes 

Tip 

Inform the students about the learning outcomes for the lesson. There is no 

need for discussion at this point. 

Slide 5: What are the First Steps in Web Page Design? 

39

EIPICT_M6_TG 

Note 

In any endeavor, planning is crucial for the project's success since it is at this 

stage that you will define what you would like to do, what you will need, and 

how you will do it. Point out that in web page design it helps to be aware of 

some of the basic principles that will guide and show you the first steps in web 

page design. 

In planning, take the following into account: 

Your purpose/objective – Why build a web site for your library? Do you 

have a specific objective that you would like to achieve, like, increasing 

access to the OPAC or electronic resources? Are you going to use it to 

publish a newsletter? 

Your audience – Who are your target audiences? Are they ICT literate? Do 

they have the facilities to access the Web site and its resources? 

The content – What kind of information will be provided on your site? Do 

you have sufficient information that you can put in your Web site? Can you 

maintain the content? 

The essential resources – Do you have the budget, personnel, materials, 

time and other resources? Do you have access to the Internet? 

Slide 6 Activity 6.2.1 



Lesson 2 

Go through the first steps in web page design and write down the answer to the 

initial questions discussed. You can add more information as you would like. 

Submit a copy to your instructor. 

Slide 7 provides some examples of reasons why the library should build a Web site 

Tip 

Emphasize to your students that the first steps in web page design require their 

awareness of its goal, purpose and objectives. Tell them that these should be 

determined at this point before proceeding with the lesson. Ask you students to 

discuss the sample objectives. Then ask them to write down their own 

objectives for building a web page. 

40

EIPICT_M6_TG 

Slide 8 presents some ideas for describing your audience 

Tip 

Tell your students that knowing more about their target audience will help in 

deciding what should be provided in their web page. It will help in finding a 

match between their needs and the information you will provide. It will also 

help in assessing whether they have the means to provide it. You can 

determine and know more about your audience by answering the following 

questions. 

 

 

 

 

Who is your target audience? Students? Faculty? Staff? General public? 

Children? 

What are their interests and needs? 

Are they proficient in using technology available in the library? 

What kind of site will they prefer? Informative? Entertaining? 

Ask your students to describe their target audience. Ask them to write down 

their descriptions. 

Slide 9. Content 

Tip 

Once they have determined their audience, they can now proceed with defining 

their content. Creating an outline of what they intend to provide will greatly 

help in creating their web page. They can also prepare a concept map for the 

content. 

Note 

An example of a simple concept map for a library is: 

41

EIPICT_M6_TG 

Building 

Collection 

Print 

Non-Print 

e-resources 

Technology 

Staff 

Librarians 

Non-Professional 

Library 

Financial 

resources 

Technical 

Services 

Acquisitions 

Cataloguing 

Indexing 

Readers 

Services 

Circulation 

Reserve 

Periodicals 

Slide 10. Resources 

Tip 

Tell the students that identifying and preparing the essential resources before 

starting with web page design will help them save a lot of time, effort and 

money. Having them on hand will help them accomplish the task in a more 

effective and efficient manner. 

Tip 

Visit, read and browse the linked web pages. 

1. Why in the World Wide Web: Reasons for Schools to Create Web Sites. 

http://fno.org/mar97/why.html 

2. Planning Your Web Site. 

http://webjunction.org/do/DisplayContent?id=758 

3. Plan: Web Publishing. http://www.ncte.ie/wpc/plan.htm 

Note 

Ask the students to read the articles above when they have finished the 

activity. This is to ensure that what they want to accomplish largely came from 

their own ideas, which the articles then can enhance. 

42

EIPICT_M6_TG 

Slides 11-12- What are the Elements of a Web Page? 

Note 

The following are some of the elements of a web page: 

1. Title – the title of the document is shown at the top of the browser's 

window. This could be different from the title of the information shown on 

the page. 

2. Web address – the URL of the page as shown in the browser’s address box. 

3. Content – the information on the page - text, graphics and other media 

types. 

4. Design – the style of the page, font, color, background, visual elements 

5. Structure –layout of the page: title, headings, frames, navigational tools, 

footers. 

6. Hyperlinks – the links to related resources. 

Slide 13. Activity 6.2.2 



Lesson 2 


1. Familiarize yourself with the different elements of a web page 


2. Anatomy of a Web Page. 


3. Anatomy of a Web Page. 

http://terra.chemeketa.edu/faculty/bloj/design/anatomy2.htm 

Note 

Emphasize that being aware of each element and its function and effect in the 

overall design will serve as a guide in creating and designing the web page. 

Tip 

View this site that discusses page elements and explore the linked 

page elements. http://terra.chemeketa.edu/faculty/bloj/design/elements.htm 

43

EIPICT_M6_TG 

Slides 14-19: What are the Design Elements of a Web Page? 

Note 

The following slides contain design guidelines for each page element. Discuss 

them with the class and remind them to keep them in mind when they are 

viewing library web sites and apply them when they are working on their own. 

Design elements of a Web page. 

Overall look of the web page – the general look or feel of the page 

(aesthetic value). 

Content – all the information contained within the page, i.e. text and other 

media. 

Navigational tools – the text links, icons, buttons, bars and other objects 

used for exploring the page and any linked pages. 

Graphics – the images and other graphical elements in the page. 

Page layout and structure – organization of the elements in the page. 




Lesson 2 


1. Designing Effective Web Pages. 


2. Research-Based Web Guidelines Page Layout. 

http://www.usability.gov/guidelines/layout.html 

3. Resources: Design Tips. http://www.csus.edu/web/webdesign.html 

Slides 21-24 Some Do’s in Web Page Design 

Note 

The following do’s are self explanatory 

 

 

Plan the web site structure and navigation. 

Keep the layout simple and intuitive. 

44

EIPICT_M6_TG 

 

 

 

 

 

 

 

 

Use the same general style throughout. 

Add standard navigation tools to each page. 

Include copyright and contact information on each page. 

Use original or free graphics. 

Use images wisely and keep file size small for fast download. 

Respect copyright and intellectual property rights. 

Always state the source of all materials used. 

Spell check and proofread each page. 

Tip 

Read Jakob Nielsen's Alertbox: Ten Good Deeds in Web Design. 


Note 

The following don’ts are self explanatory 

Don’t crowd your pages – balance text, graphics and space. 

Don’t overuse graphics, animations and other bleeding edge technology – 

use them to support and enhance but not to overpower your work. 

Don’t use background that distracts the user or makes text unreadable. 

Don’t use blinking or glowing text for emphasis. 

Don’t use long paragraphs of text – divide them into readable chunks. 

Don’t create dead end pages which have no links to any other local page in 

the site. 

Don’t design for a specific browser. 

Tip 

Look at Jakob Nielsen's Alertbox: Top Ten Mistakes in Web Design. 

http://www.useit.com/alertbox/9605.htm 

Slide 25 

45

EIPICT_M6_TG 

Activity 6.2,4 


Lesson 2 

1. Make use of the information you gathered in activity 2.1 regarding your 

library’s web site, create a checklist of what you’ll need and what 

information and services the web site will provide. 

2. Create a storyboard for your web page, with a layout for each page. 

3. Organize your web site - illustrate the structure of your site showing how 

the pages are linked to each other. 

Slides 26-33 How to Evaluate Web Sites 

Note 

Developing the skills to evaluate web sites helps in evaluating and designing 

your own web sites. Good web sites can serve as models in designing your 

own. 

The following criteria can be used in evaluating web sites: 

Accuracy – free from error and alteration. 

Authority – credibility of author / publishing body. 

Objectivity – creator’s point of view / bias. 

Currency – timeliness of information. 

Content – scope and depth of material. 

Design – style, structure, and functionality. 

Accessibility – availability of the resources. 

Note 

The following are self-explanatory. 

Slide 27: Accuracy 

The accuracy of information is related to the reliability and integrity of the web 

site developer. Usually URLs with domain names containing .org and . edu are 

reliable. 

 

 

 

 

How reliable is the information? 

Is it the original document? 

Are there any errors or alterations on the page? 

Is there a way to verify authenticity of the content? 

Slide 28: Authority 

46

EIPICT_M6_TG 

The authority of information is related to the reliability and integrity of the 

Web site developer. Usually URLs with domain names containing .org and 

.edu are authoritative. 

Who is the author? 

Is the author credible? 

Who is the publisher of the page? 

Is it a reputable publishing body? 

Slide 29. Objectivity 

Avoid sites which show opinions, biases, etc. Ask questions such as: 

From which point of view is the information presented? 

Does it show a minimum of bias? 

Is it trying to sway opinion? 

Is it in line with the aims or purpose of the web site? 

Slide 30. Currency 

This refers to the age of the information. Ask questions such as: 

Is the information dated? 

Is it timely? 

Is it up-to-date? 

Are the links current and still available? 

Slide 31– Content 

The authority of information is related to the reliability and integrity of the web 

site developer. Usually URLs with domain names containing .org and .edu are 

authoritative. Ask questions such as: 

 

 

 

 

What is the scope of the web site? 

How in-depth are the materials? 

Are they in line with the purpose of the web site? 

Does it provide meaningful and useful information? 

Slide32 – Design 

This refers to the aesthetic quality of the site. Questions that could be asked 

are: 

Does it follow established design principles? 

Is the site easy to read and navigate? 

Is there a balance between style and functionality? 

How should web sites be evaluated? 

Slide 33 – Accessibility 

This is a more technical aspect of evaluation. Ask questions such as: 

Can it be viewed using different browsers? 

Does it require a special program to read the content? 

Is the information readily available on the web site? 

47

EIPICT_M6_TG 




Lesson 2 


1. ALA. Teaching undergrads WEB evaluation. 

http://www.ala.org/ala/acrl/acrlpubs/crlnews/backissues1998/julyaugus 

t6/teachingundergrads.htm 

2. Great Web Sites for Kids Selection Criteria. 

http://www.ala.org/ala/alsc/greatwebsites/greatwebsitesforkids/greatwe 

bsites.htm 

Note 

This is the end of Lesson 2. For assessment ask the students to do the 

following: 

1. Visit library web sites. You can use Google or any search engine if you 

don’t have any particular library in mind, or use these links: 

a. Innovative Internet Applications in Libraries. 

http://www.wiltonlibrary.org/innovate.html 

b. Libweb: Libraries on the Web. 

http://lists.webjunction.org/libweb 

2. Using the principles and guidelines discussed together with the 

evaluation criteria choose three library web sites which you would like 

to use as models for your library web site. List down the features and 

characteristics of the web sites that you would like to emulate. 

3. Submit the names of the three web sites you have chosen and their 

URL’s with the list of features, functions, information and services 

provided to your instructor. 

Recommended Reading 

Read this and ask your students to do the same to gain more knowledge and 

insights on web design: 

Patrick Lynch and Sarah Horton. Web Style Guide, 2nd ed. 

http://www.webstyleguide.com/index.html/ 


48

EIPICT_M6_TG 





Lesson 3: Creating Web Pages Using HTML 

Introduction 









Lesson 3 

Creating Web Pages Using HTML 

UNESCO EIPICT M6. LESSON 3 1 


Tip 


the web page/site design and creation. Learning HTML allows you to create 

web pages using tools already available from your computer. It also gives you 

a better understanding of HTML elements, how they work and how they are 

used to create web pages. 


49

EIPICT_M6_TG 

Tip 


the students about their own training and experiences with regard to web page 






of librarians and other information workers to meet the demands of the global 

economy for information resources and services. 


them cope with the challenges and opportunities brought about by the World 

Wide Web. The Module is also intended to provide students with sufficient 

knowledge to enable them to train other library and information personnel in 

their workplace or even throughout the region. 


Note 




Tip 



Slide 5: Hypertext Markup Language 

50

EIPICT_M6_TG 

Note 

HTML is a markup language that defines the structure of information by using 

a variety of tags and attributes that are designed to display text and other 

information on a screen and provide hyperlinks to other web documents. The 

latest version is HTML 4.01. This is the language used to create web 

documents. 




Lesson 3 

Read these introductions to HTML. 

1. What is HTML? InterNIC 15 Minutes Series (mirrored by Netskills). 


2. HyperText Markup Language Home Page. http://www.w3.org/MarkUp/ 

3. Dave Raggett: Getting Started with HTML. 


Slide 7-8: Web Standards 

Note 

The World Wide Web Consortium (W3C) is the body that develops web 

standards and guidelines so that documents created by any person can be 

communicated to other people. These standards include hardware, software 

and protocols for the Internet. 

Slide 9: What is HTML 4.01? 

Note 

HTML 4.01 includes standards for scripting languages, style sheets, better 

printing facilities, and documents that are more accessible to users with 

disabilities. The rules in the earlier versions are still followed for text and 

multimedia, with some additions and revisions. 

51

EIPICT_M6_TG 




Lesson 3 

To know more about how to use HTML to create web pages browse the 

following sites. 

1. HTML Primer. http://www.htmlgoodies.com/primers/html/ 

2. HTML Basics. http://www.ncsu.edu/it/edu/html_trng/html_basics.html 

3. Introduction to HTML. http://www.w3schools.com/html/html_intro.asp 

Slides 11-12: What are the Basic HTML Tags. 

Note 

The basic HTML tags arranged in correct sequence are: 

Tag 

 

 

 

 

 

 

Explanation 

This tag marks the beginning of an HTML document. 

This tag contains all the information about the 

document. The information is not displayed on the 

screen but provides clues to the programmer about 

what the document is all about. 

The title of the document is placed between the title 

tags. Take note of the /. The information in-between 

the tags are also for the programmer. In this section, 

several tags can be used but they are not required. 

Typically HTML documents supply only the title tag, 

which is used by search engines in indexing the web 

page. Example: My Library. Aside 

from being used for indexing, the information 

supplied in this tag is displayed on top of most 

browsers’ window, which is generally helpful in 

describing the content of the page. Thus ideally short 

but descriptive titles of a web page should be used. 

This tag closes the information included above. Note 

the closing / as before. 

This is the start of the part of the document displayed 

on the screen. The content of a web page displayed by 

the browser is defined after this tag. 

The beginning and end of the information you would 

like to display are placed between these tags to 

52

EIPICT_M6_TG 

 

 

separate them from one another. 

When you have written down all that you would like 

to include in your document close it using this tag. 

Take note of the /. 

This tag marks the end of an HTML document. Take 

note of the / before html. The closing tag identifies it 

as an html document. 

Look at slides 12 and 13 for examples. 

Slides 13-14: What are the Basic HTML rules? 

Note 

To build a web page using HTML you need a basic understanding of how it 

works, and the rules and syntax used. HTML uses a coding system of tags and 

optional attributes, which are interpreted by browsers in displaying the web 

page on the screen. The following are some of the important things to know 

about HTML : 

HTML tags are enclosed by brackets < > for example 

Most tags require a closing tag < html > … 

Tags must be nested correctly My Library Web 

Site first tag on, last tag off 

HTML treats all white space as a single blank space 

Tags are not case sensitive but by convention are written in small letters 

like other programming languages 

Most tags have optional attributes with several possible values that modify 

the tag’s behavior 

Slide 15: What are the Tools for creating Web pages using HTML? 

Note 

 

HTML editor – e.g. NotePad, Nvu - to write HTML documents 

o HTML editors are software application for creating and changing web 

pages. 

o Generally there are two types: text editors and What You See Is What 

You Get (WYSIWYG) editors. 

o Plain text editors - use of plain text editor like Notepad requires 

understanding of HTML. 

53

EIPICT_M6_TG 

 

 

 

 

o What You See Is What You Get (WYSIWYG) editors – like Nvu 

provide an editing interface which resembles how the page will be 

displayed in a web browser and does not require prior knowledge of 

HTML. 

Web browser – to test and view the created web page (IE, Firefox etc.). 

HTML reference book – to serve as guide for HTML tags. 

Other utilities, tools and online resources. 

Information and other materials about the library in electronic files. 

Slide 16: How to use Notepad to create a Web Page 

Tip 

Open Notepad or any text editor. Type the basic HTML tags as seen on the 

slide. Save them as "basic.htm" files. View them using your browser. Do this 

in front of the class so they will see in action the use of HTML in creating web 

pages with Notepad. It might help convince them that it is not as hard as it 

seems. 

Procedure 

Create a new folder. 

Open Notepad. 

Use the basic HTML tags. 

Save the file (basic.htm) in the new fold. 

Use your browser to view the created page. 

Use Notepad to add or edit content. 

Save the file for every change made. 

Refresh/reload your browser to see the changes. 

Slide 17: Exercise 1 

Note 

Ask the students to do Exercise 1. A step-by-step guide is provided for those 

who are having difficulties with using Notepad. Explain clearly and check on 

their work. 

54

EIPICT_M6_TG 

Exercise 1 


Lesson 3 

1. Follow the steps on the slide. 

2. If everything works, the finished web page should be the same as the one 

on the slide. 

3. If not, read the step-by-step guide on how to use Notepad. 

Slide 18: How to add Content - Header Tags 

Note 

Adding content to your web page follows some of the basic rules in writing and 

publishing documents. One of these is the use of headings to denote the main 

headings and subheadings within the page's layout. In HTML, header tags 

range from to , being the largest and the smallest. The 

heading’s size shows the hierarchy of importance on the page’s layout. 

Tip 

Show how this is done by using Notepad to open and edit the file created 

earlier - "basic.htm". Type the additional information with the corresponding 

tags as shown on the slide. Use your browser to view and edit if needed by 

viewing the source. Again, do this in front of the class. 

Let the students try it on their own by using the computers in front of them. 

Provide them with a copy of the basic HTML tags for creating a web page. 

One good article is:Webmonkey: Reference.HTML Cheatsheet. 

http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/ 

Slides 19-20: Exercise2 

Exercise 2 


Lesson 3 

1. Add headings to your web page (basic.htm). 

2. Use the outline of information you gathered about your library / institution 

in lesson 2 as the basis for your headings. 

3. Save your file, then test/view using your browser. 

55

EIPICT_M6_TG 

Slide 21: How to add Content - Paragraph Tag 

Note 

Textual information on a web page is written directly using text editors or 

making use of the copy and paste features of Windows-based programs. The 

tag breaks the textual information on a page and inserts a single line space, 

which is useful for defining and separating paragraphs. tags are also used 

to separate elements of a page using line breaks that are automatically provided 

when the tag is used. 

Without showing them how, but using just the PowerPoint slide as a guide, ask 

the students to add more textual information on the basic HTML document they 

are working on. Spend time to go around and look at what they are doing. 

Satisfy yourself that they are grasping the concept, and reinforce it by showing 

them how. 

Slides 22-23: Exercise 3 

Exercise 3 


Lesson 3 

1. Open basic.htm using Notepad. 

2. Insert this text with the paragraph tag after Mission, Vision and 

Goals 

 

MyLibrary aims to be the country's public virtual library with 

state-of-the art resources and associated services, available to anyone, 

anytime, anywhere. 

3. Save, then View the result; it should be similar to the one on the slide. 

4. Add more paragraphs using tag. 

5. Encode or copy and paste the information you have gathered in Lesson 2 

about your library / institution for additional content. 

Slides 24-29: Other HTML Tag – Lists 

Note 

HTML also supports lists: unordered lists, ordered lists, and definition lists, 

which are sometimes the best way to present information. An Unordered list is 

56

EIPICT_M6_TG 

a bulleted list that uses and tags. 

Lists can be nested, one within another. 

The list item type attribute can be used to change the bullets in disc, 

square or circle, and in from number 1 to lowercase (a) or uppercase (A) 

letters, or lowercase (i) or uppercase (I) roman numerals. 

Let the students try the tags on their own using Notepad and the browser on 

their computer system to gain more practice in HTML coding and help them 

decide what type to use if they are going to use “list” on their web page. 


Exercise 4 


Lesson 3 

1. Add more information to your basic web page about your library: mission, 

vision and goals, history, library hours, contact information, etc. 

2. Create two more web pages - about your library collections, and about 

library services (one web page for each) 

3. Save and name them accordingly, collection.htm and services.htm. 

Note 

The pages created in this exercise ("collection.htm" and "services.htm") and 

the one created in exercise 1 ("basic.htm") will be used in the hyperlinking part 

of this lesson. 

Slide 31-32: How to add Images 

Note 

Images and other graphical elements can be added to the web page through the 

tag, using the src (source) attribute that points to the image / graphics. 

If the file (i.e. mylogo.gif) is in the same directory where the HTML files are 

saved use relative URL .If not, the correct directory 

should be reflected in the src attribute 

Other attributes of the tag: 

The align attribute of the tag is used to align the image in relation to 

the textual information near it . 

57

EIPICT_M6_TG 

 

 

the textual information near it . 

The height and width define the size of the graphical element. 

The alt attribute provides alternative textual information about the graphical 

element. The information supplied here is used by text-based browsers or 

browsers with images turned off; it can be briefly seen by placing the mouse 

over the image on the slide. 

The image of a logo is used in showing how the tag and its attributes 

place graphical elements on a web page. 

Slides 33 provides tips on where to get images. 

Note 

 

 

 

 

You may prepare your own images by scanning photographs or your own 

designs. You may also create designs directly on the computer. Graphic 

editors – tools for creating and editing images - are available for those who 

would like to make the graphics on their own. 

There are also online resources where you can download free images, cliparts, 

buttons, etc. Take care in citing sources to avoid copyright 

infringement. 

There are also sites that provide tools for creating customized logos, 

headers or buttons on the fly. 

Some companies employ graphic designers for customized layout and 

design – thematic design, logo, borders, navigational elements, buttons, etc. 


Exercise 5 


Lesson 3 

If images are available proceed with the exercise. 

• Insert images on your web pages. 

• Test / View / Edit using your browser and Notepad. 

• Always save them after editing. 

If not search the Web for sites that provide free resources. 

• Classroom Clipart : Free Clipart, clip Art Illustrations and Photographs. 

http://classroomclipart.com/ 

• Use any search engine to look for graphic editors with these keywords - 

Graphic editors freeware - and for tutorials for the graphic editor of 

your choice. Try these online graphics generator sites. 

58

EIPICT_M6_TG 

your choice. Try these online graphics generator sites. 

– Xara 3D Heading Maker. 

http://www.xara.com/referrer/headmaker_trial.asp 

– Button maker. http://www.coolarchive.com/buttonmaker.php 

– Cool Text: Logo and Graphics Generator. http://cooltext.com/ 

Proceed with placing images on web pages. 

Slide 35- 39: How to create hyperlinks 

Note 

Hypertext is one of the underlying technologies that make the World Wide Web 

work. Hypertext links are created on web pages using the anchor tag with 

the href (Hypertext Reference) attribute. Hyperlinks connect your web pages 

together and point to other web documents. In other words, they build your web 

site. Text or graphical elements are used as the "trigger" (the object embedded 

invisibly with the target URL) that users click on to go to the linked document. 

Shown in slide 39 are two different hyperlinks using text as the "trigger", 

highlighted with a color defined in the link attribute of the tag. The 

first link uses a relative URL that points to a document within the same 

directory where the present HTML document is located. The second uses an 

absolute URL to point to an external resource that can be found on the Internet. 

Library Collection 

 

UNESCO Libraries Portal 

Hyperlinks are also used to point to graphic and other media like audio, video 

and animation. At the same time, icons and other graphic elements can also be 

used as the “trigger’ (object) users click on to jump to the referred document. 

Slide 41 shows the highlighted text and the thumbnail of a building used to 

provide a link to a bigger picture. Graphical elements display a border around 

them if it is embedded with a link. The border also uses the link color, vlink and 

alink attribute in the tag. To prevent the border from being displayed, 

with a link or not, use the border attribute of tag. 

MyLibrary 

 

 

A link to an e-mail address can be created so that it automatically opens the 

59

EIPICT_M6_TG 

email program on the system supplying the address. 

Contact me@mylibrary.edu 

Tip 

At this point while the students are working and improving their web page, 

provide tips and guidelines and remind them of the activities in the previous 

lesson, which should help define the design and content of their web page. In 

addition, the exercises should help them gain a working knowledge of HTML. 


Exercise 6 


Lesson 3 

1. Make basic.htm as the library’s home page. 

2. Link the other web pages collection.htm and services.htm to basic.htm. 

3. Create a link back to basic.htm on the other web pages. 

4. Place contact information at the bottom of each page (e-mail, tel.no#, etc). 

5. View / Test the links / Edit and save. 

Slide 41-42: What is WYSIWYG HTML Editor? 

Note 

It is a document editor that allows you to produce a document that resembles 

the display on the screen. It does not require prior knowledge of HTML but you 

may need HTML knowledge if the page you are working on does not display 

like you would want it to. 

Slide 43: NVU is a WYSIWYG HTML Editor 

Note 

NVU – is an open source WYSIWYG HTML editor comparable to commercial 

software. It can also manage the web site and communicate to a web server 

through FTP. 

60

EIPICT_M6_TG 

Tip 

Read the following Nvu user guide and tutorials available on the Web: 

Charles Cooke's NVU User Guide. http://www.Nvudev.org/guide/1.0PR/ 

Learn How To Build Your Web Site Using Nvu. 

http://ww.Nvu.com/websitehelp.html 

EccentricGnat.com >> NVU Tutorials. 

http://www.eccentricgnat.com/Nvu/index.html 

Nvu Tutorials from thesitewizard.com: 

o How to Design and Publish Your Website Using Nvu. 


o Nvu Tutorial 2: Adding Images, Changing Fonts, Colours, Creating 

Links, and Writing Your Content. 


o Nvu Tutorial 3: How to Create Data Tables. 


o Nvu Tutorial 4: How to Create a Multiple Column Layout. 


o Nvu Tutorial 5: How to Add a Feedback Form to Your Website. 


Make the Nvu user guide and tutorials available to the students after they have 

finished exercise 7. Let them practice using Nvu to enhance their web pages. 

Make use of several hexadecimal color code charts available on the Web. One 

good chart can be found at: 

HTML Clinic (http://www.htmlclinic.com/colorchart.php) 

It has a useful utility that allows you to define your own color. Provide the 

students with a copy of the hexadecimal color codes and let them figure out the 

color they want to use by trying out the color codes much as possible use only 

colors supported by most browsers. 

Slides 44-45: Exercise 

Exercise 7 


Lesson 3 

1. Download and install Nvu – available for Windows or Linux. 

2. Open the web pages created on previous exercises. 

3. View the page on the different modes. 

4. Modify the page properties – title, background color etc. 

5. Use the color palette or consult with an HTML reference book or the 

61

EIPICT_M6_TG 

Internet for the hexadecimal color codes you can use. 

6. Save the file for every change made. 

7. Insert images and other elements. 

8. Create hyperlinks to and from the three web pages and to other documents 

on the Web. 

9. View the web pages using the preview mode. 

10. Use your browser to view the page to see if there is a difference. 

11. Read the provided Nvu quick start guide. 

Assessment 6.3 


Lesson 3 

Project Web pages 

Submit electronic copies of the web pages created using the lesson: about.htm, 

collections.htm, services.htm and other web pages created while using Notepad 

or Nvu. The links should be working. 

Recommended Reading 

Read this and ask your students to do the same.- 

Writing for the Web: A Primer for Librarians. 

http://bones.med.ohio-state.edu/eric/papers/primer/toc.html 


62

EIPICT_M6_TG 





Lesson 4: Web Publishing and Maintenance 

Introduction 

The lessons are presented to the students as PowerPoint slides as shown in the title slide below. 

The Teacher’s Guide will provide you with information and tips on how to explain each slide. It 

will also provide you with exercises/activities that you can ask the students to do. 





Lesson 4 

Web Site Publishing and 

Maintenance 



Tip 


the World Wide Web, to have a clearer understanding of what a web page is, 

how it is created and how it works. 


63

EIPICT_M6_TG 

Tip 


the students about their own training and experiences with regard to web 

publishing. 

Now that you are finished with the design and creation of your web site, the 

last step is to publish and make it available on the Web. However, the process 

doesn't stop there. Because of the dynamic nature of the Web and its content, 

the person(s) responsible must continuously manage, maintain and update the 

information published on the web site. To do this requires you to upload the 

web pages to a web server that is connected to the Internet. 


Note 




Tip 



Slide 5: What are the Steps in Publishing a Web Site? 

Note 

1. Secure a domain name - a domain name is required to establish presence on 

the Internet. It is a unique name that serves as the address of a web site. 

Several Domain Name Servers (DNS) operating on the Internet transform 

this name into an Internet protocol (IP) address. The IP address is a set of 

unique numbers, usually shown in groups separated by periods like this: 

201.128.32.1 that identifies a computer on the Internet. Each set 

64

EIPICT_M6_TG 

corresponds to a single machine connected to the Internet. 

2. Acquire web hosting services - web pages should be uploaded to a web 

server that will work as the host for the web site. Generally, either you can 

set up your own web server or you can use a web hosting service offered 

by a commercial information solution provider. 

3. Test the website - the web site must be tested before uploading it to the 

web server to ensure that everything will work, and especially the links 

between and among the web pages. 

4. Upload the web pages - putting the web site onto a live host, a web server 

connected to the Internet, usually requires the use of FTP client software 

(unless you have access to your own web server). 

5. Update the information - the timeliness, currency and accuracy of 

information on a web site is important; it is imperative that periodical 

updates are carried out on the web site's content. 

6. Validate the links - due to the dynamic nature of the Web, links on the web 

site must be validated to eliminate or at least minimize dead links and 

outdated information. 

7. Promote the site - a web site's success largely depends on the type and 

quality of information and services it provides. However, to attract and 

reach a broader base of clients and customers, these services should be 

publicized using various marketing and promotional techniques. 

8. Address issues and concerns in web publishing - in web publishing one 

must be aware of and address various ethical, legal and other issues. 

Slide 6: How to get your own Domain 

Note 

Begin by selecting a name that best describes your institution. Make sure that 

the name is unique. Search one of the domain registrars to find out if the name 

you have chosen is still available. 

Try searching the domain registrars for the name you have chosen: 

Try it on Network Solutions at http://www.networksolutions.com for .com, 

.org, and .net TLD's 

You can also search at InterNIC Whois search at 

http://www.internic.net/whois.html 

Look for accredited registrars in your country if you want to use your country 

code TLD. Find out if the domain you want with your country code TLD is 

available by searching at http://www.uwhois.com 

If you are part of an organization like a university, check with your IT 

department. It is possible that your organization already has a domain name. 

65

EIPICT_M6_TG 

department. It is possible that your organization already has a domain name. 

The person or group responsible can give you a sub-domain name like 

mylibrary.univ.edu or mylibrary.digital.com 

Register your domain name in any of the domain registrars by providing the 

needed information and paying the necessary fees. 




Lesson 4 

1. Read: 

• InterNIC FAQs on the Domain Names, Registrars, and Registration. 


• How to Register Your Own Domain Name. 


2. For our purposes make use of sub-domains provided by free web hosting 

sites (e.g. www.topcities.com). 

3. Register and pay for a domain name if your web site is ready for publishing 

on the Web. 

Slide 8: Where will you host your Web Site? 

Note 

There are three ways to host your web site: 

Have your own web server. 

Host it on free web hosting sites. 

Host in on a commercial web hosting site for a fee. 

Each option has its advantages and disadvantages. 

Having your own web server gives you greater control over the application 

programs running on your server and access to your web site for updating, 

troubleshooting and maintenance. However, the system must meet the 

necessary hardware and software requirements, and have an adequate 

bandwidth Internet connection. Moreover, key personnel must have expertise 

in setting up, updating, managing and maintaining servers. 

Free web hosting sites mean that you need not incur the cost of buying the 

necessary hardware and software, pay for Internet connection bandwidth, or 

66

EIPICT_M6_TG 

hire personnel. The down side is that your web site will be loaded with 

advertisements, will have limited file storage size, and will be restricted to 

certain applications that will run on your web site. Free web hosting sites 

typically have a slow download capability and weak file security. 

Commercial web hosting companies usually offer two options: file storage 

space for hosting your web site with support for some application tools like 

flash or cgi-bin; or all these features plus services such as the development 

and design of your web site. Commercial web hosting services are also known 

for demanding large fees relative to the amount of services being provided. 

There is also a big danger of weak file security and confidentiality; you must 

trust an outside organization with full access to your web site, and this can be 

risky even with a non-disclosure agreement. Lastly, there is the risk of 

becoming overly dependent on the company providing services, and its 

stability and capability to continue doing business. 

Your choice should be based on the purpose of the web site, the target 

audience, the information and services to be provided, and your institution’s 

human, material and financial resources. Provisions and considerations should 

be made for the continuous growth of your institution’s web site. 




Lesson 4 

Read the following articles: 

1. Finding a Home for Your Site. 


2. Choosing a Web Hosting Company: How to Choose a Web Host. 

http://www.thesitewizard.com/archive/findhost.shtml 

3. Free Web Site Hosting Service. 


4. Free Web Hosts. 


Tip 

Read this for more information: 

Bouton, Barbara. Getting your site on-line e-fuse.com. 

http://www.efuse.com/Grow/your_site_s_home.html 

67

EIPICT_M6_TG 

Slide 10 – Testing the Web Site on a Local Host 

Note 

You can develop and test your web site on a local host before publishing it 

online by using a web server software installed on your computer. Check to 

find out what the web site looks like once it is published and test whether the 

links, images, other features and applications work. Testing and editing web 

pages on a local host is easier and faster than working on pages already online. 

There are several web server software packages that can be used to host web 

sites locally depending on the operating system used. Some examples are: 

 

 

 

Personal Web Server (PWS) comes as part of Windows 98 and can be 

installed from the CD. 

Internet Information Server (IIS) is available for Windows 2000 / Windows 

XP Pro / and may be preinstalled for Windows 2000 / 2003 Server. 

Other software like Apache, Abyss Web Server, etc. can be used for 

developing web site locally. 

Web pages do not look the same on different Web browsers; at least two 

commonly used browsers should be used to see how the web pages look when 

viewed by users (e.g. Internet Explorer, Firefox). 

HTML validators helps in checking the syntax of HTML and can be used to fix 

errors that surfaces during testing (HTML validator lite, W3C HTML 

validator). 

Other tools for testing the web site on a local host are: 

 

 

Link checkers test whether the links on your web pages are correct and 

working, it can be used for both internal (within your web site) and 

external (on the Web) links (e.g. Xenu). 

There are also tools you can use to test how your web pages look on 

different browsers, screen resolutions and on different background colors 

online. 

Slides 11-12: Activity 6.4.3 

68

EIPICT_M6_TG 



Lesson 4 

1. For the web server that you will use, read the tutorials and follow the steps 

on how to set up a local host: 

Your own "Personal Web Server". 


Installing IIS on Windows 2000 Professional. 


How to install an IIS server on Windows XP Professional - by RazorX. 


Savant web server documentation. 


Abyss web server: Getting started. 


2. Download the other tools and read the documentation on how to use them 

for testing your web site locally. 

How to Check Your Website with Multiple Browsers on a Single Machine 

(Cross-Browser Compatibility Checking). 


Web Page Backward Compatibility Viewer. 


AnyBrowser_com - Your Source for Browser Compatibility Verification. 


Free HTML / CSS / Link Validators. 


Slide 13: How to upload your Web Site 

Note 

Your web site must be uploaded to a web server, and the host for your web site 

connected to the Internet in order to be accessed on the Web. Use a FTP client 

program to connect to your host in order to upload (transfer) your web site 

(files and other documents) to the server. 

FileZilla is a free open source FTP client program that you can use for 

uploading your web site to your host. 

Some HTML editors have built in programs that connect to a web host. 

Most web hosting services provide a web interface for uploading files aside 

from supporting FTP. 

69

EIPICT_M6_TG 

Test you web site on a local host before uploading to the server, and then test it 

again once it has been uploaded. 

Slide 14:Activity 6.4.4 



Lesson 4 

1. Read these articles on FTP and how to use FTP to upload web pages: 

FTP and Understanding File Permissions. 

http://www.interspire.com/content/articles/12/1/FTP-and-Understanding- 

File-Permissions 

FTP With FileZilla. http://wwell.net/tutorials/misc/filezilla/ 

The Nvu Web Editor Tutorial (Step 10: Publish). 


Free FTP Clients, Secure FTP (SFTP) Programs. 


2. Download FileZilla or get hold of an FTP program that will work with your 

system. 

3. Connect to the web server of your host and upload your web pages. 

4. Test your web site and submit your new web site URL to your course 

coordinator/instructor. 

Tip 

Read this for more information: 

FTP 101 - A Beginner's Guide. 

http://www.ftpplanet.com/ftpresources/basics.htm 

Slide 15: How to manage you Web Site 

Note 

The information on your web site should be updated for timeliness and 

accuracy. Due to the Internet’s dynamic nature, links on your site should be 

validated periodically to eliminate or at least minimize dead links - links to 

unavailable information. Furthermore, you should make use of your web site to 

provide new information and services where needed. 

70

EIPICT_M6_TG 




Lesson 4 

Read the following: 

Maintenance and Updating. 


Web Site Maintenance: Pros, Cons, and Solutions for Non-web 

Professionals. 

http://www.grantasticdesigns.com/websitemaintenance.html 

Annual Website Maintenance Checklist. 


Site Maintenance Tools. 

http://www.webdisplays.com/guide-web-design-tips-tutorial-help/tools.htm 

Slide 17: How to promote your Web Site 

Note 

Your web site promotion should be done using all the available resources at 

your disposal: tri media, on the Net, by word of mouth, demonstrations, 

training sessions, workshops, etc. Aside from press releases and 

advertisements in newspapers, radio and television, you can submit your web 

site to search engines to establish your presence online. 

Search engines require you to submit a description of your web site, what 

information, services or products are available, who is responsible, and other 

related information. You can also make posters, flyers and leaflets with a 

description of your web site and its URL. In addition, you can promote it 

during workshops and training sessions. 




Lesson 4 

1. Write a short description of your newly created web site including its 

URL. 

2. Submit a copy to your course instructor / coordinator. 

71

EIPICT_M6_TG 

3. Read - Search Engine Submission Tips. 


4. Submit it to different search engines. 

Slide 19-21: Ethical, Legal, and Other Issues in Web Publishing 

Note 

Once you publish your web pages on the Internet, other people will have 

access to them unless you restrict access. It is therefore important that you 

observe the following ethical, legal and other issues in web publishing. 

 

 

 

 

 

 

 

 

 

Netiquettes - accepted behavior on the Net. 

Privacy and confidentiality - protect your privacy and respect 

confidentiality of records. 

File security - from viruses and hackers; provision for back up and disaster 

recovery. 

Copyright and Intellectual Property Rights. 

Fair use of copyrighted works for educational and research purposes 

Reference citation of electronic resources. 

Obtaining permission to link to web sites before making the link. 

Web site evaluation – quality, accuracy, timeliness of information, design 

effectiveness. 

Accessibility design – provisions for the physically handicapped, especially 

the visually challenged who use the Internet. 




Lesson 4 

Read these articles: 

Copyright Law and Fair Use. http://www-sul.stanford.edu/cpyright.html 

Copyright Basics. Copyright Office. Library of Congress. 


Web Site Legal Issues. http://www.bitlaw.com/internet/webpage.html 

Ethics of Internet Use. http://onlineethics.org/topics/interethics.html 

 

Keeping it Legal: Copyright and Other Legal Issues Arising out of Web 

Site Management. http://fno.org/jun96/legal.html 

ALA Copyright Issues. 

http://www.ala.org/ala/washoff/WOissues/copyrightb/copyright.htm 

72

EIPICT_M6_TG 

Assessment 6.4 


Lesson 4 

Group Discussion 

Before ending the lesson, ask the students to search and visit each others’ web 

sites using different search engines. Check the web sites and take note of any 

errors encountered like dead links or broken pages. Discuss with the class and 

offer suggestions on how a certain web site could be improved or help fix it if 

there were problems. Finally evaluate each web site for its overall design, 

usability, relevance and accuracy of content. 

Note 

Discussions of new web standards and emerging technologies such as CSS, 

XML, JavaScript and other web development tools and applications are 

beyond the scope of this Module. To help students move beyond HTML, point 

them to this site: W3Schools Online Web Tutorials. 

http://www.w3schools.com/ 


73

EIPICT_M6_TG 

Module 6: Web Page Concept and Design: 


Evaluation Form 

Instructions: To help us enhance the quality and effectiveness of the Modules in the Training 

Programme, please complete and return this evaluation form to the teacher. 

Please rate Module # 6 on the following categories using the scales below by drawing a circle 

around the appropriate number. 

. 

5 = Strongly Agree [SA] 

4 = Agree [A] 

3 = Not Sure [N] 

2 = Disagree [D] 

1 = Strongly Disagree [SD] 

1. Objectives and Content SA A N D SD 

Were the course objectives clearly stated? 5 4 3 2 1 

Were the objectives achieved? 5 4 3 2 1 

Were the topics presented relevant to your work? 5 4 3 2 1 

Was the course structured in a logical way? 5 4 3 2 1 

Were the activities appropriate to the content of this course? 5 4 3 2 1 

Was the course easy to follow? 5 4 3 2 1 

Was the course interesting and enjoyable? 5 4 3 2 1 

Were your expectations met? 5 4 3 2 1 

2. Presentation SA A N D SD 

Were the concepts and techniques explained clearly? 5 4 3 2 1 

Were you encouraged to actively participate during the course? 5 4 3 2 1 

Were your individual questions/problems discussed to your 5 4 3 2 1 

satisfaction? 

Was the course well paced? 5 4 3 2 1 

Were the lessons presented in a clear and well organized manner? 5 4 3 2 1 

3. Teacher SA A N D SD 

Was the teacher knowledgeable in the subject matter? 5 4 3 2 1 

Did the teacher present the material effectively? 5 4 3 2 1 

Did the teacher show interest in and enthusiasm for the subject? 5 4 3 2 1 

Was the teacher effective in answering questions clearly and 

constructively? 

5 4 3 2 1 

74

EIPICT_M6_TG 

4. Learning Environment SA A N D SD 

Are the course materials easy to read? 5 4 3 2 1 

Were the manual and the other handouts useful? 5 4 3 2 1 

Were the visual aids useful? 5 4 3 2 1 

Was the venue suitable for the course? 5 4 3 2 1 

Was the time frame appropriate for the course? 5 4 3 2 1 

5. Before the training began, how experienced were you with the subject? 

1 (Beginner) 2 (Intermediate) 3 (Advanced) 4 (Expert) 

6. How useful was the training for your level of experience? 

1 (Not Useful) 2 (Fairly Useful) 3 (Useful) 4 (Very Useful) 

7. Do you feel you have gained new skills and knowledge? Yes No 

8. What is the most important concept or skill that you learned in this module? 

________________________________________________________________________ 

____________________________________________________ 

9. What is the least important concept or skill that you learned in this module? 

________________________________________________________________________ 

______________________________________________________ 

10. What additional information should be included in the module? 

________________________________________________________________________ 

____________________________________________________________ 

11. What did you like most about the training materials? 

________________________________________________________________________ 

____________________________________________________________ 

12. What did you like least about the training materials? 

________________________________________________________________________ 

____________________________________________________________ 

13. Other comments or suggestions? 

________________________________________________________________________ 

____________________________________________________________ 

THANK YOU! 

75

Module 6 - Web Page Concept and Design - UNESCO Bangkok

Create successful ePaper yourself

Delete template?

Save as template?