How does the Website Work?

The World Wide Web

When most of us talk about using the "Internet", we're typically talking about a specific part of the Internet: the World Wide Web (WWW, or simply, the Web). The Web is a massive network of webpages, programs, and files that are accessible via URLs. A URL (Uniform Resource Locator) is a unique identifier used to locate a resource on the Internet. It is also referred to as a web address. URLs consist of multiple parts -- including a protocol and domain name -- that tell a web browser how and where to retrieve a resource.

We call it a web because of its vast interconnectedness. Starting from one URL, such as http://wikipedia.org, we can follow links to eventually reach millions of webpages from across the globe.



A web browser loads a webpage using various protocols: The web browser uses these protocols on top of the Internet protocols, so every HTTP request also uses TCP and IP.

Domain Name System (DNS)

As we just learned, IP addresses are how computers identify other computers on the Internet. IP addresses aren't particularly human-friendly, though. Who wants to memorize an address like 74.125.20.113? Or the even harder IP v6 addresses? The domain name system gives us humans an easy way to identify where we want to go on the Internet. We simply type in a domain name like "www.wikipedia.org", and our computer connects us to the computers powering Wikipedia:


A domain name is a human-friendly address for a website, something that's easy for us to remember and type in.

Hypertext Transfer Protocol (HTTP)

Whenever you visit a page on the web, your computer uses the Hypertext Transfer Protocol (HTTP) to download that page from another computer somewhere on the Internet.
Let's step through that process.

Step 1: Direct browser to URL

The user types a Uniform Resource Locator (URL) in the browser:

Step 2: Browser looks up IP

We typically type nice human-friendly URLs into browsers, like "khanacademy.org" and "wikipedia.org". Those domain names map to IP addresses, the true location of the domain's computers. That's handled by the Domain Name System. The browser uses a DNS resolver to map the domain to an IP address:


Step 3: Browser sends HTTP request

Once the browser identifies the IP address of the computer hosting the requested URL, it sends an HTTP request.


Step 4: Host sends back HTTP response

Once the host computer receives the HTTP request, it sends back a response with both the content and metadata about it.

Step 5: The browser renders the response

The browser now has all the information it needs to render the document requested.

Web Client,Server Architecture




Web Browser

The purpose of a web browser(Chrome, IE, Firefox, Safari) is to requests and interprets web pages encoded with HTML, CSS, JavaScript, etc. The browser does not display the HTML tags, but uses them to determine how to display the document.

Web Server

Web server holds web pages and processes browser requests.

Web Site

Web Pages





HTML (HyperText Markup Language)

HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript. HTML is at the core of every web page, regardless the complexity of a site or number of technologies involved. It's an essential skill for any web professional. It's the starting point for anyone learning how to create content for the web.

CSS (Cascading Style Sheets)

CSS is used to control presentation, formatting, and layout. This programming language dictates how the HTML elements of a website should actually appear on the frontend of the page. HTML provides the raw tools needed to structure content on a website. CSS, on the other hand, helps to style this content so it appears to the user the way it was intended to be seen. These languages are kept separate to ensure websites are built correctly before they're reformatted.

JavaScript

JavaScript is used to control the behavior of different elements. JavaScript is a more complicated language than HTML or CSS, and it wasn't released in beta form until 1995. Nowadays, JavaScript is supported by all modern web browsers and is used on almost every site on the web for more powerful and complex functionality. JavaScript is a programming language that lets web developers design interactive sites. Most of the dynamic behavior you'll see on a web page is thanks to JavaScript.

Process for developing a website

Exercise

1.

Ororo types this URL in her browser's address bar: https://www.nssl.noaa.gov/
After a few seconds, the browser loads the webpage. Which of these protocols are used by the browser in fetching and loading webpage?

2.

When we browse websites on the World Wide Web, we're relying on browsers and servers communicating together across wide distances.
Which of these best describe the role of the browser and server?

Reference