Vous êtes sur la page 1sur 143
NATIONAL OPEN UNIVERSITY OF NIGERIA SCHOOL OF SCIENCE AND TECHNOLOGY COURSE CODE: CIT 322 COURSE

NATIONAL OPEN UNIVERSITY OF NIGERIA

SCHOOL OF SCIENCE AND TECHNOLOGY

COURSE CODE: CIT 322

COURSE TITLE: INTRODUCTION TO INTERNET PROGRAMMING

COURSE GUIDE
COURSE
GUIDE

CIT 322 INTRODUCTION TO INTERNET PROGRAMMING

Course Team

CIT 322 INTRODUCTION TO INTERNET PROGRAMMING Course Team Dr. Ikhu Omoregbe Nicholas (Course Developer/Writer)-

Dr. Ikhu Omoregbe Nicholas (Course Developer/Writer)- Covenant University, Ogun State Prof. Olayide Abass (Course Editor) - UNILAG Ms. A.A. Afolorunso (Programme Leader)-NOUN

NATIONAL OPEN UNIVERSITY OF NIGERIA

CIT 322

COURSE GUIDE

National Open University of Nigeria Headquarters 14/16 Ahmadu Bello Way Victoria Island, Lagos

Abuja Office 5 Dar es Salaam Street Off Aminu Kano Crescent Wuse II, Abuja

URL:

Published by National Open University of Nigeria

Printed 2013

ISBN: 978-058-196-0

All Rights Reserved

Printed by For National Open University of Nigeria

CIT 322

COURSE GUIDE

CONTENTS

PAGE

Introduction …………………………………………….

iv

What you will Learn in this Course ……………………

iv

Course Aim …………………………………………….

iv

Course Objectives ………………………………………

v

Working through this Course ………………………….

vi

Course Materials ……………………………………….

vi

Study Units ……………………………………………

vi

Textbooks and References …………………………….

vii

Assignment File …………………………………………

viii

Assessment………………………………………………. viii

Presentation Schedule …………………………………

ix

Tutor-Marked Assignment ………………………………

ix

Final Examination and Grading …………………………

ix

Course Marking Scheme …………………………………

ix

Course Overview………………………………………….

x

How to Get the Most from this Course …………………

xi

Facilitation/Tutors and Tutorials

xii

Summary

xiii

CIT 322

INTRODUCTION

COURSE GUIDE

CIT 322 – Introduction to Internet Programming is a three-credit unit course. It deals with concepts, architecture, features, and services of the internet and a comprehensive introduction to current programming models and tools for generating rich Web applications. The internet makes information instantly and conveniently available worldwide. This Course Guide gives you a brief overview of the course content, course duration, and course materials.

WHAT YOU WILL LEARN IN THIS COURSE

This course will provide you with the necessary skills required to design and deploy solutions on the internet. A number of tools for constructing Web applications such as Hypertext Markup Language (HTML), Cascading Style Sheets, JavaScript, and Extensible Markup Language have a wide coverage in this course. Web services, Cloud Computing, mashups, microformat, folksonomies, and Web 2.0 technologies, which are hot topics today in Web application developments, have also been taken up.

This course is divided into four modules. Module one lays the background for the entire course. It provides fundamental information on the meaning, origin, architecture and services offered by the internet. It also explores network models and the protocols that work behind the scene to display Web pages. Module two focuses on Hypertext Markup Language (HTML) as one of the most important languages used to construct Web pages. This module concentrates on the syntax and the various HTML tags, elements and attributes used in developing Web page. Some of these include anchor, table, form, image, video, and audio. Module three explores such tools as Cascading Style Sheets and JavaScript for formatting text and adding interactivity respectively to Web pages. The module contains some sample codes in JavaScript and Cascading Style Sheets that demonstrate their features and capabilities in making Web pages come alive. Module four contains information on search engines and the technologies (and tools) for developing faster and interoperable Web applications. Topics such as Extensible Markup Language (XML), Web Services, Mashups, Application Programming Interface (API), Really Simple Syndication (RSS), Cloud Computing, Blogs, Podcasting, ontologies and Web 2.0 technologies are covered also in this module.

COURSE AIMS

The aim of this course is to equip you with the basic skills of studying and understanding internet programming as well as lay the foundation of

CIT 322

COURSE GUIDE

the basic knowledge and tools you need to become a proficient Web content developer /administrator. Specifically this aims to:

introduce

internet

you

to

the

concepts,

features and

services of

the

explore the architecture for Web applications and the tools for building standard websites

explore and use various HTML tags for web development

expose you to the techniques for writing Cascading Style Sheet as

imposing style on the content of HTML

a standardised way of

tags

teach you how to write JavaScript which is used for adding interactivity to static pages how to write XML to make Web applications more interoperable for data storage and exchange

acquaint you with the current trends in Web application development such as Web services, cloud computing, mashup, RSS, Wiki, and so on.

COURSE OBJECTIVES

Certain objectives have been set out to ensure that the course achieves its aims. Apart from the general objectives of this course, each unit of this course has set objectives. At the end of this course, you should be able to:

define and discuss the evolution of the Internet and explain the meaning of intranet and extranet

list the devices used to access the Internet and explain the various means of accessing the Internet

describe the term “computer network,” discuss the client-server model and describe the Web application architecture

explain the term “HTML,” write simple HTML codes using popular tags and use Web browsers to display HTML codes

write HTML codes to process form information, explain how to use Form action and Methods and discuss and use various form elements

discuss and state the importance of CSS, use CSS format web pages and add CSS to HTML files

explain

JavaScript programs

the

meaning

of

JavaScript,

write

and

run

simple

define the term “XML”

outline how to create, modify, process, view and validate XML document

explain the term “Search Tools,” describe the components of a Search Engine and explain how search engines works

CIT 322

describe

development tools

Web

2.0

Technologies,

classify

COURSE GUIDE

and

use

Web

WORKING THROUGH THIS COURSE

In order to have a thorough understanding of the course units, you will need to read and understand the contents, practice what you have learnt by studying and developing simple websites and Web applications for your organisation and be committed to learning and using skills acquired from the course to enhance your career.

COURSE MATERIALS

The materials you will need for this course include:

1. Course Guide

2. Study Units

3. Recommended Texts

4. A file for your assignments and records to monitor your progress.

STUDY UNITS

There are four modules broken down into 14 study units in this course. They are listed as follows:

Module1

Unit 1

Definitions and How to Connect to the Internet

Unit 2

Internet Services and Communication and Protocol

Unit 3

Network Model and Web Application Development

Module 2

Unit

1

Understanding HTML

Unit 2

HTML Elements

Unit 3

Tables

Unit 4

Input Tags and Form Processing

Module 3

Unit 1

Cascading Style Sheet

Unit 2

Fundamentals of JavaScript

Unit 3

Decision and Interactive Statements

Unit 4

Events and Event Handlers

CIT 322

COURSE GUIDE

Module 4

Unit 1

Overview of XML

Unit 2

Unit 1: Search Engines & Tools

Unit 3

The Future Web, Technologies and Development Tools

TEXTBOOKS AND REFERENCES

Alex, L. & Mathew, L. (1999). Fundamentals of Information Technology. New Delhi: Vikas Publishing House PVT Ltd.

Andy, S. (1999). Computer Communications, Principles and Business

Applications. (2nd

ed.). England: McGraw-Hill.

Barbara, K. K. & Norman, J. M. (2001). The World Wide Web: A Mass Communication Perspective.USA: Mayfield Publishing Company.

Barrie, S. &Valda, H.(2004). Programming the Web: An Introduction. USA: McGraw-Hill.

Behrouz, A. F. (2003).Data Communications and Networking. (3 rd ed.). International Edition. N.Y, USA: McGraw-Hill/Osborne.

Brian, K. W, Stacey, C. S. & Sarah E. H. (1999). Using Information Technology: A Practical Introduction to Computers and Communication. Irwin/McGraw-Hill

Deitel, P. J. & Deitel, H.M. (2008). Internet and World Wide Web: How to Program. (4 th ed.). New Jersey, USA: Pearson Prentice Hall.

June, C. (2003). The Unusually Useful Web Book. USA: New Ride.

MacBride, K. (2006). Brilliant Internet for the Over 50s: What you need to know about it. England: Pearson Education Limited.

Marc, D. M. & Thomas, C. P. (2003). Web Design Using Macromedia Dreamweaver. USA: McGraw-Hill/ Irwin.

Miller, D. (2006). Data Communications and Network. New York:

McGraw Hill.

Nagpal, D. P. (2006). Web Design Technology, Theory and Technique on the Cutting Edge. New Delhi, India: S. Chand and Company Ltd.

CIT 322

COURSE GUIDE

Nolan, H. (2005). Creating a Web Page in Dreamweaver. USA:

Peachpit Press, Berkeley.

Weverka, P. (2001). Instant Web Pages. USA: Sybex Inc.

Raymond, G. & Ellen, H. (2001). In-Line/On-Line Fundamentals of the Internet and World Wide Web. USA: McGraw-Hill Learning Centre.

Richard, A .M. Sr. (2003). Introduction to Networking. McGraw-Hill/Osborne.

N.Y, USA:

Robert, W. S. (2009). Programming the World Wide Web. New Jersey, USA: Pearson Addition-Wesley.

Terry, F-M. (2009). Web Development and Design Foundations with XHTML USA: Pearson International Edition.

Katarzyna J. M. “Internet and You: Connecting to the Internet”.

ASSIGNMENT FILE

An Assignment File and a marking scheme will be made available to you. In the File, you will find details of the work you must submit to your tutor for marking. There are two aspects of assessment of this course: the tutor-marked and the written examination. The marks you obtain in these two areas will make up your final marks. The assignment must be submitted to your tutor for formal assessment according to the deadline stipulated in the presentation schedule and Assignment File. The work you submit to your tutor for assessment will account for 30 per cent of your total score.

ASSESSMENT

There are two aspects to the assessment of the course. First are the tutor marked assignments; second, is a written examination. In tackling the assignments, you are expected to apply information and knowledge acquired during this course. The assignments must be submitted to your tutor for formal assessment in accordance with the deadlines stated in the Assignment File. The work you submit to your tutor for assessment will count for 30 per cent of your total course mark. At the end of the course, you will need to sit for a final three-hour examination. This will also count for 70 per cent of your total course mark.

CIT 322

PRESENTATION SCHEDULE

COURSE GUIDE

The presentation schedule included in your course materials gives you the important dates for the completion of tutor marked assignments and attending tutorials. Remember, you are required to submit all your assignments by the due date. You should guard against lagging behind in your work.

TUTOR-MARKED ASSIGNMENT

There are 14 tutor-marked assignments in this course. You will be assessed on four of them but the best three performances from the TMAs will be used for your 30 per cent grading. Assignment questions for the units in this course are contained in the Assignment File. You should be able to complete your assignments from the information and materials contained in your set textbooks, reading and study units. However, you may wish to use other references to broaden your viewpoint and provide a deeper understanding of the subject. When you have completed each assignment, send it together with form to your tutor. Make sure that each assignment reaches your tutor on or before the deadline given.

EXAMINATION AND GRADING

The final examination for the course will carry 70 per cent of the total marks available for this course. The examination will cover every aspect of the course, so you are advised to revise all your corrected assignments before the examination.

COURSE MARKING SCHEME

This table shows how the actual course marking is broken down.

Table 1: Course Marking Scheme

Assessment

Marks

Assignment 1- 4

Four assignments, best three marks of the four count at 30% of course marks

Final Examination

70% of overall course marks

Total

100% of course marks

CIT 322

COURSE OVERVIEW

COURSE GUIDE

Unit

Title of Work

Weeks

Assessment

Activity

(End of Unit)

 

Course Guide

Week 1

 
 

Module 1

   

1

Internet Architecture and Organisation

Week 1

Assignment 1

2

Internet Services and Communication and Protocol

Week 2

Assignment 2

3

Network Model and Web Application Development

Week 3

Assignment 3

 

Module 2

   

1

Understanding HTML

Week 4

Assignment 4

2

HTML Elements

Week 5

Assignment 5

3

Tables

Week 6

Assignment 6

4

Input Tags and Form Processing

Week 7

Assignment 7

 

Module 3

   

1

Cascading Style Sheet

Week 8 & 9

Assignment 8

2

Fundamentals of JavaScript

Week 10

Assignment 9

3

Decision and Interactive Statements

Week 11

Assignment

10

4

Events and Event Handler in JavaScript

Week 12

Assignment

11

 

Module 4

   

1

Understanding XML

Week 13

Assignment 2

2

Search Engines & Tools

Week 14

Assignment

12

3

The Future Web, Technologies and Development Tools

Week 15

Assignment

13

 

Revision

Week 16

 
 

Examination

Week 17

 

Total

 

17 weeks

 

CIT 322

COURSE GUIDE

HOW TO GET THE MOST FROM THIS COURSE

In distance learning, the study units replace the university lecturer. This is one of the great advantages of distance learning; you can read and work through specially designed study materials at your own pace, and at a time and place that suit you best. Think of it as reading the lecture instead of listening to a lecturer. In the same way that a lecturer might set you some reading to do, the study units tell you when to read your textbooks or other material. Just as a lecturer might give you an in-class exercise, your study units provide exercises for you to do at appropriate points.

Each of the study units follows a common format. The first item is an introduction to the subject matter of the unit and how a particular unit is integrated with the other units and the course as a whole. Next is a set of learning objectives. These objectives enable you know what you should be able to do by the time you have completed the unit. You should use these objectives to guide your study. When you have finished the units, you must go back and check whether you have achieved the objectives. If you make a habit of doing this, you will significantly improve your chances of passing the course.

Remember that your tutor’s job is to assist you. When you need help, do not hesitate to call and ask your tutor to provide it.

1. Read this Course Guide thoroughly.

2. Organise a study schedule. Refer to the ‘Course Overview’ for more details. Note the time you are expected to spend on each unit and how the assignments relate to the units. Whatever method you chose to use, you should decide on it and write in your own dates for working on each unit.

3. Once you have created your own study schedule, do everything you can to stick to it. The major reason that students fail is that they lag behind in their course work.

4. Turn to Unit 1 and read the introduction and the objectives for the unit.

5. Assemble the study materials. Information about what you need for a unit is given in the ‘Overview’ at the beginning of each unit. You will almost always need both the study unit you are working on and one of your set of books on your desk at the same time.

CIT 322

COURSE GUIDE

6. Work through the unit. The content of the unit itself has been arranged to provide a sequence for you to follow. As you work through the unit, you will be instructed to read sections from your set books or other articles. Use the unit to guide your reading.

7. Review the objectives for each study unit to confirm that you have achieved them. If you feel unsure about any of the objectives, review the study material or consult your tutor.

8. When you are confident that you have achieved a unit’s objectives, you can then start on the next unit. Proceed unit by unit through the course and try to pace your study so that you keep yourself on schedule.

9. When you have submitted an assignment to your tutor for marking, do not wait for its return before starting on the next unit. Keep to your schedule. When the assignment is returned, pay particular attention to your tutor’s comments, both on the tutor-marked assignment form and written on the assignment. Consult your tutor as soon as possible if you have any questions or problems.

10. After completing the last unit, review the course and prepare yourself for the final examination. Check that you have achieved the unit objectives (listed at the beginning of each unit) and the course objectives (listed in this Course Guide).

FACILITATION/TUTORS AND TUTORIALS

There are 12 hours of tutorials provided in support of this course. You will be notified of the dates, times and location of these tutorials, together with the name and phone number of your tutor, as soon as you are allocated a tutorial group. Do not hesitate to contact your tutor by telephone, e-mail, or discussion board if you need help. You will definitely benefit a lot by doing that. Contact your tutor if:

you do not understand any part of the study units or the assigned readings

you have difficulty with the self-tests or exercises

you have a question or problem with an assignment, with your tutor’s comments on an assignment or with the grading of an assignment.

You should make an effort to attend the tutorials. Thus, it is the only opportunity you have to enjoy face-to-face contact with your tutor and to

CIT 322

COURSE GUIDE

ask questions which are answered instantly. You can raise any problem encountered in the course of your study. To gain the maximum benefit from course tutorials, prepare a question list before attending them. You will learn a lot from participating in discussion actively.

SUMMARY

CIT 322: Introduction to Internet Programming introduces you to basic principles, concepts and features of internet technologies in addition to the skills for developing Web applications. The skills you need to understand the basics of internet programming are intended to be acquired in this course. The content of the course material was planned and written to ensure that you acquire the proper knowledge and skills for the appropriate situations. Some real life problems were mentioned or solved for you to apply. The essence is to help you acquire the necessary knowledge and competence.

I wish you success with the course and hope that you will find it both interesting and useful.

MAIN COURSE CONTENTS
MAIN
COURSE
CONTENTS

PAGE

Module1…………………………………………………

1

Unit 1

Definitions and How to Connect to

the Internet ………………………………

1

Unit 2

Internet Services and Communication

and Protocol ……………………………

9

Unit 3

Network Model and Web Application

Development……………………………

18

Module 2………………………………………………

32

Unit 1

Understanding HTML…………………… 32

Unit 2

HTML Elements………………………….

40

Unit 3

Tables …………………………………….

49

Unit 4

Input Tags and Form Processing………….

57

Module 3…………………………………………………

68

Unit 1

Cascading Style Sheet ……………………

68

Unit 2

Fundamentals of JavaScript……………….

78

Unit 3

Decision and Interactive Statements ……

87

Unit 4

Events and Event Handlers ……………….

96

Module 4…………………………………………………

104

Unit 1

Overview of XML…………………………

104

Unit 2

Unit 1: Search Engines & Tools……………

111

Unit 3

The Future Web, Technologies and

Development Tools ………………………

117

CIT 322

MODULE 1

MODULE 1

Unit 1

Definitions and How to Connect to the Internet Unit

2

Internet Services and Communication and Protocol

Unit 3

Network Model and Web Application Development

UNIT 1

DEFINITIONS AND MEANS OF CONNECTING TO THE INTERNET

CONTENTS

1.0

Introduction

 

2.0

Objectives

3.0

Main Content

3.1

The Definition and Evolution of the Internet

3.2

Internet Access

 

3.2.1

Dial-up Connection

3.2.2

ISDN

3.2.3

Cable TV Connection

3.2.4

Digital Satellite Connection

4.0

Conclusion

5.0

Summary

6.0

Tutor-Marked Assignment

7.0

References/Further Reading

1.0 INTRODUCTION

The Internet is a global network of networks with a massive store of multimedia and shared information. It seems to be everywhere and allows many people and devices to connect to it via phone line, cable, digital subscriber lines or wireless. In this unit, we shall explain the meaning of the Internet and discuss the various means of connection to the Internet.

2.0 OBJECTIVES

At the end of this unit, you should be able to:

define and discuss the evolution of the Internet

explain the meaning of intranet and extranet

list the devices use to access the Internet

discuss the various means of accessing the Internet.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.0 MAIN CONTENT

3.1 The Definition and Evolution of the Internet

The Internet also referred to as the net, in simplest terms, consists of large a group of millions of computers around the world that are connected to one another. It is a network of networks that consists of millions of private, public, academic, business, and government networks, local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies such as phone lines, fibre optic lines, coaxial cable, satellites, and wireless connections. The Internet seems to be everywhere today with many people and devices connected to it. When connected to the Internet people can access services such as online shopping, listen to radio and TV broadcast, chat, and send mail, access information, read newspaper and so on. Today Internet is not only accessed from regular stationary computer but also from mobile / portable devices such as Personal Digital Assistants (PDAs), cell phones, netbook, iPod, iPad, Palm Pilots and others.

cell phones, netbook, iPod, iPad, Palm Pilots and others. Fig. 1.1: PDA access to the Internet

Fig. 1.1: PDA access to the Internet

The Internet originated as a proposal from the Advanced Research Project Agency (ARPA). The idea was to see how computers connected in a network i.e. (ARPANET) could be used to access information from research facilities and universities. In 1969, four computers (located at UCLA, Stanford Research Institute, University of California Santa Barbara and the University of Utah) were successfully connected. As time went on, other networks were connected. With four nodes by the end of 1969, the ARPANET spanned the continental United States (US) by 1971 and had connections to Europe by 1973. Though the Interconnected Network, or Internet, was originally limited to the military, government, research, and educational purposes it was

CIT 322

MODULE 1

eventually opened to the public. Today there are hundreds of millions of computers and other devices connected to the Internet worldwide.

Other definitions that are closely related to the term Internet are intranet and extranet.

Intranet The term “Intranet” is used to describe a network of personal computers (PC) without any personal computers on the network connected to the world outside of the Intranet. The Intranet resides behind a firewall; if it allows access from the Internet, it becomes an Extranet. The firewall helps to control access between the intranet and Internet so that only authorised users will have access to the Intranet. Usually these people are members of the same company or organisation. Like the Internet itself, intranets are used to share information. Secure intranets are now the fastest-growing segment of the Internet because they are much less expensive to build and manage than private network based on proprietary protocols.

Extranet Extranets are becoming a very popular means for business partners to exchange information. An Extranet is a term used to refer to an intranet that is partially accessible to authorised outsiders. Privacy and security are important issues in extranet use. A firewall is usually provided to help control access between the Intranet and Internet. In this case, the actual server will reside behind a firewall. The level of access can be set to different levels for individuals or groups of outside users.

3.2 Internet Access

In order to have access to the vast resources on the Internet, you need to connect your computer to a computer system that is already on the Internet, usually one run by an Internet Service Provider (ISP). There are four major ways of connecting a client (user) computer to the vast resources on the Internet; these are by a dial-up connection using a telephone line or an Integrated Services Digital Network (ISDN), a Digital Subscriber Line (DSL), a cable TV connection or a satellite connection. While rural users may consider installing a satellite dish for Internet connections, urban users may have access to wireless connections. In most offices, users connect their computers via a local area network (LAN) connected to the Internet. Similarly, in many home, users are beginning to connect their computers into Internet-connected LANs, too. The Dial-up access gives a low speed connection to the Internet. High-speed Internet connections, which include DSL, ISDN, leased lines, cable Internet, and satellite, are called broadband connections.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.2.1 Dial-up Connection

Dial-up Internet access is a form of Internet access that uses the facilities of the public switched telephone network (PSTN) to establish a dialed connection to an Internet service provider (ISP) via telephone lines. The user’s computer or router uses an attached modem to encode and decode Internet Protocol packets and control information into and from analog audio frequency signals, respectively. The term “Dial-up Internet access” was coined during the early days of computer telecommunications when modems were needed to connect terminals or computers running terminal emulator software to mainframes, minicomputers, online services and bulletin board systems via a telephone line. To use a dial-up account, you need a modem. A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and demodulates such a carrier signal to decode the transmitted information. To distinguish dial- up modems from newer, high-speed modems, they are could also be called analog modems or dial-up modems. Most computers come with an internal modem and most ISPs support modems at speeds of 28.8 kilobits per second (Kbps) and 56 Kbps. With dial-up, you connect only when you want to use Internet services and disconnect (hang up) when you are done. This type of data transmission is similar to using the telephone to make a call. The client computer modem dials the preprogrammed phone number for a user’s Internet Service Provider (ISP) and connects to one of the ISP’s modems. Once the ISP has verified the user's account, a connection is established and data can be transmitted. The communication ends when either modem hangs up. Dial-up connections is not expensive (it costs no more than a local telephone call) but the speed is usually low at about 28kps – 46kps because of the limitations of analog phone lines and telephone company switches.

3.2.2 ISDN

Integrated Services Digital Network (ISDN) is a set of communications

standards for simultaneous digital transmission of voice, video, data, and

the public

switched telephone network. It allows dial up into the Internet at speeds ranging from 64 to 128 kbps. For this connection to be available,

telephone companies would have to install special ISDN digital switching equipment. The ISDN service intended for residential use is Basic Rate Interface (BRI). On one ISDN line, BRI provides two 64- Kbps channels, or B (bearer) channels, and one 16-Kbps channel, or D(data) channel. The D channel is mostly used for signalling such as to indicate that the line is busy. The B channels are where the action is. Two B channels can be combined to have a 128-Kbps line to the

other

network

services

over

the

traditional

circuits

of

CIT 322

MODULE 1

Internet. This is roughly twice the speed of the fastest analogue modem, 56 Kbps. To connect to your ISP via ISDN you need to confirm the availability of the access and this will require you to have an ISDN adapter. ISDN lines are more expensive than normal phone lines, so the telephone rates are usually higher.

3.2.3 Cable TV Connection

This is a connection made to the Internet via a Cable TV modem. The modem is designed to operate over cable TV lines. Since the coaxial cable used by cable TV provides much greater bandwidth than telephone lines, a cable modem can be used to achieve extremely fast speed as high as 128 kbps to 10 mbps to the World Wide Web. This combined with the fact that millions of homes are already wired for cable TV in developed countries has made the cable modem something of a holy

grail for Internet and cable TV companies.

usually at low cost for unlimited, “always connected” access. However, there are a number of technical difficulties in this type of connection. The problem is that the cable network was designed to move information in one direction, from the broadcaster to the user. Downstream speeds have been very impressive such that the line can theoretically bring you data as fast as 30 Mbps but upstream speed depends on line quality. The Internet, however, is a two-way system where data also need to flow from the client to the server. In addition, it is still unknown whether the cable TV networks can handle the traffic that would ensue if millions of users began using the system for Internet access. Large cable companies are spending money to upgrade their networks to Hybrid Fiber-Coaxial (HFC) to handle two- way traffic better. Smaller providers cannot afford the upgrade, so they have to use a phone line at 28.8 Kbps for upstream data. Another issue bothers on security and the need to either share or not share files amongst users.

The services offered are

DSL (Digital Subscriber Line)

Digital Subscriber Line (DSL) is a family of technologies that provides digital data transmission over the wires of a local telephone network. DSL service is delivered simultaneously with regular telephone on the same telephone line. DSL uses a different part of the frequency spectrum from analogue voice signals, so it can work in conjunction with a standard analogue telephone service, providing separate voice and data “channels” on the same line. SDSL (Symmetric DSL) is the type of DSL that offers the same bandwidth capability in both directions while ADSL (Asymmetric DSL) is the type of DSL that provides different bandwidths in the upstream and downstream directions. Most DSL lines are actually ADSL (Asymmetric Digital

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

Subscriber Line). ADSL is optimised for the way many people use the Internet: more downloads than uploads. The line is asymmetric, because it has more capacity for data received by your computer (such as graphics, video, audio, and software upgrades) than for data that you send (such as e-mail and browser commands). The data throughput of consumer DSL services typically range from 256 kbit/s to 40 Mbit/s in the direction to the customer (downstream), depending on DSL technology, line conditions, and service-level implementation. In ADSL, the data throughput in the upstream direction, (i.e. in the direction to the service provider) is lower, hence the designation of asymmetric service. In Symmetric Digital Subscriber Line (SDSL) service, the downstream and upstream data rates are equal

Unlike cable modem technology, DSL provides a point-to-point connection to ISP. Somehow, this technology seems to be both more secure and less prone to local traffic fluctuations than its cable rival.

3.2.4 Digital Satellite Connection

Digital Satellite Systems (DSS), or direct broadcast satellite, allows one to get Internet information via satellite. Satellite Internet systems are an excellent, although rather costly, option for people in rural areas where Digital Subscriber Line (DSL) and cable modem connections are not available. A satellite installation can be used even where the most basic utilities may be lacking, if there is a generator or battery power supply that can produce enough electricity to run a desktop computer system. The two-way satellite Internet option offers an always-on connection that bypasses the dial-up process. In a two-way satellite Internet connection, the upstream data is usually sent at a slower speed than the downstream data arrives. Thus, the connection is asymmetric. A dish antenna, measuring about two feet high by three feet wide by three feet deep, transmits and receives signals. Uplink speeds are nominally 50 to 150 Kbps for a subscriber using a single computer. The downlink occurs at speeds ranging from about 150 Kbps to more than 1200 Kbps, depending on factors such as Internet traffic, the capacity of the server. The main advantage of the Satellite technology over cable modems and DSL is accessibility. Satellite connections are faster than dial up and ISDN. Although it is not as fast as cable modems or DSL services, which both can provide more than megabits of bandwidth. In addition, cable and DSL access methods are cheaper. Figure 1.2 shows a Satellite connection to the Internet.

CIT 322

MODULE 1

CIT 322 MODULE 1 Fig. 1.2: Satellite Connection to the Internet Equipment required for satellite connection

Fig. 1.2: Satellite Connection to the Internet

Equipment required for satellite connection includes installation of a mini-dish satellite receiver and a satellite modem. Satellite systems are also prone to rain fade (degradation during heavy precipitation) and occasional brief periods of solar interference.

4.0 CONCLUSION

The Internet has remained a dominant means of communication over the past decade. It represents one of the most remarkable developments in the technological history of the world. It began as a medium for exchanging files by academia and has become a nearly ubiquitous phenomenon that has transformed almost every aspect of daily life. The Internet has made information available in a quick and easy manner, publicly accessible and within easy reach via the connections infrastructure discussed in this unit. In the next unit, we shall look at some of the services available on the Internet and the enabling protocols.

5.0 SUMMARY

The general rule about the Internet connection is “the faster, the better.” The bandwidth and transfer rate determine how quickly pictures, sounds, animation and video clips will be downloaded. Since multimedia and interactivity make the Internet such an exciting tool for information sharing, the speed is the key. Dial-up access provides an easy and inexpensive way for users to connect to the Internet, however, it is a slow-speed technology and most users are no longer satisfied with dial- up or ISDN connections. Fortunately, the broadband access, we once dreamed of, is now possible with TV cable, DSL and satellite links.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

6.0 TUTOR-MARKED ASSIGNMENT

i. Briefly explain the origin of the Internet.

ii. List three examples of mobile devices that can be used to access the Internet.

iii. Discuss the four major ways of connecting a client computer to the vast resources on the Internet.

7.0 REFERENCES/FURTHER READING

Alex, L. & Mathew, L. (1999). Fundamentals of Information Technology. New Delhi: Vikas Publishing House PVT LTD.

Andy, S. (1999).Computer Communications, Principles and Business Applications. (2 nd ed.). England: McGraw-Hill.

Behrouz, A. F. (2003). Data Communications and Networking. (3 rd ed.). N.Y, USA: McGraw-Hill/Osborne.

Brian, et al.(1999). Using Information Technology: A Practical

Introduction to Computers and Communication. Hill.

Irwin/McGraw-

Terry, F-M. (2009). Web Development and Design Foundations with XHTML. USA: Pearson .

Katarzyna J. M. “Internet and You: Connecting to the Internet.” Retrieved from http://www.rsna.org/Technology/internet2-1.cfm

CIT 322

MODULE 1

UNIT 2

CONTENTS

INTERNET SERVICES AND COMMUNICATION PROTOCOLS

1.0

Introduction

 

2.0

Objectives

3.0

Main Content

3.1

Services on the Internet

 

3.1.1 World Wide Web (WWW)

3.1.2 Electronic Mail

 

3.2

Communication Protocols

 

3.2.1

Transmission Control Protocol

3.2.2

Internet Protocol

3.3.3

User Datagram Protocol

3.3.4

Hypertext Transfer Protocol (HTTP)

3.3.5

Email Protocols

3.3.6

File Transfer Protocol (FTP)

3.3.7

Real Time Streaming Protocol (RTSP)

4.0

Conclusion

5.0

Summary

6.0

Tutor-Marked Assignment

7.0

References/Further Reading

1.0 INTRODUCTION

The Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. The Internet offers access to data graphics, sound, software, text, to people through a variety of services and tools for communications and data exchange.

2.0 OBJECTIVES

At the end of this unit, you should be able to:

discuss the services offered by the Internet

describe the protocols used by the Internet.

3.0 MAIN CONTENT

3.1 Services on the Internet

The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.1.1 World Wide Web (WWW)

The World Wide Web is a repository of information spread all over the world and linked together for easy access. It is made up of documents called pages that combine text, pictures, forms, sound, animation and hypertext links into rich communication medium. For several users, The World Wide Web is the most exciting aspect of the Internet, which has accelerated the growth of the Internet by giving it an easy to use, point and click, graphical interface. Users are attracted to the WWW because of it interactive nature. The WWW project was initiated by CERN (European Laboratory for Particle Physics) to create a system to handle distributed resources necessary for scientific research as grown today to become many things to millions of users. It is used as a business place, art gallery, social medium, broadcast medium, library, community centre, school, religious centre, advertise house, publishing house and so on.

Most Web pages are prepared using the Markup languages such as Hypertext Markup Language (HTML). The document’s author can specifically code sections of the documents to “point” to information resources. These specially coded sections are referred to as hypertext links. Users viewing a web page can select the hyperlink and retrieve or connect to the information resources that the “link” points to. Hypertext link can lead to other documents, sound, images, databases (like library catalogs), email address, and so on. Figure 2.1 shows the homepage of the National Open University of Nigeria.

the homepage of the National Open University of Nigeria. Fig. 2.1: NOUN Homepage Client using a

Fig. 2.1: NOUN Homepage

Client using a browser such Internet explorer, Firefox or Google chrome can access a service using a server. However, the service provided is distributed over many locations called websites.

CIT 322

MODULE 1

3.1.2 Electronic Mail (e-mail)

Electronic mail, commonly called email or e-mail, is a method of exchanging digital messages from an author to one or more recipients. E-mail operates across the Internet or other computer networks. An e- mail message consists of three components namely:

(i) the message header (ii) the message envelop, and (iii) the message body.

The message header contains control information, including, minimally, an originator's email address and one or more recipient addresses. Usually descriptive information is also added, such as a subject header field and a message submission date/time stamp. The message body carries the data to be sent. The message’s body property usually contains details associated with the message. In addition to the data part, messages carry details that assist in distinguishing messages and selectively receiving them. This detail is made up of a fixed number of fields, which is referred to as the message envelope. These fields are source destination tag communicator. To use email, you should have an email address, which is created by an Internet Service Provider or on a Website such as yahoo, Google, and hotmail. Most e-mail addresses are set up in this manner: your username, followed by “@” (at) symbol, and then a domain name (for instance, .com, .edu.,.net, or .org). When you send e-mail to others, Simple Mail Transfer Protocol (SMTP) is used. When you receive e-mail, Post Office Protocol (POP, currently POP3) and Internet Message Access Protocol (IMAP) can be used.

(POP, currently POP3) and Internet Message Access Protocol (IMAP) can be used. Fig. 2.2: Google Mail

Fig. 2.2: Google Mail Interface

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.2 Communications Protocols

Protocols are rules that describe how a client and a server communicate with each other over a network. No single protocol makes the Internet and Web work; rather a number of protocols with unique functions are required. The most commonly used protocols are:

:

Transmission Control/Internet Protocol (TCP/IP)

File Transfer Protocol (FTP)

Hypertext Transfer Protocol (HTTP)

Email Protocol

3.2.1

Transmission Control Protocol

The Transmission Control Protocol (TCP) is one of the core protocols of the Internet Protocol Suite. It provides reliable, ordered delivery of a stream of bytes from a program on one computer to another program on another computer. TCP is the protocol on which major Internet applications such as the World Wide Web, email, remote administration and file transfer rely on. Other applications, which do not require

may use the User Datagram Protocol

(UDP), which provides a datagram service that emphasises reduced latency over reliability. TCP is optimised for accurate delivery rather than timely delivery, and therefore, TCP sometimes incurs relatively long delays (in the order of seconds) while waiting for out-of-order messages or retransmissions of lost messages. It is not particularly suitable for real-time applications such as Voice over IP. For such applications, protocols like the Real-time Transport Protocol (RTP) running over the User Datagram Protocol (UDP) are usually recommended instead.

reliable data stream service,

3.2.2 Internet Protocol

The Internet Protocol (IP) is a set of rules that are more concerned with sending a message to the correct address than with whether the data actually makes it to that receiver. It is therefore, a connectionless protocol, which means that it is an unreliable protocol. IP works by exchanging pieces of information called packets. A packet is a sequence of octets and consists of a header followed by a body. The header describes the packet's destination and, optionally, the routers to use for forwarding until it arrives at its destination. The body contains the data IP is transmitting. IP will send it information regardless of whether the receiver is there or not. Of primary importance to the IP’s set of rules is the creation and maintenance of an addressing scheme, known as IP addressing. IP is responsible for selecting the best route for each

CIT 322

MODULE 1

message to travel on its way to the receiver. TCP is required to complement IP for effective delivery of information over the Internet.

Although it did not start out that way, all computers now connecting to the Internet must do so using an IP address. Each IP address is a unique 4-byte (0r 32-bit) number formatted such that each byte (or 8-bit segment) is separated by a period. An example of would be

100.100.100.100

Each device connected to the Internet has a unique numeric IP address. These addresses consist of a set of four groups of numbers, called octet. The current version IP, IPv4 uses 32 bits while IPv6 uses 128 bits. The format of IPv4 is xxx.xxx.xxx.xxx where xxx is a value from 0 to 255. The IP address may correspond to a domain name. The domain name system (DNS) associate these IP address with text-based URLs and domain names you type into a Web browser address box. It may be easier to type the URL than the IP address. IPv6 is the latest version of the IP routing protocol. It became necessary to introduce a new protocol in order to accommodate the greater demands being placed on the Internet by increasing user and device access. The major features of this version are changes in the new version are:

more addresses—this is done by increasing the IP address size from 32 to 128 bits. Thus, this version can accommodate everyone PC, cell phone, PDA, Automobile and other devices that may be connected to the internet.

simplified IP headers –There is a reduction in the number of header fields needed in IP packets for IPv6 compared to IPv4

additional security features –IPV6 provides greater support for privacy and security.

IPv6 is more efficient

Domain Name Service (DNS) An alternative to using the IP address method for locating resources on the Internet is by using the Domain Name Service (DNS) combined with a site’s Uniform Resource Locator (URL). URLs are especially formatted names like www.nou.edu.ng. DNS is like a giant phone book where you can find an IP address knowing the URL. On the other hand, you can provide an IP address and the DNS server will like it to the URL. Thousands of DNS servers exist to furnish users with IP addresses. When a user types a URL into a web browser, a request is sent to any listening DNS server to furnish the corresponding IP address. As long as the URL is listed in a listening DNS sever, the correct IP address will be returned and the communication will occur.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.3.3 User Datagram Protocol

An alternative to TCP for communication in the Transport layer is User Datagram Protocol (UDP), UDP is a connectionless protocol (like IP) that operates at the transport layer. It can actually be faster than TCP in some instances because, as a connectionless protocol, it does not have to open a connection with the receiver, and it does not have to do any error correction. Both of these functions are performed by TCP- a connection- oriented, or reliable, protocol – and they take additional overhead in the form of added steps, and they may slow down transmission as a result. However, in cases of large message and faulty connections, errors may occur and retransmission may ultimately make TCP faster than UDP in the long run. UDP does no checks to ensure receipts so it never does automatic retransmission. Missed messages may therefore, result in slower communication over UDP.

3.3.4 Hypertext Transfer Protocol (HTTP)

Hypertext Transfer Protocol (HTTP) is a set of rules for exchanging files such as text, graphics images, sound, video and other multimedia files on the Web. Web browsers and Web Servers usually use this protocol. HTTP is based on the client/server principle. HTTP allows “computer A” (the client) to establish a connection with “computer B” (the server) and make a request. The server accepts the connection initiated by the client and sends back a response. An HTTP request identifies the resources that the client is interested in and tells the server the server what “action” to take on the resources. When the user of a Web browser requests a file by typing a Web site address or clicking a hyperlink, the browser builds an HTTP request and sends it to the server. The Web server in the destination machine receives the request, does any necessary processing, and responds with the requested file and any associated media files. To retrieve a Web page, the browser sends a request to a Web server using HTTP. On receiving the request, the server interprets it, sometimes using a CGI script (see CGI - Common Gateway Interface), and sends back data. This data can be just about anything, including HTML, text, images, programs, and sound.

3.3.5 E-mail Protocols

Two main servers are required for e-mail messages to be sent and delivered successfully. These are –incoming mail server and an outgoing mail server. Incoming e-mail messages are sent to an e-mail server that stores messages in the recipient's email box. The user retrieves the messages with an e-mail client that uses one of a number of e-mail retrieval protocols. Some clients and servers preferentially use vendor- specific, proprietary protocols, but most support the Internet standard

CIT 322

MODULE 1

protocols, Simple Mail Transport Protocol (SMTP) for sending e-mail and Post Office Protocol (POP) and Internet Message Access Protocol (IMAP) for retrieving e-mail, allowing interoperability with other servers and clients.

SMTP - Simple Mail Transport Protocol

SMTP controls the transfer of e-mail messages on the Internet. SMTP defines the interaction between Internet hosts that participate in forwarding e-mail from a sender to its destination.

POP - Post Office Protocol

POP allows you to fetch email that is waiting in a mail server mailbox. POP defines a number of operations for how to access and store email on your server.

IMAP - Internet Message Access Protocol

IMAP - Internet Message Access Protocol is an Internet protocol that allows an e-mail client to access email on a remote mail server.

3.3.6 File Transfer Protocol (FTP)

File Transfer Protocol (FTP) is a set of rules that allows files to be exchanged between computers on the Internet. The File Transfer Protocol (FTP) is used widely on the Internet for transferring files to and from a remote host. FTP is commonly used for uploading pages to a Web site and for providing online file archives. Unlike HTTP, which is used by Web browser to request Web pages and their associated files in order to display a Web page, FTP is used simply to move files from one computer to another. Web developers commonly use FTP to transfer Web page files from their computers to Web servers. FTP is also used to download programs and files from other servers to individual computers. Access to FTP servers can be open or closed. Open access allows anyone to login to the site and download files. This is called anonymous access and it is used frequently for public file archives. Closed access requires that the user provide a username and password to download and upload files. This is the mode of operation for uploading Web pages to a Web site. FTP uses two well-known TCP ports: port 21 is used for the control connection, while port 20 is used for the data connection.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.3.7 Real Time Streaming Protocol (RTSP)

network

control protocol designed for use in entertainment and communications

systems

Webcasting is the delivery of multimedia data in streaming format across the Internet. Essentially, webcasting is “broadcasting” over the Internet. A webcast can be used to deliver live or on-demand educational and training content or facilitate collaborative applications such as streaming, or chat within an organisation. RTSP is used for establishing and controlling media sessions between end points. Clients of media servers issue Videocassette recorder (VCR)-like commands, such as play and pause, to facilitate real-time control of playback of media files from the server. The transmission of streaming data itself is not a task of the RTSP protocol. To stream data from one location to another simply means that when data is accessed from a source or upon initiation of a data transmission from a source, not all of the data is delivered to the recipient before the data can begin to be viewed at the destination. Steaming utilizes underlying transport and control protocol such as Real-time Transport Protocol (RTP), UDP, and Real-Time Transport Control Protocol (RTCP). RTCP provides out-of-band statistics and control information for an RTP flow. It is similar to the RTP in the delivery and packaging of multimedia data, but does not transport any media streams itself. RTSP is much like HTTP, except that where HTTP will deliver a file from a Web server and then release the connection until the next file is requested, RTSP maintain the connection between a streaming server and the client that is receiving the streamed data.

The Real Time Streaming Protocol (RTSP)

is

a

such

as

webcasting

to

control streaming

media servers.

4.0

CONCLUSION

Most traditional communications media including telephone, music, film, and television are fast being reshaped or redefined by the Internet, giving birth to new services such as Voice over Internet Protocol (VoIP) and Internet Protocol television (IPTV). Newspaper, book and other printed materials are adapting to Web site technology. They are being reshaped into blogging and web feeds. The Internet has enabled or accelerated new forms of human interactions through instant messaging, Internet forums, and social networking. Online shopping has boomed for both major retail outlets and small artisans and traders. Business-to- business and financial services on the Internet affect supply chains across entire industries.

CIT 322

MODULE 1

5.0 SUMMARY

The Internet provides many services, which are made possible by communication protocols. Transmission Control Protocol/Internet Protocol (TCP/IP) for an example has been adopted as the official communication protocol of the Internet. TCP/IP is actually a collection of protocols, or rules, that govern the way data travel from one machine to another across network. TCP and IP have different functions that work together to ensure reliable communication over the Internet. Other protocols covered in this unit are e-mail, File Transfer Protocol (FTP) and the Real Time Streaming Protocol (RTSP), which is designed for use in entertainment and communications systems such as webcasting used to control streaming media.

6.0 TUTOR-MARKED ASSIGNMENT

i. Explain the term “protocols”

ii. Explain the following protocols:

(a)

TCP/IP

(b)

RTSP

(c)

HTTP

7.0 REFERENCES/FURTHER READING

Alex, L. & Mathew, L. (1999). Fundamentals of Information Technology. New Delhi: Vikas Publishing House PVT LTD.

Andy, S. (1999).Computer Communications, Principles and Business Applications. (2 nd ed.). England: McGraw-Hill.

Behrouz, A. F. (2003). Data Communications and Networking. (3 rd ed.). N.Y, USA: McGraw-Hill/Osborne.

Brian, et al.(1999). Using Information Technology: A Practical

Introduction to Computers and Communication. Hill.

Irwin/McGraw-

Terry, F-M. (2009). Web Development and Design Foundations with XHTML. USA: Pearson .

Katarzyna J. M. “Internet and You: Connecting to the Internet.” Retrieved from http://www.rsna.org/Technology/internet2-1.cfm

CIT 322

UNIT 3

CONTENTS

INTRODUCTION TO INTERNET PROGRAMMING

NETWORK MODEL AND WEB APPLICATION DEVELOPMENT

1.0

Introduction

2.0

Objectives

3.0

Main Content

3.1 Network Overview

3.2 The Client Server Model

3.3 Types of Server

3.4 Web Application

3.4.1 The Web Browser

3.4.2 The Web Server

3.5 OSI Reference Model Concept

3.6 TCP/IP Protocols Suit

3.7 Common Gateway Interface

4.0

Conclusion

5.0

Summary

6.0

Tutor-Marked Assignment

7.0

References/Further Reading

1.0

INTRODUCTION

A client may be a program running on the local machine requesting service from a server. A client program is started by the user or another application program and terminates when the service is complete. A server – can sometimes be a program running on the remote machine providing service to the clients. When it starts, it opens the door for incoming request from clients, but it never initiates a service until it is requested to do so.

A network of networks or “Internet” refers to a group of two or more networks that are interconnected and physically capable of communication, share data and act together as a single network. Machine on one network can communicate with machines on other networks, and data, file and other information back and forth. For this to work, the systems must follow some set of rules or protocols. This is a “language” or software that enables different types of machines on separate network to communicate and exchange information. The Internet uses the TCP/IP protocol. The Internet offers access to data, graphics, sound, software, text, and people through a variety of services and tools for communications and data exchange. Some services available on the Internet are as follows:

CIT 322

MODULE 1

Remote login (telnet)

File transfer (ftp)

Electronic mail (e-mail)

News (USENET or network news)

Hypertext (www)

2.0 OBJECTIVES

At the end of this unit, you should be able to:

explain a computer network

discuss the client-server model

describe the Web application architecture

explain the meaning of Common Gateway Interface.

3.0 MAIN CONTENT

3.1 Network Overview

A network consists of two or more computers connected for the purpose of communicating and sharing resources. There are many types of computer networks, including:

Local-area

networks

(LANs):

This

describes

the

network

of

computers that are geographically close together (that is, in the same building).

Wide-area networks (WANs): This describes the network of computers that are farther apart and are connected by telephone lines or radio waves.

Campus-area networks (CANs): This describes the network of computers that are within a limited geographic area, such as a university campus or military base.

Metropolitan-area networks MANs): This describes data network designed for a town or city.

Home-area networks (HANs): This describes a network contained within a user's home.

Computers on a network are sometimes called nodes. The common components of a network are:

Server

Client workstation computer(s)

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

Shared devices such as printers

Networking devices (hub) and the media that connect them

3.2 The Client Server Model

The term “client / server” dates back from (1980’s) and refers to personal computers joined by a network. Client/server can also describe a relationship between two computer programs- the client and the server. The client/server technology evolved as a result of downsizing of mainframe applications and upsizing of microcomputer applications.

request response
request
response

Internet

Server

Client

Fig. 3.1: Client-server Model

The client requests some type of service (such as file or database access) from the server. The server fulfils the request and transmits the results to the client over a network. While both the client and the server programs can reside on the same computer, typically, they run on different computers. Specific types of clients include web browsers, e-mail clients, and online chat clients. Specific types of servers include web servers, ftp servers, application servers, database servers, name servers, mail servers, file servers, print servers, and terminal servers. Most web services are also types of servers. Where a server is made to handle request from multiple clients and transaction processing is done on both the server and the client we have distributed processing. Distributed processing involves the storage of data on database servers called back- ends from where clients’ applications called front-ends access the data needed for their operations. In addition, the client (front–end) does data presentation and or processing, while the server (back-end) does storage, security and major data processing. The client / server inter-relationship is given in terms of layers and tiers. The Internet is a great example of client / server architecture at work. Consider a scenario where a user accesses his bank from a location away from the bank’s computer. The

CIT 322

MODULE 1

user will require a web browser client to send a request to a web server at a bank. That program may in turn forward the request to its own database client program that sends a request to a database server at another bank computer to retrieve the account information. The balance is returned to the bank database client, which in turn sends it back to the web browser client displaying the results to the user. The client–server model has become one of the central ideas of network computing. Many business applications being written today use the client–server model. So do the Internet's main application protocols, such as HTTP, SMTP, Telnet, and DNS.

3.3 Types of Server

Servers are usually high-performance computers connected to the Internet by high-speed communication lines. Depending on your application, you may deploy it on less-powered machine with less substantial connections. The following are variation of servers:

a) Web server: This is use to store and deliver the elements of web pages.

b) Application server: This is used to run specialised Internet application, such as e-commerce or e-health’s engine. It is designed to process requests and deliver dynamic results.

c) Streaming server: This is used to deliver audio or video to the visitors to a site real-time.

d) Mail server: This is used to send and receive e-mail.

e) Name server: This is a specialised server that stores huge directories of web servers. It keeps track of all the registered domain names on the Internet.

f) Secure server: This is a Web server that encrypts data before transmitting it, to prevent unauthorised access. They are commonly used to secure for financial transactions in the Internet.

3.4 Web Application (Webapps)

Webapps are applications that are accessed with a web browser over a network such as the Internet or an intranet. They are popular because of the ubiquity of the browser as a client (thin client). Similarly, its popularity is equally due to the possibility of updating and maintaining the application without necessarily distributing and installing it on every

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

available client. Webapps or weblications as they are sometimes called are used to implement webmail, online retail sales, online auctions, discussion boards, and weblogs and so on. Web developers often use client-side scripting to add functionality to the webapps by creating an interactive site that does not require page reloading. Webapps generate a series of web pages dynamically in a standard format such as Hypertext Markup Language (HTML) supported by common browsers. Through Java, JavaScript, Flash and other technologies, application specific methods such as drawing on the screen, playing audio and accessing the keyboard and mouse are all possible. Webapps are the present and the future of business transactions. The Web is based on the client/server architecture. That is, both the server and the client application are responsible for some sort of processing. Web application is commonly structured as a 3-tier application. The web browser constitutes the first tier, a middleware engine using some dynamic web content technology such as: Common Gateway Interface (CGI), Hypertext Preprocessor (PHP), Java Servlets or Java Server Pages (JSP) or Active Server Pages (ASP) constitutes the middle-tier and the database is the third tier or back-end. The backend applications include MySQL, SQL Server, Oracle, etc. The bulk of online transactions take place between the middleware and the database server. While the middle-ware is responsible for the business logic transaction processing, the back-end is responsible for information storage and retrieval from the database.

The middle-tier may be multi-tiered. That is, it can be composed of several other servers with designated responsibilities, hence the over-all architecture is said to be N-tier. A fundamental rule in 3-tier architecture is that the client has no direct line of communication with the data tier. That is, all communications are routed through the middleware tier.

tier. That is, all communications are routed through the middleware tier. Fig. 3.2: Architecture of a

Fig. 3.2: Architecture of a Web Application

CIT 322

MODULE 1

3.4.1 The Web Browser

Client-side refers to operations that are performed by the client in a client–server relationship in a computer network. Typically, a client is a computer application, such as a web browser, that runs on a user's local computer or workstation and connects to a server as necessary. Operations may be performed client-side because they require access to information or functionality that is available on the client but not on the server. Programs that run on a user's local computer without ever sending or receiving data over a network are not considered clients, and so the operations of such programs would not be considered client-side operations. The Web browser constitutes the client. It is a software application that enables a user to display and interact with text, images and other information that are located on the web page or a local area network. Browsers can be used to access information on web servers. Examples of web browsers are MS Internet Explorer, Mozilla Firefox, Apple Safari, Netscape and Opera and Google Chrome. Web browsers communicate with web servers using the Hypertext Transfer Protocol (HTTP) to fetch web pages and it allows web browsers to submit information to web servers as well as fetch web pages from them. The primary language of browsers is the HTML, which consists of tags that are used to describe a web page. Most browsers have some level of support for JavaScript and Extensible Markup Language (XML).

3.4.2 The Web Server

A web server can be referred to as either the hardware (the computer) or the software (the computer application) that helps to deliver content that can be accessed through the Internet. The most common use of Web servers is to host Web sites but there are other uses like data storage or for running enterprise applications. The primary function of a web server is to deliver web pages on the request to clients. This means delivery of HTML documents and any additional content that may be included by a document, such as images, style sheets and JavaScript. A client, commonly a web browser or web crawlers, initiates communication by making a request for a specific resource using HTTP and the server responds with the content of that resource or an error message if unable to do so. The resource is typically a real file on the server’s secondary memory, but this is not necessarily the case and depends on how the web server is implemented. While the primary function is to serve content, a full implementation of HTTP also includes ways of receiving content from clients. This feature is used for submitting web forms, including uploading of files. Many generic web servers support server-side scripting. The scripting tools used for middleware development include PHP, JSP, ASP, Servlet, PERL, Python, and so on. These tools allow the behaviour of the web server to

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

be scripted in separate files, while the actual server software remains unchanged. Usually, this function is used to create HTML documents “on-the-fly” as opposed to returning fixed documents. This is referred to as dynamic and static content respectively. The former is primarily used for retrieving and/or modifying information from databases. The latter is, however, typically much faster and more easily cached. Web servers are not only used for serving the world wide web, they can also be found embedded in devices such as printers, routers, webcams and serving only a local network. The web server may then be used as a part of a system for monitoring and/or administrating the device in question. This usually means that no additional software has to be installed on the client computer; since only a web browser is required (which now is included with most operating systems). There are many web server programs available. Table 3.1: Shows a statistics of the market share of the top web servers on the Internet by Netcraft survey in March 2011.

Table 3.1: Popular Servers

Vendor

Product

Web Site

Percent

Hosted

Apache

Apache

179,720,332

60.31

Microsoft

IIS

57,644,692

19.34

Igor Sysoev

nginx

22,806,060

7.65

Google

GWS

15,161,530

5.09

Lighttpd

lighttpd

1,796,471

0.60

Sun

SunOne

   

Microsytemss

Servers are slave programs. They act only when requests are made to them by browsers running on other computers and the Internet. The most commonly used Web Servers are Apache, which has been implemented for variety of computer platforms, and Microsoft’s Internet Information Server (IIS), which runs under windows operating systems.

1. Apache HTTP Server

This is most popular web server. It is a free software/open source like Linux, PHP and MySQL.

Apache runs on Unix, Linux, MS Windows, Novell Netware and some other platforms. Apache serves over 68 per cent of websites and serves both static and dynamic contents on the web in a very reliable and secure manner. The name Apache has nothing to do with the Native American tribe of the same name. Rather, it came from the nature of its first version, which was patchy version of the http server. As seen in the usage statistics it is the most widely used server. The primary reasons

CIT 322

MODULE 1

for this are as follows: It is an excellent server because it is both fast and reliable. Furthermore, it is open-sources software, which means it is free and managed by a large team of volunteers, a process that efficiently and effectively maintains the systems. Finally, it is one of the best available servers for Unix-based systems.

2. The Internet information services (IIS)

The Internet information services (IIS) is a server or system based services for servers using Microsoft Windows operation system. It is a major component of the Microsoft Server operating system and particularly, a component of its Active Server Pages (ASPs). IIS is recommended if both the middleware (ASP) and the database Server (SQL Server) are Microsoft products. Though the Apache server may be installed on Windows platforms, it is not the most popular server on those systems. IIS remains the most popular on Windows platform because it is supplied as part of Windows and because it is a reasonable good server. Apache and IIS provide similar varieties of services.

In summary, you can distinguish between Web Client and Web Servers as follows:

Web Client

Connected to the Internet when needed

Usually runs Web browser(client) software such as Internet Explorer or Netscape

Uses HTTP

Request Web pages from a server

Receives Web Pages and files from as server

Web Server

Continually connected to the Internet

Runs Web server software (such as Apache or Internet Information Services (IIS)

Uses HTTP

Receives a request for the Web page

Responds to the request and transmits the status code, Web page, and associated files

3.5 OSI Reference Model Concept

Another model, the Open Systems Interconnection or OSI, model was designed by the International Standards Organisation (ISO). It is a seven-layered model. OSI was never seriously implemented as a protocol stack, however, it is a theoretical model designed to show how

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

protocols stack should be implemented. The OSI model simplifies complex networking activities by grouping the steps in the process into seven separate task layers (The physical, Data Link, Network, Transport, Session, Presentation, and Application layer). This is shown in Table 3.2 below. By dividing the process into smaller tasks, it becomes easy for vendors to manage smaller pieces of the problem.

Table 3.2: OSI model

Number

Name

Function

Layer 1

Physical

This layers consist of the networking media (wiring and interconnections) and the components necessary to transmit a signal from one end to the other

Layer 2

Data

Link

This layer packages the data so that it can be transmitted over the Physical layer

Layer

Layer 3

Network Layer

This layer is where data is separated into frames. It also determines the route the data will take to the destination

Layer 4

Transport

This layer ensures data packets are sequenced properly and do not contain any errors

Layer 5

Session

This layer maintains a connected link, called a session, between the two communication ends

Layer 6

Presentation

It determines the format used for communication and compresses, encrypts, or converts the data as necessary for the protocol in use

layer

Layer 7

Application

This layer completes or initiates the actions being communicated.

Layer

Although the seven layers of the OSI model describe unique tasks performed during network communications, the demarcation between the layers and the total number of layers is irrelevant as long as all the

CIT 322

MODULE 1

actions are accomplished. Several other models exist apart from the OSI model.

3.6 TCP/IP Protocols Suit

A new model with only five layers would be a bit easier to understand than the OSI model. Table 3.3 presents the layered protocol stack that dominates data communications and networking today. It is a five- layered Internet model sometimes called the TCP/IP protocol suite. The model is composed of five ordered layers: physical (layer1), data link (layer 2), network (layer 3), transport (layer 4), and application (layer 5). Each layer defines a family of functions distinct from those of other layers.

Within a single machine, each layer calls upon the services of the layer just below it. Layer 4, for example, uses the services provided by layer 3 and provides services for layer 5. Between machines, layer Y on one machine communicates with the corresponding layer Y on another machine. This communication is governed by an agreed-upon series of rules and conventions called protocols. The processes on each machine that communicate at a given layer are called peer-to-peer processes. Thus, the communication between machines is therefore a peer-to-peer process using appropriate protocols for a given layer.

Table 3.3: Internet Model

Application

Transport

Network

Data Link

Physical

3.7 Common Gateway Interface (CGI)

Most users of the Internet would always prefer to visit sites that are responsive and interactive sites. Common Gateway Interface is a standard that permits the addition of dynamic functionalities to static web pages. Dynamic functionality is a requirement for site that implements site search, order form, e-mail, database display, or other type of processing. These applications expect responses from a server based on client requests. This is when server-side processing is needed, commonly known CGI. CGI is a thus a standard that defines how Web server software can delegate the generation of web pages to a client application or an executable file. A technology creates and handles dynamic documents. CGI defines how a dynamic document should be

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

written, how input data should be supplied to the program, and how the

output result should be used. The use of ‘common’ in CGI connotes that the standard defines a set of rules or protocols that are common to any language or platform. The term ‘gateway’ means that a CGI program is

a gateway that can be used to access other resources such as databases

and graphic packages. While the term ‘interface’ implies that there is a set of predefined terms, variables, calls, etc that can be used in any CGI

program. CGI scripts are preferably written in scripting languages such

as PHP, ASP, JSP or PERL though a common programming language such as C can also be used.

CGI programs

A CGI program in its simplest form is code written in one of the

languages supporting CGI. Once you can encode a sequence of thoughts in a program and you are familiar with the syntax of one of the

above-mentioned languages, writing simple CGI programs becomes very easy. The program in example 1 below is used to outputs the systems date to the browser.

A CGI program written in HTML

Example 1

#!/bin/sh

#The head of the program echo Content_type:text/html

echo

# The body of the program

echo <HTML> echo <HEAD><TITLE> Date and Time </TITLE></HEAD> echo <BODY>

now=’date’

echo <CENTER><B>$now </B></CENTER>

echo</BODY>

echo</HTML>

exit 0

Though example 1 is used to demonstrate how a simple CGI program could be written, CGI is a standard method, for a Web server to pass a Web page user’s request. This is usually initiated with a form element in HTML to an application program and to accept information to send to the user. As soon as the Web server receives the request (as detailed in the form|) it passes the form information to a small application program that processes the data, and sends back a confirmation to a Web page or

a message to the browser. This specification for passing data back and

forth between the server and the application is called CGI and is part of the Hypertext Transfer Protocol (HTTP) specification.

CIT 322

MODULE 1

Active Document The program that runs from the client side is known as the active document. This is the document or page that may make a request to the server. For example, suppose one wants to complete an online registration form at National Open University’s site. This program would certainly need to run at the client (user’s) site where the online form is made available. When a browser requests an active document, the server sends a copy of the document in the form of byte code. The document is then run at the client (browser) site. An active document is stored in the server in the form of binary code. However, it does not create any form of overhead for the server in the same way that a dynamic document does. When a client retrieves an active document from a server it may store it in its storage area so that should there be a need for re-use, it would not need to make another request before it can be used. An active document is transported from the server to the client in binary form. The compression of an active document at the server side and it decompression at the client side helps to save bandwidth and transmission time during transportation.

Dynamic Document Dynamic documents do not exist in a predefined format instead they are created by a Web server whenever a browser requests the document. When a web browser requests Web pages and their related files from a Web server, the Web server locates the files and sends them to the user’s Web browser. Then the Web browser renders the returned files and displays the requested Web pages. Because a fresh document is created for each request, the contents of dynamic document can vary from one request to another. For example, suppose one wants to get the system’s time and date from a server at different times. Time and date values are kinds of information that are dynamic in that they change from moment to moment. At different instances of such calls, one would expect to receive different values for time delivered to the client by the server.

CGI – Server Side Processing A Web page engages CGI by either an action attribute on a form or a hyperlink. Action attributes on a form and hyperlink will be covered in Module Two of this course material. At this instance, any form data that exists is passed to the CGI script. The CGI script usually written in PHP, ASP, JSP, ColdFusion or PERL would complete the processing and may create a confirmation or response message, which is rendered to the browser (client). Anytime you use Google or other search engines, you are really using CGI.

CIT 322

Steps in Utilising CGI

INTRODUCTION TO INTERNET PROGRAMMING

Web page engages CGI by a form or hyperlinks

Web server executes server-side script or program

Server-side script accesses requested database(where available), file or process

Web server returns Web page with requested information or confirmation of action to the browser.

The location of the script being used must be known for proper referencing especially if a third party is involved in Web application

development.

4.0 CONCLUSION

The client/server model of computing is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients. Often this communication is over a computer network on separate hardware, but both client and server may reside in the same system. In this section, we have covered the network model and protocols that make a Web application development possible.

5.0 SUMMARY

A server machine is a host that is running one or more server programs, which share their resources with clients. A client does not share any of its resources, but requests a server's content or service function. Clients therefore initiate communication sessions with servers, which await incoming requests. This standard for passing data back and forth between the server and the client application is called CGI and is part of the Hypertext Transfer Protocol (HTTP) specification. CGI scripts are written in PHP, ASP, JSP, ColdFusion, PERL, C or any other related programming languages.

6.0 TUTOR-MARKED ASSIGNMENT

i. With the aid of a diagram, explain the term Web application.

ii. Discuss the OSI Reference Model Concept.

iii. What is a Web Server? Give two examples.

iv. What are the steps in utilising CGI?

CIT 322

MODULE 1

7.0 REFERENCES/FURTHER READING

Alex,

L.

&

Mathew,

L.

(1999).

Fundamentals

of

Information

Technology. New Delhi: Vikas Publishing House PVT LTD.

Andy, S. (1999).Computer Communications, Principles and Business Applications. (2nd ed.). England: McGraw-Hill.

Behrouz, A. F. (2003). Data Communications and Networking. (3rd ed.). N.Y, USA: McGraw-Hill/Osborne.

Brian, et al.(1999). Using Information Technology: A Practical Introduction to Computers and Communication. Irwin/McGraw- Hill.

Terry, F-M. (2009). Web Development and Design Foundations with XHTML. USA: Pearson .

Katarzyna J. M.

“Internet

and

You:

Connecting

to

the

Internet.”

CIT 322

MODULE 2

INTRODUCTION TO INTERNET PROGRAMMING

Unit

1

Understanding HTML

Unit 2

HTML Elements

Unit 3

Tables

Unit 4

Input Tags and Form Processing

UNIT 1

CONTENTS

UNDERSTANDING HTML

1.0

Introduction

2.0

Objectives

3.0

Main Content

3.1 Background of HTML

3.2 Browser

3.3 HTML Tags

3.4 The structure of WEB Page

3.5 How to create and run HTML codes

4.0

Conclusion

5.0

Summary

6.0

Tutor-Marked Assignment

7.0

References/Further Reading

1.0

INTRODUCTION

HTML stands for Hypertext Mark-up Language. It is the language for building Web pages and consists of standardised codes or “tags” that are used to define the structure of information on the Web page. Web pages come in many different varieties. In their simplest form, they contain static information, which is made up of simple texts. On the other extreme are pages, which are highly colourful, containing animation, sound and interactive elements. HTML codes make it possible for web pages to have many features including bold text, italic text, heading, paragraph breaks, tables, forms etc. Web pages generally reside on the HTTP server. A user request a web page from an HTTP (Web) server through a web browser such as, Internet Explorer, Mozilla Firefox, Safari, Chrome and so on, either by clicking on the hypertext or designating a particular URL (Uniform Resource Locator). The server then sends the requested information to the user computer.

In this unit, we shall discuss the background of HTML, Web browsers, tags and editors.

CIT 322

MODULE 1

2.0

OBJECTIVES

At the end of this unit, you should be able to:

discuss the meaning of HTML

use simple HTML codes

apply Web browsers to display HTML codes

write HTML codes using popular tags

run HTML codes.

3.0 MAIN CONTENT

3.1 Background of HTML

HTML is the set of mark-up symbols or codes placed in a file intended for display on the Web browser page. These mark-up symbol and codes identify structural elements such as paragraphs, heading, and lists. HTML can be used to place media (such as graphics, video, and audio) on the Web page and describe fill-in-forms. The browser interprets the mark-up codes and renders the page. HTML permits the platform- independent display of information across network. That is, no matter what type of computer a Web page is created on, any browser running on any operating system can display the page. The new version of HTML used today is eXtensible HyperText Mark-up Language (XHTML). XHTML uses the tags and attributes of HTML along with the syntax of eXtensible Mark-up Language (XML). We shall focus on HTML in this module.

3.2 Browser

A Web browser is a software program that interprets the coding language of the World Wide Web in graphic form, displaying the translation rather than the coding. A browser acts as an interface between the user and the inner working of the web. The browser software such as the Internet Explorer, Google Chrome, Firefox, Mozilla, Safari, and so on, interpret HTML codes and presents the information contained in the web pages in a readable format on the users’ computer. A browser does not display HTML tags. Browsers function as client programs by contacting the web server and sending the request for information received to the users’ computes.

3.3 HTML Tags

HTML consists of standardised “tags” that are used to define the structure of information on the Web pages. The decision about the structure of the text is made by the browser based on the tags, which are

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

marks that are embedded into the text. A tag is enclosed in two signs (< and >) and usually comes in pairs. The beginning tag starts with the name of the tag, and the ending tag starts with a slash followed by the name of the tag. The use of tags enables web pages to have many features including bold text, italic text, heading, paragraph breaks and numbered or bulleted list. Table 2.1 shows a list of common HTML tags

Table 1.1: HTML Tags

Beginning Tag

Ending Tag

Meaning

<A>

</A>

Defines an address (hyperlink)

<BODY>

</BODY>

Defines the body of the document

<BR>

 

Line break

<HEAD>

</HEAD>

Defines the head of the document

<HN>

</HN>

Defines different Headers (n is an integer)

<HTML>

</HTML>

Defines an HTML document

<IMG>

 

Define an Image

<LI>

</LI>

An item in a list

<OL>

</OL>

Ordered list

<TITLE>

</TITLE>

Defines the title of the document

Tags are generally used to specify “mark-up” regions of HTML documents for the web browser to interpret. Tags are composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag. For example, p, which is represented by p element, would be written as:

<p> This is my first HTML code

</p>

Not all elements require the end tag. An example of an element that does not require an end tag is the <br> element which forces a line break on the display of interpreted HTML codes on a browser.

HTML attributes are modifiers of HTML elements. They generally appear as name-value pairs, separated by "=", and are written within the start tag of an element, after the element's name:

<''tag'' ''attribute''="''value''">(content to be modified by the tag)</tag>

Where tag names the HTML element, attribute is the name of the attribute, set to the provided value. An attribute customises or modifies HTML elements.

CIT 322

MODULE 1

3.4 The structure of WEB Page

The basic structure for all HTML documents is simple and should include the following minimum elements or tags:

<html>-This is the main container for HTML pages

<head>-This is the container for page header information

<title>-The is used for the title of the page

<body>-This is a container of the main body of the page

The <HTML> Element

The HTML element is considered the root and container element for the whole HTML document. That is, its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Each HTML document should have one <html> and each document should end with a closing </html> tag.

Example 1: HTML Code:

<html>

</html>

The <HEAD> Element

The HEAD tag marks the beginning of the document head element; its contains the title of the pages and other parameters that the browser will use. Thus, each <head> element should contain a <title> element indicating the title of the document, and may also contain any combination of the following elements, in any order:

The <style> tag.

This is used for declaring or including Cascading Style Sheets(CSS) codes inside your HTML document.

The <script> tag

This tag is used to declare or include JAVAScript or VBScript inside the document.

The <meta> tag

This is used to include information about the document such as keywords and a description, which are particularly helpful for search applications.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

The <base> tag

This is used to create a "base" universal resource location (url) for all links on the page.

The <object> tag

This is designed to include multimedia such as images, Flash animations, MP3 files, QuickTime movies JavaScript objects, and other components of a page. The <param> tag is used along with this tag to define various parameters. Note the <embed> tag can also be used to include multimedia files as will be discuss later in this module.

The <link> tag

This is used to link to an external file, such as a style sheet or JavaScript file.

Example 2: Codes for HEAD element <head> <meta name="Keywords" content="NOUN, Web Pages" /> <meta name="description" content="HTML Basic Tags" /> <base href="http://www.nou.edu.ng " /> <link rel="stylesheet" type="text/css" href="noun.css" /> <script type="text/javascript"> _uacct = "UA-232293"; urchinTracker(); </script> </head>

The <title> Element

The <title> tag is usually placed within the <head> element to title your page. Whatever is written between the opening and closing <title></title> tags will be displayed in the title bar of the WEB browser. Search engines that use its content to help index pages use the title information. Therefore, it is excellent practice to use a title that really describes the content of your site.

Example 3: Code for Title element

<html> <head> <title>National Open University of Nigeria </title>

CIT 322

MODULE 1

</head>

</html>

The <Body> Element The <body> element appears after the <head> element. The purpose of the <body> element is to contain the text and HTML element that will display in the browser window. A <body> element may contain anything from a couple of paragraphs, links, images under a heading to more complicated layouts containing forms and tables. We will be looking at each of these elements in detail later in this unit. For now, it is only important to understand that the body element will encapsulate all of your webpage viewable content.

Example 4: Codes for Body Element <html> <head> <title>National Open University Website!</title> </head> <body> Welcome to the official Website of the National Open University of Nigeria </body> </html>

Example 5: Codes for HTML, Head, Title and Body Tags put together

By putting all the tags together, we have a complete HTML document as follows:

<html> <head> <title>National Open University of Nigeria </title> <meta name="Keywords" content="NOUN, Web Pages" /> <meta name="description" content="HTML Basic Tags" /> <base href="http://www.nou.edu.ng " /> <link rel="stylesheet" type="text/css" href="noun.css" /> <script type="text/javascript"> _uacct = "UA-232293"; urchinTracker(); </script> </head> <body> <P>Welcome to the official Website of the National Open University of Nigeria.</p> </body> </html>

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.5 How to Create and Run HTML codes

Creating an HTML document is easy. HTML allows us use only ASCII characters for both the main text and formatting instructions. To begin coding HTML you need a standard text editor. Notepad is readily available on computer systems. You could also use Dreamweaver or other text editors if installed. It is not advisable to use a word processor.

Steps

1. Launch Notepad application on your computer

2. Type in your HTML codes

3. Save the document onto a location in your computer drive with a

name and the extension “html” (for example firstnoun.html)

4. Click on the filename created.

example firstnoun.html) 4. Click on the filename created. Fig. 1.1: Step 1-3 of Section 3.5 Practice

Fig. 1.1: Step 1-3 of Section 3.5

Practice 1

Type in the HTML Codes in Example 5 and follow the steps in section 3.5. Run the codes by clicking on the filename and see how it appears

CIT 322

MODULE 1

Answer to Practice Question 1

CIT 322 MODULE 1 Answer to Practice Question 1 Fig. 1.2: Display interpreted HTML code in

Fig. 1.2: Display interpreted HTML code in a Google Chrome browser

4.0 CONCLUSION

HTML uses tags, which allow symbols or codes placed within the opening, and closing tags to be rendered to a browser. Examples of browsers include Internet explorer, Google Chrome, Firefox and so on. Browser interprets mark-up codes and renders the page to displays units. HTML permits the platform-independent display of information across network.HTML can be used to place media (such as graphics, video, and audio) on the Web page and to describe fill-in-forms.

5.0 SUMMARY

The development of Web pages is an interesting task. In this unit, we have been able to lay a good foundation for designing simple and complex Web pages. We can now identify HTML tags, put a few of them together and get the browser to interpret them.

6.0 TUTOR-MARKED ASSIGNMENT

i. What is the meaning of HTML?

ii. List and explain the meaning of five HTML tags

iii. Mention the names of five Web browsers

iv. Write HTML codes to display your personal details to include name, address, department and year of study.

7.0 REFERENCES/FURTHER READING

Alex,

L.&

Matthew,

L.

(1999).

Fundamentals

of

Information

Technology. New Delhi:Vikas Publishing House PVT LTD.

Miller, D.(2006). Data Communications and Network. N.Y: McGraw Hill.

Terry, F-M.( N.D ).Web Development and Design Foundations with XHTML. Pearson International Edition.

CIT 322

UNIT 2

CONTENTS

INTRODUCTION TO INTERNET PROGRAMMING

HTML ELEMENTS

1.0

Introduction

2.0

Objectives

3.0

Main Content

3.1 Presentational Tags

3.2 Multimedia Elements

3.2.1 GIF Image File Format

3.2.2 The JPEG Image File Format

3.2.3 The PNG Image File Format

3.3 Image Element

3.4 HTML Music (audio) and Video Codes

3.5 Anchor Element

3.6 HTML Email Tag

4.0

Conclusion

5.0

Summary

6.0

Tutor-Marked Assignment

7.0

References/Further Reading

1.0

INTRODUCTION

Just as in word processor software, one would want to make text bold, italicised, or underlined and apply other forms of formatting to texts. With HTML, these are also possible with the tags that will be discussed in this unit. We shall also cover how to embed multimedia (images, audio, and video) elements in Web pages.

2.0

OBJECTIVES

At the end of this unit, you should be able to:

write HTML codes that enhance the appearance of web pages

identify multimedia elements

describe different multimedia formats

embed multimedia files in HTML codes

create links to other web pages.

CIT 322

MODULE 1

3.1 Presentational Tags

Formatting is possible in HTML with the following tags:

Element

Example

 

Usage

<b>

Bold Text

Display text in bold

 

<i>

Italic text

Display text in italic

 

<big>

Big text

Display

text

larger

than

their

normal size

 

<small>

Small text

Display text smaller than normal size

<center>

</CENTER>

Centred

<sub>

Subscript Text

Display

small

text

above

the

baseline

<sup>

Superscript text

Display

small

text

below

the

baseline

<strike>

Strike

Displays text with a line through it

<u>

U text

Italic

The Paragraph Elements Paragraph elements are used to group sentences and sections of text together. Texts to appear in the paragraph are contained between <p> and </p> tags.

<p> National Open University of Nigeria.</p> <p> 14/16 Ahmadu Bello Way, Victoria Island </p> <p> Lagos Nigeria.</p>

This will produce the following result:

National Open University of Nigeria 14/16 Ahmadu Bello Way, Victoria Island Lagos, Nigeria.

The Line Break Element The line break tag, <br>, is used to force a new line when a browser displays the text on the Web page document. The line break tag opening tag is used alone. It is not used as in pairs like many other tags.

<br> National Open University of Nigeria.

This will produce the following result:

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

Example 1: HTML Codes: Putting all Together

<html> <head> <body> <p><b> National Open University of Nigeria </b> <br><i> National Open University of Nigeria</i> <br><big> National Open University of Nigeria</big> <br><small> National Open University of Nigeria</small> <br><center> National Open University of Nigeria</center> <br><sub> National Open University of Nigeria</sub> <br><sup> National Open University of Nigeria</sup> <br><strike> National Open University of Nigeria</strike> <br><u> National Open University of Nigeria</u> </p> </body> </head> </html>

This will produce:

</head> </html> This will produce: The Heading Elements These are organised into levels

The Heading Elements These are organised into levels <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The size of the text is largest at <h1> and smallest for <h6>. Depending on the font being used, text contained in <h5> and <h6> may be displayed smaller than the default text size. You use different sizes for your headings. When headings are displayed by a browser, one line is added before and after each of the heading

Example 2: Codes for Heading Elements <html> <head> <body> <h1>Heading1: National Open University of Nigeria </h1>

CIT 322

MODULE 1

<h2> Heading2: National Open University of Nigeria </h2> <h3> Heading3: National Open University of Nigeria </h3> <h4> Heading4: National Open University of Nigeria </h4> <h5> Heading5: National Open University of Nigeria </h5> <h6> Heading6: National Open University of Nigeria </h6> </body> </head> </html>

This will display following result:

</html> This will display following result: 3.2 Multimedia Elements Multimedia is media and content that

3.2 Multimedia Elements

Multimedia is media and content that uses a combination of different content forms. It includes a combination of text, audio, images, animation, video, and interactivity content forms. Multimedia elements such as sounds or videos are stored in media files. Multimedia comes in many different formats and are usually embedded in web pages to enhance their appearance and interactivity. Most web browsers today have support for a number of multimedia formats. The ones that are commonly supported are are Graphic Interchange Format (GIF), Joint Photographic Expert Group (JPEG or JPG), and Portable Network Graphics (PNG).

3.2.1 GIF Image File Format

The Graphics Interchange Format (GIF) is a bitmap image format bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability. It is best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent background, which is important for web design. GIF files are usually larger files, which lead to low download times and large transfer rates. Gifs are also limited to the 256 colour scheme. The colour limitation makes the GIF format unsuitable for reproducing colour photographs and other images with continuous colour, but it is well suited for simpler images such as graphics or logos with solid areas of colour.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.2.2 The JPEG Image File Format

The Joint Photographic Experts Group (JPEG) developed the JPEG image file format. As the name implies, JPEG is suitable for photographic images containing many colour, as supports over 16.7 million colors (with 24-bit colour). They are easier to download than gifs files and saves hard drive space because of the support of high compression. It is best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of detail.

3.2.3 The PNG Image File Format

The Portable Network Graphics (PNG - pronounced “ping”) image file format was developed in response to several needs such as more efficient format and the compression algorithm patent controversy associated with GIF format. It was created as the free, open-source successor to the GIF. It combines the best of GIF and JPEG. The PNG file format supports true colour (16 million colours) while the GIF supports only 256 colours. The PNG file excels when the image has large, uniformly coloured areas.

3.3 Image Element

Images can be included within HTML documents with the IMG element tag <img>. Images are used to enhance the appearance of web pages. Commonly used attributes with the image element are shown in the table below:.

Attribute

Value

Description

Alt

Text

Specifies an alternative text for an image

Src

URL

Specifies the URL or source of an Image

Image Src

From the above, src attribute stands for source; that is, the source where the image file is located. The image may be directly available on your local system, a Web server or any standard URL. The src attribute must be properly pointed to the local or external source.

Example: HTML Code <img src="noun.gif" />

CIT 322

MODULE 1

Image:

CIT 322 MODULE 1 Image: HTML –Alternative Attribute The alt attribute specifies alternate text to be

HTML –Alternative Attribute

The alt attribute specifies alternate text to be displayed if for any reason, the browser does not locate the specified image or if a user has image files disabled. For browsers that support only text, the alternate attribute becomes very relevant also.

Example HTML Code:

3.4 HTML Music (Audio) and Video Codes

Music and video can easily be inserted onto web page in a relatively easy way by using the embed <embed> tags. In the past, multiple tags had to be used because browsers did not have a uniform standard for defining embedded media files. A src attribute is required to define the correct URL (local or global) of the audio or video file in order for it to be displayed correctly. Other attributes can be set in order to customise your web pages.

Example: HTML Code for Music (Audio) <embed src="nounanthems.mid" />

Example: HTML Code for Video <embed src="http:// universitymedia.com /files/noun.mpeg"/>

Listing of Video Media Types

Below is the list of the most commonly used file formats for the internet.

.swf files - are the file types created by Macromedia's Flash program.

.wmv files - are Microsoft Window’s Media Video file types.

.mov files - are Apple's Quick Time Movie format.

.mpeg files - set the standard for compression movie files created by the Moving Pictures Expert Group.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types are supported by the embed tag. The “.mpeg" files and Macromedia's “.swf” files are the most compact and widely used for the design of web pages.

3.5 Anchor Element

The HTML anchor <a> element is used to create a link or hyperlink reference (href) to a resource such as another web page, a file, a multimedia element, and so on or to a specific place within a web page. Each hyperlink begins with an <a> tag and ends with an </a> tag. The opening and closing tags surround the text to click to perform hyperlink. The anchor tag requires some attribute and value to work.

Hypertext Reference (href)

The href attribute defines reference that the link refers to. This is where the user will be taken if they wish to click this link. Hypertext references can be Internal, Local, or Global.

Example

<a href="http://nou.edu.ng">NOUN</a> <a href="home.html">Home</a> <a href="contactus.html">Contact Us</a> <a href="register.html">Register</a> <a href="login.html">Login</a>

In this example, when you click on NOUN, it will take you to the website nou.edu.ng

3.6 HTML E-mail Tag

To create e-mail link use a standard HTML anchor tag <a> and set the href property equal to the email address, rather than specifying a Web URL.

Example: HTML Code

<a href= "mailto:myaddress@gmail.com">Email </a>

CIT 322

MODULE 1

4.0 CONCLUSION

The appearance of Web pages goes a long way in determining the number of visitors and how long they spend in a site. It is therefore necessarily for Web developers to be conversant with how to use relevant HTML tags for enhancing the presentation of text and display of images in Web Pages. Many of these tags have been covered in this unit. The three most common methods of representing images are Graphic Interface Format (GIF), Joint Photographic Experts Group (JPEG) and Portable Network Graphics (PNG). These formats allow images to be compressed for easy download from Web pages.

5.0 SUMMARY

This unit described how the text content of an HTML document could be formatted with relevant HTML tags. By formatting, we mean layout and some presentation details. We also discussed how multimedia elements can be embedded into HTML documents to enhance their interactivity or appearance.

6.0 TUTOR-MARKED ASSIGNMENT

i. Describe three types of Image Format. List and explain the meaning of five HTML tags.

ii. Name five popular Web browsers.

iii. Write HTML codes to display your personal details to include name, address, department and year of study.

7.0 REFERENCES/FURTHER READING

Barbara, K. K. & Norman, J. M. (2001). The World Wide Web: A Mass Communication Perspective. USA: Mayfield Publishing Company.

Barrie, S. & Valda, H. (2004). Programming the Web: An Introduction. USA McGraw-Hill.

Behrouz, A. F. (2003). Data Communications and Networking. (3rd ed.). N.Y, USA: McGraw-Hill/Osborne.

Deitel, P. J., & Deitel, H. M. (2008).Internet and World Wide Web: How to Program. (4th ed.). New Jersey, USA: Pearson Prentice Hall.

June, C. (2003). The Unusually Useful Web Book. USA:New Rider.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

Marc, D. M. & Thomas, C. P. (2003) .Web Design Using Macromedia Dreamweaver. USA: McGraw-Hill/ Irwin.

Peter, W .(2001). Instant Web Pages. USA: Sybex Inc.

Raymond, G. & Ellen, H. (2001). In-Line/On-Line Fundamentals of the Internet and World Wide Web. USA: McGraw-Hill Learning Center.

Terry, F-M. (2009). Web Development and Design Foundations with XHTML. USA: Pearson.

CIT 322

MODULE 1

UNIT 3

TABLES

CONTENTS

 

1.0

Introduction

2.0

Objectives

3.0

Main Content

3.1 HTML Tables

3.2 Table Attributes

3.2.1

The Border Attribute

3.2.2

Spanning Multiple Rows and Cell

3.2.3

Table Heading – The <th> Element

3.2.4

CellPadding and Spacing

3.2.5

Colspan and Rowspan Attributes

3.2.6

The Width and Height Attributes

4.0

Conclusion

5.0

Summary

6.0

Tutor-Marked Assignment

7.0

References/Further Reading

1.0 INTRODUCTION

A table is layout mechanism that allows contents, which include text,

images, links, forms, and even other tables to be arranged into vertical columns and horizontal rows. The rows and columns do not have to be visible, nor do they have to be equal in size. Each block of space within a table is called a table data cell. The size, background colours or background images, border colours and other formatting can easily be achieved by using Cascading Style Sheet (CSS). In HTML, tables are created using the table tag, in conjunction with the tr and td as the basic tags. Major formatting can be done on table using CSS.

2.0 OBJECTIVES

At this end of this unit, you should be able to:

design tables and organise information using a table

create tables using table tags

format table by using appropriate table attributes.

3.0 MAIN CONTENT

3.1 HTML Tables

The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Tables are can be used

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

to create site layout and server as container for forms or other elements. To create a simple table of two rows and two columns the following HTML code can be used:

HTML Code:

<table border="1"> <tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td></tr> <tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td></tr> </table>

Basic Table

Row 1 Col 1

Row 1 Col 2

Row 2 Col 1

Row 2 Col 2

Table rows are defined by <tr> and </tr> while table data is defined by <td> and </td>.

Let us now examine some attributes that are commonly used with tables.

3.2 Table Attributes

Commonly used table <table> attributes include align, border, border colour, with, height, cellspacing, cellpadding, bgcolour

3.2.1 The Border Attribute

This attribute is used to specify whether and what type of visible border the table will have. The values specifies range from 0 to 100 with 0 indicating no border will be visible and 1(relatively thin bother) -100 (very thick border). In the HTML code above, we specified the value of the border attribute as 1.

3.2.2 Spanning Multiple Rows and Cell

The rowspan attribute is used to span multiple rows and while the colspan is used to span multiple columns. To set headers table you need the <th> tags. Headers are by default bold to make them different from other content of the table.

HTML Code:

<table border="1"> <tr>

<th>Column1</th>

<th>Column 2</th> <th>Column 3</th> </tr>

CIT 322

MODULE 1

<tr><td rowspan="2">Row 1 Col 1</td> <td>Row 1 Column2</td><td>Row 1 Column3</td></tr> <tr><td>Row 2 Column2</td><td>Row 2 Column3</td></tr> <tr><td colspan="3">Row 3 Column1</td></tr> </table>

Colspan and Rowspan

Column 1

Column 2

Column 3

Row 1 Column1

Row 1 Column2

Row 1 Column3

Row 2 Column2

Row 2 Column3

Row 3 Column1

3.2.3 Table Heading – The <th> Element

Table heading can be defined using <th> element The <th>, or table heading element is used to add heading to tables and distinguish column heading from table content. Figure 3.1 shows a table that uses <td> element.

<table border="1"> <tr> <th>Name</th> <th>Department</th> </tr> <tr> <td>Okeke Ayo Sule</td> <td>Economics</td> </tr> <tr> <td>Etinosa Wada Erujeje </td> <td>Computer Science</td> </tr> </table>

This will produce following result.

Name

Department

Okeke Ayo Sule

Economics

Etinosa Wada Erujeje

Computer Science

Fig. 3.1 : Table

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.2.4 CellPadding and Spacing

The cellspacing Attribute: This attribute specifies the distance between the cells in pixels. If a value is not specified for the cellspacing attribute, the default value (usually around 2 pixels) is assumed by the browser.

The cellpadding attribute: This attribute specifies the distance in pixel between the cell content and the edge of the cell. If you do not specify a value for the cellpadding attributes, the default value which is 1 pixel is assumed by the browser. An example with cellpadding set to 10 is shown in Figure 3.2.

HTML Code:

<table border="1" cellspacing="10" <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Col1</td><td>Row 1 Col2</td></tr> <tr><td>Row 2 Col1</td><td>Row 2 Col2</td></tr> </table>

Cellspacing and Padding Column 1 Column 2 Row 1 Col1 Row 1 Col2 Row 2
Cellspacing and Padding
Column 1
Column 2
Row 1 Col1
Row 1 Col2
Row 2 Col1
Row 2 Col2
1 Column 2 Row 1 Col1 Row 1 Col2 Row 2 Col1 Row 2 Col2 Fig.

Fig. 3.2a: Cellspacing

Let us now specify a value of 10 for the cellpadding of the table and remove the cellspacing from the previous example.

HTML Code:

<table border="1" cellpadding="10" <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Column1</td><td>Row 1 Column2</td></tr> <tr><td>Row 2 Column1</td><td>Row 2 Column2</td></tr> </table>

CIT 322

MODULE 1

ColPads

Column 1

Column 2

Row 1 Column1

Row 1 Column2

Row 2 Column1

Row 2 Column2

Fig. 3.2b: Padding

The value you specify for padding and spacing is interpreted by the browser as a pixel value. The value 10 specified in the two examples are simply means 10 pixels wide. That is, attributes that use numeric values for their measurements use pixels.

Figure 3.3 shows a table with cellpading of five and cellspacing of five.

<table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Department</th> </tr> <tr> <td> Okeke Ayo Sule </td> <td>Economics</td> </tr> <tr> <td> Etinosa Wada Erujeje </td> <td>Computer Science</td> </tr> </table>

This will produce following result:

Name

Okeke Ayo Sule

Etinosa Wada Erujeje

Department

Economics

Computer Science

Fig. 3.3: Cellspacing and Padding

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.2.5 Colspan and Rowspan Attributes

The colspan Attribute: This attribute specifies the number of columns that a cell will occupy. It is also used to merge two or more columns into

a single column.

The rowspan attribute: This attribute specifies the number of rows that

a cell will occupy. The rowspan attribute is used to merge two or more rows.

Figure 3.3 shows a table with rowspans=2 and colspan=3

<table border="1">

<tr>

<th>Column 1</th> <th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan="2">Row 1 Column1</td> <td>Row 1 Column2</td><td>Row 1 Column3</td></tr> <tr><td>Row 2 Column2</td><td>Row 2 Column3</td></tr> <tr><td colspan="3">Row 3 Column1</td></tr>

</table>

This will produce following result:

Column 1

Column 2

Column 3

Row 1 Column1

Row 1 Column2

Row 1 Column3

Row 2 Column2

Row 2 Column3

Row 3 Column1

3.2.6 The Width and Height Attributes

The Width Attribute: This attribute specifies the width of the table in pixel or in percentage of the Web page. The table will stretch to fit the entire width of the page if 100% is used. If width is not specified, the browser assumes the width of a particular table automatically by using the width of the element and text it contains. The essence of this attribute is to customize or control the display of tables on the Web page.

The Height Attribute: This attribute specifies the height of the table in either pixel or the percentage of the Web page. This is more commonly used on <tr> and <td> tags.

CIT 322

MODULE 1

You can specify table width or height in terms of integer value or in terms of percentage of available screen area. Study example 3.1 for a better understanding of the use of these attributes

Example 3.1 <table border="1" width="300" height="120"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr>

</table>

This will produce following result:

Row 1, Column 1

Row 1, Column 2

Row 2, Column 1

Row 2, Column 2

4.0 CONCLUSION

One of the most important features of HTML is its support for tables. Tables help to present data in more understandable ways in a browser. HTML tables work in an a fashion similar to tables in Microsoft Word in that it allows authors to build columns and rows containing most of the other HTML elements and contents.

5.0 SUMMARY

HTML allows a designer to create table by using table tags in conjunction with the tr and td as the basic tags. Important attributes, which provide additional information about table elements, were also covered in this unit.

6.0 TUTOR-MARKED ASSIGNMENT

How are tables more useful as layout mechanism than plain HTML? Give an example that show their usefulness in this regards.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

7.0 REFERENCES/FURTHER READING

Barbara, K. K. & Norman, J. M. (2001). The World Wide Web: A Mass Communication Perspective. USA: Mayfield Publishing Company.

Barrie, S. & Valda, H. (2004). Programming the Web: An Introduction. USA McGraw-Hill.

Behrouz, A. F. (2003). Data Communications and Networking. (3rd ed.). N.Y, USA: McGraw-Hill/Osborne.

Deitel, P. J., & Deitel, H. M. (2008).Internet and World Wide Web: How to Program. (4th ed.). New Jersey, USA: Pearson Prentice Hall.

June, C. (2003). The Unusually Useful Web Book. USA:New Rider.

Marc, D. M. & Thomas, C. P. (2003) .Web Design Using Macromedia Dreamweaver. USA: McGraw-Hill/ Irwin.

Peter, W .(2001). Instant Web Pages. USA: Sybex Inc.

Raymond, G. & Ellen, H. (2001). In-Line/On-Line Fundamentals of the Internet and World Wide Web. USA: McGraw-Hill Learning Center.

Terry, F-M. (2009). Web Development and Design Foundations with XHTML. USA: Pearson.

CIT 322

MODULE 1

UNIT 4

CONTENTS

INPUT TAGS AND FORM PROCESSING

1.0

Introduction

2.0

Objectives

3.0

Main Content

3.1 The Form Element

3.2 HTML – Text Field /Box

3.3 HTML – Password Field

3.4 HTML – Checkbox Forms

3.5 HTML –Radio Form

3.6 HTML - Textarea

3.7 HTML –Selection Forms and Drop Down Lists

3.8 Submit Button

4.0

Conclusion

5.0

Summary

6.0

Tutor-Marked Assignment

7.0

References/Further Reading

1.0

INTRODUCTION

A form is an HTML element that contains and organises other objects or controls. Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, and so on, which are used to take information from the user. Generally, a user completes a form by entering text, selecting menu items and so on before submitting it to an agent such as Web server, a mail server, etc. for processing. Within the server, the back-end application such as CGI, ASP Script or PHP script, and so on does the required processing on the users data as specified in the scripts. Results are rendered to the Web browsers if there is a need to do so.

2.0 OBJECTIVES

At this end of this unit, you should be able to:

explain the meaning of Forms

write HTML codes to process form information

discusshow to use Form action and Methods

use various form elements.

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

3.0 MAIN CONTENT

3.1 The Form Element

The <form> tag is used to specify the beginning of a form area on a Web page while the </form> tag is used to specify the end of a form area. Common attributes used to the <form> tags are name, method, and action. These attributes are used to specify what server-side program or file will process the form, how the form information will be sent to the server, and the name of the form.

Name Attribute: This is an optional attribute and names the form. The name of the form is required for it to be easily access by client scripting languages, such as JavaScript (will be treated latter) to edit and verify the form prior to sending its information for server-side processing

Method Attribute: This attribute is optional. The values GET or POST may be specified. When GET is specified, it causes the form data to be appended to the URL and sent to the Web server. When the value POST is specified for the attribute, it transmits the form data in the body of the HTTP response. This is a more referred and acceptable method.

Example 4.1 is a sample HTML fragment that defines a simple form that allows the user to enter a first name, last name, department and the gender of a user. When the submit button is activated, the form will be processed based on the instructions contained a PHP script (process.php).

Action Attribute: This attribute is optional. However, when a value is specified it determines the server-side program or script that will process your form data using CGI. The value should be a valid file name on a Web server. Examples PHP script(.php extension), Sun JavaServer Pages(.jsp extension), Microsoft Active Server Pages(.asp extension).

Example 1: HTML Code for Form

<FORM action="process.php” method="post"> <P> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> Department: <INPUT type="text" name="dept"><BR> <INPUT type="radio" name="gender" value="Male"> Male<BR> <INPUT type="radio" name="gender" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset" value=”Reset”> </P>

CIT 322

MODULE 1

</FORM>

Output

CIT 322 MODULE 1 </FORM> Output Fig. 4. 1: Form Display on Browser 3.2 HTML –

Fig. 4. 1: Form Display on Browser

3.2 HTML – Text Field/Box

Text fields are small rectangles that allow a user to simply input some text or numeric information, such as names, e-mail addresses, phone number, and other text and submit the information to the web server. The form element is configured by the <input /> tag. Common attributes of a text box are type, size, maxlength, value and password.

HTML – Text Field Size

You can control the size of the text area by specifying the size attribute. The example below provides three different sizes for your text fields. The default size is usually around 20 characters long. See example 2

Example 2: HTML Code for Input / Text Box Element

<html> <body> <FORM action="process.php” method="post"> <P> First name: <INPUT type="text" name="firstname" size="20"><BR> Last name: <INPUT type="text" name="lastname" size="19"><BR> Department: <INPUT type="text" name="dept" size="15"><BR> </P> </FORM> <body> <html>

Output

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

CIT 322 INTRODUCTION TO INTERNET PROGRAMMING First name: Last name: Department: Fig. 4. 2: Textbox HTML
CIT 322 INTRODUCTION TO INTERNET PROGRAMMING First name: Last name: Department: Fig. 4. 2: Textbox HTML
CIT 322 INTRODUCTION TO INTERNET PROGRAMMING First name: Last name: Department: Fig. 4. 2: Textbox HTML

First name:

Last name:

Department:

Fig. 4. 2: Textbox

HTML –TextField Maxlength

When the value is specified, TextField Maxlength is used to limit the number of characters a user can type into fields. It is a good programming practice to specify the maxlength; generally, this should match the size of your field.

Example 3: HTML Code Textbox with Maxlength Attribute <html> <body> <FORM action="process.php” method="post"> <P>

First

name:

<INPUT

type="text"

name="firstname"

size="20"

maxlength="20"><BR>

 

Last

name:

<INPUT

type="text"

name="lastname"

size="20"

maxlength="20"><BR>

 

Department:

<INPUT

type="text"

name="dept"

size="15"

maxlength="15"><BR>

</P>

</FORM>

<body>

<html> 1

Practice 1 Run the program and attempt to enter data more than the maximum length specified. Write down your experience in a sentence

HTML –TextField Value

The value attribute is used to pre-populate your text fields with some information. This can then be manipulated with any scripting language such as PHP, PERL, etc. See example 4 below.

Example 4: HTML Code for TextField value <html> <body>

1

CIT 322

MODULE 1

<FORM action="process.php” method="post"> <P> First name: <INPUT type="text" name="firstname" size="20" maxlength="20" value="Sule"><BR> Last name: <INPUT type="text" name="lastname" size="20" maxlength="20" Value="Okeke"><BR> Department: <INPUT type="text" name="dept" size="15" maxlength="15" Value="Economics"><BR> </P> </FORM> <body> <html/>

Sule Last

Okeke

Economics

First name:

name:

Department:

Fig. 4. 3: Text Field with Values

3.3 HTML – Password Field

Password fields are a special type of <input /> tag. To implement them, change the type attribute from text to password. Password field is used to accept information that need to be hidden as it is entered. When a user types in information in a password box, asterisks (i.e *) are displayed instead of the characters that are being typed. This does not mean that the data entered is encrypted. To encrypt data one must use a scripting language to process the data captured. See example 5 below.

Example 5: Password Attribute

HTML Code:

<html>

<body> <FORM action="process.php” method="post"> <P>

MatNo:

<INPUT

type="text"

name="matno"

size="11"

maxlength="11"><BR>

 

User

Name:

<INPUT

type="text"

name="username"

size="20"

maxlength="20"><BR>

CIT 322

INTRODUCTION TO INTERNET PROGRAMMING

Password:

maxlength="8"><BR>

<INPUT

</P>

</FORM>

<body>

<html>

type="password"

NOU123564

MatNo:

User Name:

Password:

Okeke

********
********

Fig. 4. 4: Password Fields

name="pass"

3.4 HTML – Checkbox Forms

size="8"

Checkboxes are another type of <input /> form. They are used for instances where a user may wish to select some or all-multiple options. The “type” attribute must be set to checkbox and set the name and value attributes. A sample checkbox code and the corresponding form are shown in Example 6 and Figure 5 below.

Example 6: HTML Code for Checkbox

<html> <body> <FORM action="process.php” method="pos