IT3401 Web Essentials

Unit I – Website Basics

Prepared by
Dr.S.SAJITHABANU ASP/IT
Mohamed Sathak Engineering College
 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
• Internet is global system in which millions of computers are connected together, It
is basically a network of networks.
• Using internet many people can share resources and can communicate with each
other.

• To have internet service one must go to the service providers that means your
computer must be connected to Internet Service Providers (ISP) through phone-line
modem or DSL.

• There are some privately owned interest service providers from which we can hire
the internet services.

• The internet is the collection of computers that can communicate with one another
using TCP/IP over an open, global communications network.
 World Wide Web (WWW)
• WWW is a collection of software and corresponding protocols used to

access the resources over the Internet.

• WWW is a information system in which various documents containing

information are interlinked together.

• This information is typically stored on the web pages and through web

browsers we can access these web pages.

Client Server Architecture
Client Server Architecture
 Fundamental Computer Network Concepts
• Network: The interconnection of a set of devices capable of communication.

• A device can be a host (or an end system) such as a large computer, desktop, laptop,
workstation, cellular phone, or security system.

• A device can also be a connecting device such as

– Router, which connects the network to other networks.

– Switch, which connects devices together.

– Modem (modulator-demodulator), which changes the form of data.

• Computer systems and peripherals are connected to form a network.

 Fundamental Computer Network Concepts
Computer Network Types

• Local Area Networks (LANs): Allows multiple users in a relatively small

geographically area to exchange files and messages and to access shared resources
such as file servers.

• Personal Area Networks (PANs): It covers the area of 30 feet. The PANs are used
to develop network of laptops, mobile phones, media player and play stations.
Small office network can be built with PANs.

• Wide Area Networks (WANs): Interconnect LANs across normal telephone lines
and other media, thereby interconnecting geographically dispersed users.

• Metropolitan Area Networks (MANs): A network that covers larger geographical

area by connecting different LANs interconnected using telephone exchange line.
Generally Government agencies use MAN.
 Fundamental Computer Network Concepts
IP Address

• Each host on a TCP/IP network is assigned a unique 32-bit logical address that is
divided into two main parts: the network number and the host number.

• The IP address is grouped four into 8-bits separated by dots.

• There are 5 classes based on two parts.

Class Format Range Purpose

Class A N.H.H.H 1 to 126 Very few large organizations
Class B N.N.H.H 127 to 191 Medium size organizations
Class C N.N.N.H 192 to 223 Relatively small organizations
Class D - 224 to 239 Used for multicast groups
Class E - 240 to 254 Reserved for experimental purpose

• IP address is assigned to the devices participating in computer network. The IP

protocol makes use of this address for communication between two computers.
Using IP address particular node can be identified in the network.
 Fundamental Computer Network Concepts
Network Physical Structure

• A network is two or more devices connected through links.

• Link: A communications pathway that transfers data from one device to another.

• Types of Connection

o Point-to-point link
o Multipoint link
 Fundamental Computer Network Concepts
• Physical topology refers to the way in which a network is laid out
physically.

• The topology of a network is the geometric representation of the

relationship of all the links and linking devices (usually called nodes) to
one another.

• There are four basic topologies possible:

o Mesh Topology
o Star Topology
o Bus Topology
o Ring Topology
 Fundamental Computer Network Concepts
Protocol Layering

• In data communication and networking , a protocol defines the rules that both the
sender and receiver and all intermediate devices need to follow to be able to
communicate effectively.
 Web Protocols
File Transfer Protocol (FTP)

• The file transfer protocol sets the rule for transferring files between
computers.

• When user wants to download a file from the server FTP is used.

• FTP uses two connections between client and server. One connection is
used for actual data transfer and other is used for control information
(used for commands). This separation of data and commands makes the
FTP more efficient.
 Web Protocols
Hyper Text Transfer Protocol (HTTP)

• It is a request/response protocol.

• It is the communication protocol used to transfer the information on the

local area network and world wide web(WWW).
• It is the network protocol used to deliver virtually all files and other data
(collectively called resources) on the World Wide Web, Whether they’re
HTML files, image files, query results, or anything else.

• Usually, HTTP takes place through TCP/IP sockets.

• It is also called as a stateless protocol because this protocol is not able to

maintain the previous conversation/information.
 Web Protocols
Simple Network Management Protocol (SNMP)

• It enables network administrators to manage network devices and to

diagnose network problems.

• The network management system is based on two main elements : a

supervisor and agents.

• The supervisor is the terminal at which the network administrator request

for network management.

• The agents are found at level of each interface connecting the managed
devices to the network. With the help of these agents information on the
different objects(such as switch, hub, routers) can be collected.
 Web Protocols
Simple Mail Transfer Protocol (SMTP)

• It is a simple protocol which is extensively used for transfer of emails to

remote servers.

• It is an asynchronous protocol, because it allows delayed delivery of

message.

• With the help of mail transfer agent and user agent the SMTP sends and
receives the emails
 Web Protocols
Post Office Protocol (POP3)

• It is used by local email clients (such as Microsoft Outlook Express).

• It works only at the receiver ends and has no work at the sender’s end.

• The POP protocol has two parts: a client POP (i.e.,) the receiver’s POP
and a server POP (i.e.,) receiver's email server.

• The client opens TCP connection with receiver’s POP server. This client
must be authenticated first by using the user name and password . Then
client can receive the emails from the mailbox.
 Web Protocols
Transmission Control Protocol (TCP)

• Safe delivery of data, Error detection, Assurance of the correct sequencing of

data being received.

• It is connection oriented protocol because before sending the data this

protocol requires that two computer have established connections.

• The TCP allows the transmission of arbitrary amount of data by breaking it into
stream of separate IP packets.

• These IP packets are numbered so that it could be reassembled properly at

arrivals.

• Along with the data an acknowledgement is also sent/received in order to

know whether the reliable connections has occurred or not.
 Web Protocols
User Datagram Protocol (UDP)

• It is a connectionless protocol without any error detection facility.

• It is used for simply transmission of data.

• It is a unreliable protocol however this is much faster than TCP.

Internet Protocol (IP)

• It is a network layer protocol which consists of addressing information.

• Using this information the communication between uniquely addressed

computers is possible.
 Hyper Text Transfer Protocol
• HTTP is a communication and stateless protocol.
• Request response model: The client makes a request for desired web page by
giving the URL in the address bar. The request is submitted to the web server and
then web server gives the response to the web browser by returning the required
web page.

HTTP REQUEST
• Every HTTP request message has the same basic structure:
• Start line
• Header field(s)
• Blank line
• Message body (optional)
 Hyper Text Transfer Protocol
HTTP REQUEST

• Every start line consists of three parts, with a single space used to separate adjacent
parts: 1. Request Method, 2. Request URI, 3. HTTP Version

1. Request Method
 It defines the CONNECT method which is used during the web browser and server
communication.
 It is always written in Upper Case letters.
 The GET method is used when
a. You type a URL in address bar
b. When you click on some hyperlink which is present in the document
c. When browser downloads images for display within a HTML document
 The POST method used to send information collected from user form.
 Hyper Text Transfer Protocol
HTTP REQUEST

1. Request Method

METHOD DESCRIPTION
Return the resource specified by the request URI as the body of a
GET
response message.
Pass the body of this request message on as data to be processed by
POST
the resource.
Return a list of HTTP methods that may be used to access the resource
OPTIONS
specified.
Store the body of this message in the server and assign the specified
PUT
Request – URI to data stored to get future GET request message.

DELETE Useful in deleting the specified resource.

 Hyper Text Transfer Protocol
HTTP REQUEST

2. Request-URI
 The Uniform Resource Identifier (URI) is a string used to identify the names or
resources on the Internet.
 The URI is a combination of URL and URN.
 The URL (Uniform Resource Locater) denotes the web address and URN (Uniform
Resource Name) denotes specific name of the place or a person or item.
 URN Example: ISBN 978-81-8431-123-2 specifies the address of some book.

URL Intended server

ftp://ftp.mywebsite.com/index.txt File can be located on FTP server
telnet://mywebsite.org Telnet server
http://www.mywebsite.com Web server
 Hyper Text Transfer Protocol
HTTP REQUEST

3. HTTP Version
 The official version of HTTP is HTTP/1.1
 The version string for HTTP/1.1 must appear in the start line with all capital letters
and no embedded space.
 The header fields are in the form of field name and field value.
 The structure of http request is
 Hyper Text Transfer Protocol
HTTP RESPONSE
• The structure of response message is as follows:
• Status line
• Header fields
• Blank line
• Message body

STATUS LINE: It consist of three fields

1. HTTP Version: Denotes the HTTP version such as HTTP/1.1

2. Status Code: Numeric code indicating the type of response

3. Reason Phrase: Presents information about the status code.

Example: HTTP /1.1 200 OK

 Hyper Text Transfer Protocol
HTTP RESPONSE

Status Reason
Description
Code Phrase
200 OK A standard response for successful request
Shows that the request is fulfilled and a new resource is
201 Created
being created
When the request is accepted for processing but is not
202 Accepted
processed yet is denoted by this status code
The requested resource is not present currently but may be
404 Not found
available in future
The requested resource is present currently but the server is
403 Forbidden
not able to respond it.
Internal It is a generic error message that appears due to software
500
Server Error internal failure
 Hyper Text Transfer Protocol
HTTP RESPONSE
• The header field in response message is similar to that of request message.
Header Field Description
Date Represents the date and time at which the response is generated
Server Name of the server which is responding
Last modified Represents the date and time at which the response is last modified
• The message body consist of response message
Example
HTTP/1.1200 OK
Date : Fri, 1 Jan 2010 07:59:01 GMT
Server : Apache/2.0.20(Unix) mod_perl/1.99_10 Perl/v5.8.4 mod_ssl/2.0.50 OpenSSL/0.9.7d DAV/2 PHP/4.3.8
Last-Modified: Mon,23Feb 2009 08:32:41 GMT
Accept-Ranges : bytes
Content-Length: 2010
Content-Type:text/html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional //EN”>
<HTML> ..... </HTML>
 Hyper Text Transfer Protocol
CACHE CONTROL
 Cache is used as repository. Use of cache improves system performance.
 Many web browser stores web pages viewed by the client in the cache memory.
HTTP TUNNELING
 It is a mechanism by which the communication performed by various network
protocol is encapsulated by the HTTP protocol.
 The application that wishes to communicate with a remote host opens an HTTP
connection to a mediator server.

 Using HTTP request the host communicates with the mediator server by
encapsulating the actual communications within those requests.

 The mediator server then unwraps the data and send to the remote destined host.
 The remote host when sends the response to the requesting host, wraps the response
in the HTTP protocol and then the response is given.
 URL
 The Uniform Resource Locator (URL) is unique address for the file that has to be
accessed over the internet.
 When anyone want to access some website, they have to enter its URL in the
address bar of the web browser.
 Example: if you want to access www.google.com then you must specify its URL in
the address bar.

 Sometimes instead of domain name serve IP address can also be use. For example,
http://192.168.0.1

 But use of IP address as URL is not preferred because human cannot remember
numbers very easily, but they can remember names easily.
 URL
 Absolute URL: This type of URL contains both the domain name and
directory/page path. An absolute URL gives complete location information.
Syntax: protocol://domain/path

 Relative URL: This type of URL contains the path excluding the domain
name. Relative path is used for reference to a given link of a file that exist within
the same domain. Thus, using relative URL writing of long path name can be
avoided.
 Domain Name
• It is very difficult to remember numerical information, but it is simple to remember
the textual information.

• Domain Name System (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.

• It also does the reverse process.

• DNS uses User Datagram Protocol (UDP).

• DNS service uses port number 53.

 Domain Name
DNS Hierarchy

• The domain namespace is is used to locate the computer uniquely.

• The internet arranges the domain names in a hierarchical form.

Domain Names Purpose

com Commercial organization
gov Government organizations
edu Educational institutes/organizations
int International organization
net Network group
org Non-profit organization
mil Military group/organizations
in Sub domain name used to refer India
uk Sub domain name used to refer United Kingdom
jp Sub domain name used to refer Japan
 Domain Name
DNS Hierarchy

• There are some top-level DNS such as com, org, edu, mil, net, uk, in and son on.
 Domain Name
Working of DNS
• A client/server network communication protocol.
• 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.
• If a client like a web browser sends a request containing a hostname, then a piece of
software, 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.
 Domain Name
Working of DNS
 Web Browsers and Web Servers
Web Browsers
 Web client is a kind of software that runs on the client’s machine.
 This software sends the HTTP request to the server and then processes the HTTP
response.
 The commonly used web browsers are (i) Internet explorer (ii) Mozilla Firefox
(iii) Netscape Navigator (iv) Opera (v) Google Chrome (vi) Safari.
 Web browser supports variety of protocols but the most used protocol on the web
browser is Hyper Text Transfer Protocol (HTTP).
 Web Browsers and Web Servers
Functions of Web Browsers
 Reformats the URL and send a valid HTTP request.
 When user gives the address of web site it is in the form of domain name. The web
browser coverts the DNS to corresponding IP address.
 The web browser establishes a TCP connection with the web browser while
processing the user’s request.
 The web browsers send the HTTP request to the web server.
 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 web page in appropriate format.
 Web Browsers and Web Servers
Web Browser Architecture
 Web Browsers and Web Servers
Web Browser Architecture
User Interface: Using the user interface user interacts with the browser engine.
Browser Engine: The browser engine is responsible for querying the rendering
engine according to various input of user interfaces.
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 component of rendering engine is HTML Parse. The job of the
HTML parser is to parse the HTML markup into parse tree.
JavaScript Interpreter: The interpreter executes the JavaScript code which is
embedded in a web page.
 Web Browsers and Web Servers
Web Browser Architecture
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.
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 use data such as bookmarks,
cookies, and preferences.
 Web Browsers and Web Servers
Web Servers
 Web server is a special type of server to which the web browser submits the request
of web page which is desired by the client.
 There are some popularly used web server such as Apache and IIS from Microsoft.
Functions of Web Servers
1. The web servers accept the request from the web browsers.
2. The user request is processed by the web server.
3. The web server responds to the users by providing the services which they demand
for over the web browsers.
4. The web servers serve the web-based applications.
5. The DNS translate the domain names into the IP addresses.
6. The servers verify given address exists, find necessary files, run appropriate scripts
exchange cookies if necessary and returns back to the browser.
7. Some servers actively participate in session handling techniques.
 Web Browsers and Web Servers
Working Principle of Web Servers
• Step 1: Web client requests for the
desired web page by providing the IP
address of the website.
• Step 2: The web server locates the
desired web page on the website and
responds by sending back the
requested page. If the page doesn’t
exist, it will send back the appropriate
error page.
• Step 3: The web browser receives the
page and renders it as required.
 Web Browsers and Web Servers
Web Servers
1. Apache
• Features: Reliability and Efficiency.
• An open-source software. Freely available to anybody. Apache web server is best
suitable for UNIX systems but it can also be used on Windows box.
• The apache web server can be configured as per the requirements using the file
httpd.conf.
2. IIS
• The Internet Information Services or Internet Information Server is a kind of web
server provided by Microsoft.
• This server is most popular on Windows platform.
 Web Browsers and Web Servers
Web Servers
3. Database server
• It have a lot of data to deal with a regular basis. If you have client-server
architecture where the clients need process data too frequently, it is better to work
with a databases server.
• All database functions are controlled by the database server.
• Examples of proprietary database servers include Oracle, DB2, Informix, and
Microsoft SQL Server.
• Examples of free software database servers include PostgreSQL.
 Web Browsers and Web Servers
Web Servers
 Web Browsers and Web Servers
Difference between Web server and Database server
Web server Database server
Web server makes use of the
languages like PHP, ASP, JSP. It The database server has its own specific
makes use of the protocols such as program language or query languages.
FTP and HTTP.
Web server is used to save the Database server deals with the storing and
static and dynamic content and managing the data of a computer or
pages of websites. computer programs.
Database server can manage the web
Web server only performs web-based
based, enterprise based or business-based
services.
services at the same time.
Apache HTTP Server, Microsoft
Internet Information Services (IIS)
Oracle, SAP, MySQL and DB2 are some
Google web Server (GWS) and Sun Java
common examples of database server.
System Web Server are examples of web
server.
 Web Browsers and Web Servers
Difference between Apache and IIS
Apache web server IIS web server
Apache web server is useful on both
IIS web server is used on Windows
Unix based systems and on Windows
platform.
platform.
It is a vendor specific product and can be
It is an open-source product.
used on windows products only.
For IIS server, the behavior is controlled by
The Apache web server can be controlled modifying the window-based management
by editing the configuration file programs called IIS snap in. We can access
httpd.conf. IIS snap-in through the Control Panel 
Administrative Tools.
 Web Browsers and Web Servers
Difference between Application Server and Web Server
Application Server Web Server
A server that exposes business logic to client
A server that handles HTTP protocol.
applications through various protocols
including HTTP.
Application server is used to serve web-
based applications and enterprise applications Web server is used to serve web-based
(i.e servlets, JSP and EJB etc). Application application (i.e servlets and JSP)
servers may contain a web server internally.
Keeping HTML, PHP,ASP, etc files
To deliver various applications to
available for the web browsers to view
another device, it allows everyone in the
when a user accesses the site on the web,
network to run software off of the same
handles HTTP requests from
machine.
clients.
It makes use of distributed transaction and
It makes use if Servlets and JSP.
EJB’s.
Resource utilization is high. Resource utilization is low.
 Working Principle of a Website
Features of Website Design
1. Quality Web Content
• People desire information in fast and reliable fashion.
• For business websites, content should include important information.
• Display high quality pictures of their products.
• Highlight for client testimonials.
2. Clear, User-friendly Navigation
• Allows visitors to quickly find the information needed.
• A search box is suggested to make it faster to reach more specific pages within a
website.
3. Simple and Professional Web Design
• A balanced distribution of contents and graphics is required.
• Slightly contrasting colors and clear fonts is also necessary.
 Working Principle of a Website
Features of Website Design
4. Webpage Speed
• The website with heavy graphics, audio and video takes more time to load.
• Maintain the desirable speed of the website.
5. Search Engine Optimization
• This allows the insertion of search keywords in website content, an appropriate link
profile, social media signals.
6. Web Compatibility
• A web site 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.
 Working Principle of a Website
Website Design Issues
Jean Kaiser has suggested following design goals for the web design:
1. Simplicity: Avoid lot of animations, huge amount of information, extreme visuals
and so on.
2. Identity: Web design 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.
3. Consistency: The contents of the web application should be constructed consistently.
For example: text formatting, font style, the graphics design, color scheme and style.
hypermedia structure, navigation and content display.
4. Robustness: The users always expect robust contents and functions of the web
application. If any function or content is missing or insufficient, then that web
application will fail.
 Working Principle of a Website
Website Design Issues
5. Navigability: The navigation should be simple and consistent. The design of
navigations should intuitive and predictable in nature.
6. Visual appeal: The web applications are most visual and most dynamic and aesthetic
in nature. The various factors of visual appeal are Look and feel of the content,
interface layout, color co-ordination, the balance of text, graphics and other media,
navigation mechanism and so on.
7. Compatibility: The web application can be used in variety of environment and
configuration such as different browsers, internet connection types, operating systems
and various browsers.
 Creating a Website
 Web site is a collection of web pages that are grouped together to achieve certain
task under single domain name.
 Each web page may contain texts, photos, videos, social media buttons and so on.
 Technically, a webpage is a special type of document written in scripting language
such as HTML, CSS, JavaScript and PHP.

Why do people visit web site?

1. To find the required information.
2. To complete a task.
 Creating a Website
Steps for Creating the Website
1. Website Creation: Create a web page using suitable scripting language.
2. Choose the Web Hosting Service: Web hosting company hosts your web pages on
web server. Thus, your web site will be available to anyone who knows your URL.
3. Registering Domain Name: Domain name is an alias that points to actual location
of your web site on Web server.
4. Planning your website: Make a number of important decisions like type,
navigation design and content.
5. Uploading Files: To publish a website on the web, you must send the webpages
created by you on the web server using a File Transfer Protocol (FTP).
 Creating a Website
Testing the Website
1. Multiple Browser: Ensure that the contents of the website are consistently
displayed and portable.
2. Multiple Operating Systems: Display the website on different operating system
3. Connection Speed: Test the download time for different connection speed.
4. Device Types: Test the website on the computers having different screen size.
5. Links: Use a link validation tool to ensure that all of your links connect to a live
page.
6. Security Testing: Test the security vulnerabilities in application running on the
website.
 Client-side and Server-side Scripting
• There are two types of scripting languages client-side scripting languages and
server-side scripting languages.
• Client-Side Scripting Languages: It is used to create the webpages as a request or
response to server. These pages are displayed to the user on web browser.
Example: HTML, CSS, JavaScript, PHP.
• Server-Side Scripting Languages: It is used to create the webpages that provide
some services. These scripts generally run on web servers. Example: ASP, JSP,
Servlet, PHP.
 Client-side and Server-side Scripting
Difference between client-side scripting and server-side scripting
Server-Side Scripting Client-Side Scripting
It is used to create the webpages that provide It is used to create the webpages as a request
some services. or response to server. These pages are
displayed to the user on web browser.
These scripts generally run-on web servers. These scripts generally run-on web browser.
A user's request is fulfilled by running a script
The processing of these scripts takes place on
directly on the web server to generate dynamic the end users’ computer. The source code is
HTML pages. This HTML is then sent to the transferred from the web server to the user’s
client browser. computer over the internet and run directly in
the browser.
Uses: Processing of user request, accessing to Uses: Making interactive webpages, for
databases. interacting with temporary storages such as
cookies or local storage, sending request to
server and getting the response and displaying
that response in web browser
Example: PHP, ASP.NET, nearly all the Example: HTML, CSS, JavaScript
programming languages including C++, Java (primarily)
and C#.