UNIT I WEBSITE BASICS

Internet Overview - Fundamental computer network concepts - Web Protocols - URL –

Domain Name - Web Browsers and Web Servers - Working principle of a Website –
Creating a Website - Client-side and server-side scripting

INTERNET OVERVIEW
Internet is a world-wide global system of interconnected computer networks. Internet uses the
standard Internet Protocol (TCP/IP).
Every computer in internet is identified by a unique IP address.
IP Address is a unique set of numbers (such as [Link]) which identifies a computer
location.
A special computer DNS (Domain Name Server) is used to give name to the IP Address so
that user can locate a computer by a name.
For example, a DNS server will resolve a name [Link] to a particular
IP address to uniquely identify the computer on which this website is hosted.
Internet is accessible to every user all over the world.
Internet Connection Protocols
Internet Connection Protocols can be divided into three major types:
TCP/IP Network Model - Transmission Control Protocol (TCP) and Internet Protocol (IP)
are the most widely used protocols for connecting networks. It divides any message into a
series of packets which are sent from source to destination
File Transfer Protocol - Program files, multimedia files, text files, documents, etc. can be
transferred from one device to another, using FTP
Hypertext Transfer Protocol - Used for transferring a hypertext from one device to two or
more devices. HTML tags are used for creating links and these links may be in the form of
text or images

Fig Overview of Internet

Web Essentials IT@AVCCE

Internet allows us to communicate with the people sitting at remote locations. There are
various apps available on the web that uses Internet as a medium for communication. One can
find various social networking sites such as:
• Face book
• Twitter
• Yahoo
 Google+
 Flickr
Internet provides concept of electronic commerce, that allows the business deals to be
conducted on electronic systems. Internet allows us to use many services like:
• Internet Banking
• . Online Shopping
• Online Ticket Booking
• Online Bill Payment
• Data Sharing
• E-mail

FUNDAMENTAL COMPUTER NETWORKS CONCEPTES

Computer Networks
A computer network is a group of two or more interconnected computer systems. You can
establish a network connection using either cable or wireless media. Computer Networks are
built using a collection of hardware (such as routers, switches, hubs, and so forth) and
networking software (such as operating systems, firewalls, or corporate applications).
Important terms and concepts
The following are some common terms to know when discussing computer networking:
IP address: An IP address is a unique number assigned to every device connected to a
network that uses the Internet Protocol for communication. Each IP address identifies the
device's host network and the location of the device on the host network. When one device
sends data to another, the data includes a 'header' that includes the IP address of the sending
device and the IP address of the destination device.
Nodes: A node is a connection point inside a network that can receive, send, create, or store
data. Each node requires you to provide some form of identification to receive access, like an
IP address. A few examples of nodes include computers, printers, modems, bridges, and
switches. A node is essentially any network device that can recognize, process and transmit
information to any other network node.

Web Essentials IT@AVCCE

Routers: Arouter is a physical or virtual device that sends information contained in data
packets between networks. Routers analyze data within the packets to determine the best way
for the information to reach its ultimate destination. Routers forward data packets until they
reach their destination node.
Switches: A switch is a device that connects other devices and manages node-to- node
communication within a network, ensuring data packets reach their ultimate destination.
While a router sends information between networks, a switch sends information between
nodes in a single network. When discussing computer networks, 'switching' refers to how
data is transferred between devices in a network. The three main types of switching are as
follows:
• Circuit switching, which establishes a dedicated communication path between nodes
in a network. This dedicated path assures the full bandwidth is available during the
transmission, meaning no other traffic can travel along that path.
• Packet switching involves breaking down data into independent components called
packets which, because of their small size, make fewer demands on the network. The
packets travel through the network to their end destination.
• Message switching sends a message in its entirety from the source node, traveling
from switch to switch until it reaches its destination node.
• Ports: A port identifies a specific connection between network devices. Each port is
identified by a number. If you think of an IP address as comparable to the address of a
hotel, then ports are the suites or room numbers within that hotel. Computers use port
numbers to determine which application, service, or process should receive specific
messages.
Network cable types: The most common network cable types are Ethernet twisted pair,
coaxial, and fiber optic. The choice of cable type depends on the size of the network, the
arrangement of network elements, and the physical distance between devices.
Computer Network Types
Below are the most common computer network types that are frequently used these days:
• LAN [Local Area Network}
• WLAN [Wireless local area network]
• CAN [Campus Area Network]
• MAN [Metropolitan Area Network]
• PAN [Personal Area Network]
• . SAN [Storage Area Network]
• VPN [Virtual Private Network]
• . WAN [Wide Area Network]

Web Essentials IT@AVCCE

LAN
LAN or Local Area Network is a group of devices connecting the computers and other
devices such as switches, servers, printers, etc., over a short distance such as office, home.
The commonly used LAN is Ethernet LAN. This network is used as it allows the user to
transfer or share data, files, and resources.

WLAN

WLAN or Wireless local area network is similar to LAN with the difference that it uses
wireless communication between devices instead of wired connections. WLAN typically
involves a Wi-Fi router or wireless access point for devices, unlike smartphones, laptops,
desktops, etc.

Web Essentials IT@AVCCE

Web Essentials IT@AVCCE
CAN
CAN or Campus Area Network is a closed corporate communication network. A CAN is a
mobile network that may contain a private or public part. CANS are widely used colleges,
academies, and corporate sites.

MAN

MAN or Metropolitan Area Network is typically a more extensive network when compared
to LANs but is smaller than WANs. This network ranges between several buildings in the
same city. Man networks are connected via fiber optic cable (usually high-speed connection).
Cities and government bodies usually manage MANS

Web Essentials IT@AVCCE

PAN
PAN or Personal Area Network is a type of network used personally and usually serves one
person. This network usually connects devices unlike your smartphones, laptop, or desktop to
sync content and share small files, unlike songs, photos, videos, calendars, etc. These devices
connect via wireless networks such as Wi-Fi, Bluetooth, Infrared, etc.

SAN

SAN or Storage Area Network is a specialized high-speed network that stores and provides
access to block-level storage. It is a dedicated shared network that is used for cloud data
storage that appears and works like a storage drive.
SAN consists of various switches, servers, and disks array. One of the advantages of SAN is
that it is fault-tolerant, which means if any switch or server goes down, the data can still be
accessed.

Web Essentials IT@AVCCE

VPN
VPN or Virtual Private Network is a secure tool that encrypts point-to-point Internet
connection and hides the user's IP address and virtual location. It determines an encrypted
network to boost user's online privacy so as their identity and data are inaccessible to hackers.

WAN
WAN or Wide Area Network is the most significant network type connecting computers over
a wide geographical area, such as a country, continent. WAN includes several LANS,
MANS, and CANs. An example of WAN is the Internet, which connects billions

Web Essentials IT@AVCCE

OSI Model
OSI stands for Open System Interconnection is a reference model that describes how
information from a software application in one computer moves through a physical medium
to the software application in another computer. OSI consists of seven layers, and each layer
performs a particular network function. OSI model was developed by the International
Organization for Standardization (ISO) in 1984, and it is now considered as an architectural
model for the inter-computer communications. OSI model divides the whole task into seven
smaller and manageable tasks. Each layer is assigned a particular task.
7-Layers of OSI Model
There are the seven OSI layers. Each layer has different functions. A list of seven layers are
given below:
1. Physical Layer 2. Data-Link Layer
3. Network Layer 4. Transport Layer
5. Session Layer 6. Presentation Layer
7. Application Layer

Physical Layer:
The physical layer helps you to define the electrical and physical specifications of the data
connection. This level establishes the relationship between a device and a physical
transmission medium. The physical layer is not concerned with protocols or other such
higher-layer items. Examples of hardware in the physical layer are network adapters,
Ethernet, repeaters, networking hubs, etc.

Web Essentials IT@AVCCE

Data Link Layer:
Data link layer corrects errors which can occur at the physical layer. The layer allows you to
define the protocol to establish and terminates a connection between two connected network
devices. It is IP address understandable layer, which helps you to define logical addressing so
that any endpoint should be identified. The layer also helps you implement routing of packets
through a network. It helps you to define the best path, which allows you to take data from
the source to the destination.
The data link layer is subdivided into two types of sub layers:
1. Media Access Control (MAC) layer- It is responsible for controlling how device in a
network gain access to medium and permits to transmit data.
2. Logical link control layer- This layer is responsible for identity and encapsulating
network-layer protocols and allows you to find the error.
Important Functions of Data link Layer:
• Framing which divides the data from Network layer into frames.
• Allows you to add header to the frame to define the physical address of the source and
the destination machine
• Adds Logical addresses of the sender and receivers
• It is also responsible for the sourcing process to the destination process delivery of the
entire message.
• It also offers a system for error control in which it detects retransmits damage or lost
frames.
• Data link layer also provides a mechanism to transmit data over independent networks
which are linked together.
Transport Layer:
The transport layer builds on the network layer to provide data transport from a process on a
source machine to a process on a destination machine. It is hosted using single or multiple
networks, and also maintains the quality of service functions. It determines how much data
should be sent where and at what rate. This layer builds on the message which is received
from the application layer. It helps ensure that data units are delivered error-free and in
sequence. Transport layer helps you to control the reliability of a link through flow control,
error control, and segmentation or desegmentation. The transport layer also offers an
acknowledgment of the successful data transmission and sends the next data in case no errors
occurred. TCP is the best-known example of the transport layer.
Important functions of Transport Layers:
• It divides the message received from the session layer into segments and numbers
them to make a sequence.
• Transport layer makes sure that the message is delivered to the correct process on the
destination machine.

Web Essentials IT@AVCCE

 • It also makes sure that the entire message arrives without any error else it should be
retransmitted.
Network Layer:
The network layer provides the functional and procedural means of transferring variable
length data sequences from one node to another connected in "different networks". Message
delivery at the network layer does not give any guaranteed to be reliable network layer
protocol.
Layer-management protocols that belong to the network layer are:
1. Routing protocols
2. Multicast group management
3. Network-layer address assignment.
Session Layer
Session Layer controls the dialogues between computers. It helps you to establish starting and
terminating the connections between the local and remote application. Th layer request for a
logical connection which should be established on end user's requirement. This layer handles
all the important log-on or password validation. Session layer offers services like dialog
discipline, which can be duplex or half-duplex. It is mostly implemented in application
environments that use remote procedure calls.
Important function of Session Layer:
• It establishes, maintains, and ends a session.
• Session layer enables two systems to enter into a dialog
• It also allows a process to add a checkpoint to steam of data.
Presentation Layer
Presentation layer allows you to define the form in which the data is to exchange between the
two communicating entities. It also helps you to handles data compression and data
encryption. This layer transforms data into the form which is accepted by the application. It
also formats and encrypts data which should be sent across all the networks. This layer is also
known as a syntax layer.
The function of Presentation Layers:
 Character code translation from ASCII to EBCDIC.
 Data compression: Allows to reduce the number of bits that needs to be transmitted on
the network.
 Data encryption: Helps you to encrypt data for security purposes — for example,
password encryption.
 It provides a user interface and support for services like email and file transfer.

Web Essentials IT@AVCCE

Application Layer
Application layer interacts with an application program, which is the highest level of OSI
model. The application layer is the OSI layer, which is closest to the end-user. It means OSI
application layer allows users to interact with other software application. Application layer
interacts with software applications to implement a communicating component. The
interpretation of data by the application program is always outside the scope of the OSI
model. Example of the application layer is an application such as file transfer, email, remote
login, etc.
The function of the Application Layers is:
 Application-layer helps you to identify communication partners, determining resource
availability, and synchronizing communication.
 It allows users to log on to a remote host
 This layer provides various e-mail services
 This application offers distributed database sources and access for global information
about various objects and services

URL
URL is the abbreviation of Uniform Resource Locator. It is the resource address on the
internet. The URL (Uniform Resource Locator) is created by Tim Berners-Lee and the
Internet Engineering working group in 1994. URL is the character string (address) which is
used to access data from the internet. The URL is the type of URI (Uniform Resource
Identifier.
A URL has two main components:
Protocol identifier: For the URL [Link] the protocol identifier is http
Resource name: For the URL [Link] the resource name is [Link]

A URL contains the following information which is listed below:

• Protocol name
 A colon followed by double forward-slash (://)
 Hostname (domain name) or IP address
• A colon followed by port number (optional - unless specified otherwise, " is the
default when using HTTP, and “:443" is the default when using HTTPS
• Path of the file

Web Essentials IT@AVCCE

Syntax of URL:
protocol://hostname/filename
Protocol: A protocol is the standard set of rules that are used to allow electronic devices to
communicate with each other.
Hostname: It describes the name of the server on the network.
Filename: It describes the pathname to the file on the server.
The URL [Link] contains the information protocol: https,
hostname: [Link] and filename: php-function.
The Uniform Resource Locator (URL) is unique address for the file that has to be accessed
over the internet. When we want to access some website we enter it's URL in the address bar
of the web browser. For example if we want to access [Link] then we must specify
its URL in the address bar. However any other file such as some text file or image file or
some HTML file can also be specified. The URL contains names of the protocol such as
[Link] The URL may contain the names of the protocol such as ftp. For example:
[Link] The protocol identifier and the resource
name are separated by a colon and two forward slashes. The syntax of writing URL is given
below: protocol://username@hostname/path/filename. Sometimes instead of domain name
servers IP addresses can also be used, for example http:// [Link]. But use of IP address
as URL is not preferred because human cannot remember numbers very easily but they can
remember names easily.

DOMAIN NAME SYSTEMS (DNS)

Domain Name System is DNS. It is a naming system that works hierarchically and is
decentralized for computers, servers (web servers), services, resources, network devices and
components that are present on large networks such as the public Internet. DNS service or
server is an Internet service in general, thus maps or translates human readable domain names
(website names or URL, Uniform Resource Locator) into machine or Computer readable IP
(Internet Protocol) addresses.
Example
Domain name = [Link] whose Server IP address is, say=[Link]
• DNS stands for Domain Name System.
• DNS is a directory service that provides a mapping between the name of a host on the
network and its numerical address.
• DNS is required for the functioning of the internet.
• Each node in a tree has a domain name, and a full domain name is a sequence of symbols
specified by dots.
• DNS is a service that translates the domain name into IP addresses. This allows the users
of networks to utilize user-friendly names when looking for other hosts instead of
remembering the IP addresses.

Web Essentials IT@AVCCE

• For example, suppose the FTP site at EduSoft had an IP address of [Link], most
people would reach this site by specifying [Link]. Therefore, the domain name
is more reliable than IP address.
DNS is a TCP/IP protocol used on different platforms. The domain name space is divided
into three different sections: generic domains, country domains, and inverse domain.

Generic Domains
• It defines the registered hosts according to their generic behavior.
• Each node in a tree defines the domain name, which is an index to the DNS database.
• It uses three-character labels, and these labels describe the organization type.
Label Description
aero Airlines and aerospace companies
Biz Businesses or firms
com Commercial Organizations
Coop Cooperative business Organizations
Edu Educational institutions
Gov Government institutions
Info Information service providers
Int International Organizations
Mil Military groups
Museum Museum & other nonprofit organizations
Name Personal names
net Network Support centers
Org Nonprofit Organizations
Pro Professional individual Organizations

Web Essentials IT@AVCCE

Country Domain
The format of country domain is same as a generic domain, but it uses two-character country
abbreviations (e.g., us for the United States) in place of three character organizational
abbreviations.
Inverse Domain
The inverse domain is used for mapping an address to a name. When the server has received
a request from the client, and the server contains the files of only authorized clients. To
determine whether the client is on the authorized list or not, it sends a query to the DNS
server and ask for mapping an address to the name.
Working of DNS
• DNS is a client/server network communication protocol. DNS clients send requests to
the. server while DNS servers send responses to the client.
• Client requests contain a name which is converted into an IP address known as a
forward DNS lookups while requests containing an IP address which is converted into
a name known as reverse DNS lookups.
• DNS implements a distributed database to store the name of all the hosts available on
the internet.

Web Essentials IT@AVCCE

 • If a client like a web browser sends a request containing a hostname, then a piece of
software such as DNS resolver sends a request to the DNS server to obtain the IP
address of a hostname. If DNS server does not contain the IP address associated with
a hostname, then it forwards the request to another DNS server. If IP address has
arrived at the resolver, which in turn completes the request over the internet protocol.

WEB BROWSER
Web browser is a kind of software which is basically used to use resources on the web. Over
the networks, two computers communicate with each other. In this communication, when
request is made by one computer then that computer is called a client and when the request
gets served by another computer then that computer is called server. Thus exchange of
information takes place via client-Server communication.
When user wants some web document then he makes the request for it using the web
browser. The browsers are the programs that are running on the client's machines. The
request then gets served by the server and the requested page is then returned to the client. It
is getting displayed to the client on the web browser. The web browser can browse the
information on the server and hence is the name.
Various web browsers that are commonly used are
Browser Vendor
Internet Explorer Microsoft
Google Chrome Google
Mozilla Firefox Mozilla
Netscape Navigator Netscape Communications Corp
Opera Opera Software
Safari Apple

Web Essentials IT@AVCCE

Web browser supports variety of protocols but the most commonly used protocol on the web
browser is Hyper Text Transfer Protocol (HTTP). This protocol is typically used when
browser communicates with the server.
Functions Defined by Web Browser
Various functions of web browser are -
1. Reformat the URL and send a valid HTTP request.
2. When user gives the address of particular website it is in the form of domain name.
The web browser converts the DNS to corresponding IP address.
3. The web browser establishes a TCP connection with the Web browser while
processing the user's request.
4. The web browser sends the HTTP request to the web server.
5. The web server processes the HTTP request sent by the web browser and returns the
desired web page to the client machine. The web browser on the client's machine
displays this webpage in appropriate format
Web Browser Architecture
The web browser architecture is represented by following figure

The main components of web browser architecture are as follows-

User Interface:
Using the user interface user interacts with the browser engine. The user interface contains,
Address bar, back/forward button, book mark menu and so on. The page requested by the
user is displayed in this user interface.
Browser Engine:
It contains the mechanism by which the input of user interface is communicated to the
Rendering Engine. The browser engine is responsible for querying the rendering engine
according to various user interfaces.

Web Essentials IT@AVCCE

Rendering Engine:
It is responsible for displaying the requested contents on the screen. The rendering engine
interprets the HTML, XML and JavaScript that comprises the given URL and generates the
layout that is displayed in the user interface. The main components of rendering engine are
HTML parser. The job of the HTML parser is to parse the HTML mark-up into a parse tree.
It is important to note that Chrome, unlike most browsers, holds multiple instances of the
rendering engine - one for each tab, each tab is a separate process. Different browsers use
different rendering engines - Internet Explorer uses Trident, Firefox uses Gecko, Safari uses
Webkit, Chrome and Opera uses WebKit.
Networking:
The functionality of networking is to retrieve the URL using common internet protocols such
as HTTP and FTP. The networking is responsible to handle the internet communication and
security issues. The network component may use the cache for retrieved documents. This
feature is useful for increasing the response time.
JavaScript Interpreter:
The interpreter executes the JavaScript code which is embedded in a web page. User
Interface Backend:
It is basically used to draw the widgets like combo boxes and windows.
Data Persistence:
This is a small database created on local drives of the computer where the browser is
installed. The data storage manages user data such as book marks, cookies and preferences.
Working of Web Browser
We often browse the internet for several reasons. It is more interesting to know about how a
web page demanded by us gets displayed on our browser. Following is the stepwise
explanation of this process.
Step 1:
First user types the website address for demanding the desired web page for example -
[Link] and then the home page of this website appears on the
screen. The web address is divided into three parts:
(i) The first part is the protocol. The http is a hypertext transfer protocol which tells the web
browser that user wishes to communicate with web server on port 80. Port 80 is reserved for
the communication between web server and web browser.
(ii) The second part is the server address. This tells the web browser which server it needs to
contact in order to retrieve the information you are looking for. The web browser
communicates with a Domain Name Server (DNS) to find out the IP Address for the website.
All communications on the internet use IP Addresses for communications. Use of the
numeric address for accessing the web server is avoided because it is easier to remember

Web Essentials IT@AVCCE

textual information than that of numeric one. Hence normally the web server's addresses are
textual
(iii) The third part of this address donates the resource user wants to see.
Step 2: The web browser, on locating the IP Address which it requires (by communicating
with the name server), send a request directly to the web server, using port 80, asking for the
file [Link].
Step 3: The web server sends the html for this page back to user's web browser. If there are
additional files needed in order to show the web page (like some images for example) the
web browser makes additional requests for each of these.

WEB SERVER
Web servers are computers that deliver (serves up) Web pages. Every Web server has an IP
address and possibly a domain name. For example, if you enter the URL http:/
/[Link]/[Link] in your browser, this sends a request to the Web server
whose domain name is [Link]. The server then fetches the page named [Link]
and sends it to your browser. Any computer can be turned into a Web server by installing
server software and connecting the machine to the Internet. There are many Web server
software applications, including public domain software and commercial packages.
Functions of web server:
• The web server accepts the requests from the web browser.
• The user request is processed by the web server
• The web server responds to the users by providing the services which they demand for
over the web browsers.
• The web servers serve the web based applications
• The DNS translate the domain names into the IP addresses

Web Essentials IT@AVCCE

 • The server verifies for the given address, finds the necessary files, runs appropriate
scripts, exchange cookies if necessary and returns back to the browser
• Some servers actively participate in session handling techniques.

Web pages are a collection of data, including images, text files, hyperlinks, database files
etc., all located on some computer (also known as server space) on the Internet. A web server
is dedicated software that runs on the server-side. When any user requests their web browser
to run any web page, the web server places all the data materials together into an organized
web page and forwards them back to the web browser with the help of the Internet.
Let's discover the step-by-step process of what happens whenever a web browser approaches
the web server and requests a web file or file. Follow the below steps:
1. First, any web user is required to type the URL of the web page in the address bar of
your web browser.
2. With the help of the URL, your web browser will fetch the IP address of your domain
name either by converting the URL via DNS (Domain Name System) or by looking
for the IP in cache memory. The IP address will direct your browser to the web server.
3. After making the connection, the web browser will request for the web page from the
web server with the help of an HTTP request.
4. As soon as the web server receives this request, it immediately responds by sending
back the requested page or file to the web browser HTTP.

Web Essentials IT@AVCCE

 5. If the web page requested by the browser does not exist or if there occurs some error
in the process, the web server will return an error message.
6. If there occurs no error, the browser will successfully display the webpage.
Web server security Methods
Though there are various security techniques available in the market that a user can
implement to have a safe web server experience, below given are some examples of security
practices that can include processes:
1. A reverse proxy is a proxy server that is accessible to the clients, therefore hiding the
internal server. It acts as an intermediary as wherever any user makes requests to the
web server for any data or file, the proxy server seizes those requests and then
communicates with the webserver.
2. Access restriction is a technique that limits the web host's access to infrastructure
machines or using Secure Socket Shell (SSH);
3. Keeping web servers mended and updated, as it benefits to ensure the web server
isn't vulnerable to exposures;
4. Network monitoring is a security practice that ensures that no unauthorized activity
is going on the web server; and
5. Using a firewall and SSL safeguards the web server as firewalls can supervise
HTTP request traffic while a Secure Sockets Layer (SSL) supports securing the data.

WORKING PRINCIPLE OF WEBSITE

Features of Website Design
Quality of Web content - people desire information in fast and reliable fashion. For business
websites, content should include important information. These type of websites need to
display high quality pictures of their products, and the highlight for clients testimonials.
Clear, User-friendly navigation - A user friendly navigation scheme allows visitors to
quickly find the information needed. Important links must be easy to find and given logical,
simple and includes easy to understand labels.
Simple and professional design - The website design must be simple and professional.
Google is an excellent example of such a site. To keep websites simple a balances
distribution of contents and graphics is required. The use of slightly contrasting colours, and
clear fonts is necessary. Also, one should break up sizeable blocks of texts with either
spacing or images as appropriate.
Webpage speed - People inherently lose patience quickly, when visiting a website. The
website with heavy graphics, audio and video takes more time to load. A web design
company must take care of all the controlling factors that will maintain the desirable speed of
the website.

Web Essentials IT@AVCCE

Search Engine optimization - A well-designed website generally will receive many visitors,
and one method to attract visitors is search engine optimization. This allows the insertion of
search keywords in website content, an appropriate link profile, social media signals.
Web compatibility - A website should easily render on various resolutions, screen sizes and
browsers and with the increasing popularity of mobile devices, websites should function
properly on these types of devices.

Web site Design Issues

Simplicity – It is a general tendency of web designers to provide lot of animations, huge
amount of information, extreme visuals and so on. This makes the web design enormous and
it should be avoided. The web application must be moderate and simple.
Identity - Web design must be based on the nature of the web application. It driven by the
objective of the web application, category of user using it. A web engineer must work to
establish an identity for the web application through the design.
Consistency - The contents of the web application should be constructed consistently. For
example: text formatting, font style should be the same overall the text document of the web
application. Similarly, the graphics design, color scheme and style must be identical over all
the web pages of the web application. Navigation mechanism must be used consistently
across web application elements.
Robustness - The users always expects robust contents and functions of the web application.
That means any required functionality should not be missing all. If any function or content is
missing or insufficient then that web application will fail.
Navigability - The navigation should be simple and consistent. The design of navigations
should intuitive and predictable in nature. That means any user shoul be in a position to make
use of navigation links without any help.
Visual Appeal - The web application are most visual and most dynamic and aesthetic in
nature. There are various factors that contribute to visual appeal. The factors are - look and
feel of the content, interface layout, color coordination, the balance of text, graphics and other
media, navigation mechanism and so on.
Compatibility - The web application can be used in variety of environment and
configurations such as different browsers, internet connection types, operating systems and
various browsers.

Web Essentials IT@AVCCE

Phases of Website Development
Web project can be designed in the four phases as given below
Phase I: Strategy
In this phase, a strategic planner or project manager along with the client determines the
objectives of the site. As an output of this phase creative briefs are prepared. The creative
brief is a kind of document in which project objectives, requirements and key insights are
clearly mentioned. Every team member makes use of creative brief as a guidelines fo the
development.
Phase II: Design
In this phase actual design of the website is done with the help of creative and technical team
members. The front end is designed by the creative team in which user interface and
interactions are designed. The back end is designed by the technical team which is
responsible for designing the database architecture. As an outcome of this phase functional
and technical specifications, site architecture are prepared.
Phase III: Production
During this phase actual site is built using the source code. Functionalities and features of the
website are closely examined. If the client demands for a change in any functionality then a
change order is issued. At the end of this phase a production guide is prepared.
Phase IV: Testing
At this phase all the functionalities and features of the website are tested, bugs are identified
and resolved before launching the website. The QA manager develops the test plan. The test
suit mentioned in it used to test the product thoroughly.

Web Essentials IT@AVCCE

Enhancing Website
There are varieties of ways by which one can enhance his website. The website can be
enhanced using some key elements such as -
Contents - This is the most important element of website. It helps to spread the business
message in an appropriate manner. The content should be easy to understand. Those should
be to the point and relevant. The information available on the website must be useful to the
user.
Graphics - Adding too much graphics in the webpage slows down its speed of loading.
Hence Graphics is undesirable by any user. However the relevant and appealing graphics can
be added to the website.
Color and Text - The colours and text that is appearing on the website must be pleasant to
the eyes. As a rule of thumb, the entire site must use at the most five to six colors. The text
should not be too small or too large. The selection of the family of font for displaying the text
must be appropriate so that the text can be readable.
Flash- Use of flash animation makes the site attractive but at the same time there are many
drawbacks that are associated with this key element. The first drawback is the flash files take
a large amount time to load the data on the web page. Secondly if the flash animation is
placed on the web page then the link for downloading the flash player must also be provided
so that the animation can be viewed by the user.
Frames - Frames must be avoided while designing the website. Instead of using frames the
web designer must prefer the tables. The reason why the use of frames must be avoided in the
web page is that - the search engine find it difficult to search the contents from the site
containing the frames.
Organizing Files - The files required by the website must be categorized and must be stored
in sorted manner. This makes it easier to manage the information.

CREATING WEBSITE
Website
Website is a collection of related web pages that may contain text, images, audio, and video,
etc. The first page of a website is called a home page. Each website has a specific internet
address (URL) that you need to enter in your browser to access a website. A website is hosted
on one or more servers and can be accessed by visiting its homepage using a computer
network. A website is managed by its owner that can be an individual, company, or
organization. The first website was introduced on 6 August 1991. It was developed by Tim
Berners-Lee at CERN. As of January 2018, there were around 1.7 billion websites on the
internet.
The benefits of having a website are as follows:
1. Cost-effective: The marketing of products and services through a website is less costly
than print advertising, TV, and radio advertising. It also allows you to make changes related

Web Essentials IT@AVCCE

to your products and services such as you can edit products' specifications, features, discount
offers, etc.
2. Broder demographic reach: A website can help your business reach people with diverse
backgrounds throughout the world.
3. Business credibility: Having a website that is user-friendly and professional looking for
your business makes people consider your business more credible than others who don't have
a website to represent their businesses online.
4. 24/7 availability: You can keep your products available for sale around the clock through
a website. Customers can buy anytime, and thus you can earn more profits than a traditional
storefront.
5. Consumer convenience: It improves the shopping experience of your customers; they can
buy your products from the comfort of their home.
6. Build customer rapport: Online presence helps you build and maintain a rapport among
your customers. You can also introduce special offers or discounts for your loyal customers.
7. Improves productivity: It saves your time as you don't need to explain your products or
services to each customer separately, as all the information is already available on the
website.
8. Educate your customers: You can educate people about the benefits of your products and
can show them how they are betters than the competitors' products.
9. Change location: You can move your business to another location without affecting your
sales as customers still can find you through your website.
10. Grow manpower: You can post job openings for vacant positions and allow applicants
to check job descriptions and apply online.
11: Personalized email address: It allows you to set up personalized email addresses for
employees, companies, partners, etc. You can receive mails on these mail ids and reply
accordingly. Furthermore, you can share offers, happy hours, updates, and can get feedback
through email.
12. Improve customer service: It allows you to improve customer services such as you can
share phone numbers to contact you, and display other relevant information such as order
status, delivery status, refund or replacement procedure, etc.

Types of Websites
A website can be of two types based on the type of WebPages:
• Static Website
• Dynamic Website

Web Essentials IT@AVCCE

Static website
A static website, as the name suggests, is a website in which pages do not change or remain
the same. It is the basic type of website that is easy to create, maintain, and host. You don't
need web programming and database design to create a static website. Its WebPages are
coded in HTML. The codes are fixed for each page, so the information contained in the page
does not change, and it looks like a printed page. However, changes can be made by changing
the codes if required.
Benefits of a Static Website:
• It takes less time to create a static website.
• It is less costly to develop this website.
• The WebPages are delivered at high speed by the servers.
• Hosting through dedicated servers is available at a low price.
• It is more secure than dynamic sites as it does not rely on CMS plug-in and server-
side scripting.
Dynamic website
A dynamic website is a collection of dynamic web pages whose content changes
dynamically. It accesses content from a database or Content Management System (CMS).
Therefore, when you alter or update the content of the database, the content of the website is
also altered or updated. A dynamic website uses client-side scripting or server- side scripting,
or both to generate the dynamic content. For example, when a browser sends a request to the
server, the server contacts the application server with further interacts with the database
server to fetch the content, which is customized as per the user's requests and requirements.
For example, a Face book page may appear different to different users as per their friends'
list, interests, location, etc.
Benefits of a Dynamic Website:
1. It is very quick and easy to make changes in a dynamic website as it is integrated with
high-end programming.
2. The webpages are easier to maintain despite of being full of information and graphics.
3. E-commerce sites are dynamic as they need to be impressive and have easy
navigation from one page to other pages.
4. It makes your site look professional.
5. The users can get customized information as per their interests, needs, and profile, etc.
For example, [Link], [Link], etc.

Web Essentials IT@AVCCE

Difference between Static Website and Dynamic Website:
Static Website Dynamic Website
As the name suggests, Its WebPages do not As the name suggests, the WebPages keep
change in terms of design, content, etc. The changing as per users' requirements such as
information or content remains the same Face book profile pages and an E-commerce
site. So, the content does not remain the
same.
It mainly uses HTML and CSS and does not It requires server-side scripting, application
require server-side scripting, application server, and database to create and send
server, and database. dynamic WebPages to the client.
It has a limited number of pages. It may contain thousands of pages in the
database.
Its hosting cost is low, as HTML files need Its hosting cost is higher as dynamic pages
less space on the server. need more space on the server.
It requires low maintenance. It requires high maintenance.
It loads quickly as it involves the use of It takes more time to load due to the more
mark-up languages to create a webpage. processing time.
It lacks the Content management feature. It makes use of the Content Management
Feature.
The content of the webpage cannot be The webpage content can be changed during
changed during runtime. runtime.
It does not require interaction with a Interaction with the database occurs.
database.
It is more secure or fewer chances of it It is less secure and may get hacked easily as
getting hacked as it doesn't use plugins. it uses many plugins and content sources.

Types of Websites based on their purpose, target audience, etc.

1. Blog: It is a type of website that provides information or in which posts are added regularly
in reverse chronological order, latest post or entries on top of the main page, and old ones
towards the bottom. A blog is usually owned by a single person or a small group of people.
The content of a blog is generally referred to as a blog post, and it generally appears as posts
on a streaming page. The information is regularly updated in a blog, e.g., articles, photos, and
videos are added on a daily basis to keep readers engaged and increase the traffic to the blog.
It also allows readers to leave a comment about the posts
2. E-commerce: These types of websites are like online shops where people can buy
products through online payment from the comfort of their home, office, etc. Anyone who
wants to sell products online can create an E-commerce site instead of investing in setting up
a traditional brick-and-mortar shop.

Web Essentials IT@AVCCE

3. Informational: These websites are created to provide free online information to users,
e.g., tutorials, news, general knowledge-based sites. Today, you don't need to visit libraries to
read a book, newspaper, novel, etc. owing to the presence of lots of informational sites.
4. Online Community: These sites offer a platform to interact and share ideas with others
through internet. You can find people with similar interests and backgrounds and interact
with them to fulfill your objectives that may include promoting a product or service, taking
feedback about your products, or asking questions related to a survey.
5. Social Media: These sites are created to provide users a platform where they can build
their personal profiles with a lot of features such as creating a friend list, sending and
accepting friend requests, sending messages, creating and joining groups, and share
information with others users, comment on others' post, pictures, videos, etc.
6. Brochure: It is the simplest type of website which comprises few pages. It is used by
small businesses to have a simple online presence or to provide an overview of their business.
Such websites are generally static where the content does not change, i.e., the same
information is displayed to all users.
7. Non-profit: The sites are created to raise money for social causes such as to provide free
medical treatment to poor, free basic education to children, free food to children to prevent
malnutrition, etc.

How to Setup a Website?

A website is composed of several elements and while setting up a website, you would have to
take care of each of them.
• To set up a website and make it live, you should first purchase a hosting plan,
• Select a domain name for this website.
• Point the DNS records to the server or the hosting provider.
• Develop the content that you want to publish on the website.
• Check if you need to purchase a public certificate and install it.
• . Publish the webpage on the Internet.
Website Development - Required Skills
The skills required to set up a website can vary from very basic to the most advanced If you
are going to set up a professional website for a global audience, then you should have the
following set of skills or you would have to hire a group of people to do this job for you.
Content Experts
Content experts supply the content that is to be published on the website. They design the
content as per the requirement of the target audience and then, edit and polish the content
before it gets published. Content experts normally rely on the expertise of the site designer
and the webmaster. Note that the content can be text, data, images, audio or links.

Web Essentials IT@AVCCE

Website Designer
A web designer is a technical person who designs and maintains the Graphica User Interface
(GUI) of the website. For example, where the buttons should be placed how the images are to
be displayed, etc.
Graphic Designers
Graphic designers develop image files that are to be included in the website. These
professionals have a keen understanding of developing suitable graphics for the web
environment.
Web Developers
Web developers create the program codes to manipulate the supplied content, based on the
site design established by the website designer. A web programmer should use a set of
programming languages to compile specific functions that the web pages should do in the
background. Here is a set of important programming languages that a web programmer must
be good at “
HTML/XHTML "These are the markup languages which you will use to build your website.
A web programmer must have a good understanding of HTML and XML.
PHP "It is a popular programming language to develop web pages. You can collect more
information on PHP on "[Link]
ERL Script "PERL is another language which is being used to develop interactive Web
Applications. If you are planning to use PERL to develop your website, then please browse
our tutorial - [Link] to know more about PERL.
Java or VB Scripts "These scripts are required to perform user-level validations and to add
more interactivity to your Website. So, a web developer is required to have adequate
knowledge of any of these client-side scripts.
ASP or JSP "Web developers are required to be well-versed with ASP or JSP to develop
interactive websites. To get more information, you can go through our tutorials on ASP and
JSP at [Link] and https:// [Link]/jsp/.
Web Researcher-You should research on new tools, trends and issues affecting the web
technology. Web researchers report to the webmaster regarding new techniques that can be
integrated in the website. They optimize appropriate site traffic and evaluate site development
tools, which can be either hardware or software
Hardware and Software Support Resource- The Support Resource upgrades the hardware
and software as and when needed. They play a crucial role in keeping the system up and
running in a flawless manner.
Marketing and Promotion- Marketing professionals mostly use popular Social Media
Platforms such as Facebook and Twitter to promote the content and resources available on
the site. They reach out to the target audience and create awareness among them.

Web Essentials IT@AVCCE

System Administrator- A System Administrator knows how to set up and point the
protocols as HTTP, FTP, SMTP and DNS records. System administrators are those experts
who look after every aspect of website development and its maintenance.

SCRIPTING LANGUAGE
Definition of Scripting Language:
A scripting language is a programming language designed for integrating and communicating
with other programming languages. Some of the most widely used scripting languages are
HTML, JavaScript, VBScript, PHP, Perl, Python, Ruby, and ASP and so on
• In general, scripting languages are easier to learn and faster to code in more structured
and compiled languages such as C and C++.
• Scripting languages are useful tools for developing interactive web pages with
minimum efforts.
• Scripting Languages are often interpreted (rather than compiled).
• The scripting languages are useful for producing dynamic web contents. That means
web page can be changed using user input.
Advantages of Scripting Languages:
• Scripting languages are easy to learn.
• It requires minimum programming knowledge or experience to develop the web pages
using scripting languages.
• The scripting languages allow simple creation and editing in variety of text editors.
• Using scripting languages we can develop dynamic and interactive web pages.
• There are some scripting languages that validate the information entered by the user.
Types of Scripting Languages
There are two types of scripting languages - Client side scripting language and server side
scripting language.
Server Side Scripting
Server side scripting is used to create web pages that provide some services. These scripts
generally run on web servers. For example: ASP, JSP, Servlet, PHP
Server-side scripting is a technique of programming for producing the code which can run
software on the server side, in simple words any scripting or programming that can run on the
web server is known as server-side scripting. The operations like customization of a website,
dynamic change in the website content, response generation to the user's queries, accessing
the database, and so on are performed at the server end. The server-side scripting constructs a
communication link between a server and a client (user). Earlier the server side scripting is
implemented by the CGI (Common Gateway Interface) scripts. The CGI was devised to
execute the scripts from programming languages such as C++ or Perl on the websites.

Web Essentials IT@AVCCE

The server-side involves three parts: server, database, API's and back-end web software
developed by the server-side scripting language. When a browser sends a request to the
server for a webpage consisting of server-side scripting, the web server processes the script
prior to serving the page to the browser. Here the processing of a script could include
extracting information from a database, making simple calculations, or choosing the
appropriate content that is to be displayed in the client end. The script is being processed and
the output is sent to the browser. The web server abstracts the scripts from the end user until
serving the content, which makes the data and source code more secure.
Server-side scripting languages
After the advent of CGI, multiple programming languages were evolved such as PHP,
Python, Ruby, ColdFusion, C#, Java, C++ and so on for server-side scripting among which
some of them are described below:
PHP: It is the most prevalent server-side language used on the web which was designed to
extract and manipulate information in the database. The language is used in association with
SQL language for the Database. It is used in Facebook, WordPress and Wikipedia.
Python: The language is fast and contains shorter code. It is good for beginners as it
concentrates on the readability and simplicity of the code. Python functions well in the
object-oriented environment and used in famous sites like Youtube, Google, etc.
Ruby: It contains complex logic which packages the back-end with database utility which
can also be provided by PHP and SQL.
• It helps work with the back end.
• It doesn't depend on the client.
• It runs on the web server.
• • It helps provide a response to every request that comes in from the user/client. This
is not visible to the client side of the application.
• It requires the interaction with the server for the data to be process.
• Server side scripting requires languages such as PHP, [Link], ColdFusion, Python,
Ruby on Rails.
• It is considered to be a secure way of working with applications.
• It can be used to customize web pages.
• It can also be used to provide dynamic websites.

Client-Side Scripting
The client side scripting is used to create the web pages as a request or response to server.
These pages are displayed to the user on web browser. For example: HTML, CSS, JavaScript,
PHP

Web Essentials IT@AVCCE

Client-side scripting is performed to generate a code that can run on the client end (browser)
without needing the server side processing. Basically, these types of scripts are placed inside
an HTML document. The client-side scripting can be used to examine the user's form for the
errors before submitting it and for changing the content according to the user input. As I
mentioned before, the web requires three elements for its functioning which are, client,
database and server.
The effective client-side scripting can significantly reduce the server load. It is designed to
run as a scripting language utilizing a web browser as a host program. For example, when a
user makes a request via browser for a webpage to the server, it just sent the HTML and CSS
as plain text, and the browser interprets and renders the web content in the client end.
Client-side scripting languages:
HTML: It is the fundamental building blocks of web programming which provides the frame
to the website. It describes the arrangement of the content.
CSS: CSS provides the way to design the graphic elements which help in making the
appearance of the web application more attractive.
JavaScript: It is also a client-side scripting language which essentially devised for the
specific purpose, but currently there are various JavaScript frameworks used as server- side
scripting technology.
• It helps work with the front end.
• It is visible to the users.
• The scripts are run on the client browser.
• It runs on the user/client's computer.
• It depends on the browser's version.
• It doesn't interact with the server to process data.
• Client side scripting involves languages such as HTML, CSS, JavaScript.
• It helps reduce the load on the server.
• It is considered to be less secure in comparison to client side scripting.
What is a script?
• Script is a small, embedded program.
• The most popular scripting languages on the web are, JavaScript or VBScript
• HTML does not have scripting capability, you need to use <script> tag. • The <script>
tag is used to generate a script.
• The </script> tag indicates the end of the script or program.

Web Essentials IT@AVCCE

Example: Type attribute
<script type="text/javascript">
[Link]("TutorialRide");
</script>
The 'type' attribute indicates which script language you are using with the type attribute.
Example: Language attribute
<script language="javascript">
[Link]("TutorialRide");
</script>
You can also specify the <script language> using the 'language' attribute.
Types of Scripts
1. Client-Side Scripting
2. Server-Side Scripting
1. Client-Side Scripting
• Client-Side Scripting is an important part of the Dynamic HTML (DHTML
• JavaScript is the main client-side scripting language for the web.
• The scripts are interpreted by the browser.
• Client-Side scripting is used to make changes in the web page after they arrive at the
browser.
• It is useful for making the pages a bit more interesting and user-friendly.
• It provides useful gadgets such as calculators, clocks etc.
• It enables interaction within a web page.
• It is affected by the processing speed of the user's computer.
Operation of Client-Side Scripting

In the above diagram,

• The user requests a web page from the server.

Web Essentials IT@AVCCE

 • The server finds the page and sends it to the user.
• The page is displayed on the browser with any scripts running during or after the
display.
• Client-Side scripting is used to make web page changes after they arrive at the
browser.
• These scripts rely on the user's computer. If the computer is slow, then they may run
slow.
• These scripts may not run at all if the browser does not understand the scripting
language.
Server-Side Scripting
• Server-Side Scripting is used in web development.
• . The server-side environment runs a scripting language which is called a web server.
• Server-Side Scripting is used to provide interactive web sites.
• It is different from Client-Side Scripting where the scripts are run by viewing the web
browser, usually in JavaScript.
• It is used for allowing the users to have individual accounts and providing data from
databases.
• It allows a level of privacy, personalization and provision of information that is very
useful.
• It includes [Link] and PHP.
• It does not rely on the user having specific browser or plug-in.
• It is affected by the processing speed of the host server.
Operation of Server-Side Scripting

Figure Server-Side Scripting

In the above diagram,

• The client requests a web page from the server.

Web Essentials IT@AVCCE

 • The script in the page is interpreted by the server, creating or changing the page
content to suit the user (client) and the passing data around.
• The page in its final form is sent to the user(client) and then cannot be changed using
Server-Side Scripting.
• Server-Side Scripting tends to be used for allowing the users to have individual
accounts and provides data from the databases.
• These scripts are never seen by the user.
• Server-Side script runs on the server and generate results which are sent to the user.
• Running all the scripts puts a lot of load onto a server but not on the user's system

Web Essentials IT@AVCCE