Unit I

Introduction to Web Development

Web development

Web development refers to building website and deploying on the web. Web development
requires use of scripting languages both at the server end as well as at client end.
Types of web developers

There are different types of web developers who focus on different areas. These include:
Frontend developers: Frontend developers implement web page designs using HTML and
CSS. They make sure the website looks pretty on different devices, and that the forms and
buttons work.
Backend developers: Backend developers create the backbone of the web application.
They write code logic that handles a user’s input (for example, what should happen when
you click the signup button after filling in a form).
Full stack developers: Full stack developers do bits of both backend and frontend.
Depending on the problem at hand, they can switch and move stacks.
Setting up your developer environment
A text editor to write code
A web browser to see what we’re building
While you can use any web browser or text editor, we recommend using Google Chrome
and Sublime for this course.
Sublime Text can be used as Editor.
Web Development Process

Web development process includes all the steps that are

good to take to build an attractive, effective and
responsive website. These steps are shown in the
following diagram:
Web Terminologies
1. Network Protocols
A network protocol is a standard way of regulating data transmission between computers.
Just as diplomats adhere to protocols — rules of behavior — when in foreign lands,
network communications do the same. They have to obey agreed rules if they are to
communicate and 'get on with each other'.
TCP (Transaction Control Protocol) and IP (Internet Protocol), together known as TCP/IP.
These were actually unlikely protocols to be so widely accepted, as faster, standardized
protocols had been agreed upon, but none had the same robustness and extensibility
Web Terminologies
2. Web Application (Webapp)
A web application (or webapp), unlike standalone application, runs over the Internet. Examples of
webapps are google, amazon, ebay, facebook and the UCT website. A webapp is typically a 3-tier
(or multi-tier) client-server database application run over the Internet and it comprises five
components:
HTTP Server: E.g., Apache HTTP Server, Apache Tomcat Server, Microsoft Internet Information
Server (IIS), nginx, Google Web Server (GWS), and others. You will learn how to install Apache
HTTP and Tomcat web servers in the next chapter.
HTTP Client (or Web Browser): E.g., Internet Explorer (MSIE), FireFox, Chrome, Safari, and
others.
Database: E.g., Open-source MySQL, MariaDB, Apache Derby, mSQL, SQLite, PostgreSQL,
OpenOffice's Base; Commercial Oracle, IBM DB2, SAP SyBase, MS SQL Server, MS Access;
and others. You will learn how to install MySQL in the next chapter.
Client-Side Programs: could be written in HTML Form, JavaScript, VBScript, Flash, and others.
You will learn how to writer client-side programs using HTML and JavaScript in this course.
Server-Side Programs: could be written in Java Servlet/JSP, ASP, PHP, Perl, Python, CGI, and
others
Web Terminologies
3. Uniform Resource Locator (URL) )
An URL is needed to locate any resources on the Web. It is an address format that specifies how and
where to find a document. The general format is as follows, where the various items in italics must be
substituted with part of a real URL, or omitted altogether.
http://machine_name:port/path/file_name.file_extension
machine_name is either an IP address, for example 137.234.33.89, or a Fully Qualified Domain Name
(also known as a DNS name, because Domain Name Servers map between Domain Names and IP
addresses), for example, www.apple.com [http://www.apple.com]. In the machine name http is the
protocol identifier, while www.apple.com is the resource name.
port is the TCP port to connect to; this is an entry point to software on the server; an optional part of a
URL.
path is a relative file path from the server's document root; the server will start looking for a file in a
specific directory and paths are relative to this
file_name is the name of the file to be browsed, e.g. welcome
file_extension is one of a number of suffixes which, by convention and operating system setup, indicate
the type of data contained within the file, e.g. htm, html, txt. For example, in the URL below,
http://www.apple.com/retail/business/jointventure/terms.html
‘terms.html’ is a file with the html extension.
Web Terminologies
3. Uniform Resource Locator (URL) )
An URL is needed to locate any resources on the Web. It is an address format that specifies how and
where to find a document. The general format is as follows, where the various items in italics must be
substituted with part of a real URL, or omitted altogether.
http://machine_name:port/path/file_name.file_extension
machine_name is either an IP address, for example 137.234.33.89, or a Fully Qualified Domain Name
(also known as a DNS name, because Domain Name Servers map between Domain Names and IP
addresses), for example, www.apple.com [http://www.apple.com]. In the machine name http is the
protocol identifier, while www.apple.com is the resource name.
port is the TCP port to connect to; this is an entry point to software on the server; an optional part of a
URL.
path is a relative file path from the server's document root; the server will start looking for a file in a
specific directory and paths are relative to this
file_name is the name of the file to be browsed, e.g. welcome
file_extension is one of a number of suffixes which, by convention and operating system setup, indicate
the type of data contained within the file, e.g. htm, html, txt. For example, in the URL below,
http://www.apple.com/retail/business/jointventure/terms.html
‘terms.html’ is a file with the html extension.
Web Terminologies
4. HyperText Markup Language (HTML)
This language provides the format for specifying simple logical structure and links in a hypertext
document.
As a markup language, special formatting commands are placed in the text describing how the
final version should appear.
These formatted documents are interpreted by a Web browser which uses the HTML code to
format the page being displayed. Although most professionals use special authoring tools to write
HTML documents and to manage sites, developers of e-commerce sites and applications need to
know the nitty-gritty detail of HTML, and this is what you will study.
HTML has had several versions over the years. "HTML 2.0" was the first standard HTML
specification which was published in 1995. HTML 4.01 was a major version of HTML and it was
published in late 1999. Though HTML 4.01 version is widely used but currently we are having
HTML 5 version which is an extension to HTML 4.01, and this version was published in 20121.
This course will take you through website creation using HTML5.
Web Terminologies
5. HyperText Transfer Protocol (HTTP)
HTTP is a network protocol used to retrieve documents from a variety of machines in a minimum
amount of time. It was invented by Tim Berners-Lee to support a project in developing a
distributed hypertext system.
Distributed hypertext requires the retrieval of documents from many different machines. File
Transfer Protocol (FTP), which predates the Web, would be too slow for this purpose as it is a
connection-oriented protocol that requires a permanent connection to a server, thus requiring a
connection-maintenance overhead when accessing different machines.
connection-less; a connection is established only for the period of transfer, and the connection
need not be maintained after thereafter;
stateless; the server has no 'history' of client visits (although the implementation of cookies
overcomes this);
comprehensive addressing; diverse files on any HTTP server world-wide can be referenced via
URLs;
diverse data; using extensible MIME-types (see later), HTTP servers can supply information of
every possible data types; and
rapid; allows request-response cycles of less than 100 milliseconds
Client-server Computing Model

The client-server model has been defined as:

The Client-server model is a distributed application structure that partitions task or
workload between the providers of a resource or service, called servers, and service
requesters called clients.
In the client-server architecture, when the client computer sends a request for data to the
server through the internet, the server accepts the requested process and deliver the data
packets requested back to the client. Clients do not share any of their resources.
Examples of Client-Server Model are Email, World Wide Web, etc.
 Client-Server Model
Client: When we talk the word Client, it mean to talk of a person or an organization using
a particular service. Similarly in the digital world a Client is a computer (Host) i.e. capable
of receiving information or using a particular service from the service providers (Servers).
Servers: Similarly, when we talk the word Servers, It mean a person or medium that
serves something. Similarly in this digital world a Server is a remote computer which
provides information (data) or access to particular services.
 How the browser interacts with the servers ?
There are few steps to follow to interacts with the servers a client.
User enters the URL(Uniform Resource Locator) of the website or file. The Browser then requests
the DNS(DOMAIN NAME SYSTEM) Server.
DNS Server lookup for the address of the WEB Server.
DNS Server responds with the IP address of the WEB Server.
Browser sends over an HTTP/HTTPS request to WEB Server’s IP (provided by DNS server).
Server sends over the necessary files of the website.
Browser then renders the files and the website is displayed. This rendering is done with the help
of DOM (Document Object Model) interpreter, CSS interpreter and JS Engine collectively known as
the JIT or (Just in Time) Compilers.
Functionality
In the context of the Web, users run client programs (i.e. Web browsers) which provide the following
functionality:
They allow the user to send a request for information to the server.
They format the request so that the server can understand it.
They format the response from the server in a way that the user can read it.

Server programs carry out the following:

They receive a request from a client and process the request.
They respond by sending the requested information back to the client.
In summary, the typical functionality of a client-server model is:
A user, via a web browser (HTTP client), issues a URL request to an HTTP server to start a webapp.
A client-side program (such as an HTML form) is loaded into client's browser.
The user fills up the query criteria in the form.
The client-side program sends the query parameters to a server-side program.
The server-side program receives the query parameters, queries the database and returns the query result to
the client.
The client-side program displays the query result on the browser.
The process repeats.
Advantages of Client-Server model:
Centralized system with all data in a single place.
Cost efficient requires less maintenance cost and Data recovery is possible.
The capacity of the Client and Servers can be changed separately.

Disadvantages of Client-Server model:

Clients are prone to viruses, Trojans and worms if present in the Server or uploaded into
the Server.
Server are prone to Denial of Service (DOS) attacks.
Data packets may be spoofed or modified during transmission.
Phishing or capturing login credentials or other useful information of the user are common
and MITM(Man in the Middle) attacks are common.
Types of Website Content
Static Web Site
Dynamic Web Site

Static Web Site :- A static web page (sometimes called a flat page) is a web page that is delivered to
the user exactly as stored.
Dynamic web pages which are generated by a web application
Consequently a static web page displays the same information for all users, from all contexts,
subject to modern capabilities of a web server to negotiate content-type or language of the document
where such versions are available and the server is configured to do so.
Static web pages are often HTML documents stored as files in the file system and made available by
the web server over HTTP.
However, loose interpretations of the term could include web pages stored in a database, and could
even include pages formatted using a template and served through an application server, as long as
the page served is unchanging and presented essentially as stored.
Static Web pages are very simple in layout and informative in context. Creation of static website
content requires great level of technical expertise and if a site owner is intended to create static.
Web pages, they must be very clear with their ideas of creating such pages since they need to hire a
web designer.
Advantages
No programming skills are required to create a static page.

Inherently publicly cacheable (i.e. a cached copy can be shown to anyone).

No particular hosting requirements are necessary.

Can be viewed directly by a web browser without needing a web server or application
server, Disadvantages
Any personalization or interactivity has to run client-side (ie. In the browser), which is
restricting.
Maintaining large numbers of static pages as files can be impractical without automated
tools
Application areas of Static Website:
Need of Static web pages arise in the following cases.

Changes to web content is infrequent

List of products / services offered is limited Simple e-mail based ordering system should
suffice
No advanced online ordering facility is required
Features like order tracking, verifying availability of stock, online credit card
transactions, are not needed
Web site not required to be connected to back-end system.
Dynamic Web Sites
A dynamic web page is a kind of web page that has been prepared with fresh information
(content and/or layout), for each individual viewing.

It is not static because it changes with the time (ex. anews content), the user (ex.
preferences in a login session), the user interaction (ex. web page game), the context
(parametric customization), or any combination of the foregoing.
Two types of dynamic web sites

Client-side scripting and content creation

Server-side scripting and content creation

Client-side scripting and content creation
Client-side scripting and content creation Using client-side scripting to change interface behaviors within a specific
web page, in response to mouse or keyboard actions or at specified timing events. In this case the dynamic behavior
occurs within the presentation.

Such web pages use presentation technology called rich interfaced pages. Client-side scripting languages like
JavaScript or ActionScript, used for Dynamic HTML (DHTML) and Flash technologies respectively, are frequently
used to orchestrate media types (sound, animations, changing text, etc.) of the presentation.

The scripting also allows use of remote scripting, a technique by which the DHTML page requests additional
information from a server, using a hidden Frame, XMLHttpRequests, or a Web service.
The Client-side content is generated on the user's computer.

The web browser retrieves a page from the server, then processes the code embedded in the page (often written in
JavaScript) and displays the retrieved page's content to the user.

The innerHTML property (or write command) can illustrate the client-side dynamic page generation: two distinct
pages, A and B, can be regenerated as document.

innerHTML = A anddocument. innerHTML = B; or "on load dynamic" by document.write(A) and document.write(B)

Server-side scripting and content creation

Using server-side scripting to change the supplied page source between pages, adjusting
the sequence or reload of the web pages or web content supplied to the browser.
Server responses may be determined by such conditions as data in a posted HTML form,
parameters in the URL, the type of browser being used, the passage of time, or a database
or server state.
Such web pages are often created with the help of serverside languages such as PHP,
Perl, ASP, ASP.NET, JSP,ColdFusion and other languages.
These server-side languages typically use the Common Gateway Interface (CGI) to
produce dynamic web pages. These kinds of pages can also use, on the client-side, the first
kind (DHTML, etc.).
Application areas of Dynamic Website

Dynamic web page is required when following necessities arise:

Need to change main pages more frequently to encourage clients to return to site.

Long list of products / services offered that are also subject to up gradation

Introducing sales promotion schemes from time to time

Need for more sophisticated ordering system with a wide variety of functions

Tracking and offering personalized services to clients.

Facility to connect Web site to the existing back-end system

Principles Involved In Developing Website
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.
Principles Involved In Developing Website

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.
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.
Principles Involved In Developing Website
5. 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 .
6.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
font size
spacing
line length
7. 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
 Principles Involved In Developing Website
8. usability
a web site not only looks attractive , but it should also be usable,
9. 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
10. 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.
11. 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.