Page 1 of 14

Lesson 2 – Introduction to Web Development (Part 2)

Objectives:
1. Describe the working of Internet and how services provided on it can be accessed.
2. Differentiate between static and dynamic web pages.
3. Explain web development process and activities carried out during each phase.
4. Explain various technologies used to develop a website.

Terminologies:
IP: Internet Protocol (IP) is a communication protocol that provides rules for
exchanging data among computers.
TCP: Transmission Control Protocol (TCP) maintains data flow during end to end
communication.
ISP: Internet Service Provider is a company that provides Internet services.
WWW: World Wide Web is a collection of resources over the Internet.
Domain Name: Domain name is used to identify a website on the Internet.

Content:
What is the internet?

Source: Google.com

Internet, sometimes called simply "the Net," is collections of standalone computers (and computer networks in
companies and organizations) that are linked together, using communication networks. It connects millions of
computers around the world to exchange data. The connections between the computers are made using
fiber-optic cables, copper cables, wireless radio connections and satellite links. Internet can handle
different kinds of information enabling people to do different tasks such as sending/receiving emails, searching
web, online chatting and many more. All the information is handled on the Internet exactly in the same way
because of the flexible design of the Internet.
 Page 2 of 14

IP Addresses

As we mentioned that Internet is global network of computers,

the question then arises how each computer is uniquely
identified which is required for transmitting data from one
computer (sources) to another one (destination). The answer is
simple as every computer that connects to the Internet is
given a unique address, called IP address (Internet Protocol
address, to be more specific). The IP (IPv4) standards specify
that each host is assigned a unique 32-bit IP address. However,
because of the growth of Internet and the predicted depletion
of available addresses, a new version of IP (IPv6), was
developed that uses 128 bits address.

IP addresses are usually written and displayed in human-

readable notations, called the dotted- decimal notation such
as 172.16.254.1. (IPv4), and 2001:db8:0:1234:0:567:8:1 (IPv6).
Figure shows computers with their IP addresses connected to
the Internet.

If you are connected to the Internet through an Internet

Service Provider (ISP), ISP assigns a temporary IP address to
your computer or device over a period of a session. In case of
connection through Local Area Network (LAN), a temporary or
permanent IP address obtained from DHCP (Dynamic Host
Configuration Protocol) server is assigned to your computer.

Here’s how to find your local IP address in Command Prompt:

1. Right-click the Windows Start menu and select Run.

2. Type cmd in the search field and click OK.
3. In Command Prompt, type ipconfig and hit Enter. Scroll to IPv4 Address to see your local IP address.

Source: link 2 in reference

 Page 3 of 14

TCP/IP Protocol Suit

TCP/IP is the protocol of the Internet that helps to provide data transfer mechanism based on packetizing,
addressing, transmitting, routing and receiving. TCP/IP protocol is a layered protocol as shown in the figure.
Application Application
TCP TCP
IP IP
Hardware Hardware
Internet
TCP/IP protocol layers

Each layer of the TCP/IP has a particular function to perform as described in the table below.

TCP/IP protocol layers and their functions

Protocol Layer Description

Application Protocols Layer This layer is concerned with providing network services
to applications. Protocols specific to the application
layer are http, FTP, etc.
Transmission Control This layer is concerned with the transmission of the
Protocol Layer data. Transmission Control Protocol (TCP) and User
Datagram Protocol (UDP) are the two major
protocols for this layer.
Internet Protocol Layer This layer consists of packet construct which is to be
transmitted. This serves the form of Internet Protocol
(IP) which carries a packet that includes a source IP
address, destination IP address and the actual data to
be delivered. IP directs packets to a specific
computer using an IP address.
Hardware Layer This is the lowest level of the TCP/IP protocol stack.
This hardware layer performs the function of
encapsulation of IP packets into frames for
transmission, mapping IP addresses to physical
hardware addresses (MAC Addresses) and the use of
protocols for the physical transmission of data.

ISP and its Working

Internet Service Provider (ISP) is a company that provides Internet access to individuals and other companies. ISP
also provides many other services such as website building and hosting. ISP is sometimes used as an abbreviation
for Independent Service Provider to distinguish a service provider that is an independent, separate company from
a telephone company. The larger ISPs have their own high-speed lines to avoid complete dependence on the
telecommunication providers and provide better service to their customers.
 Page 4 of 14

Source: Google.com

World Wide Web (WWW)

The Web or World Wide Web (WWW) is a huge collection of electronic documents stored on many computers
called servers around the world. The documents are formatted in a markup language called HTML that links
documents so that you can jump from one document to another by simply clicking on the links or hot spots.

A computer, a modem (or some other connection device), a phone line, a software called a “browser” and an
account with ISP are needed to connect with World Wide Web (WWW). A browser interprets HTML code to
display text, images, sound and runs animation.

The linked documents are available at different Internet sites. The World-Wide Web also provides access to
many other tools which are widely used as the major means of accessing Internet resources.

Some important features of WWW are listed below:

1. WWW lets you retrieve information in a quick and easy way.

2. WWW is built on the technology called hypertext. Hypertext link are used to link web pages together.
3. WWW shares information, resources and services with widest possible community of users. The user
can access the WWW on Apple, UNIX, Macintosh, Windows and other operating systems.

Website and Domain Names

A website is a collection of related web pages (files) that has a beginning file called a home page that can be
accessed using a browser. A company or an individual tells you how to get to their website by giving you the
address of their home page. From the home page, you can access other pages on their site. For example, the
website for Mich-skills has the home page address http://www.mich-skills.com from where you can access
different pages related to the university.

Any business, government, or person can create a website on the Internet. Today, the Internet consists of
millions of websites created by different people and organizations.

Domain Names

A domain name is a name used to identify a website on the Internet. Websites are associated with IP addresses.
Domain name is the human readable version of the IP address. Domain names are used in URLs to identify
specific web pages. For example, in the URL http://www.microsoft.com, the domain name is microsoft.com.
 Page 5 of 14

Web Hosting

Source: Google.com

Web hosting service helps to publish or upload a website so that other people may see it. Web hosting
service stores your web pages on powerful computers (Web Servers). When someone types your web
address (such as www.aiou.edu.pk) in the browser, the browser connects to the web server holding the
web pages to retrieve the requested web page.

Types of Web Hosting

With advancement in technology, different types of web hosting services have appeared to meet the
needs of websites and customers. Some of the common web hosting are:

1. Shared Web Hosting

2. Dedicated Hosting
3. Cloud Hosting
4. Website Builder

Website Development Process:

Website development process consists of various steps. It involves from gathering information to the
creation of websites and finally to the maintenance to keep a website up to date and current.

A typical web development process has the following steps or phases.

1. Information gathering
2. Planning
3. Design
4. Development
5. Testing and delivery
6. Maintenance

We briefly discuss the above-mentioned phases.

 Page 6 of 14

Phase 1: Information Gathering

Source: Google.com

The first step in the development of a website is to gather information. During this phase, we need to
understand the following:

 Purpose: What is the purpose of the site? For example, the purpose of a website may be to
provide information, promote a business or sell a product?
 Goals: What do we want to accomplish by the website? Two of the more common goals are
either to promote business or share information.
 Target Audience: Determine a group of people who are likely to visit and use the website.
The interest of the target audience helps us to determine the best design for the website.
 Content: Determine what kind of information will the target audience be looking for on the
site?

Phase 2: Planning

Source: Google.com

After information gathering phase, it is time to put a plan for the website as a site map. A site map
consists of all main topical as well as sub topical areas of the site. This helps to determine what content
will be on the site and how they will be organized. During this phase, we also decide which technology is
to be used for the development of this specific website.

Phase 3: Design

Source: Google.com
 Page 7 of 14

After the planning phase, it is time to determine the look and feel of the website to presents the content
and services to the target audiences as determined in the information gathering phase. As a part of the
design phase, it is important to develop basic elements of website such as the company logo. A
prototype for the website may also be developed to see what the final design will look like.

Phase 4: Development

Source: Google.com

Development stage is the point where a web designer takes all of the individual graphic element from
the prototype and develops the actual functional website. This is typically done by first developing the
home page. The home page serves as a template for the content pages of a website and it contains the
main navigational structure of the website. Once the homepage is created, the contents can be
distributed to a number of web pages as specified in the site map. Other elements such as contact form
and shopping carts are also implemented and made functional.

Phase 5: Testing and Delivery

Source: Google.com

During this phase, the website is tested to ensure that it confirms to the design and all the links and
functionality provided by the website work as expected without error. We test the website for the
functionality of the forms and scripts as well as compatibility issues. As a part of testing, we validate the
code to ensure that the site meets the current web development standards. Once tested, the website is
ready to go on-line.

Phase 6: Maintenance

Once a website goes online, a number of errors and performance issues may be reported to the
development team. During the maintenance phase, we resolve not only the reported issues but also
improve the website by possibly, adding, updating contents and services.
 Page 8 of 14

Static vs. Dynamic Web Pages

Source: Google.com

A static web page is a page whose content are fixed and do not change unless changed by the
developer himself. With static websites, requests for pages are handled by a web server delivering the
content of these HTML files, "as is". Static websites are the cheapest to develop and host, and many
smaller companies use static website to get a web presence.

On the other hand, the content of a dynamic web page is not fixed but they are generated
dynamically on the fly when requested by user. That is, the content of a dynamic page may be different
from different user depending upon his request. For each request, the web page is constructed from
information stored in databases and programming logic.

Web Development Technologies

There are a number of technologies available for developing a website. A web developer should
have the knowledge of the following basic technologies to develop a fully functional website.

1. HTML
2. CSS
3. JavaScript
4. Databases

A brief description on the above technologies is given below.

HTML

HTML is a Hyper Text Markup Language used to

develop a web page. It provides a set of tags that are
used to structure the content of web pages and create
links with other pages.

Source: Google.com
 Page 9 of 14

CSS

Cascading style sheets (CSS) is a language that is used

to define styles for a web page or web pages. CSS
describes how elements of a web page are to be
displayed on screen. CSS handles the look and feel of
a web page. Using CSS, we can control the color of the
text, the style of fonts, the spacing between
paragraphs, columns sized and layout, background
images or colors, layout designs, and so on.

Source: Google.com

JavaScript

JavaScript is a light weight programming language

which is commonly used in developing dynamic web
pages.

Source: Google.com

Databases

A database is a collection of logical related data that

can be easily accessed, managed, and updated. A
database management system (DBMS) is a software for
creating and managing databases

Source: Google.com

Client-Side vs Server-Side Scripting

Client-Side Scripting

A script is a set of instructions written in some programming language. Client-side scripting refers to the
computer programs that are executed on the client-side, by the web browser. The source code is
 Page 10 of 14

transferred from the web server to the user’s computer over Internet that runs in the browser.
Server-Side Scripting

A server-side script refers to a computer program that runs on the server before the data is passed to
the user's browser. A server-side script/code never reaches the user, it is executed on the server and
only the output is sent to the web browser.

Source: Google.com
Common Gateway interface

The web is a client-server system. A web browser residing on your computer acts as a client which can
request web pages from different web servers. This can be shown as a diagram above.

In order to deliver dynamic content, we need to extend the abilities of the web server so that it can do
more than merely sending static web pages in response to the client requests. The common gateway
interface (CGI) provides a mechanism to do this. The server is normally asked for a file that has a .htm or
.html extension for static web pages. The extension would be different for dynamic web pages, for
example .cgi or .php. If a request comes in with one of these extensions, the web server passes the
request to the CGI which interprets it correctly and executes the server-side script to generate a web
page that is sent to the client’s browser.

Hypertext, Hypermedia Tools and IDEs

The hypertext pages are inter-connected by hyperlinks typically activated when a user clicks on a link.
Hypertext is not only used to describe text but sometimes used to describe table, images and other
presentational content forms with hyperlinks. It enables user to share information over the Internet
easily.

Hypermedia Tools

Hypermedia can be developed by different tools. Multimedia development software such as Adobe
Flash, Adobe Director etc. can be used to develop multimedia content such as images and video clips.
Some database software’s such as Visual FoxPro and FileMaker Developer may be used to develop
stand-alone hypermedia applications, with emphasis on educational and business content management.
 Page 11 of 14

Documentation software such as the Microsoft Office Suite and Office allow for hypertext to other
content within the same file, other external files, and URL links to files on external file servers. Any text
editor may be used to build HTML files, accessible by any web browser. CD/DVD authoring tools such as
DVD Studio Pro may be used to hyperlink the content of DVDs for DVD players or web links when the
disc is played on a personal computer connected to the Internet. There are some HTML editors which
are based on WYSIWYG (What You See Is What You Get). These editors provide rich text editing tools for
developing web pages. Some of the important tools include Dreamweaver, Notepad ++, Sublime Text 3
etc.

Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=Sfzo4xm5eX8
https://www.youtube.com/watch?v=DHGhFJZLKMs

Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.avg.com/en/signal/find-ip-address#:~:text=Right%2Dclick%20the%20Windows
%20Start,see%20your%20local%20IP%20address.
eBook:
 Introduction to Web Development by: Dr. Amjad Mahmood, Dr. Moiz Uddin Ahmed, Mr. Hanaan
Sadeed Ahmad
 A Complete Web Development Guide by northell.design
 Page 12 of 14

Assessment 2-1:
Written Test

Select the correct answer.

1. An Internet is -----
A. a single network
B. a vast collection of different networks
C. interconnection of local area networks
D. none of the mentioned

2. To join the Internet, the computer has to be connected to a/an

A. Internet architecture board
B. Internet society
C. Internet service provider
D. none of the mentioned

3. Which one of the following protocols is not used in Internet?

A. HTTP
B. DHCP
C. DNS
D. none of the mentioned

4. IPv6 address has a size of

A. 32 bits
B. 64 bits
C. 128 bits
D. 265 bits

5. Which protocol assigns IP address to the client connected in the Internet?

A. DHCP
B. IP
C. RPC
D. none of the mentioned

6. Computer that requests the resources or data from another computer is called as
computer.
A. Client
B. Server

7. Software which allows user to view the web page is called as .

A. Interpreter
B. Internet Browser
 Page 13 of 14

C. Website
D. Operating System

8. When a user opens a website, the first page that is displayed is called .
A. Backend Page
B. Dead End
C. Home Page
D. None of these

9. URL means .
A. Term used to get online program
B. Term used to describe Website
C. None of these
D. Address of the resource on the web

10. Computer which stores the different web pages is called as .

A. Web Server
B. Web Browser
C. Service Provider
D. None of these

11. WWW, e-mail and FTP are--------layer protocols.

A. Application
B. IP
C. Transmission
D. Physical

12. A company that provides Internet access to individuals and other companies is called
A. Web server
B. Telephone
C. Internet Service Provider
D. None of the above

13. In which of the phase of the web development process, we determine the purpose
of the site?
A. Planning
B. Information gathering
C. Design
D. Development

14. Cascading Style Sheets (CSS) is a language that is used to define styles for a web
page or web pages.
A. True
B. False
 Page 14 of 14

Activity:

With the computer unit connected to the internet, do the following procedure in finding the IP address
of the unit.

1. Hover your mouse on the Task Bar.

2. Click on the Search Box and type “cmd”.
3. Run “Command Prompt” as administrator.
4. Type “ipconfig” and hit “Enter”.
5. Look for “IPv4 Address” and note down the IP address.
6. Shut down the computer properly.
7. Turn on back the computer system.
8. Repeat procedure from 1 to 5.

Question:

Are the IP addresses the same or not? Explain your answer.

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________