uniti-websitebasics-230517110223-12e31dbc (1).pptx

IT2253 Web Essentials
Unit I – Website Basics
KNOWLEDGE INSTITUTE OF TECHNOLOGY
(AUTONOMOUS)
DEPARTMENT OF INFORMATION TECHNOLOGY

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.

Fundamental Computer Network Concepts
• Network: The interconnection of a set of devices capable of communication.
• Adevice can be a host (or an end system) such as a large computer, desktop, laptop,
workstation, cellular phone, or security system.
• Adevice 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.

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.

IPAddress
• 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.
• 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.
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

Network Physical Structure
• Anetwork is two or more devices connected through links.
• Link: Acommunications pathway that transfers data from one device to another.
• Types of Connection
o Point-to-point link
o Multipoint link

• 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

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 IPpackets.
• 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.
HTTPREQUEST
• Every HTTP request message has the same basic structure:
• Start line
• Header field(s)
• Blank line
• Message body (optional)

HTTPREQUEST
• Every start line consists of three parts, with a single space used to separate adjacent
parts: 1. Request Method, 2. Request URI, 3. HTTPVersion
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.

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

HTTPREQUEST
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

HTTPREQUEST
3. HTTPVersion
 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

HTTPRESPONSE
• The structure of response message is as follows:
• Status line
• Header fields
• Blank line
• Message body
STATUS LINE: It consist of three fields
1. HTTPVersion: 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

HTTPRESPONSE
Status
Code
Reason
Phrase
Description
200 OK A standard response for successful request
201 Created
Shows that the request is fulfilled and a new resource is
being created
202 Accepted
When the request is accepted for processing but is not
processed yet is denoted by this status code
404 Not found
The requested resource is not present currently but may be
available in future
403 Forbidden
The requested resource is present currently but the server is
not able to respond it.
500
Internal
Server Error
It is a generic error message that appears due to software
internal failure

HTTPRESPONSE
• The header field in response message is similar to that of request message.
• 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 HTMLPUBLIC “-//W3C//DTD HTML 4.01 Transitional //EN”>
<HTML> .....</HTML>
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

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.
HTTPTUNNELING
 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
• Aclient/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.

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).

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 BrowserArchitecture

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.

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 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 asApache 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 IPaddresses.
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.

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 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 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 Servers

Difference between Web server and Database server
Web server Database server
Web server makes use of the
languages like PHP, ASP, JSP. It
makes use of the protocols such as
FTP and HTTP.
The database server has its own specific
program language or query languages.
Web server is used to save the
static and dynamic content and
pages of websites.
Database server deals with the storing and
managing the data of a computer or
computer programs.
Web server only performs web-based
services.
Database server can manage the web
based, enterprise based or business-based
services at the same time.
Apache HTTP Server, Microsoft
Internet Information Services (IIS)
Google web Server (GWS) and Sun Java
System Web Server are examples of web
server.
Oracle, SAP, MySQL and DB2 are some
common examples of database server.

Difference betweenApache and IIS
Apache web server IIS web server
Apache web server is useful on both
Unix based systems and on Windows
platform.
IIS web
platform.
server is used on Windows
It is an open-source product.
It is a vendor specific product and can be
used on windows products only.
The Apache web server can be controlled
by editing the configuration file
httpd.conf.
For IIS server, the behavior is controlled by
modifying the window-based management
programs called IIS snap in. We can access
IIS snap-in through the Control Panel 
Administrative Tools.

Difference betweenApplication Server and Web Server
Application Server Web Server
A server that exposes business logic to client
applications through various protocols
including HTTP.
A server that handles HTTP protocol.
Application server is used to serve web-
based applications and enterprise applications
(i.e servlets, JSP and EJB etc). Application
servers may contain a web server internally.
Web server is used to serve web-based
application (i.e servlets and JSP)
To deliver various applications to
another device, it allows everyone in the
network to run software off of the same
machine.
Keeping HTML, PHP,ASP, etc files
available for the web browsers to view
when a user accesses the site on the web,
handles HTTP requests from
clients.
It makes use of distributed transaction and
EJB’s.
It makes use if Servlets and JSP.
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
• Abalanced distribution of contents and graphics is required.
• Slightly contrasting colors and clear fonts is also necessary.

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.

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.

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
some services.
It is used to create the webpages as a request
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
directly on the web server to generate dynamic
HTML pages. This HTML is then sent to the
client browser.
The processing of these scripts takes place on
the end users’ computer. The source code is
transferred from the web server to the user’s
computer over the internet and run directly in
the browser.
Uses: Processing of user request, accessing to
databases.
Uses: Making interactive webpages, for
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
programming languages including C++, Java
and C#.
Example: HTML, CSS, JavaScript
(primarily)

uniti-websitebasics-230517110223-12e31dbc (1).pptx

Recommended

Recommended

More Related Content

Similar to uniti-websitebasics-230517110223-12e31dbc (1).pptx

Similar to uniti-websitebasics-230517110223-12e31dbc (1).pptx (20)

More from bmit1

More from bmit1 (6)

Recently uploaded

Recently uploaded (20)

uniti-websitebasics-230517110223-12e31dbc (1).pptx