Web Technology – Mid Syllabus Overview

Internet:
“Global network of interconnected computers and servers that communicate with each other
using standardized protocols.”

Key Features:

o Connect multiple devices for communication

o Information Sharing
o World Wide Web
o Online Services

Benefits:

o Global connectivity
o Access to information
o Improved Communication
o Economic Opportunity
o Education and learning

WWW:

“World Wide Web is a system of interlinked hypertext documents accessed via the internet.”

Key Features:

o Hypertext Transfer Protocol (HTTP)

o Hyper Text Markup Language (HTML)
o Uniform Resource Locations (URLs)
o Web Browsers (Google, Chrome, Opera, Firefox etc.)
o Web Servers

WWW Applications:

An application program stored on a remote server and delivered over the internet using
browser as an interface.

Any service offered over the internet is web application.

 Web browsing
 E-commerce
 Online education
 Online banking
 News and Media

How WWW works?

 1. User requests URL
2. Web browser send HTTP request
3. Web server process request
4. Server send HTML document as a response
5. Browser renders webpage

WWW Technologies:

The means by which computer communicate with each other using markup languages
and multimedia packages.

 HTML
 CSS
 JavaScript
 Responsive Web design
 Mobile – first Design

Q: Difference between WWW and Internet:

Key Aspects WWW Internet

Purpose Share Communication Enable Communication

Scope System of interlinked networks Global Network

Protocols HTTP/HTTPS TCP/IP
 Access Web browsers Various protocols (FTP, SSH
etc.)
Content Hypertext Documents, web Data, Voice, Video
pages
Connection Connecting People Connecting Devices

Protocols used in World Wide Web:

1- TCP/IP

“A suite of communication protocols used to interconnect network devices on the Internet”

1. Transmission Control Protocol (TCP)

 Ensures reliable data transfer between browser and server.
 Establishes connections between browser and server.
 Convert segment data into packets
 Provides error checking and corrections
 Protocol of transport layer (Layer 4) of OSI model.
2. IP (Internet Protocol)
 Routes data packets between networks
 Provides temporary local IP address on each device
 Fragments data packets if necessary
 Protocol of Network layer (Layer 3) of OSI model.

TCP/IP protocols include:


HTTP: Hypertext Transfer Protocol handles a communication between a web server and
a web browser.
 HTTPS: HTTP Secure handles secure communication between web server and web
browser.
 FTP: File Transfer Protocol handles transmission of files between computers.
 DNS: Domain Name System translate the Domain Names into IP addresses
 SMTP: Simple Mail Transfer Protocol used for email communications and is responsible
for transmission of emails between mail servers.
 UDP: User Datagram Protocols is a communication less protocol that offers faster but
less dependable data delivery and widely used in real-time applications such as video
streaming and online gaming.
2- HTTP/HTTPS
 A request-response protocol used for transferring data, including web pages over the
internet.
 Foundation of world wide web used to load web pages using hypertext links.
 Application Layer (Layer 7) protocol designed to transfer information between
networked devices
 Uses TCP/IP for transmission data

Key Features:
  Client-server architecture
 Request- response modal
 Stateless protocol
 Supports multiple request methods (GET, POST, PUT, DELETE)

Q: HTTP Request/response cycle:

Communication between client and server is done by http request and response cycle.

A client (usually browser) sends HTTP request to the web server that receives the request and
processes it. And then sends the http response to the requested URL.

URL: https://davisgitonga.dev/static/images/request-response-cycle/banner.png

HTTPS = hypertext transfer protocol secure

Davisgitonga = domain name of website

.dev = web hosting

Static/images/request-response-cycle/ = path/URI to requesting the image from the server

Banner.png = file or image name

Q: What is HTTP request?

An HTTP request is the way Internet communications platforms such as web browsers
ask for the information they need to load a website.

Q: What is HTTP request body?

The body of an HTTP request contains any information being submitted to the web
server, such as a username and password, or any other data entered into a form.

Q: What is HTTP request headers?

HTTP headers contain text information stored in key-value pairs, and they are included in
every HTTP request.
 These headers communicate core information, such as what browser the client is using and what
data is being requested.

Q: What is HTTP response?

An HTTP response is what web clients (often browsers) receive from an Internet server in
answer to an HTTP request.

Q: HTTP request methods:

1. GET: Retrieve data from the server

2. POST: Send data to the server
3. PUT: Update existing data on the server
4. DELETE: Delete data from the server
5. HEAD: Retrieve metadata from the server
6. PATCH: Partial update
7. OPTIONS: List supported methods
8. CONNECT: Establish tunnel

Q: HTTP response Status Code:

 Code in series of 1xx is used for informational response

 Code in series of 2xx is used for Success response
 Code in series of 3xx is used for Redirection response
 Code in series of 4xx is used for Client Error response
 Code in series of 5xx is used for Server Error response

Main Concepts for understanding:

Key Aspects Web Browser Web Service Web Hosting / Web Server
Virtual Hosting
Definition A software Software Service providing Software or
application for applications storage and hardware serving
accessing and providing specific accessibility for web content.
viewing web pages. functionality over websites.
the web.
Purpose Retrieves and API based Servers store and Hosts and serves
displays web interfaces for data serve website files websites, web
content from exchange. applications, and
servers. web services
Example Google, chrome, Google Maps, Wordpress.com Apache, Nginx, IIS
Firefox, opera, Twitter API, PayPal Google sites
safari GitHub pages
Functionality Client-side, Server-side, Storage and Serves web
accesses web provides specific accessibility for content, hosts
content functionality websites websites
 Relationships Web browser Web services Web hosting Web server hosts
request content integrate with web provides storage web services and
from web server applications and for web servers websites
websites
Types Windows Browser RESTful API Shared hosting, Apache HTTP
Linux Browsers SOAP Dedicated server.
Android Browser GraphQL hosting, Nginx
IOS Browser Microservices Virtual private Microsoft IIS
macOS Browser SOA (Service – Server (VPS), Glassfish
Oriented Cloud hosting Lighttpd
Architecture
Languages / HTML, CSS, XML format Bash, Shell, PHP, Java, .Net,
Format JavaScript JSON format PowerShell, Python
languages used Python

Q: What is Virtual Hosting?

 Type of web hosting

 Store for Web server
 A virtual space on a web server to store the data of website.
 Multiple domain names linked to one hosting on web server.

Definition:
“A method of hosting multiple domain names or websites on a single physical server or virtual
private server (VPS), sharing resources such as IP addresses, memory and processing power.”

Benefits:

 Cost-effective
 Scalability
 Flexibility
 Easy maintenance
 Environmentally friendly

How virtual Hosting works:

1. Single Physical server or Virtual Private Server
2. Multiple websites or domain hosted
3. Shared IP address or dedicated IP
4. Server Software manages requests from web browser
5. Resources allocated to each website (sends to desired website)

Key Features:

 Resource allocation
 Security isolation
 Scalability
  Flexibility
 Management tools to manage websites

Q: What is Web Service & API & Web API?

Note: Web Service is explained in the previous block (API-based interface for data exchange)

Key Aspects API (Application Programming Web API

Interface)
Definition A set of defined rules, protocols, An Api that uses Web Protocols
and tools for building software (HTTP/HTTPS) to interact with
application web services.
Purpose Enable interaction between Enable interaction between web
different software systems. applications and web services.
Types Operating System API (Windows, RESTful API
Linux), SOAP API
Framework API (React, Angular) GraphQL API
Web API (REST, SOAP)
Scope General Purpose Web Specific
Dependency Platform dependent Platform independent
Protocols Various Protocols HTTP, HTTPS

Q: Difference between XML and JSON

Key Aspects XML JSON

Abbreviation Extensible Markup Language JavaScript Object Notation
Definition Markup language used as a web Light weight data interchange
service for storing and format.
 exchanging data between
website and web server.
Structure Tree-structure Key-value pair
Uses  Data exchange between  Data exchange between
systems systems
 Web services (SOAP)  Web APIs (RESTful)
 Configure Files  Mobile Apps
 Document Markup  Web storage
Features  Self-descriptive  Easy to read and write
 Platform independent  Platform independent
 Language independent  Language independent
 Tree-like structure  Key-value pairs
Examples <person> {
<name>John Doe</name> "name": "John Doe",
<age>30</age> "age": 30,
<address> "address": {
<street>123 Main St</street> "street": "123 Main St",
<city>New York</city> "city": "New York",
<state>NY</state> "state": "NY"
</address> }
</person> }
Syntax XML uses tags JSON uses brackets
Parsing Slow to parse Fast to parse
Datatypes Don’t support arrays Support Arrays

Q: Hypermedia and multimedia

Key aspects Multimedia Hypermedia

Definition The integration of multiple Extension of hypertext used to
forms of media (images, text, interact with multimedia
audio, video, animation) contact.
Behavior It can be linear as well as non- It only supports non-linear
linear (allows both proper navigations or irregular
navigation or linking irregular navigation.
navigations)
Relation It combines with hypertext to It combines with both hypertext
form hypermedia. and multimedia to display an
information.
Content Focuses on integrated media Includes links and dynamic
forms. content
Purpose It mostly uses for entertainment It widely uses for information
or education sharing or education.