Subtitles section Play video Print subtitles [MUSIC PLAYING] DAVID MALAN: All right, this is CS50, and this is lecture 9. And so we've been diving into bunches of languages recently among them have been HTML, and CSS, and Python most recently. And soon we're going to see JavaScript soon. We're going to see SQL and more. So let's see just a moment if we can kind of wrap our minds around what's going on with these various languages. So HTML, which we looked at a couple of weeks back, is used for what? AUDIENCE: Websites. DAVID MALAN: Websites. OK, but be more specific. What about websites? AUDIENCE: Markup. DAVID MALAN: Markup. OK, be more specific than markup. What does that mean? AUDIENCE: The way they look. DAVID MALAN: The way they look. OK, good, so marking up a website, the structure of the website, and the contents of the website are what you would annotate using HTML-- Hypertext Markup Language. It's not a programming language, so it doesn't have functions, and loops, and conditions, and the kind of logical control that we've used for some time. It really is about presenting information. Make something bold. Make something italics. Put something centered and so forth. CSS, meanwhile, allows you to really take things the final mile and really get the aesthetics just right. And so, in fact, what I just described, boldfacing, and italics, and centering, early on in version 1 say of HTML was actually how you did it. There was no CSS. But these days, the better approach is to factor out those kinds of aesthetics from your HTML and instead put them in this other language, CSS, Cascading Style Sheets. So your HTML now becomes put this text in a column. Put this other text in another column. And structure your data in a certain way. And then stylize it with colors, and fonts, and placement using CSS. Now meanwhile, most recently, we introduced Python. And what was noteworthy about Python? What do you got? Some-- back here? Python-- AUDIENCE: More straightforward syntax. DAVID MALAN: More straightforward syntax, yeah, in some ways, and we'll see some syntax where you take that back, I think. But in general, that is kind of the case, because you don't need parentheses if they're not strictly necessary. You don't need curly braces just because. Instead, things like indentation become more important, which on the one hand is a little annoying, but on the other hand, really does reinforce good habits. So that's probably a good thing. And then at the very end of the last lecture, we did something that was hopefully wonderfully inspiring, which was to implement what in Python? AUDIENCE: Dictionary? DAVID MALAN: The dictionary. And so we've really, we pretty much re-implemented all of problem set 5 speller using like I don't know, 15, 20, 25 lines of code, not to mention I was able to type it out within 30 seconds. And that's not just because I knew what I wanted to type, but really because you have to write so few lines of code. With Python, and soon with JavaScript, and even other languages out there, you just get so much more functionality for free. If you want to know the length of the string, you call a function. If you want to get a linked list, you create a data structure called a List. If you want a hash table, you create a data structure called a Dictionary. You don't implement it yourself. Underneath the hood, someone else out there in the world has implemented all of that functionality for us. But now we're standing on their shoulders. And so today, what we begin to do is to transition to this last portion of the class, where our domain is not just a command line and dot slash something, but web programming, where the ideas are pretty much going to be the same so long as we now understand, as hopefully you do or are beginning to, what HTTP is and how the web and the internet itself work. So recall that we looked a little bit ago at a URL like this. And so if you were to visit https://www.facebook.com and hit Enter in your browser, you're going to send some kind of message in an envelope that might physically in our world look like this. But of course, it's digital instead. And what is inside of that envelope, if you simply do type that URL before trying to get to Facebook? AUDIENCE: An error message that redirects to-- I guess [INAUDIBLE] that one. DAVID MALAN: Yeah, probably no error message here, because that URL did have the HTTPS. And it wouldn't so much be an error message, but like a preference to go to a different location. AUDIENCE: Moved? DAVID MALAN: Sorry? AUDIENCE: Moved. Moved, like permanently moved. DAVID MALAN: Oh moved. Not moved, only if we had gone to a shorter URL. Recall that all of those 301 one redirects were the result of, for instance, leaving off the dub dub dub or leaving off the S. so this is actually the good. This was the end of the story, where everything just worked and we got back a 200 OK. So if I did hit Enter though on my laptop and tried to visit that URL, what did I put, or my laptop put inside of this envelope? AUDIENCE: Request. DAVID MALAN: The request to get an address, so it was like the get verb, like getme, probably slash, because the last thing in this URL is the slash. It probably had a Host header. Recall, we saw host colon and then the domain name of the website again. And there were bunches of other headers, so to speak, that we kind of turned a blind eye to. But in essence, atop the piece of paper, virtually, that's inside of this envelope, or at least these two lines, a reminder as well as to what protocol, sort of what handshake convention, we are trying to use with the server. And now when the server responds with an envelope of its own, how do these headers change? What's inside of Facebook's HTTP headers in its envelope back to me? Kind of spoiled it a moment ago. What? AUDIENCE: The IP address? DAVID MALAN: Somewhere-- let's kind of consider that on the outside of the envelope, though. That's how it gets to me. What's on the inside? What's the status code going to be when I visit Facebook's Home page? AUDIENCE: 200 OK DAVID MALAN: 200 OK-- and so we saw 200 OK only when we actually looked underneath the hood, so to speak, to see what was inside of these envelopes using Chrome's Inspector toolbar, the developer tools, or using cURL, that command line program. Odds are, there are other headers in there, like content type is text slash html. And I think that's the only one we saw. But moving forward, as you make your own web-based applications, you will actually see and Chrome and other tools a whole bunch of different content types. You'll see like image slash ping or image slash jpeg. So indeed, anytime you download a picture of a cat or something from the internet, included in the headers in that envelope are two lines like this. But a cat is not a web page. It's not HTML. So this would be like image slash jpeg, if it's a photograph of a cat. And then below that though, the dot dot dot, is where things started to get interesting in the last half of our lecture on HTTP, because what came below all of the HTTP headers inside of this envelope from Facebook? What's inside of the envelope? AUDIENCE: Nothing? DAVID MALAN: Nothing-- yes, it's technically an answer. But-- AUDIENCE: Isn't it like pieces of the file? DAVID MALAN: Yeah, it's the pieces in the file. I mean, it really is the file itself. So essentially, when you write a letter in the human world, you usually put like the date. And you might put the person's address. And you might put like dear so-and-so. You can kind of think of all of that like metadata, the stuff that's not really the crux of your message to the human, as being the HTTP headers. But then once you start writing your first paragraph and the actual substantive part of your letter, that's going to be down here, so to speak. And that's going to be the HTML inside of this envelope. So if I'm downloading Facebook's Home page via my browser to my computer,