1

MC4023 WEB DESIGN

UNIT I INTRODUCTION TO WWW

Understanding the working of Internet-Web Application Architecture-Brief history of

Internet-Web Standards – W3C-Technologies involved in Web development – Protocols-
Basic Principles Involved in developing a website-Five Golden Rules of Web Designing

Understanding the working of Internet

A network is a group of connected computers that are able to send data to each other. A
computer network is much like a social circle, which is a group of people who all know
each other, regularly exchange information, and coordinate activities together.

The Internet is a vast, sprawling collection of networks that connect to each other. In fact,
the word "Internet" could be said to come from this concept: interconnected networks.

Since computers connect to each other within networks and these networks also all
connect with each other, one computer can talk to another computer in a faraway network
thanks to the Internet. This makes it possible to rapidly exchange information between
computers across the world.

Computers connect to each other and to the Internet via wires, cables, radio waves, and
other types of networking infrastructure. All data sent over the Internet is translated into
pulses of light or electricity, also called "bits," and then interpreted by the receiving
computer. The wires, cables, and radio waves conduct these bits at the speed of light. The
more bits that can pass over these wires and cables at once, the faster the Internet works.

Distributed networking :

There is no control center for the Internet. Instead, it is a distributed networking system,
meaning it is not dependent on any individual machine. Any computer or hardware that
can send and receive data in the correct fashion (e.g. using the correct networking
protocols) can be part of the Internet.

The Internet's distributed nature makes it resilient. Computers, servers, and other pieces
of networking hardware connect and disconnect from the Internet all the time without
 2

impacting how the Internet functions — unlike a computer, which may not function at all
if it is missing a component. This applies even at a large scale: if a server, an entire data
center, or an entire region of data centers goes down, the rest of the Internet can still
function (if more slowly).

How Does it Work?

Generally, two main components uphold the functionality of the Internet, they are:

 Packets
 Protocols

In networking, the data which is being transmitted through the internet is sent via small
segments which are later translated into bits and the packets get routed to their endpoint
(destination) through different networking devices i.e. routers or switches. Later, once the
packet arrives at the receiver’s end, that small chunks of data get reassembled in order to
utilize or check the data that he/she requested. That’s why they are used to push ease in
networking and large data can be easily sent by sending small units and this whole
process of sending/receiving small bits is known as Packet Switching.

Connecting two computers with the help of any communication method and to solve this,
protocols were introduced. It is a standardized method of performing certain tasks and
data formatting so that two or more devices can communicate with each other. However,
if both systems are connected over the same network i.e. Ethernet for receiving and
sending packets from network to network i.e. IP (Internet Protocol), and to ensure that
those packets are arriving successfully in the same order (TCP), and for formatting data
over websites and apps (HTTP). Besides this, there are several other protocols for testing,
routing, and encryption, and for streaming games/videos, rather than using TCP, we use
UDP (User Datagram Protocol).

From opening a web browser to visiting a website, it all happens with specific methods
in 5 easy steps.
 3

1. Firstly, you’ll be required to connect your system or PC with any router or modem
to establish a connection. This connection is the base of the connection.
2. When you open the browser and start typing something like “www.google.com”,
your system will push a query command to your ISP (Internet Service Provider) that
is connected with other servers that store and process data.
3. Now, the web browser will start indexing the URL that you’ve entered and will fetch
the details in numeric format (in their own language to identify the address
(unique) that you’re trying to reach.
4. Next is, now your browser will start sending the HTTP request where you’re trying
to reach and sends a copy of the website on the user’s system. Note: The server
will send data in the form of small packets (from the website to the browser)
5. Once all the data (of small packets) will be received at the user’s end (PC/Laptop),
the browser will start arranging all those small packets and later will form a
collective file (here, the browser will gather all the small packets and rearrange
them just like a puzzle) and then you’ll be able to see the contents of that website
 4

Modes of Connecting Through the Internet

DSL: This technology uses a Broadband connection which is in trend for the past few
years. ISP will connect our premises with the help of telephone wire despite the fact that
own any telephone.

Dial-Up: People used to connect their system with the help of a dial-up connection, and
it is one of the slowest types of Internet connection. This is used to enable internet
connectivity with the help of a telephone connection and the user must have multiple
connections then only they can use a Dial-up connection.

Cable TV Connection: It is being used to connect our system with the Internet, and for
that, ISP will connect it via cable TV wire. It also uses Broadband technology and really
don’t need to have a Cable connection for that. Cable is being considered as most
accessible as and faster than dial-up and DSL that we have for connection.

Satellite: It also uses broadband technology but without interacting with any cable
connection. Hence, it connects wirelessly with the help of a satellite and this enables its
availability anywhere in the world. Thus, being fancy and accessible it comes with a few
drawbacks:
a- There can be network disturbance if the weather is unstable because it connects via
satellite.
b- The connectivity is not stable and they are considered slower as compared to DSL or
cable connection.

3G/4G/5G: This is the new age technology in the entire world. It connects wirelessly via
different ISPs and is widely used in cellphones. But they aren’t being considered as stable
that DSL or cable and most importantly they come with a DATA LIMITATION cap for each
month.

Internet Connection Protocols

The protocols decide how the technology is going to work and in what governing ways
and what would be the quantity of data will be shared. They all are defined by protocols
and as per standard, both the parties (sender/receiver) have to follow the same rule in
order to communicate. However, these protocols are categorized into 3 major units:
 5

1. TCP/IP: It is a variety of internet protocols for communicating between a sender

and a receiver. TCP (Transmission Control Protocol) / IP (Internet Protocol) ensures
that all users who are connected to the internet have their own unique identity
known as IP Address. However, how data will flow into what segments (packets) is
being decided by TCP. IT divides the whole message into small packets and
reassembles them before it reaches the receiver.
2. FTP: It is used for communicating from one point to another (computer)
over LAN (Local Area Network) or WAN (Wide Area Network). File Transfer
Protocol or FTP acts like a host and establishing connections between computers
and transferring files between them are seamless whereas one connection is used
for data connection and the other for the control connection.
3. HTTP: The base of the Internet starts from HTTP (Hypertext Transfer Protocol) and
is being used to communicate all over (World Wide Web) WWW. The concept of
HTTP is to provide data over the Internet (image, video, text, etc.) and the moment
a user opens their web browser, they’re connecting to the internet and establishing
an HTTP connection. The foundation of HTTP began in the ’90s by Tim Berners-Lee
which runs on top of the TCP/IP network.

Pillars of the Internet

Switches: Switches help for connecting devices in a single network and use small
packet switching to send and receive data packets over the Internet. Besides this,
they have multiple ports by which a system can be connected. So, when a packet
arrives at any port, it starts cross-checking the specifications and forward the same
to its destination. It also supports broadcast and unicast communication.

Router: They operate at the layer 3 OSI (Open Systems Interconnection

Model) model that is created for sending, receiving, and forwarding small data
packets within the connected system over the same network. In this architecture,
once the router receives the data packets, it inspects the destined address, then
consults its routing and transfers the same packet to its desired location.
 6

How do Websites and Several Applications use the Internet?

The specific steps involved in this process are:

1. DNS query: When our browser started to load the webpage, it likely first
made a DNS query to find out the website's IP address.

2. TCP handshake: Browser opened a connection with that IP address.

3. TLS handshake: Browser also set up encryption between a web server and
our device so that attackers cannot read the data packets that travel
between those two endpoints.

4. HTTP request: Our browser requested the content that appears on this
webpage.

5. HTTP response: Server transmitted the content in the form of HTML, CSS, and
JavaScript code, broken up into a series of data packets. Once our device received
the packets and verified it had received all of them, our browser interpreted the
HTML, CSS, and JavaScript code contained in the packets to render.

Web Application Architecture

A web app architecture presents a layout with all the software components (such as
databases, applications and middleware) and how they interact with each other. It defines
how the data is delivered through HTTP and ensures that the client-side server and the
backend server can understand.

Components: Typically a web-based application architecture comprises 3 core

components:

1. Web Browser: The browser or the client-side component or the front-end

component is the key component that interacts with the user, receives the input
and manages the presentation logic while controlling user interactions with the
application. User inputs are validated as well, if required.
 7

2. Web Server: The web server also known as the backend component or the server-
side component handles the business logic and processes the user requests by
routing the requests to the right component and managing the entire application
operations. It can run and oversee requests from a wide variety of clients.
3. Database Server: The database server provides the required data for the
application. It handles data-related tasks. In a multi-tiered architecture, database
servers can manage business logic with the help of stored procedures.
 8

How Web Application Architecture Works

With web applications, we have the server vs. the client side. In essence, there are two
programs running concurrently:

The code which lives in the browser and responds to user input

The code which lives on the server and responds to HTTP requests

When writing an app, it is up to the web developer to decide what the code on the server
should do in relation to what the code on the browser should do. With server-side code,
languages include:

 Ruby on Rails
 PHP
 C#
 Java
 Python
 Javascript

In fact, any code that can respond to HTTP requests has the capability to run on a server.
Here are a few other attributes of server-side code:
 9

 Is never seen by the user (except within a rare malfunction)

 Stores data such as user profiles, tweets, pages, etc…
 Creates the page the user requested

With client-side code, languages used include:

 CSS
 Javascript
 HTML

These are then parsed by the user’s browser. Moreover, client-side code can be seen and
edited by the user. Plus, it has to communicate only through HTTP requests and cannot
read files off of a server directly. Furthermore, it reacts to user input.

Layers of Web App Architecture

Modern web applications follow a layered architecture that consists of presentation,

business, persistence, and database layers. Small applications have three layers, where, in
some cases, the business and persistence layers act as one layer, while complex
applications have five or six layers.
 10

1. Presentation layer, built with HTML, CSS, JavaScript, and its frameworks, enables
communication between the interface and browser to facilitate user interaction.
2. Business layer defines the business logic and rules. It processes browser requests,
executes the business logic associated with the requests, and then sends it to the
presentation layer.
3. Persistence layer is responsible for data persistence and is also known as Data
Access Layer. It’s closely connected to the business layer and has a database server
that retrieves data from corresponding servers.
4. Database layer, also known as Data Service Layer, holds all the data and ensures
data security by separating the business logic from the client-side.

Each of these layers works in isolation. That means each layer works independently.
Components of one layer are closed and deal with the associated layer’s logics. For
example, components residing in the presentation layer deal with presentation logic,
while the components in the business layer deal with business logic.

It also reduces the future burden while changes are required in the web application.
Hence, changes can be made in one layer without affecting the components of
other layers.

Web Application Components

Web app components are broadly divided into two parts–

1. User interface components are a part of the visual interface of a web

application and have no interaction with the architecture. They’re restricted
to a web page’s display and consist of activity logs, configuration settings,
dashboards, statistics, widgets, notifications, etc., to enhance the user
experience.
2. Structural web components consist of client and server components. Client
components exist in the user’s browser and interact with the functionality
of web applications. HTML, CSS, and JavaScript are commonly used for
building these components.

On the other side, server components are bifurcated into a web app server that handles
business logic and a database server that stores data. PHP, JAVA, Python, Node.js, .NET,
and Ruby on Rails are some frameworks used for creating server components.
 11

HISTORY OF INTERNET /Origins of the Internet

The history of the Internet has its origin in information theory and the efforts to build and
interconnect computer networks that arose from research and development in the United
States and involved international collaboration, particularly with researchers in the United
Kingdom and France.

Computer science was an emerging discipline in the late 1950s that began to consider
time-sharing between computer users, and later, the possibility of achieving this over wide
area networks. Independently, Paul Baran proposed a distributed network based on data
in message blocks in the early 1960s, and Donald Davies conceived of packet switching in
1965 at the National Physical Laboratory (NPL), proposing a national commercial data
network in the UK.

The Advanced Research Projects Agency (ARPA) of the U.S. Department of Defense
awarded contracts in 1969 for the development of the ARPANET project, directed by
Robert Taylor and managed by Lawrence Roberts. ARPANET adopted the packet
switching technology proposed by Davies and Baran, underpinned by mathematical work
in the early 1970s by Leonard Kleinrock at UCLA. The network was built by Bolt, Beranek,
and Newman.

Several early packet-switched networks emerged in the 1970s which researched and
provided data networking. ARPA projects, international working groups and commercial
initiatives led to the development of various standards and protocols for internetworking,
in which multiple separate networks could be joined into a network of networks. Bob
Kahn, at ARPA, and Vint Cerf, at Stanford University, published research in 1974 that
evolved into the Transmission Control Protocol (TCP) and Internet Protocol (IP), the two
protocols of the Internet protocol suite. The design included concepts from the French
CYCLADES project directed by Louis Pouzin.[5]

In the early 1980s, the National Science Foundation (NSF) funded national
supercomputing centers at several universities in the United States, and provided
interconnectivity in 1986 with the NSFNET project, thus creating network access to these
supercomputer sites for research and academic organizations in the United States.
International connections to NSFNET, the emergence of architecture such as the Domain
Name System, and the adoption of TCP/IP internationally on existing networks marked
the beginnings of the Internet.
 12

Commercial Internet service providers (ISPs) emerged in 1989 in the United States and
Australia. The ARPANET was decommissioned in 1990. Limited private connections to
parts of the Internet by officially commercial entities emerged in several American cities
by late 1989 and 1990 The optical backbone of the NSFNET was decommissioned in 1995,
removing the last restrictions on the use of the Internet to carry commercial traffic, as
traffic transitioned to optical networks managed by Sprint, MCI and AT&T.

Research at CERN in Switzerland by the British computer scientist Tim Berners-Lee in

1989–90 resulted in the World Wide Web, linking hypertext documents into an
information system, accessible from any node on the network. The dramatic expansion of
capacity of the Internet with the advent of wave division multiplexing (WDM) and the roll
out of fiber optic cables in the mid-1990s had a revolutionary impact on culture,
commerce, and technology. This made possible the rise of near-instant communication
by electronic mail, instant messaging, voice over Internet Protocol (VoIP) telephone calls,
video chat, and the World Wide Web with its discussion forums, blogs, social networking
services, and online shopping sites. Increasing amounts of data are transmitted at higher
and higher speeds over fiber-optic networks operating at 1 Gbit/s, 10 Gbit/s, and 800
Gbit/s by 2019.

The Internet's takeover of the global communication landscape was rapid in historical
terms: it only communicated 1% of the information flowing through two-way
telecommunications networks in the year 1993, 51% by 2000, and more than 97% of the
telecommunicated information by 2007. The Internet continues to grow, driven by ever
greater amounts of online information, commerce, entertainment, and social networking
services. However, the future of the global network may be shaped by regional
differences.

Web Standards

Web standards are the technologies we use to build web sites. These standards exist as
long technical documents called specifications, which detail exactly how the technology
should work

Web standards are created by standards bodies — institutions that invite groups of
people from different technology companies to come together and agree on how the
technologies should work in the best way to fulfill all of their use cases.

The W3C is the best known web standards body, but there are others such as the
WHATWG (who maintain the living standards for the HTML language), ECMA (who publish
the standard for ECMAScript, which JavaScript is based on), Khronos (who publish
technologies for 3D graphics, such as WebGL), and others.
 13

Web standards consist of the following:

Recommendations published by the World Wide Web Consortium (W3C) such as

HTML/XHTML, Cascading Style Sheets (CSS), image formats such as Portable Network
Graphics (PNG) and Scalable Vector Graphics (SVG), as well as accessibility technologies
like WAI-ARIA

Standards and "Living standards" published by the Web Hypertext Application

Technology Working Group (WHATWG), such as the HTML Living Standard, DOM
Standard, Encoding Standard and URL Standard,

Standards published by Ecma International (formerly ECMA) such as JavaScript (also

known as ECMAScript) and JavaScript Object Notation (JSON)

Standards published by the International Organization for Standardization (ISO) such as

JPEG

More broadly, the following technologies may be referred to as "web standards" as well:

 Request for Comments (RFC) documents published by the Internet Engineering

Task Force (IETF)
 The Unicode Standard and various Unicode Technical Reports (UTRs) published
by the Unicode Consortium
 Name and number registries maintained by the Internet Assigned Numbers
Authority (IANA)

Web standards are evolving specifications of web technologies. Web standards are
developed by standards organizations—groups of interested and often competing parties
chartered with the task of standardization—not technologies developed and declared to
be a standard by a single individual or company. It is crucial to distinguish those
specifications that are under development from the ones that already reached the final
development status (in case of W3C specifications, the highest maturity level).
 14

World Wide Web Consortium (W3C)

 The World Wide Web Consortium (W3C), founded in 1994 by World Wide Web
(WWW) inventor Tim Berners-Lee, set out the list of international standards for
web technologies.
 These standards help to maintain a consistent level of technical quality and
compatibility over an extremely diverse platform and have the added benefit of
simplifying the job of the web developer—ensuring they have a finite list of skills
they need to learn.
 The W3C standards describe the best practices of web development. These range
from recommended programming languages such as HTML and CSS, to the
generally accepted principles of web architecture and services.
 Technologies that are listed as standards are, as far as the W3C is concerned, the
most appropriate solutions currently available for mass use.
 The W3C standards are not formally enforced, there is no legal penalty for ignoring
their advice. In fact, there are instances when deviations from the standards are
acceptable or even necessary in pursuit of a specific use case. However, generally
speaking it is good practice to follow the guidelines.

How do web technologies become W3C standards?

The W3C first define the technology in terms of its use and usefulness. Then through a
thorough vetting process that considers a number of overlapping technologies, one is
designated the standard. The process promotes consensus, fairness, public accountability,
and quality, in the hopes that the ‘best’ technology is chosen.

Why are the W3C standards important?

The standards set out but the W3C are invaluable because they ensure a fair and
accessible web. Regardless of who you are, or where you are, if you create a web
application using the standards, you know that it will work with all others that are W3C
compliant, and you know that everyone can access it.

Furthermore, they act as quality filters for both the developers and end-users. Developers
can have confidence in the tools they are using, knowing they have been vetted by
experts. Similarly, users will interact with applications built only with the best tools, so are
more likely to have a positive and consistent experience.
 15

Technologies involved in Web development

Web development technologies refer to the multitude of programming languages and

tools that are used to produce dynamic and fully-featured websites and applications.

Front-end (client-side) technologies.

Front-end technologies are for the “client side” of your website or application. They’re
used to develop the interactive components of your website, and produce the elements
that users see and interact with. This includes text colours and styles, images, buttons,
and navigation menus.

Back-end (server-side) technologies.

Back-end technologies are for the “server side” of your website or application. They’re
for developing the technical foundation. They store and arrange data and make sure
everything on the front-end works. For example, when a user provides login credentials
to a social media application, back-end technologies are used to check if those
credentials are accurate. Once the credentials are verified, the server will send back the
profile name, picture, and other associated information.

Back-end technologies are also used to streamline core business processes. In cases
where you have lots of data that needs to be processed, you could run a script in the
back-end to generate a meaningful report on the front-end. You can also send
automatic emails to groups of users. Emails can be triggered by certain dates, such as
the expiration of a user’s free website trial.

1. HTML

HTML stands for Hyper Text Markup Language. It’s one of the fundamental technologies
required for web development. It provides the base structure for a web page. HTML
code ensures that all the content on a website is properly formatted. This is so your
Internet browser can display the content as intended. Without HTML, a browser couldn’t
display text or load images and other elements.

HTML5, the most current version of HTML, specifies a large number of Application
Programming Interfaces (API integration services) that can be used with JavaScript for a
more interactive and dynamic website:
 16

Canvas: Canvas is an HTML5 element used to draw images and shapes and manipulate
them. It can also be used for more complex cases such as game graphics and
animations.

Web Storage: Web Storage is used to store information right in the browser. Some
examples of this would be storing user login information and saving user preferences
for a website.

Service workers: Service workers enable a script that keeps running in the background
when a web page is opened and is mainly used in websites with offline capabilities. It
makes pages available offline and allows for the use of web push notifications. It can
send these notifications even when your browser isn’t open.

WebSockets: WebSockets allows for persistent two-way connection between the user
and the server. The most common use cases include chats and notifications in web apps.

2. CSS

Cascading Style Sheets, abbreviated as CSS, define the style and aesthetics of a web
page. While HTML is used to structure a web page, CSS specifies the appearance of that
structure. This includes page layouts, colours, fonts and element positioning. If HTML is
the bones of the web page, CSS is the skin. It makes the Internet, and your website, look
good.

3. Programming languages

Programming languages are ways to communicate with computers and tell them what
to do. They provide a vocabulary and set of grammatical rules to instruct a computer to
perform specific functions. Few examples of different languages:

JavaScript

JavaScript is the most used language by startups for a few reasons. It can be used as
both a front-end and back-end programming language. Compared to other languages,
JavaScript is comparatively easy-to-learn (although all languages come with some
difficulties), and it’s used everywhere in custom web application development. It’s also
constantly being updated and expanded with new features.

All the following are back-end languages that make a website or application work:
 17

PHP

PHP is the most common language in web development. WordPress, a content

management system (CMS) that powers 34% of the Internet, is built on PHP. Finding a
good developer can be difficult regardless of language, but choosing a popular one like
PHP will give you a larger pool of developers to choose from and work with. PHP also
comes with extensive online documentation and tutorials for troubleshooting and
support.

Python

Python is another popular programming language. It’s relatively simple and uses a
unique syntax that focuses on readability. Python is good for artificial intelligence (AI)
applications and projects, statistics, data science work, and machine learning. It can also
be used to create web applications.

Java

Java is a language that’s popular in enterprise companies. It can be run on multiple

platforms, has extensive documentation, and is supported by Oracle (a large and
respected software company) in case you run into trouble. It can also be used to write
Android applications.

Rust

Rust is a newer language that focuses on safety and especially safe concurrency.
Concurrency in software engineering means the collection of techniques that enable a
computer program to perform several different tasks simultaneously. Safe concurrency
gives you the efficiency needed to execute multiple tasks while keeping your code safe
and secure. Rust is high performing and has gained market traction even as a newer
language.

4. Web development frameworks

Web development frameworks are tools and libraries that developers use to make
developing in a particular language easier and more efficient. They provide interfaces to
access commonly-used functionalities as well as abstractions that make complicated
things easier to understand and handle.

Essentially, they make the development process more efficient because developers have
a pool of code resources to draw from when developing. There’s no need to develop
 18

software functions from scratch when frameworks give you all the necessary tools to
build a website or application. Because frameworks give you a headstart on your
development, they’re more cost effective than developing entirely new code. They also
lower your development risk since they’re tried and true compared to writing brand
new, untested code.

One example of a front-end framework:

Angular

Angular is a front-end framework maintained by Google. Compared to other front-end

frameworks, it’s the most complete solution as it has the most bundled functionalities.

Because of its robustness and deep functionality, it’s commonly used by large
corporations and companies that need a powerful front-end solution. As with most
pieces of complex software, it has a steep learning curve.

One thing to take note of is that there are multiple versions of Angular, and this can
present some difficulties. If you have an earlier version of Angular but want to migrate
to a newer version for added functions and features, you would require an extensive
code rewrite because of the difference in version.

An example of a back-end framework:

Node.js

Node.js is a runtime that allows you to write server side code using JavaScript. Because
of JavaScript’s popularity, Node.js is widely used and there are lots of well-versed
developers working with Node.js. It’s often used for real-time web applications. Node.js
makes developing simple applications and prototypes fast and efficient. However, it’s
not ideal for CPU-intensive tasks.

5. Libraries

Libraries are collections of files, programs, routines, scripts or functions that can be
integrated when writing code. Libraries work by grouping snippets of code together to
enable functionality so you don’t have to write the code yourself. Like frameworks, they
mitigate the risk of improper coding, make the development process more efficient, and
save you money.
 19

However, libraries are different than frameworks. A framework defines and structures
your build. Libraries are resources you can freely integrate into a build of your own
structure and design. They’re often used for more specific functions or features while a
framework is a more complete development tool. Let’s look at some different libraries

React.js

React.js, backed by Facebook, is one of the most popular front-end libraries. There’s a
somewhat long and complex learning curve associated with using React.js, but it’s
exceptional at creating great looking user interfaces (UI). It’s also always changing and
being updated for improvements and maintenance.

Vue.js

Vue.js is another library specifically aimed at UI creation. Compared to React.js, Vue.js is

simple and easy to use. It does have a smaller community to draw on for
troubleshooting and support, but that’s slightly offset by its speed and relatively easy
learning curve. Although not quite as widely used as some other libraries, it’s rising in
popularity due to its ease-of-use.

FacebookSDK

FacebookSDK is a library used to integrate apps with Facebook. With this library, you
can gather user data as it passes between your app and Facebook. The data can then be
used to optimize your application, advertising, and give you accurate metrics, like user
downloads.

6. Databases

Databases are where all your data is stored. However, they aren’t just haphazard digital
filing cabinets. They provide a consistent, organized structure for storing and retrieving
large amounts of data.

There are two main types of databases: SQL and NoSQL.

SQL databases use structured query language (SQL) to define and manipulate data. SQL
is the language with which a coder communicates with a database in order to manipulate
the data held within. Because SQL databases all use the same language you must use
 20

predefined schemas to determine the structure of your data. Your data must also follow
the same structure which can require some upfront preparation.

NoSQL databases don’t use structured query language (hence the name) so data can be
stored in many ways. This means that you can store data without first defining it’s
structure. Also, a NoSQL database enables all your stored data to have its own unique
structure without being defined by the database’s structure itself.

Some examples of popular databases include:

MySQL: An open-source SQL database. MySQL is used in WordPress websites.

MongoDB: An open source NoSQL database.

Oracle: Oracle Database is a proprietary database management system. It’s commonly

used for running online transaction processing, data warehousing and mixed database
workloads.

PROTOCOLS

 A protocol is a set of rules and guidelines for communicating data.

 Rules are defined for each step and process during communication between two
or more computers.
 Networks have to follow these rules to successfully transmit data.

1- HTTP:-The Hypertext Transfer Protocol(HTTP) is used by the browser to tell

the host computer what file it wants to retrieve.
2- IP:-The Internet Protocol (IP) is used for routing IP packets between login
computer and the server based on IP addresses.
3- TCP:-The Transmission Control Protocol(TCP) is used for making sure the IP
packets all arrive correctly and in order.

A web browser loads a webpage using various protocols:

1- It uses the Domain Name System (DNS) protocol to convert a domain name
into an IP address.
2- It uses the HyperText Transfer Protocol (HTTP) to request the webpage
contents from that IP address.
3- It may also use the Transport Layer Security (TLS) protocol to serve the
website over a secure, encrypted connection.
 21

4- The web browser uses these protocols on top of the Internet protocols, so
every HTTP request also uses TCP and IP.
5- The Web is just one of the applications built on top of the Internet protocols,
but it is by far the most popular.

Basic Principles Involved in developing a website

In order to create a highly usable and effective website , designer follow certain
principles which are given below.

1. Accessibility -when a visitor enters the website , he must be able to access each
bit of information in an easiest manner . This means that the text must be legible ,
the colors must not be harsh on the eyes and background must not be overpower
the content . customers are online 24/7 and such they expect to be able to interact
with businesses and organizations whenever and wherever they are online. so
accessibility is important.
2. Simplicity-company should keep their website simple and clean along with a user
friendly interface to help visitors search for information they needed easily.
3. communication and content -everyone who visit a website is looking for some
kind of information or content. and thus it is very important to communicate with
them clearly and in an engaging manner. the information must be compelling ,
easy to read and easy to processes . website are not just about colors , layout or
graphics but a major role is played by its contents. communication is not just about
providing written information but also about images , and multimedia such as
video and audio pieces.
4. Navigation -web designer should have a clear idea about managing navigation in
a website. Navigation is the wayfinding system used on websites where visitors
interact and find what they are looking for. Website navigation is key to retaining
visitors. If the website navigation is confusing visitors will give up and find what
they need elsewhere. Keeping navigation simple, intuitive and consistent on every
page is key.
5. Precedence- a website is meant for providing information to visitors . one of the
great tools to do this is precedence. it is about how much visual weight need to be
given to different parts of design.
6. Good structure -a web page must have a good structure and should be simple to
understand so that users would not have to think which to go. it must be self
explanatory .
7. Typography -text is the most common element of design, so a lot of attention to
be given on it. following things can consider in this respect:

 font choices
 22

 font size
 spacing
 line length

8. Spacing -there is a tendency to fill every available space on web page with
information . empty space seemed to be wasteful . in fact the opposite is true. spacing
make things clear . in web design there are 3 aspects of space that need to be
considered.

 line spacing
 padding
 white space

9. Usability -a web site not only looks attractive , but it should also be usable.
10. Visual hierarchy -in a website visual hierarchy can be referred to the sequence in
which eye moves from one topic , content or block to another. there are mainly 2
ways to create a visual hierarchy as given below

 size hierarchy
 content hierarchy

11. Consistency -it implies matching of everything in a website such as heading

sizes, font choices , coloring, button styles , spacing , design elements , illustration
styles and photo choices.
12. Regular testing -test early and test often or TETO is another web design principle
that all designers and website owners must consider. conducting usability test
every now and then provide important results and insights into many kinds of
problems and complications related to a website design. websites consistently
need upgrades and updates so as to maintain the visitors footsteps and customers
interest. solving errors during processes is least expensive rather than later.
 23

Five Golden Rules of Web Designing

1. Focus on the message

If the goal of our web page is to convey information (brand stories, special offers,
announcements, etc.), then focusing on the clarity of our message is of utmost
importance. Our goal here is to help users focus on relevant information instead of
distracting them.

Some of the most common examples of ignorant or malicious attempts to shift our flow
include:

 Intrusive pop-ups and sidebars

 Floating menu bars

 Splash pages
 Hidden elements

2. Keep your layout neat

A good web design layout should provide a lively, balanced flow of information — but
careless spacing of letters, lines, and words can tear this fabric apart. Some common
examples of bad web layout include:

 Fonts are too small or difficult to read.

 Text is underlined without a link.
 Tiny click targets — please, be friendly to users.

3. Choose user-friendly fonts

Using too many fonts on the same website decreases cognitive fluency. This means
users will find it difficult to understand what they’re looking at. Script fonts (or “hand-
drawn” looking fonts) are hard to read, decreasing ease of use for visitors and
potentially pushing them away.

4. Avoid animation hell

 24

More often than not, online junk attacks are backed up with a significant amount of dark
pattern firepower — including nudity, flashy animations, and hidden close buttons.
Flickering lights may trigger seizures in users with epilepsy.

Web content can avoid this risk by not blinking or flashing too rapidly. The defined
threshold is no more than three flashes per second.

5. Make it easy to navigate

Make our page a clean and navigable river, instead of a swamp. A common example of
bad navigation includes stepped menus: options can quickly become overwhelming,
making users frustrated and motivating them to go elsewhere.