Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 HTTP and the Web Server

The web is built on the HyperText Transfer Protocol (HTTP). When we go to a web page, our browser makes requests to a web server. The web server processes our request and ultimately sends a response. I'll explain how it all fits together in this lesson.

2.2 HTTP and the Web Server

In this lesson, I want you to open up a browser and go to any website. I'm going to open up Microsoft Edge and use it for the first few minutes. Because Google Chrome eliminates some of the things from the address bar that I want to point out here. Now if you're like me, you typically don't do a search and then pick whatever website that you want to go to if you know what that website is. Like if I want to go to tutsplus.com, I just type www.tutsplus.com and then that takes me there. Now in the previous lesson, we learned about DNS where the domain name is translated into an IP address. So that our computer can then go to wherever it needs to go and all of that is related to the Internet. Then in this lesson, we're going to focus on the web centric technologies. Now a lot of people will say that the Internet and the web are one and the same, but really they're not. The Internet is just a network. We can put computers and devices all on the Internet and we can access them without going to an actual web page. The web on the other hand is nothing but web pages. Well, that's not correct, there are other, what we call resources. Now that is a key term because what we see here, this entire thing in the address bar is called a Universal Resource Locator or URL. It is simply an address that we use to go to a resource on the web. Now what is a resource? It can be a webpage, it can be an image or some other type of file. It's really anything that we can access using HTTP, that stands for Hypertext Transfer Protocol. And every website that you go to uses HTTP, that is what the web runs on. Now there's also a secure version of HTTP called HTTPS. And some websites do force you to use that, google.com is one. If we go to google.com, we should see HTTPS. Well, we don't here until we actually click on the address and there that is. Now the reason why I wanted to use Edge first is because Google hides some of this information from you. And I can understand why because by this day and age, we don't need to know HTTP and all of that stuff as far as a URL is concerned. Because that is the default, if it's on the web it uses HTTP but you can notice that all we see here it's tutsplus.com. And if we go to google.com, we will see HTTPS. But the reason why we see this is because it's not standard HTTP, it is the secure version of HTTP. So if everything on the web is a resource, that means that there has to be something on the other end of the line. That is what we call serving a resource. And that is what a web server does, it sits on the Internet and it's listening for what we call HTTP requests. Any time that we are try to go to a website, we are sending an HTTP request to the server of that website. So at tutplus.com, there is a server listening for requests and it will send a response back saying either it can or it can't serve that request. The reason why it might not be able to is because whatever we requested doesn't exist. Or it could be that the program or the application that's running on the server encountered an error. Now we can actually see the requests that are being made. If you press F12, this is going to pull up the developer tools in Chrome. You will want to go to the Network tab and then you will want to refresh the page. And we are going to see a lot of requests, in fact, we see 47 requests. Now the reason why we see so many is because inside of this webpage at tutsplus.com, it is using resources. So the browser downloads the webpage for tutsplus.com. It then sees that it needs to download all of these other resources, so it does so. And it tells us whether or not it was successful in doing that. It also tells us what type of request was made because there are different types. Now we're not going to go into the different types but you can see here that all of these are GET requests. That means that we are wanting to get a resource. So then there's this status that says 200. Now 200 means that everything is okay. So the browser sent a request to tutsplus.com. Tutsplus.com responded saying that I found whatever it is that you are requesting, here it is and so we have 200. Now you can see that there are also status numbers of 304. This means that it was not modified since the last time that we made a request for that resource. And if something goes wrong, like if we made a request for something that doesn't exist, then the status would be 404. Or if the program that's running on the web server encountered an error then we would see a status of 500. Now there's a lot of other information that goes on with each individual request. If you click on tutsplus.com here, we see what are called headers, this is part of HTTP. Whenever a request is made, this header information is sent with that request. So we see what the request URL is, we are requesting http://tutsplus.com. We are making a GET request, meaning that's we are wanting to get that resource. And the response from the server is 200, everything is okay. And if we scroll down, we can see what the server actually sent for its headers and there's a lot of header information there. So you would be correct to say that the web and HTTP specifically, is a client server paradigm. Our client is our browser, it sends a request to the server and the server sends a response. Either it contains what we requested or it contains information as to why the server couldn't give us what we requested. Now this is why I chose brackets for this course, it has a built in web server. So whenever we run our page, we will be making a request to a server that is on our computer. And that is very helpful when you want to run and debug your pages.

Back to the top
View on GitHub