M o du le 1

4 TH C O F F E E

Introduction to Web
Design
 What is Internet??? • The Internet is a massive
network of networks.

• It connects millions of
computers together
4 TH C O F F E E

globally.

• Forms a network in which

any computer can
communicate with any
other computer.

• Group of two or more

Internet is a world-wide global computer systems linked
system of interconnected computer together.
networks.
 What is Web???
• World Wide Web was designed by Tim
Berners-Lee in 1991.
4 TH C O F F E E

System of interlinked hypertext

documents accessed via the Internet.

World Wide Web Web

• Network of online information includes
web pages, pictures, audios, videos and
other online content which is formatted in World Wide Web =
HTML and accessed via HTTP. Hypertext + Internet
 Terminology : WWW
Web Pages :
A Webpage is a document written in HTML that is shared across the Web.
4 TH C O F F E E

Web Site:
A Website is simply a collection of Webpages located on a same domain.

Web Browser :
Web browser is a program/application used to communicate with web
server on the Internet. i.e pages can be retrieved and viewed.

Hyper-Text :
Hypertext is text which contains links to other resource. The link is
usually an underlined word or sentence, points to another document. The
current document is replaced with the one indicated in the link.
 URL URL :Uniform /Universal Resource Locator.
• A Uniform Resource Identifier (URI) is a strings of characters used to
identify names or resources on the Internet.
• A name of something (URN) without a way to locate it.
• A name of a something (URN) with a way to located it (URL)
4 TH C O F F E E

• URL is the global address of documents and other resources on the

World Wide Web.

• To identify the location of a document and other web resources available

on the Internet, and specify the mechanism for accessing it through a
web browser.

• A URL is a specific character string that constitutes a reference to an

Internet resource.
 scheme : // host : port / path/ / ? query-string

1 2 3 4 5

1.Scheme :
4 TH C O F F E E

• Scheme identifies the protocol to be used to access the resource on the

Internet.
Example: http://, ftp://

2.Host:
• Host name identifies the host where resource is located.
• A hostname is a domain name assigned to a host computer.
• This is usually a combination of the host's local name with its parent
domain's name.
Example : http://www.google.com
http://www.walchandsangli.ac.in
 3. Port Number :
• Service of server to be accessed(Specific request).
Example : 192.168.1.8:8090/httpclient.jsp

4.Path :
4 TH C O F F E E

• Path identifies the specific resource or web page within the host that the
user wants to access.
Example: http://www.walchandsangli.ac.in/result.asp

5.Query String:
• Query string contains data to be passed to server-side scripts, running
on the web server.
• Example: https://www.google.com/search?q=java
?user_name=John&password=12345
 Web Vs Internet???
The internet is a massive network of networks, a networking infrastructure.

The World Wide Web, or web, is a way of accessing information over the medium
4 TH C O F F E E

of the internet.

Internet allow different computers around the World to talk to one another.

The Web (or World Wide Web) is the system of web pages and sites that uses
the Internet to pass the files across

The Web is just one of many services that use the Internet –services include e-
mail, internet telephony and peer-to-peer file transfers.
 Client-Server Architecture
Client :
• A computer which is seeking any
resource from another computer.
• Active
4 TH C O F F E E

• Temporal
• Example: Downloading a file from
a File Server, Browsing
Intranet/Internet etc.

Server:
• A computer has a resource which is
served to another computer
The client establishes a connection to a • Passive
Server and accesses the services installed • Always Open
on the Server.
 Types of Server :
File Server:
• File servers are used to store the user documents and files centrally.

Mail Server:
• Mail Servers are used to transmit emails using email protocols.
4 TH C O F F E E

Application Server:
• Common computer applications or programs run in a central server.
• Enables multiple network users to access common network applications from
the network.

Database Server:
• Allows authorized network clients to create, view, modify and/or delete an
organization's data, stored in a common database.

Directory Servers:
• Allows central administration and management of network users and network
 Two Tier Architecture:
• Basic client-server model.

• The application at the client end directly Client System Server/ Data
communicates with the database at the Source
4 TH C O F F E E

server side.

• The server side is responsible for

providing query processing and
transaction management functionalities.

• The user interfaces and application

programs are run.
 Three Tier Architecture:
• An intermediary level. Presentation
Server
• Three Layers:
1.Presentation Layer:
• Requests the resources,
4 TH C O F F E E

equipped with a user interface

(web browser)
Application
2. Application server(Middleware): Server
• Provide the requested
resources, but by calling on
another server
3. Data server:
• Provides the application
server with the data that it Data Server
requires:
 File Server
Web Server
• A web server is a system which runs
websites. Web Server
4 TH C O F F E E

• To store Web content.

Client
• To host the web sites

• How Web server works?? Data Server

• Generating response by using
the script and communicating
with database/data sourec.
• Sending file to the client
associated with the requested General Server
URL. Database
Server
 Client Side Scripting
• Static Web Pages
• Static web pages are pages that are written in HTML.
• Static pages are ideal for pages that don’t change very frequently.
• Web Browser can handle request.
4 TH C O F F E E

• Example : HTML, JavaScript

Request :
HTML

Response :
HTML
Working??
1. The browser sends request for .html to the remote (web) server.
2. The web server sends the HTML file back without any more processing.
 Server Side Scripting
• Dynamic Web Pages and interactive web sites.
• A dynamic page is one that changes or is created when it is requested.
• Dynamic pages are ideal for pages that change very frequently.
• Web Browser cannot handle request.
• Web Server process requests.
4 TH C O F F E E

• Example : PHP,ASP.NET,JSP
Request : Request
PHP/ASP.NET

Response :
Response
HTML
Working??
1. The browser sends request for .php/.asp to the remote server.
2. The web server recognizes the extension, and does a processing on the file in
order to generate a temporary file/request.
3. The web server sends the request file to server.
4. Server reply back with answer to web server.
5. Web Server sends response to client in .html.
 Web Hosting
• Web hosting is a service.

• Allows organizations and individuals to post a website or web page onto the
4 TH C O F F E E

Internet.

• Web Hosting Service Provider :services needed for the website or webpage
to be viewed in the Internet
• Examples: GoDaddy, JustHost, HostGator, Bluehost, etc

• Websites are hosted, or stored, on special computers called servers.

• Domain
 Domain
• Domain names are GATEWAY to the online/Internet world.
• Purchase a domain name for website.

• Domain Name Registrars :

• Register and purchase domain names
4 TH C O F F E E

• Manage the domain names.

• Add name to the list.
• Accredited by ICANN (Internet Corporation for Assigned Names and
Numbers).
• Non-profit.
• To manage the Domain Name System.
• Domain name followed by .com, .in, .edu, .gov

• DNS-Domain Name System :

• Hard-to-remember IP addresses
• DNS helps us convert the URL into an IP address that the computer can
understand.
 Types of Web Hosting:

1.Shared Web Hosting:

• Website is hosted on a server shared by other websites
• shared cost.
• Cost : $10.
4 TH C O F F E E

2. Virtual Private Server (VPS)

• Share one physical server but acts like multiple, separate servers.
• Shared hosting and getting your own dedicated machine.
• Each VPS instance shares hardware resources.
• Allocated a dedicated slice of the computing resources.
• Price Range: cost between $50 and $200.
 3.Dedicated Web Server :
• One physical server from a hosting company shared cost.
• Full control.
4 TH C O F F E E

• High cost : $100.

4. Self Service Web Hosting :

• Buy the servers, install and configure the software.
• Data center space, cooling power (with backup),bandwidth, server hardware
• Systems administrator data integrity and backup
 5.Cloud Based Web Hosting
• Hundreds of individual servers work together so that it looks like one giant
server.
• Need grows, the hosting company can just add more commodity hardware
to make an ever larger grid or cloud.
• Unusually large amount of website traffic the web hosting plan can
4 TH C O F F E E

accommodate.
• Pricing : pay-for-what-you-use.

6.Managed Web Hosting

• Online management packages.
• Hardware/Software set up, configuration, maintenance.
• Example : WordPress, Wix.com
• Pricing : None
 What we have??
Hosting Web-Site • Domain name
• Domain Name Servers : domain name is properly
routing visitors to website when they type in the
domain name.

How to host??
4 TH C O F F E E

• Actual website is a bunch of files: HTML files,

CSS files (style sheets), images and photos, etc.
• All of these files need to be in a folder on a
computer that is connected to the Internet called
“server”/”Web-server”
• Paying company to put files on their web server=
buying hosting.
• i.e. hosting website on servers.

Visit the website??

• Type the domain name into web browser.
• The DNS redirects user request to server .
• server has website files hosted on it which will respond to query.
 Media of Web
1. Web Client : User/Browser
2. Communication Link
3. Server:
4 TH C O F F E E

1. Web Server
2. Data base Server
3. File Server
File Server
Client Server
Communication Link

Database
Server
 Types of Web Sites
provide information about a particular subject or organization,
Informational
most common

Transactional provide transaction or task, E-commerce

4 TH C O F F E E

interaction between the visitors of the site, encourage

Community
interaction between likeminded individuals

Entertainment amusing interaction, fun, interactions of individuals

Government For government organization: task/transactions

Educational Information and transaction related with education

provide information about a individual interest, personal Web

Personal
spaces such as Web logs
 Anatomy of Web-Page
• Title of web page at the top of title bar
Page Title • This is the only web page element within the head section of
the web page the visitor will see.
4 TH C O F F E E

• Area at the top of the page.

Page header • usually contains a logo for the website.
• common theme throughout site

• web page file name.

File Name • Any set of string with no space; hyphens; underscores
• Extension : .html, .php, .asp

• a tree diagram or a directory with nested sub folders.

Site structure • most important sections or topics and inside those, further
sub-sections. easy to navigate
 • at the top of the site structure.
Main- • The first item is usually a link back to the Home page.
Navigation • hamburger menu : navigation on a mobile design.
4 TH C O F F E E

• Refers to pages below the top level of the website.

Secondary • Changes depending on which area of the site the visitor is
Navigation browsing

• Below header : Home > Department>CSE

Meta tags • Navigational Aid: shows at a glance where the visitor is
located in the site structure.

• refer to the large images at the top of the page

Hero images or • grabs the visitor's attention
banner images
 • hosted on own website.
Full-screen and • to upload it to a platform like YouTube and then embed it in
embedded videos content
4 TH C O F F E E

• Can be anything like text, images, videos, animations

Web Page • Content width : Spanning of text over page.
Content

• text-only list of all the pages on the website with links to each
Site map page.
• Helps for visitors and search engine

• consists of links to important (but not very interesting) pages

Page footer on the site, such as the terms & conditions, site map and a
contact page