Transcript
  • Web

Sending An HTML Document

From the class:  How The Web Works

All right. Back in our software, I'd like to walk through what's happening in our server. So up top, I have the server code, and down at the bottom I've made a request using a client. And the name of the client is Curl in this case.

So we're going to make a request and show the headers to this URL. And what we get back is the status line followed by some headers and then the body of the response.

So up top here, what we're going to get inside of this function that we pass into Create Server is a request parameter and a response parameter. And we can use these objects to communicate with the client.

So the first line here is setting a status code on the response to 200. And so this is a special code that should tell the browser that the request is OK, that everything worked as planned.

The next line sets a header. Now, as you saw before, we can set as many headers as we want. That's part of the HTTP protocol.

And headers always have a key. So in this case the key is Content Type and a value. And headers are intended to tell the client a little bit about what the response is about. Like, for example, in this case we're going to be sending plain text, and so it tells the client down here that the content is just plain text. So it doesn't have to parse it like it would with HTML.

And then finally, we're going to send down a string, just a plain string of text into the body and that's shown right here. So this is just the body.

Now it turns out that this status code up here is really important. It's one of the key ways that the server can tell the client what it's supposed to do next. And over here I've opened up a Wikipedia page that just lists all the HTTP status codes that are available. So if we take a look and scroll down, you can see there's a whole bunch, and here's the 200 range, which is for success, indicating success. And so we've been passing back this 200 status code, which means OK.

And you can see there's a bunch of other ones. Like for example, if we were creating a new document, we might send back a 201 that says the request was fulfilled and resulted in a new document or new resource being created.

And if we scroll down even more, you can see some of the different error codes or even redirections. So in this example, 302 says that the resource was found, and now it wants the client to follow a new URL to get to the resource. So it's a redirect to a different page. And if we scroll down even more, you'll see some of the error codes, like for example, a client error for a URL that wasn't found.

So there's all these different status codes that really govern how the client and server communicate or what the browser should do next in response to what the server says based on the code. So we're going to start off by just returning 200 to say that this response was OK.

Now so far we're just sending back plain text, but this text doesn't really have any meaning. So it's just straight characters, and so the client's not going to do anything smart with those characters, like for example, follow a link to get another resource. So let's change this up and instead pass back HTML, which is a markup language that's a bit smarter. So the browser, for example, can parse this HTML and do some intelligent things based on what it finds.

So to do that, what we can do is start by setting the headers. So we're going to tell the client that you're not getting text anymore. Now you're going to get HTML.

And inside of the body, instead of saying Hello world. Let's put the Hello world in an H1 tag. We don't normally write HTML directly in the response function like this, but I'm doing it so that you can see that HTML is just a string that gets sent back. It's up to the client to decide what it wants to do with that string. So to make this a little bit more complete, we'd normally start off with an HTML tag and then a body tag and put everything inside the body.

So part of what makes HTML special is that it's another kind of protocol or format where the browser or the client can present the information in a certain way. Like for example, when it sees these H1 tags, it should know if it's painting this onto the page to make this text here big or to make it larger.

Now we're just working with a text-based client now. So down at the bottom, if I curl this resource again-- oh, we're going to have to restart the server because I've made a change. And let's try that one more time.

Now this time around, we're still getting text back, and so we haven't actually done anything with this text. All we're doing is just printing it out to the page along with the headers. And notice that the content type now is changed to HTML.

So if we had a smarter client, it might say, OK, this is HTML. Let's do something with this HTML now, like paint it to the page and show the user something a little bit nicer than just this text.

So this is a markup language. It allows us to markup text and add meaning to the text itself.

So let's go over to a browser now, and we can confirm that this does indeed get painted to the page. Now we're in a different client. This is still a client because it's a piece of software. Somebody wrote this browser, wrote the code for this browser. But it's still a client so it's going to make an HTTP request to the server and it's going to get back a text response just like what we saw on Curl.

But the browser is more sophisticated than the Curl client so it can do more stuff. For example, when it gets back an HTML response, it does something called parse. It parses that text and turns it into something.

In other words, it parses it, and it paints onto the screen this H1 tag. So the meaning or the semantics of this H1 tag is to paint this large text onto the page. So it knows what to do with the HTML by parsing the text and then rendering it.

So to recap, we're just sending down plain text to any kind of client, and this is just the HTTP protocol. So we're exchanging text, and here's the HTML text. What we do with this text is up to the client program. In this case, it's just showing it on the console, but in the browser, the browser's actually going to parse this text and do something useful with it.

So we could do the same thing. We could write our own program that makes this HTTP request, gets it back, and then says, any time you see an H1 tag, paint a nice big title to the page that says whatever the text is in between it. And that's what the browser is doing.