Simple funda about "HTTP"

YOUTUBE LINK :https://youtu.be/x5nPU3DAHXs 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 When we want to browse the web, we can use many types of computers (like laptops, desktops, and phones), as long as the computer has a browser application installed. The user either types a Uniform Resource Locator (URL) in the browser or follows a link from an already opened page: Diagram of browser window with URL in address bar: "http://www.example.com/index.html" Diagram of browser window with URL in address bar: "http://www.example.com/index.html" Notice something about that URL: it starts with "http". That's a signal to the browser that it needs to use HTTP to fetch the document for that URL. 🔍 What browser are you using now? What's the URL of this website? What does it start with? 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: Diagram with laptop on left and server on right. Laptop has browser window and arrow going to server that's labeled "www.example.com = ?". Server is labeled "DNS resolver" and has arrow going back to laptop that says "93.184.216.34" Diagram with laptop on left and server on right. Laptop has browser window and arrow going to server that's labeled "www.example.com = ?". Server is labeled "DNS resolver" and has arrow going back to laptop that says "93.184.216.34" 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. Diagram with laptop on left and server on right. Laptop has browser window and arrow going to server with packet above it that contains HTTP request. Server is labeled with "www.example.com" and its IP address "93.184.216.34". Diagram with laptop on left and server on right. Laptop has browser window and arrow going to server with packet above it that contains HTTP request. Server is labeled with "www.example.com" and its IP address "93.184.216.34". An HTTP request can be as short as two lines of text: GET /index.html HTTP/1.1 Host: www.example.com The first word is the HTTP verb: "GET". There are other verbs for other actions on the web, like submitting form data ("POST"). The next part specifies the path: "/index.html". The host computer stores the content of the entire website, so the browser needs to be specific about which page to load. The final part of the first line specifies the protocol and the version of the protocol: "HTTP/1.1". The second line specifies the domain of the requested URL. That's helpful in case a host computer stores the content for multiple websites. 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. Diagram with laptop on left and server on right. Server is labeled with "www.example.com" and its IP address "93.184.216.34". Arrow goes from server to laptop with packet above it that contains HTTP response. Diagram with laptop on left and server on right. Server is labeled with "www.example.com" and its IP address "93.184.216.34". Arrow goes from server to laptop with packet above it that contains HTTP response. The HTTP response starts similarly to the request: HTTP/1.1 200 OK The response begins with the protocol and version, "HTTP/1.1". The next number is the very important HTTP status code, and in this case, it's 200. That code represents a successful retrieval of the document ("OK"). If the server failed to retrieve the document, the status codes provide more information, like if the failure was due to user error or server error. For example, the most well known status code is 404 ("File not found"). That happens whenever you visit a path on a server that doesn't correspond to any document. Since users have a habit of typing URLs incorrectly, 404s happen frequently, so websites often have fun 404 webpages. Try typing a nonsense Khan Academy URL and see what happens! The next part of an HTTP response are the headers. They give the browser additional details and help the browser to render the content. These two headers are common to most requests: Content-Type: text/html; charset=UTF-8 Content-Length: 208 The content-type tells the browser what type of document it's sending back. A common type on the web is "text/html", as all webpages are HTML text files. Other types are possible, like images ("image/png"), videos ("video/mpeg"), script ("application/javascript") and anything else you can load in your browser. The content-length gives the length of the document in bytes, which helps the browser know how long a file will take to download. Finally, the HTTP response writes out the actual document requested. This page is a simple HTML file:

Example Domain

This domain is to be used for illustrative examples in documents.

If you'd like to understand how HTML works in more detail, you can check out our full HTML/CSS course. Step 5: The browser renders the response The browser now has all the information it needs to render the document requested. Illustrator of browser with address bar pointing to "http://www.example.com/index.html". The webpage displays heading "Example Domain" and paragraph "This domain is to be used for illustrative examples in documents.". Illustrator of browser with address bar pointing to "http://www.example.com/index.html". The webpage displays heading "Example Domain" and paragraph "This domain is to be used for illustrative examples in documents.". See for yourself Many browsers include debugging tools that let you view HTTP requests and their responses as you browse the web. Let's try it in Chrome. First, we need to open the Chrome developer tools. One way to do that is to open the "View" menu, then select "Developer" → "Developer Tools". Once that pops open, select the "Network" tab. Screenshot of Chrome Developer Tools with "Network" tab opened. Screenshot of Chrome Developer Tools with "Network" tab opened. Next, type a URL in the browser bar, like "http://www.example.com/index.html". An HTTP request shows up in the console, and the browser renders the page. Screenshot of Chrome Developer Tools with "Network" tab opened. There's a single row for "index.html". Screenshot of Chrome Developer Tools with "Network" tab opened. There's a single row for "index.html". We can dig into that request to see the juicy details, if we want. Click "index.html" under the "Name" column". A tabbed interface pops up and defaults to a "Headers" tab. Screenshot of Chrome Developer Tools, "Network" tab. Left-side shows "index.html" selected. Right side shows tabbed interface with "Headers" tab opened. Headers tab has sections for "General" and "Response headers". Screenshot of Chrome Developer Tools, "Network" tab. Left-side shows "index.html" selected. Right side shows tabbed interface with "Headers" tab opened. Headers tab has sections for "General" and "Response headers". The "Response headers" includes headers discussed above, like "Content-Type" and "Content-Length", plus lots of other interesting headers. The actual HTML content of the response is another tab, "Response". Screenshot of Chrome Developer Tools, "Network" tab. Left-side shows "index.html" selected. Right side shows tabbed interface with "Response" tab opened. Response tab has HTML code. Screenshot of Chrome Developer Tools, "Network" tab. Left-side shows "index.html" selected. Right side shows tabbed interface with "Response" tab opened. Response tab has HTML code. 🔍 Open up the "Network" tab and browse to more websites. How many HTTP requests does each website make? What types of content are in the responses? What surprises you the most? HTTP and TCP/IP HTTP is a protocol that's built on top of the TCP/IP protocols. Each HTTP request is inside an IP packet, and each HTTP response is inside another IP packet--or more typically, multiple packets, since the response data can be quite large. Diagram with laptop on left and server on right. Laptop has browser window with "http://www.example.com/index.html" in address bar. Server is labeled with "www.example.com" and its IP address "93.184.216.34". 4 arrows are shown: * First arrow goes from laptop to server and displays packet with HTTP request inside. * Second arrow goes from server to laptop and displays packet with "ACK" inside. * Third arrow goes from server to laptop and displays packet with HTTP response inside. * Fourth arrow goes from laptop to server and displays packet with "ACK" inside. Diagram with laptop on left and server on right. Laptop has browser window with "http://www.example.com/index.html" in address bar. Server is labeled with "www.example.com" and its IP address "93.184.216.34". 4 arrows are shown: First arrow goes from laptop to server and displays packet with HTTP request inside. Second arrow goes from server to laptop and displays packet with "ACK" inside. Third arrow goes from server to laptop and displays packet with HTTP response inside. Fourth arrow goes from laptop to server and displays packet with "ACK" inside. There are many other protocols built on top of TCP/IP, like protocols for sending email (SMTP, POP, IMAP) and uploading files (FTP). All of these protocols enable us to use the Internet to connect with other computers in useful ways, and to communicate and collaborate across wide distances.