Diploma in Coding and Technology
Introduction to
the web
Contents
3 Internet and the world wide web
4 Networking
6 Web server basics
8 Web languages
12 References
CODING & TECHNOLOGY
Lesson outcomes
In this lesson, we briefly discuss the architecture of the web. This allows you to solidify your
understanding of the client/server architecture before we begin scripting. First, we delve into better
understand the internet and the world wide web, then we move onto networking basics, followed
by a very important topic, web server basics. Lastly, we wrap this session up with languages of the
web, which includes HTML and CSS.
Internet and the world wide web
Overview
The internet consists of multiple computers over a network that communicate with one another using
a specific set of rules. The internet originated from ARPANET.
(Vidal, 1999)
New uses for the internet
As the internet evolved, the potential for various other activities have also come about in earlier days:
• E-mailing
• Browsing
• Newsgroups
• Ecommerce
• Blogs
• Cloud computing
The internet of things (IoT)
A subset of the Internet that includes computers and sensors connected to each other for
communication and automatic transaction processing.
• Autonomous devices connected to each other.
• Includes the use of sensors and scanners.
• Often located in houses or offices.
• Requires little to no human intervention.
Characteristics of IoT
• Business-to-consumer (B2C)
• Business-to-business (B2B)
• Consumer-to-consumer (C2C)
CODING & TECHNOLOGY
• Government-to-consumer (G2C)
Networking
Packet-switched networks
In a packet switched network, files are broken down into smaller pieces called packets, that are
labelled electronically with their origins, sequences, and destination addresses.
Common network types
Network type Description
Local area network • Devices are usually located close together.
(LAN) • Ideal for office setup.
• Restricted by geographical location.
Wide area network • Connects multiple LANs.
(WAN) • Extends beyond the boundaries of an office.
• Ideal for enterprise scale network.
• Extends to larger geographical areas, including the globe.
Public and private networks
Network Description
Public • A computer network available to the public.
• Often less secure than private networks
Private • A connection between two companies which connects networks
together.
• Can be quite expensive.
• More secure than a public network.
Virtual private networks (VPNs)
A connection that uses public networks and their protocols to send data in a way that protects the data much
like that of a private network.
CODING & TECHNOLOGY
Advantages of using a VPN
• Uses software to encrypt data transmission.
• IP Tunneling creates private pathway over public Internet.
• Less expensive than private network.
• Hides internet activity from entities such as ISP’s.
Intranets and extranets
As networking technologies became less expensive and easier to deploy, organisations started
building more and more interconnected networks.
Intranet/Extranet Description
Intranet • Does not extend beyond the organization that created it.
• Forums within organisations to foster new ideas.
Extranet • Much like intranet, but also extended to entities outside the
boundaries of an organisation.
• Such as business partners, customers, and suppliers.
Web server basics
Web servers
A web server is a computer that hosts web content or files that make up the structure of websites.
Responds to client requests by:
• Transferring files and scripts to the web client (browser).
• Generating a response by invoking scripts and querying a database
Two-tier client/server architecture
CODING & TECHNOLOGY
(Source: Schneider, 2016)
The message that a Web client sends to request a file or files from a Web server is called a request
message. A typical request message from a client to a server consists of three major parts:
• Request line – filename and a description of the path to that file on the server
• Optional request headers - information about the types of files that the client will accept in
response to this request
• Optional entity body - used to pass bulk information to the server.
CODING & TECHNOLOGY
Two-tier client/server architecture
(Source: Schneider, 2016)
A three-tier architecture extends the two-tier architecture to allow additional processing (for example,
collecting the information from a database needed to generate a dynamic Web page) to occur before
the Web server responds to the Web client’s request.
The third tier often includes databases and related software applications that supply information to the
Web server. The Web server can then use the output of these software applications when responding to
client requests, instead of just delivering a Web page.
Client-side scripting
• Script is run by the client software (browser).
• Code instructs the client to request the script from server.
• Processing occurs on local machine (the user’s device).
• Scripting languages include HTML, CSS, JavaScript.
Server-side scripting
• Script is run by the server software (backend).
• Server responds to the client’s request.
• Server response is shaped based on client request.
• Ideal for hosting a database.
• Scripting languages include PHP, NodeJS, Python.
Platform neutrality
CODING & TECHNOLOGY
(Source: Schneider, 2016)
The ability of a network to connect devices that use different operating systems is called platform
neutrality. Web applications should remain responsive across various devices regardless of the
platform.
Web languages
Key technologies of the web
• Hypertext
• Styling
• Graphical user interface (GUI)
Hypertext
Described as a page linking system in which text on one-page links to text on another page.
• Hypertext Markup Language (HTML)
• Includes a set of tags which describe the relationships among text elements
• Tags provide formatting instructions
• Most tags have an opening and closing tag <> </>
CODING & TECHNOLOGY
HTML
Below is an example of a HTML script being interpreted by the client.
CODING & TECHNOLOGY
Styling
Style sheets are sets of instructions that give web developers more control over the format of
displayed pages.
• The most commonly used style sheet is cascading style sheet (CSS)
• Can be included in HTML document, but is not considered best practice
• Single style sheet allows formatting to applied to across multiple web pages
• Single style sheet allows formatting to applied to across multiple web pages
CSS
Below is an example of a CSS script being interpreted by the client.
Graphical user
interface (GUI)
Using a combination of HTML and
CSS developers can easily design
beautiful and appealing graphical
user interfaces such as the one
below. Graphical user interfaces (GUI) is a way of presenting program control functions output to
users and accepting input.
CODING & TECHNOLOGY
• Allows users to interface with system.
• Strong focus on UI/UX.
• Determines user acceptance.
• Uses pictures, icons, and other graphical elements instead of plain text.
CODING & TECHNOLOGY
References
Schneider, G. (2016). Electronic Commerce. Cengage Learning.
https://books.google.co.za/books?id=Sl-QCgAAQBAJ
Vidal, J. J. (1999). Chapter 11 - Cyberspace Bionics. In J. P. Marsh, B. Gorayska, & J. L. Mey (Eds.),
Human Interfaces (Vol. 13, pp. 203–218). North-Holland.
https://doi.org/https://doi.org/10.1016/S0923-8433(99)80016-1
CODING & TECHNOLOGY
