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,

and I am seeing Facebook's Home page or my news feed, or if I'm logged in,

all of that HTML is actually inside of this envelope.

Now technically, it's all zeros and ones at the end of the day.

But now that we're not sort of at week zero anymore,

we're thinking in terms of language, there's just a whole bunch of HTML.

And what did that HTML look like?

Well in the simplest case, it might have looked like this.

This is a simpler web page certainly than Facebook's own.

But this would be an example of the first paragraph,

so to speak, of Facebook's Home page coming from server to browser.

And so that's the relationship among HTTP and HTML and, in turn,

CSS, though there's none pictured here.

HTTP is that protocol, that set of conventions,

ala the human handshake that ensures that the data is formatted

in a certain way and gets to me from server

to browser, or from browser to server.

Below that is a very specific language called

HTML, which is the actual content.

And what does my browser do upon receiving this?

Well, just like we humans would read the first paragraph of the letter,

a browser is going to read this top to bottom, left to right,

and do what it says.

Hey, browser, here is a web page.

Hey, browser, here is the head of the page.

Hey, browser, here is the title.

Put it in the tab bar.

Hey, browser, here's the body.

Put it in the big rectangular region of the window.

Hey, browser, that's it for the web page.

So you can think of these open tags and close tags or start tags and end

tags as really being these directives.

Do something; stop doing something.

And that's literally what the browser is doing underneath the hood.

So the last time we introduced Python, which is unrelated fundamentally

to all of this.

It is just another programming language.

So technically we could have started talking about Python in like week 1,

right after we looked at Scratch instead of looking at C.

But instead, we started sort of with Scratch, the graphical program.

Then we kind of went super low level with C,

and built, and built, and built on top of it,

until now we're kind of at Python, where we can solve all of those same problems

with Python.

And in fact, one of the challenges of problem

set 6 is going to be to rewind a few weeks and re-implement Mario,

and Cash or Credit, or Caesar, or Vigenere in Python,

so that you effectively have your own solutions handy, or the staff

solutions in C. And it'll be really kind of a warm-up

exercise and a comforting exercise to just translate something

that you know works or should work to a new language

and see the mapping from one to another, just like we did with Speller,

but more powerfully.

We're also going to start to build applications using Python

that we've not built before.

And so among them, for instance, today will

be a handful of examples that actually use Python

to generate HTML from a server to me.

Because you could write this on your Mac or PC.

You could save it.

You could upload it to a server in the cloud, so to speak.

And people can visit it.

But if I visit this page today, or tomorrow, or the next day,

it's always going to be the same.

It's going to say hello title, hello body every day.

Facebook, and Gmail, and any website out there these days is much more dynamic.

The content changes based on you or other humans,

typically, or even the time of day, if it's a new site.

So today we're going to explore, how do you use programming,

in Python in particular, to generate dynamic content,

ultimately based on data in your database interactions

from the user or any number of other things.

So how do we go about doing this?

Well, let me go ahead and open up the IDE for just a moment

and open up an example from today's source code called serve.py.

This is an example, a few of whose features might look a little familiar,

but not all of them.

So let me scroll to the bottom first.