23
Fundamentals of Web designing Ministry of Higher Education Bamyan University Computer Science Department 1 Presented by : Mustafa Kamel Mohammadi Email : [email protected] How the Web works?

Web design - How the Web works?

Embed Size (px)

Citation preview

Page 1: Web design - How the Web works?

1

Fundamentals of Web designing

Ministry of Higher EducationBamyan University

Computer Science Department

Presented by : Mustafa Kamel MohammadiEmail : [email protected]

How the Web works?

Page 2: Web design - How the Web works?

2

learning objective In this chapter you will learn

What is web? How does the web works? What is a web server? What is a browser?

Page 3: Web design - How the Web works?

3

Internet vs. Web• The Internet is network of connected computers that electronically connects

millions people of world wide.• No company owns the Internet, it is a cooperative effort governed by a system of

standards and rules.• The purpose of connecting computers together, of course, is to communicate and

share information

Page 4: Web design - How the Web works?

4

What is Web?• The Web (originally called the World Wide Web, thus the www in site addresses)

is part of the Internet which itself is "a network of interconnected computers" to transfer data (for example, emails, web documents etc.) between computers

• It is just one of the ways information can be shared over the Internet.• The World Wide Web was created in 1989 by Sir Tim Berners-Lee• The Web is a subset of the Internet. It is just one of many ways information can

be transferred over networked computers.

Page 5: Web design - How the Web works?

5

How does WWW works?• The Web (World Wide Web) is a body of information stored on web servers.• A web server can mean two things

• A computer on which a web site is hosted • A program that runs on such a computer

• Term web server refers to both hardware and software:• 1. The hardware web server computer

• A web site to be available to everyone in the world at all times, it need to be stored or "hosted" on a computer that is connected to the internet. Such a computer is known as a Web Server

• 2. The web server program• The software: Software that runs on the web site hosting Server computer, Its main purpose

is serving web pages by retrieving web pages and giving it to users as requested.

Page 6: Web design - How the Web works?

6

Software web servers• There are many server software options out there, but the two most popular are:• 1. Apache(open source software) :

• For Unix-based computers and comes installed on Macs running Mac OS X.

• 2. Microsoft Internet Information Services (IIS) Windows version :• Part of Microsofts family of server solutions

Page 7: Web design - How the Web works?

7

What is browser?• The web browser is software that goes to a web server to pull the page through

the network, to your machine(Client).• Also referred to as the user agent• An information resource is identified by a Uniform Resource Identifier (URI).

Page 8: Web design - How the Web works?

8

Client Vs. Server in web• The words client and server have two meaning :

• They can refer either to a computer ( hardware) or a program ( software)

Page 9: Web design - How the Web works?

9

How does WWW work?

Page 10: Web design - How the Web works?

10

Web Caches• A mechanism for the temporary storage of web document such as Html pages

and images ,to reduce bandwidth usage ,server load.• Browser sends all request to cache:

• If Object is in cache :cache returns objects• else cache requests object from origin server ,then returns object to client.

• Cache acts as both client and server• Typically cache is installed by ISP

Page 11: Web design - How the Web works?

11

Web Cashe types• There are two type of web cache:• Browser cache:• Is part of all popular web browser that keeps a local copy of all recently displayed

pages and when user returns to one of those pages ,local copy is reused.• Proxy cache:• is shared network device that can undertake web transaction on behalf of a

client and like browser, proxy cache stores the content

Page 12: Web design - How the Web works?

Proxy Cashe

Page 13: Web design - How the Web works?

13

A bit about network• Every computer and device (modem, router, smartphone, cars, etc.) connected

to the Internet is assigned a unique numeric• IP address (IP stands for Internet Protocol).• For example, the computer that hosts oreilly.com has the IP address

208.201.239.100• All those numbers can be dizzying, so fortunately, the Domain Name System

(DNS) was developed to allow us to refer to that server by its domain name• Ex. oreilly.com, facebook.com, mohe.gov.af ,.…..

• The numeric IP address is useful for computer software, while the domain name is more accessible to humans.

Page 14: Web design - How the Web works?

14

Web Page Addresses and URLs• Every page and resource on the Web has its own special address called a URL

Stands for Uniform Resource Locator.• It is a standardized naming convention for addressing documents accessible over

the Internet or Intranet.• A complete URL is generally made up of three parts:

1. The protocol2. The site name3. The absolute path to the document or resource

Page 15: Web design - How the Web works?

15

HTTP Protocol• Protocol is Set of rules or convention for sending information, files and mails over

a network (INTERNET)• HTTP (Hyper Text Transfer Protocol)• FTP (File Transfer Protocol)• SMTP (Simple mail transfer protocol)• …

• HTTP?• Stands for Hyper Text Transfer Protocol• Set of rules for transferring files (text, graphic images, sound, video, and other

multimedia files) on the World Wide Web• The language that web server and client (browsers) use to communicate is called

HTTP.

Page 16: Web design - How the Web works?

16

HTTPS Protocol• Short for Hypertext Transfer Protocol over Secure• A secure method of accessing or sending information across a web page.• All data sent over HTTPS is encrypted before it is sent, this prevents anyone from

understanding that information if intercepted.

Page 17: Web design - How the Web works?

17

URL : Site name• www :

• This is a sub-domain prefix that is a convention, but is not a rule.This portion of the URL is not required and many times can be left out.

• .example: • This is a sub-domain.

• .com: • This is the top-level domain, is known as the "domain suffix" used to identify the type or

location of web site like .com show commercial

Page 18: Web design - How the Web works?

18

URL : Absolute path• The absolute path to the document or resource• This is the absolute path through directories on the server to the requested

HTML document first.html.• The words separated by slashes are the directory names, starting with the root

directory of the host.

Page 19: Web design - How the Web works?

19

Anatomy of a Web page• At the Figure, you saw a minimal web page as it appears in a graphical browser.• Although you see it as one coherent page, it is actually assembled from four

separate files:• An HTML document (index.html)• A CSS style sheet (kitchen.css)• Two graphic images.

Page 20: Web design - How the Web works?

Lets do some practice!

Page 21: Web design - How the Web works?

21

Putting It All Together• To wrap up our introduction to how the web works, lets trace a typical stream of

events that occurs with every web page that appears on your screen:1. You request a web page by either typing its URL in the browser.2. Your browser sends an HTTP Request to the server named in the URL and asks for

the specific file.3. The server looks for the requested file and issues an HTTP response.

1. If the document is found, the server retrieves the requested file and returns it to the browser.2. If the page cannot be found, the server returns an error message. The message typically says

404 Not Found

4. The browser parses the HTML document.1. If the page contains images ,the browser contacts the server again to request each resource

specified in the markup. The browser inserts each image in the document flow where indicated by the img element.

5. The assembled web page is displayed for your viewing pleasure.

Page 22: Web design - How the Web works?
Page 23: Web design - How the Web works?

23