CSC 304

WEB PROGRAMMING
A LESSON GUIDE or MODULE FOR BSCS III

Pursuant to Commission on Higher Education (CHED)’s implementation on flexible learning of the

Students during this pandemic, virus known as COVID-19.

Prepared by:

Nico B. Dela Cruz

Computer Instructor
 MODULE 1
HTMLs

Introduction

Hypertext Markup Language (HTML) is the standard markup language for documents designed
to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets
(CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and
render the documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.

COURSE LEARNING OUTCOMES

At the end of the course, the learners are to:

 Remember & understand the concept of Web Application Development and its
Architecture.
 To understand the Essentials of Web Application Development.
 Value and practice web page designing techniques.
 Specify and practice embedded dynamic scripting on client side Internet Programming.
 Remember & Understand the differences between client side & server side technologies
 Embody Web Application.

CONTENTS OF THE MODULE

The Module contains the following lessons:
Lesson 1: Introduction to WWW
Lesson 2: Introduction to Web Development
DIRECTION ON HOW TO USE THE MODULE PROPERLY
In order to benefit the profoundly from this module, please be guided by all the key
points presented below.
1. This module contains two (2) lessons. Each lesson is explained substantively, Read
the explanations thoroughly so that you could understand the lesson fully.
2. On the first page of each lesson, you will find the specific learning outcomes (SLOs)
of each lesson. SLOs are knowledge and skills you are expected to acquire at the end
of the lesson. Read them heartily.
3. You must answer the Learning Activities/ Exercise (LAEs). The LAEs are designed
to help you acquire the SLOs.
4. Feel free to chat, call, text or send and e-mail message to me if you have questions,
reactions about the contents or activities in the module.
5. The practice Task/ Assessment and the Assignment shall be checked by me.

LESSON 1 – Introduction to WWW

Specific Learning Outcomes
1. Discus the Brief history of the Internet
 2. Discuss how the internet works
3. Explain what are Internet protocol; HTTP protocol; Domain names; Domain Names
Service Servers
4. Discuss web server; IIS; Apache server
5. Discuss the new features in HTML5

Motivation/ Prompting Questions

How did the Internet start? And what is its importance? How will you create a simple
code and run it on a browser, and how does it work?

Discussion
Introduction
 The Internet or “Net” (network of networks) is the largest computer network in the world
that connects billions of computer users.
 The word internet comes from combination between “interconnection” and “Network”
 Network is a collection of computers and devices connected via communication channels
and transmission media allow to share resources (hardware, software, data, information).
 Generally, nobody own internet.
 The vast collection of computer networks which form and act as a single huge networks
for transport of data and messages across distances which can be anywhere from the same
office to anywhere in the world
Brief History of internet
 ARPA – Advanced Research Project Agency.
 1969 January 2 – started an experimental Computer Network.
 Concept – No Server, but equal importance/participation to every computer in the
Network.
 Even if, one or two node destroyed that will not affect the Network.
 In 1982 the word internet started.
 1986: First “freenet” created in Case Western Reserve University
 1991: US government allowed business agencies to connect to internet.
 Now all peoples can connect to internet and improve their life and work quality.
 The internet support various aspects in our life.

Vinton Cerf – the Father of Internet, Co-designer

of the TCP/IP networking protocol.

What is the Internet?

 It is a computer-based worldwide information network.
It is composed of a large number of smaller interconnected networks and international
computer network linking together thousands of individual networks at military and government
agencies, educational institutions, non-profit organizations, industrial and financial corporations
of all sizes, and commercial enterprises (called getaways or service providers) that enable
individuals to access the network. The most popular features of the Internet include electronic
mail (e-mail), discussion groups (called newsgroups or bulletin boards, where users can post
messages and look for responses on a system called Usenet ), on-line conversations (called
chats), adventure and role-playing games, information retrieval, and electronic commerce (e-
commerce).
 IMPORTANCE OF THE INTERNET
• Information
• Communication
- Effective communication with people around the world
- Inexpensive communication
Examples Email, mirc

Client/Server Architecture
 Client- user, subscriber= Information Receiver
 Server- provider= Information provider

HOW TO CONNECT TO THE INTERNET

1. Log in to the Network.
2. Request information on a remote server.
3. The server sends the information to the client in the form of a file.
Downloading – the process of retrieving files from a remote server to users terminal.
Hypertext – interlinked systems of documents.
Hyperlink – portions of the hypertext documents that are linked to other related documents.
ACCESSING CATEGORIES
 Dedicated access – the computer is directly connected to the internet via router using
cable, as a router.
 Dial-up access – a computers connects to the internet with a temporary connection.
Tel.wire analog
 Packet – small units of information.
 Modem- a device that converts the electronic signals from a computer into signal that can
be transmitted via telephone lines.
 TCP/IP- transmission control protocol/internet protocol.
 Internet protocol(IP address)- is a numerical value assigned to each computer and printer,
participating in a computer network that uses the internet protocol for communication.
 Network address – is a variable for a node or network interface of a telecommunications
network.
 URL –uniform resource locator.
 Bandwidth- the amount of data that a computer network can transmit.
 Network – is the techniques, physical connections and computer programs used to linked
to or more computers.

Three Components of a Network

1. Application software- consists of computer programs that interface with network users and
permits sharing of information.Example, windows,DOS.
2.Network Software – consists of computer programs that establish protocols or rules, for
computers to talk with one another. Example, UNIX.
3. Network Hardware- Physical component that connect computer
Ex, Modem, Telephone line, NIC card, UTP cable

Internet Services
 WWW- World Wide Web
 FTP-File Transfer Protocol
 File Structure
 Gopher-Enhanced FTP
 Telnet-LAN
 Webpage / Homepage
 Web Publishing
 Web browser
 Search Engine
  Protocol
 Internet Protocol
 DNS
 HTTP
 URL
 HTML
 ISP
 E-mail Newsgroup
 Video conferencing
 FTP
 Telnet
 Forum
 ARPANET-Advenced Research Projects Agency Network (early Internet)
 First Name of the Internet
 Used for Advanced Research Project Agents
 Network for military purposes

WWW
 The World Wide Web, commonly known as the Web, is a system of interlinked
hypertext/hypermedia documents accessed via the Internet.
 Hypertext is text displayed on a computer or other electronic device with references to
other text that the reader can immediately access, usually by a mouse click or key press
sequence.
 Hypermedia is used as a logical extension of the term hypertext in which graphics,
audio, video, plain text and hyperlinks intertwine to create a generally non- linear
medium of information. Creator: Timm Berners-Lee, 1989.
Tim Berners-Lee

 Considered as the Father of WWW.

 Invented WWW while working at CERN, the European
Particle Physics Laboratory in Geneva, Switzerland

Difference b/w the Web and Difference b/w the Web and Internet
Internet - collection of networks that connect millions of businesses, government agencies, educational
institutions, and individuals.
WWW - the means we use to access information over the internet – Different communication protocols –
Special link (hyperlink) that enable users to jump from one place to another on the web.

Web Page

 A web page is a document or resource of information that is suitable for the World Wide Web
and can be accessed through a web browser and displayed on a monitor or mobile device.
 This information is usually in HTML or XHTML format, and may provide navigation to other
webpages via hypertext links.
 It can contain text, graphics, audio, video and has built- in connection or links to other web
documents. A web page has a unique address called a Uniform Resource Locator (URL).
Web Browser

 A software application for retrieving, presenting, and traversing information resources on the
World Wide Web.
 It allows to locate, view, and navigate the web.
 It can have a Graphical User Interface, meaning they can display pictures (graphics) in addition
to text and other forms of multimedia such as sound and video like Internet Explorer, Mozilla
Firefox, Chrome and Opera, or can be text-based, like Lynx or Links.
 First web browser was develop in 1991: Mosaic develop by Marc Andreessen.

Protocol

 A set of guidelines or rules.

 Communications protocol is a formal description of message formats and the rules for
exchanging those messages.
 Format that agreed to transfer data between two devices.
o Hypertext Transfer Protocol (HTTP)
o Internet Protocol (IP)
o File transfer protocol (FTP)
o Simple Mail Transfer Protocol (SMTP)
o Networks News File Transfer Protocol (NNTP)
o Transmission Control Protocol (TCP); Normally use together with IP
Electronic Mail

 A written message that is sent and received over the Internet.

 The message can be formatted and enhanced with graphics and may also include other files as
attachments.
 Like ordinary mail, email have address, E.g. s12345@e-web.uum.edu.my
 An e-mail address identifies an e-mail box to which e-mail messages may be delivered.
 Most e-mail on the Internet uses the Simple Mail Transfer Protocol (SMTP).
Learning Activities/ Exercises
Define and Explain the Following in preparation for Lesson 2.
1. URL
2. URI
3. Website
4. Webserver
5. Apache
6. Microsoft IIS
Teacher Intervention

 Students with Internet connection (with Personal Computers at home) may browse,
navigate and register in Edmodo https://new.edmodo.com/ which is an Online
Classroom prepared by your Instructor, you may register and join the class once you
have entered the Class key provided by your Instructor.
 Students who uses Data Connection with the use of Mobile (Android) Device may
Download and Install Edmodo to their phones through Google Play Store. Again, you
may register and join the class once you have entered the Class key provided by your
Instructor.
 Students who does not have Internet Connection may provide their Mobile Numbers for
specific instructions to be given by the Teacher

Practice Task/ Assessment

Quiz 1: Fill in the Blanks: Provide the correct answer on the space provided before the number.
1. ________is a document or resource of information that is suitable for the www.
2. ___________ is the computer-based worldwide information network
3. __________is a process transmitting and receiving symbol, data, image, text, document, graphic
4. Most e-mail on the Internet uses the _________.
5. _______ is a formal description of message formats and the rules for exchanging those messages.
6. Internet is the collection of networks that connect millions of ________.
7._______ is a formal description of message formats and the rules for exchanging those messages.
8. _______is a system of interlinked hypertext/hypermedia documents accessed via the Internet.
9. Physical component that connect computer is the ___________.
10. _______ software application for retrieving, presenting, and traversing information resources on the
World Wide Web.

Assignment
1. What are some interesting discoveries and facts that I have gathered when I was studying the
lesson?

LESSON 2 – HTML
Specific Learning Outcomes
1. Discuss the Forms
2. Define HTML Controls
Motivation/ Prompting Questions
The original purpose of the World Wide Web (WWW) was to provide easy access to
cross-referenced documents that existed on the CERN computer network.

Discussion
• A Web server is a computer that delivers Web pages
• The most popular Web server software is Apache HTTP Server (Apache) author of the
program is Robert McCool
• The second most popular Microsoft Internet Information Services Web server is (IIS) for
Windows
HTML Documents
• Web pages are created using Hypertext Markup Language (HTML)
• Web pages are commonly referred to as HTML pages or documents
• A markup language is a set of characters or symbols that define a document’s logical
structure (format for layout and style on a webpage)
• HTML is based on an older language called Standard Generalized Markup Language
(SGML) a standard for how to specify a document in a web
• Like SGML(Standard Generalized Mark-up language), HTML was originally
designed as a way of defining the elements in a document independent of how they
would appear
• HTML has evolved into a language that defines how elements should appear in a Web
browser
• Understanding HTML is critical in learning how to write a web application along with
the server programming

Basic HTML Syntax

• HTML documents are text documents that contain formatting instructions called tags
• HTML tags include:
– Formatting commands (boldface or italic)
– Controls that allow user input (option buttons or check boxes)
• Tags are enclosed in brackets (< >) and consist of an opening tag and a closing tag
• Tutorial for learning HTML
– http://www.htmldog.com/
– http://www.w3schools.com/html/DEFAULT.asp
Web Communication Protocols
• A Web page is identified by a unique address called the URL
• Each URL consists of two basic parts:
– A protocol (usually HTTP) and
– Either the domain name for a Web server or a Web server’s Internet Protocol
address
• Hypertext Transfer Protocol (HTTP) manages the hypertext links that are used to
navigate the Web- the foundation of information on the www
• A host refers to a computer system that is being accessed by a remote computer
• A domain name is a unique address used for identifying a computer such as a Web
server on the Internet
• The domain identifier identifies the type of institution or organization (.biz, .com, .edu,
.org)
 • An Internet Protocol, or IP address, is another way to identify computers or devices
connected to the Internet
• An IP address consists of a series of four groups of numbers separated by periods
• Each Internet domain name is associated with a unique IP address
• HTTP is a component of Transmission Control Protocol/Internet Protocol (TCP/IP)
• Hypertext Transfer Protocol Secure (HTTPS) provides secure Internet connections for
transactions that require security and privacy

Publishing Your Web Site

• Web Hosting:
– The publication of a Web site for public access
– Internet access (cable modem, DSL, satellite, dial-up modem, ISP)
• Internet Service Provider (ISP):
– Provides access to the Internet along with other types of services such as e-mail
• ISP advantages to hosting a Web site:
– Extremely fast Internet connections using advanced fiber-optic connections
– Large and powerful Web servers and the expertise and manpower to maintain and
manage them
• A domain name is a unique address used for identifying a computer, such as a Web
server on the Internet
• Domain name registration
– Pick a domain name that is similar to your business name or that describes your
Web site
– You cannot use a domain name that is already in use or a trademarked name
– Contact a domain name registrar to find out the availability of a domain name
and register it
– Domain names are stored in a master database that is maintained by the
InterNIC(network information center)
• Domain name registration (continued)
– For a fee, domain names can be registered for a specified period of time
– Most hosting sites provide registration service for you
– After you register your domain name, notify your ISP of your domain information
• File Transfer Protocol (FTP)
– Is a TCP/IP protocol used for transferring files across the Internet
 – Transfers files between an FTP client (your computer) and an FTP server (a
server capable of running FTP)
– The vehicle that allows you to get your Web page files to the Web server
• File Transfer Protocol (continued)
– Your ISP provides a username and password to log on to the FTP site and upload
files to the FTP server
– Examples of FTP clients include Firefox and Internet Explorer and WinScp
Use your browser to log on to an FTP server and upload your files

Working with Well-Formed Web Pages

• HTML became an Internet standard in 1993 with the release of version 1.0
• The current version of HTML (4.01) was released in 1999
• HTML 4.01 is the last version of the HTML language and is being replaced with
extensible hypertext markup language (XHTML)
• HTML is not suitable for user agents other than Web browsers
XHTML Document Type Definitions (DTDs)
• A well-formed document must include:
– <!DOCTYPE> declaration
– <html>, <head>, and <body> elements
• A document type definition (DTD) defines:
– The elements and attributes that can be used in
a document
– The rules that a document must follow when it includes them
• There are three types of DTDs with XHTML documents:
– transitional
– strict
– frameset
• The World Wide Web Consortium (W3C) was established in 1994 at MIT to oversee the
development of Web technology standards
• The W3C:
– Decided some common HTML elements and attributes for display and formatting
would not be used in XHTML 1.0
– Recommended using Cascading Style Sheets (CSS) instead of HTML elements
and attributes for displaying and formatting Web pages
• Elements and attributes that are considered obsolete and will eventually be eliminated are
said to be deprecated
 • Transitional DTD:
– Allows you to use deprecated style elements in your XHTML documents
– Use only if you need to create Web pages that use the deprecated elements
• Frameset DTD:
– Identical to the transitional DTD, except that it includes the <frameset> and
<frame> elements
– Allows you to split the browser window into two or more frames
• Strict DTD:
– Eliminates the elements that were deprecated in the transitional DTD and
frameset DTD
– The <!DOCTYPE> declaration for the strict DTD is as follows:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
– Always try to use the strict DTD

Writing Well-Formed Documents

• Include a <!DOCTYPE> declaration and the <html>, <head>, and <body> elements
• All XHTML documents must use <html> as the root element
• XHTML is case sensitive
• All XHTML elements must have a closing tag
 • Attribute values must appear within quotation marks
• Empty elements must be closed
• XHTML elements must be properly nested
• Nesting refers to how elements are placed inside other elements

Learning Activities/ Exercises

Define the Following.
1. HTML
2. Web Server
3. ISP
Explain the Following:
1. What is the difference between HTTP and HTTPS?
2. Explain the 3 DTDs
Teacher Intervention

 Students with Internet connection (with Personal Computers at home) may browse,
navigate and register in Edmodo https://new.edmodo.com/ which is an Online
Classroom prepared by your Instructor, you may register and join the class once you
have entered the Class key provided by your Instructor.
 Students who uses Data Connection with the use of Mobile (Android) Device may
Download and Install Edmodo to their phones through Google Play Store. Again, you
may register and join the class once you have entered the Class key provided by your
Instructor.
 Students who does not have Internet Connection may provide their Mobile Numbers for
specific instructions to be given by the Teacher

Practice Task/ Assessment

Quiz 1: Fill in the Blanks: Provide the correct answer on the space provided before the number.

1. _________is used for transferring files across the Internet.

2. ___________ is a set of characters or symbols that define a document’s logical structure.
3. HTML documents are text documents that contain formatting instructions called _____.
4. ______ refers to a computer system that is being accessed by a remote computer.
5.TCP/IP stand for __________.
6. Web page is identified by a unique address called the _________.
7. _______ DTD that Allows you to use deprecated style elements in your XHTML documents
8. _______ is a unique address used for identifying a computer such as a Web server on the
Internet.
9. Tags are enclosed in ______ and this consist of an opening and a closing.
10. HTML stands for _________.

Assignment
What are some interesting discoveries and facts that I have gathered when I was studying the lesson?
References/ Reading Materials
Web Applications Programming Language (Revised Edition) by Marmelo V. Abante Microsoft SQL
Server Programming by Rebecca M. Riordan
http://colleges.su.edu.sa/Dawadmi/FOS/Depts/PublishingImages/pages/CSlevel5/204%20%D8%AA%D9
%82%D9%86.pdf https://www.granneman.com/teaching/websteruniversity/web-programming-computer-
science/intro-web- programming https://www.w3schools.com/

http://www.htmldog.com/
http://www.w3schools.com/html/DEFAULT.asp